blob: 23b124a1b99922ddb581941c48faaaeaed9d2aad [file] [log] [blame]
Blink Reformat4c46d092018-04-07 15:32:371/*
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 Lippeee97fa32020-04-23 15:20:5631// @ts-nocheck
32// TODO(crbug.com/1011811): Enable TypeScript compiler checks
33
Tim van der Lippeaa76aa22020-02-14 14:38:2434import * as ARIAUtils from './ARIAUtils.js';
Paul Lewis9950e182019-12-16 16:06:0735import {GlassPane, PointerEventsBehavior} from './GlassPane.js';
Tim van der Lippe80d82652020-08-27 13:53:4436import {InspectorView} from './InspectorView.js';
Paul Lewis9950e182019-12-16 16:06:0737import {KeyboardShortcut, Keys} from './KeyboardShortcut.js';
38import {SplitWidget} from './SplitWidget.js'; // eslint-disable-line no-unused-vars
39import {WidgetFocusRestorer} from './Widget.js';
40
41export class Dialog extends GlassPane {
John Emau83763642019-07-16 23:56:4242 constructor() {
Blink Reformat4c46d092018-04-07 15:32:3743 super();
Jack Franklin71519f82020-11-03 12:08:5944 this.registerRequiredCSS('ui/dialog.css', {enableLegacyPatching: true});
Blink Reformat4c46d092018-04-07 15:32:3745 this.contentElement.tabIndex = 0;
46 this.contentElement.addEventListener('focus', () => this.widget().focus(), false);
Blink Reformat4c46d092018-04-07 15:32:3747 this.widget().setDefaultFocusedElement(this.contentElement);
Paul Lewis9950e182019-12-16 16:06:0748 this.setPointerEventsBehavior(PointerEventsBehavior.BlockedByGlassPane);
Blink Reformat4c46d092018-04-07 15:32:3749 this.setOutsideClickCallback(event => {
50 this.hide();
51 event.consume(true);
52 });
Tim van der Lippeaa76aa22020-02-14 14:38:2453 ARIAUtils.markAsModalDialog(this.contentElement);
Paul Lewis9950e182019-12-16 16:06:0754 /** @type {!OutsideTabIndexBehavior} */
Brian Cui8fdb1482019-12-04 21:41:4655 this._tabIndexBehavior = OutsideTabIndexBehavior.DisableAllOutsideTabIndex;
Blink Reformat4c46d092018-04-07 15:32:3756 /** @type {!Map<!HTMLElement, number>} */
57 this._tabIndexMap = new Map();
Paul Lewis9950e182019-12-16 16:06:0758 /** @type {?WidgetFocusRestorer} */
Blink Reformat4c46d092018-04-07 15:32:3759 this._focusRestorer = null;
60 this._closeOnEscape = true;
Brian Cui8fdb1482019-12-04 21:41:4661 /** @type {?Document} */
62 this._targetDocument;
63 this._targetDocumentKeyDownHandler = this._onKeyDown.bind(this);
Jack Lynchca3683d2020-09-30 22:54:5764 /** @type {?function(!Event)} */
65 this._escapeKeyCallback = null;
Blink Reformat4c46d092018-04-07 15:32:3766 }
67
68 /**
69 * @return {boolean}
70 */
71 static hasInstance() {
Paul Lewis9950e182019-12-16 16:06:0772 return !!Dialog._instance;
Blink Reformat4c46d092018-04-07 15:32:3773 }
74
75 /**
76 * @override
Tim van der Lippe248710a2020-10-07 14:08:1777 * @param {(!Document|!Element)=} where
Blink Reformat4c46d092018-04-07 15:32:3778 */
79 show(where) {
80 const document = /** @type {!Document} */ (
Tim van der Lippe80d82652020-08-27 13:53:4481 where instanceof Document ? where : (where || InspectorView.instance().element).ownerDocument);
Brian Cui8fdb1482019-12-04 21:41:4682 this._targetDocument = document;
83 this._targetDocument.addEventListener('keydown', this._targetDocumentKeyDownHandler, true);
84
Paul Lewis9950e182019-12-16 16:06:0785 if (Dialog._instance) {
86 Dialog._instance.hide();
Tim van der Lippe1d6e57a2019-09-30 11:55:3487 }
Paul Lewis9950e182019-12-16 16:06:0788 Dialog._instance = this;
Blink Reformat4c46d092018-04-07 15:32:3789 this._disableTabIndexOnElements(document);
90 super.show(document);
Paul Lewis9950e182019-12-16 16:06:0791 this._focusRestorer = new WidgetFocusRestorer(this.widget());
Blink Reformat4c46d092018-04-07 15:32:3792 }
93
94 /**
95 * @override
96 */
97 hide() {
98 this._focusRestorer.restore();
99 super.hide();
Brian Cui8fdb1482019-12-04 21:41:46100
101 if (this._targetDocument) {
102 this._targetDocument.removeEventListener('keydown', this._targetDocumentKeyDownHandler, true);
103 }
Blink Reformat4c46d092018-04-07 15:32:37104 this._restoreTabIndexOnElements();
Rob Paveza9e33bc92020-07-13 21:49:33105 this.dispatchEventToListeners('hidden');
Paul Lewis9950e182019-12-16 16:06:07106 delete Dialog._instance;
Blink Reformat4c46d092018-04-07 15:32:37107 }
108
109 /**
110 * @param {boolean} close
111 */
112 setCloseOnEscape(close) {
113 this._closeOnEscape = close;
114 }
115
Jack Lynchca3683d2020-09-30 22:54:57116 /**
117 * @param {function(!Event)} callback
118 */
119 setEscapeKeyCallback(callback) {
120 this._escapeKeyCallback = callback;
121 }
122
Blink Reformat4c46d092018-04-07 15:32:37123 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 Lewis9950e182019-12-16 16:06:07130 * @param {!OutsideTabIndexBehavior} tabIndexBehavior
Brian Cui8fdb1482019-12-04 21:41:46131 */
132 setOutsideTabIndexBehavior(tabIndexBehavior) {
133 this._tabIndexBehavior = tabIndexBehavior;
134 }
135
136 /**
Blink Reformat4c46d092018-04-07 15:32:37137 * @param {!Document} document
138 */
139 _disableTabIndexOnElements(document) {
Brian Cui8fdb1482019-12-04 21:41:46140 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 Lippe80d82652020-08-27 13:53:44146 exclusionSet = this._getMainWidgetTabIndexElements(InspectorView.instance().ownerSplit());
Brian Cui8fdb1482019-12-04 21:41:46147 }
148
Blink Reformat4c46d092018-04-07 15:32:37149 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 Cui8fdb1482019-12-04 21:41:46154 if (tabIndex >= 0 && (!exclusionSet || !exclusionSet.has(element))) {
Blink Reformat4c46d092018-04-07 15:32:37155 this._tabIndexMap.set(element, tabIndex);
156 element.tabIndex = -1;
157 }
158 }
159 }
160 }
161
Brian Cui8fdb1482019-12-04 21:41:46162 /**
Paul Lewis9950e182019-12-16 16:06:07163 * @param {?SplitWidget} splitWidget
Brian Cui8fdb1482019-12-04 21:41:46164 * @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 Reformat4c46d092018-04-07 15:32:37194 _restoreTabIndexOnElements() {
Tim van der Lippe1d6e57a2019-09-30 11:55:34195 for (const element of this._tabIndexMap.keys()) {
Blink Reformat4c46d092018-04-07 15:32:37196 element.tabIndex = /** @type {number} */ (this._tabIndexMap.get(element));
Tim van der Lippe1d6e57a2019-09-30 11:55:34197 }
Blink Reformat4c46d092018-04-07 15:32:37198 this._tabIndexMap.clear();
199 }
200
201 /**
202 * @param {!Event} event
203 */
204 _onKeyDown(event) {
Jack Lynchca3683d2020-09-30 22:54:57205 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 Reformat4c46d092018-04-07 15:32:37218 }
219 }
Tim van der Lippe0830b3d2019-10-03 13:20:07220}
221
Brian Cui8fdb1482019-12-04 21:41:46222/** @enum {symbol} */
223export const OutsideTabIndexBehavior = {
224 DisableAllOutsideTabIndex: Symbol('DisableAllTabIndex'),
225 PreserveMainViewTabIndex: Symbol('PreserveMainViewTabIndex'),
226 PreserveTabIndex: Symbol('PreserveTabIndex')
227};