Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 1 | /* |
| 2 | * Copyright (C) 2012 Google Inc. All rights reserved. |
| 3 | * |
| 4 | * Redistribution and use in source and binary forms, with or without |
| 5 | * modification, are permitted provided that the following conditions are |
| 6 | * met: |
| 7 | * |
| 8 | * * Redistributions of source code must retain the above copyright |
| 9 | * notice, this list of conditions and the following disclaimer. |
| 10 | * * Redistributions in binary form must reproduce the above |
| 11 | * copyright notice, this list of conditions and the following disclaimer |
| 12 | * in the documentation and/or other materials provided with the |
| 13 | * distribution. |
| 14 | * * Neither the name of Google Inc. nor the names of its |
| 15 | * contributors may be used to endorse or promote products derived from |
| 16 | * this software without specific prior written permission. |
| 17 | * |
| 18 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
| 19 | * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
| 20 | * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
| 21 | * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
| 22 | * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
| 23 | * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
| 24 | * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
| 25 | * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
| 26 | * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 27 | * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
| 28 | * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 29 | */ |
| 30 | |
Tim van der Lippe | ee97fa3 | 2020-04-23 15:20:56 | [diff] [blame] | 31 | // @ts-nocheck |
| 32 | // TODO(crbug.com/1011811): Enable TypeScript compiler checks |
| 33 | |
Tim van der Lippe | aa76aa2 | 2020-02-14 14:38:24 | [diff] [blame] | 34 | import * as ARIAUtils from './ARIAUtils.js'; |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 35 | import {GlassPane, PointerEventsBehavior} from './GlassPane.js'; |
Tim van der Lippe | 80d8265 | 2020-08-27 13:53:44 | [diff] [blame] | 36 | import {InspectorView} from './InspectorView.js'; |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 37 | import {KeyboardShortcut, Keys} from './KeyboardShortcut.js'; |
| 38 | import {SplitWidget} from './SplitWidget.js'; // eslint-disable-line no-unused-vars |
| 39 | import {WidgetFocusRestorer} from './Widget.js'; |
| 40 | |
| 41 | export class Dialog extends GlassPane { |
John Emau | 8376364 | 2019-07-16 23:56:42 | [diff] [blame] | 42 | constructor() { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 43 | super(); |
Jack Franklin | 71519f8 | 2020-11-03 12:08:59 | [diff] [blame^] | 44 | this.registerRequiredCSS('ui/dialog.css', {enableLegacyPatching: true}); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 45 | this.contentElement.tabIndex = 0; |
| 46 | this.contentElement.addEventListener('focus', () => this.widget().focus(), false); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 47 | this.widget().setDefaultFocusedElement(this.contentElement); |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 48 | this.setPointerEventsBehavior(PointerEventsBehavior.BlockedByGlassPane); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 49 | this.setOutsideClickCallback(event => { |
| 50 | this.hide(); |
| 51 | event.consume(true); |
| 52 | }); |
Tim van der Lippe | aa76aa2 | 2020-02-14 14:38:24 | [diff] [blame] | 53 | ARIAUtils.markAsModalDialog(this.contentElement); |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 54 | /** @type {!OutsideTabIndexBehavior} */ |
Brian Cui | 8fdb148 | 2019-12-04 21:41:46 | [diff] [blame] | 55 | this._tabIndexBehavior = OutsideTabIndexBehavior.DisableAllOutsideTabIndex; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 56 | /** @type {!Map<!HTMLElement, number>} */ |
| 57 | this._tabIndexMap = new Map(); |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 58 | /** @type {?WidgetFocusRestorer} */ |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 59 | this._focusRestorer = null; |
| 60 | this._closeOnEscape = true; |
Brian Cui | 8fdb148 | 2019-12-04 21:41:46 | [diff] [blame] | 61 | /** @type {?Document} */ |
| 62 | this._targetDocument; |
| 63 | this._targetDocumentKeyDownHandler = this._onKeyDown.bind(this); |
Jack Lynch | ca3683d | 2020-09-30 22:54:57 | [diff] [blame] | 64 | /** @type {?function(!Event)} */ |
| 65 | this._escapeKeyCallback = null; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 66 | } |
| 67 | |
| 68 | /** |
| 69 | * @return {boolean} |
| 70 | */ |
| 71 | static hasInstance() { |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 72 | return !!Dialog._instance; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 73 | } |
| 74 | |
| 75 | /** |
| 76 | * @override |
Tim van der Lippe | 248710a | 2020-10-07 14:08:17 | [diff] [blame] | 77 | * @param {(!Document|!Element)=} where |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 78 | */ |
| 79 | show(where) { |
| 80 | const document = /** @type {!Document} */ ( |
Tim van der Lippe | 80d8265 | 2020-08-27 13:53:44 | [diff] [blame] | 81 | where instanceof Document ? where : (where || InspectorView.instance().element).ownerDocument); |
Brian Cui | 8fdb148 | 2019-12-04 21:41:46 | [diff] [blame] | 82 | this._targetDocument = document; |
| 83 | this._targetDocument.addEventListener('keydown', this._targetDocumentKeyDownHandler, true); |
| 84 | |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 85 | if (Dialog._instance) { |
| 86 | Dialog._instance.hide(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 87 | } |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 88 | Dialog._instance = this; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 89 | this._disableTabIndexOnElements(document); |
| 90 | super.show(document); |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 91 | this._focusRestorer = new WidgetFocusRestorer(this.widget()); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 92 | } |
| 93 | |
| 94 | /** |
| 95 | * @override |
| 96 | */ |
| 97 | hide() { |
| 98 | this._focusRestorer.restore(); |
| 99 | super.hide(); |
Brian Cui | 8fdb148 | 2019-12-04 21:41:46 | [diff] [blame] | 100 | |
| 101 | if (this._targetDocument) { |
| 102 | this._targetDocument.removeEventListener('keydown', this._targetDocumentKeyDownHandler, true); |
| 103 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 104 | this._restoreTabIndexOnElements(); |
Rob Paveza | 9e33bc9 | 2020-07-13 21:49:33 | [diff] [blame] | 105 | this.dispatchEventToListeners('hidden'); |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 106 | delete Dialog._instance; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 107 | } |
| 108 | |
| 109 | /** |
| 110 | * @param {boolean} close |
| 111 | */ |
| 112 | setCloseOnEscape(close) { |
| 113 | this._closeOnEscape = close; |
| 114 | } |
| 115 | |
Jack Lynch | ca3683d | 2020-09-30 22:54:57 | [diff] [blame] | 116 | /** |
| 117 | * @param {function(!Event)} callback |
| 118 | */ |
| 119 | setEscapeKeyCallback(callback) { |
| 120 | this._escapeKeyCallback = callback; |
| 121 | } |
| 122 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 123 | addCloseButton() { |
| 124 | const closeButton = this.contentElement.createChild('div', 'dialog-close-button', 'dt-close-button'); |
| 125 | closeButton.gray = true; |
| 126 | closeButton.addEventListener('click', () => this.hide(), false); |
| 127 | } |
| 128 | |
| 129 | /** |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 130 | * @param {!OutsideTabIndexBehavior} tabIndexBehavior |
Brian Cui | 8fdb148 | 2019-12-04 21:41:46 | [diff] [blame] | 131 | */ |
| 132 | setOutsideTabIndexBehavior(tabIndexBehavior) { |
| 133 | this._tabIndexBehavior = tabIndexBehavior; |
| 134 | } |
| 135 | |
| 136 | /** |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 137 | * @param {!Document} document |
| 138 | */ |
| 139 | _disableTabIndexOnElements(document) { |
Brian Cui | 8fdb148 | 2019-12-04 21:41:46 | [diff] [blame] | 140 | if (this._tabIndexBehavior === OutsideTabIndexBehavior.PreserveTabIndex) { |
| 141 | return; |
| 142 | } |
| 143 | |
| 144 | let exclusionSet = /** @type {?Set.<!HTMLElement>} */ (null); |
| 145 | if (this._tabIndexBehavior === OutsideTabIndexBehavior.PreserveMainViewTabIndex) { |
Tim van der Lippe | 80d8265 | 2020-08-27 13:53:44 | [diff] [blame] | 146 | exclusionSet = this._getMainWidgetTabIndexElements(InspectorView.instance().ownerSplit()); |
Brian Cui | 8fdb148 | 2019-12-04 21:41:46 | [diff] [blame] | 147 | } |
| 148 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 149 | this._tabIndexMap.clear(); |
| 150 | for (let node = document; node; node = node.traverseNextNode(document)) { |
| 151 | if (node instanceof HTMLElement) { |
| 152 | const element = /** @type {!HTMLElement} */ (node); |
| 153 | const tabIndex = element.tabIndex; |
Brian Cui | 8fdb148 | 2019-12-04 21:41:46 | [diff] [blame] | 154 | if (tabIndex >= 0 && (!exclusionSet || !exclusionSet.has(element))) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 155 | this._tabIndexMap.set(element, tabIndex); |
| 156 | element.tabIndex = -1; |
| 157 | } |
| 158 | } |
| 159 | } |
| 160 | } |
| 161 | |
Brian Cui | 8fdb148 | 2019-12-04 21:41:46 | [diff] [blame] | 162 | /** |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 163 | * @param {?SplitWidget} splitWidget |
Brian Cui | 8fdb148 | 2019-12-04 21:41:46 | [diff] [blame] | 164 | * @return {!Set.<!HTMLElement>} |
| 165 | */ |
| 166 | _getMainWidgetTabIndexElements(splitWidget) { |
| 167 | const elementSet = /** @type {!Set.<!HTMLElement>} */ (new Set()); |
| 168 | if (!splitWidget) { |
| 169 | return elementSet; |
| 170 | } |
| 171 | |
| 172 | const mainWidget = splitWidget.mainWidget(); |
| 173 | if (!mainWidget || !mainWidget.element) { |
| 174 | return elementSet; |
| 175 | } |
| 176 | |
| 177 | for (let node = mainWidget.element; node; node = node.traverseNextNode(mainWidget.element)) { |
| 178 | if (!(node instanceof HTMLElement)) { |
| 179 | continue; |
| 180 | } |
| 181 | |
| 182 | const element = /** @type {!HTMLElement} */ (node); |
| 183 | const tabIndex = element.tabIndex; |
| 184 | if (tabIndex < 0) { |
| 185 | continue; |
| 186 | } |
| 187 | |
| 188 | elementSet.add(element); |
| 189 | } |
| 190 | |
| 191 | return elementSet; |
| 192 | } |
| 193 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 194 | _restoreTabIndexOnElements() { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 195 | for (const element of this._tabIndexMap.keys()) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 196 | element.tabIndex = /** @type {number} */ (this._tabIndexMap.get(element)); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 197 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 198 | this._tabIndexMap.clear(); |
| 199 | } |
| 200 | |
| 201 | /** |
| 202 | * @param {!Event} event |
| 203 | */ |
| 204 | _onKeyDown(event) { |
Jack Lynch | ca3683d | 2020-09-30 22:54:57 | [diff] [blame] | 205 | if (event.keyCode === Keys.Esc.code && KeyboardShortcut.hasNoModifiers(event)) { |
| 206 | if (this._escapeKeyCallback) { |
| 207 | this._escapeKeyCallback(event); |
| 208 | } |
| 209 | |
| 210 | if (event.handled) { |
| 211 | return; |
| 212 | } |
| 213 | |
| 214 | if (this._closeOnEscape) { |
| 215 | event.consume(true); |
| 216 | this.hide(); |
| 217 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 218 | } |
| 219 | } |
Tim van der Lippe | 0830b3d | 2019-10-03 13:20:07 | [diff] [blame] | 220 | } |
| 221 | |
Brian Cui | 8fdb148 | 2019-12-04 21:41:46 | [diff] [blame] | 222 | /** @enum {symbol} */ |
| 223 | export const OutsideTabIndexBehavior = { |
| 224 | DisableAllOutsideTabIndex: Symbol('DisableAllTabIndex'), |
| 225 | PreserveMainViewTabIndex: Symbol('PreserveMainViewTabIndex'), |
| 226 | PreserveTabIndex: Symbol('PreserveTabIndex') |
| 227 | }; |