Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1119)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/ui/SoftContextMenu.js

Issue 2824023002: DevTools: Use FocusRestorer in SoftContextMenu (Closed)
Patch Set: Print keys in test Created 3 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/http/tests/inspector-unit/soft-context-menu-expected.txt ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * Copyright (C) 2011 Google Inc. All Rights Reserved. 2 * Copyright (C) 2011 Google Inc. All Rights Reserved.
3 * 3 *
4 * Redistribution and use in source and binary forms, with or without 4 * Redistribution and use in source and binary forms, with or without
5 * modification, are permitted provided that the following conditions 5 * modification, are permitted provided that the following conditions
6 * are met: 6 * are met:
7 * 1. Redistributions of source code must retain the above copyright 7 * 1. Redistributions of source code must retain the above copyright
8 * notice, this list of conditions and the following disclaimer. 8 * notice, this list of conditions and the following disclaimer.
9 * 2. Redistributions in binary form must reproduce the above copyright 9 * 2. Redistributions in binary form must reproduce the above copyright
10 * notice, this list of conditions and the following disclaimer in the 10 * notice, this list of conditions and the following disclaimer in the
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after
59 59
60 this._contextMenuElement = this._glassPane.contentElement.createChild('div', 'soft-context-menu'); 60 this._contextMenuElement = this._glassPane.contentElement.createChild('div', 'soft-context-menu');
61 this._contextMenuElement.tabIndex = 0; 61 this._contextMenuElement.tabIndex = 0;
62 this._contextMenuElement.addEventListener('mouseup', e => e.consume(), false ); 62 this._contextMenuElement.addEventListener('mouseup', e => e.consume(), false );
63 this._contextMenuElement.addEventListener('keydown', this._menuKeyDown.bind( this), false); 63 this._contextMenuElement.addEventListener('keydown', this._menuKeyDown.bind( this), false);
64 64
65 for (var i = 0; i < this._items.length; ++i) 65 for (var i = 0; i < this._items.length; ++i)
66 this._contextMenuElement.appendChild(this._createMenuItem(this._items[i])) ; 66 this._contextMenuElement.appendChild(this._createMenuItem(this._items[i])) ;
67 67
68 this._glassPane.show(document); 68 this._glassPane.show(document);
69 this._focus(); 69 this._focusRestorer = new UI.ElementFocusRestorer(this._contextMenuElement);
70 70
71 if (!this._parentMenu) { 71 if (!this._parentMenu) {
72 this._onBodyMouseDown = event => this._discardMenu(true, event); 72 this._onBodyMouseDown = event => {
73 this.discard();
74 event.consume(true);
75 };
73 this._document.body.addEventListener('mousedown', this._onBodyMouseDown, f alse); 76 this._document.body.addEventListener('mousedown', this._onBodyMouseDown, f alse);
74 } 77 }
75 } 78 }
76 79
77 discard() { 80 discard() {
78 this._discardMenu(true); 81 if (this._subMenu)
82 this._subMenu.discard();
83 if (this._focusRestorer)
84 this._focusRestorer.restore();
85 if (this._glassPane) {
86 this._glassPane.hide();
87 delete this._glassPane;
88 if (this._onBodyMouseDown) {
89 this._document.body.removeEventListener('mousedown', this._onBodyMouseDo wn, false);
90 delete this._onBodyMouseDown;
91 }
92 }
93 if (this._parentMenu)
94 delete this._parentMenu._subMenu;
79 } 95 }
80 96
81 _createMenuItem(item) { 97 _createMenuItem(item) {
82 if (item.type === 'separator') 98 if (item.type === 'separator')
83 return this._createSeparator(); 99 return this._createSeparator();
84 100
85 if (item.type === 'subMenu') 101 if (item.type === 'subMenu')
86 return this._createSubMenu(item); 102 return this._createSubMenu(item);
87 103
88 var menuItemElement = createElementWithClass('div', 'soft-context-menu-item' ); 104 var menuItemElement = createElementWithClass('div', 'soft-context-menu-item' );
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after
149 _menuItemMouseDown(event) { 165 _menuItemMouseDown(event) {
150 // Do not let separator's mouse down hit menu's handler - we need to receive mouse up! 166 // Do not let separator's mouse down hit menu's handler - we need to receive mouse up!
151 event.consume(true); 167 event.consume(true);
152 } 168 }
153 169
154 _menuItemMouseUp(event) { 170 _menuItemMouseUp(event) {
155 this._triggerAction(event.target, event); 171 this._triggerAction(event.target, event);
156 event.consume(); 172 event.consume();
157 } 173 }
158 174
159 _focus() { 175 /**
160 this._contextMenuElement.focus(); 176 * @return {!UI.SoftContextMenu}
177 */
178 _root() {
179 var root = this;
180 while (root._parentMenu)
181 root = root._parentMenu;
182 return root;
161 } 183 }
162 184
163 _triggerAction(menuItemElement, event) { 185 _triggerAction(menuItemElement, event) {
164 if (!menuItemElement._subItems) { 186 if (!menuItemElement._subItems) {
165 this._discardMenu(true, event); 187 this._root().discard();
188 event.consume(true);
166 if (typeof menuItemElement._actionId !== 'undefined') { 189 if (typeof menuItemElement._actionId !== 'undefined') {
167 this._itemSelectedCallback(menuItemElement._actionId); 190 this._itemSelectedCallback(menuItemElement._actionId);
168 delete menuItemElement._actionId; 191 delete menuItemElement._actionId;
169 } 192 }
170 return; 193 return;
171 } 194 }
172 195
173 this._showSubMenu(menuItemElement); 196 this._showSubMenu(menuItemElement);
174 event.consume(); 197 event.consume();
175 } 198 }
176 199
177 _showSubMenu(menuItemElement) { 200 _showSubMenu(menuItemElement) {
178 if (menuItemElement._subMenuTimer) { 201 if (menuItemElement._subMenuTimer) {
179 clearTimeout(menuItemElement._subMenuTimer); 202 clearTimeout(menuItemElement._subMenuTimer);
180 delete menuItemElement._subMenuTimer; 203 delete menuItemElement._subMenuTimer;
181 } 204 }
182 if (this._subMenu) 205 if (this._subMenu)
183 return; 206 return;
184 207
185 this._subMenu = new UI.SoftContextMenu(menuItemElement._subItems, this._item SelectedCallback, this); 208 this._subMenu = new UI.SoftContextMenu(menuItemElement._subItems, this._item SelectedCallback, this);
186 var anchorBox = menuItemElement.boxInWindow(); 209 var anchorBox = menuItemElement.boxInWindow();
187 // Adjust for padding. 210 // Adjust for padding.
188 anchorBox.y -= 5; 211 anchorBox.y -= 5;
189 anchorBox.x += 3; 212 anchorBox.x += 3;
190 anchorBox.width -= 6; 213 anchorBox.width -= 6;
191 anchorBox.height += 10; 214 anchorBox.height += 10;
192 this._subMenu.show(this._document, anchorBox); 215 this._subMenu.show(this._document, anchorBox);
193 } 216 }
194 217
195 _hideSubMenu() {
196 if (!this._subMenu)
197 return;
198 this._subMenu._discardSubMenus();
199 this._focus();
200 }
201
202 _menuItemMouseOver(event) { 218 _menuItemMouseOver(event) {
203 this._highlightMenuItem(event.target, true); 219 this._highlightMenuItem(event.target, true);
204 } 220 }
205 221
206 _menuItemMouseLeave(event) { 222 _menuItemMouseLeave(event) {
207 if (!this._subMenu || !event.relatedTarget) { 223 if (!this._subMenu || !event.relatedTarget) {
208 this._highlightMenuItem(null, true); 224 this._highlightMenuItem(null, true);
209 return; 225 return;
210 } 226 }
211 227
212 var relatedTarget = event.relatedTarget; 228 var relatedTarget = event.relatedTarget;
213 if (relatedTarget === this._contextMenuElement) 229 if (relatedTarget === this._contextMenuElement)
214 this._highlightMenuItem(null, true); 230 this._highlightMenuItem(null, true);
215 } 231 }
216 232
217 /** 233 /**
218 * @param {?Element} menuItemElement 234 * @param {?Element} menuItemElement
219 * @param {boolean} scheduleSubMenu 235 * @param {boolean} scheduleSubMenu
220 */ 236 */
221 _highlightMenuItem(menuItemElement, scheduleSubMenu) { 237 _highlightMenuItem(menuItemElement, scheduleSubMenu) {
222 if (this._highlightedMenuItemElement === menuItemElement) 238 if (this._highlightedMenuItemElement === menuItemElement)
223 return; 239 return;
224 240
225 this._hideSubMenu(); 241 if (this._subMenu)
242 this._subMenu.discard();
226 if (this._highlightedMenuItemElement) { 243 if (this._highlightedMenuItemElement) {
227 this._highlightedMenuItemElement.classList.remove('force-white-icons'); 244 this._highlightedMenuItemElement.classList.remove('force-white-icons');
228 this._highlightedMenuItemElement.classList.remove('soft-context-menu-item- mouse-over'); 245 this._highlightedMenuItemElement.classList.remove('soft-context-menu-item- mouse-over');
229 if (this._highlightedMenuItemElement._subItems && this._highlightedMenuIte mElement._subMenuTimer) { 246 if (this._highlightedMenuItemElement._subItems && this._highlightedMenuIte mElement._subMenuTimer) {
230 clearTimeout(this._highlightedMenuItemElement._subMenuTimer); 247 clearTimeout(this._highlightedMenuItemElement._subMenuTimer);
231 delete this._highlightedMenuItemElement._subMenuTimer; 248 delete this._highlightedMenuItemElement._subMenuTimer;
232 } 249 }
233 } 250 }
234 this._highlightedMenuItemElement = menuItemElement; 251 this._highlightedMenuItemElement = menuItemElement;
235 if (this._highlightedMenuItemElement) { 252 if (this._highlightedMenuItemElement) {
(...skipping 30 matching lines...) Expand all
266 switch (event.key) { 283 switch (event.key) {
267 case 'ArrowUp': 284 case 'ArrowUp':
268 this._highlightPrevious(); 285 this._highlightPrevious();
269 break; 286 break;
270 case 'ArrowDown': 287 case 'ArrowDown':
271 this._highlightNext(); 288 this._highlightNext();
272 break; 289 break;
273 case 'ArrowLeft': 290 case 'ArrowLeft':
274 if (this._parentMenu) { 291 if (this._parentMenu) {
275 this._highlightMenuItem(null, false); 292 this._highlightMenuItem(null, false);
276 this._parentMenu._hideSubMenu(); 293 this.discard();
277 } 294 }
278 break; 295 break;
279 case 'ArrowRight': 296 case 'ArrowRight':
280 if (!this._highlightedMenuItemElement) 297 if (!this._highlightedMenuItemElement)
281 break; 298 break;
282 if (this._highlightedMenuItemElement._subItems) { 299 if (this._highlightedMenuItemElement._subItems) {
283 this._showSubMenu(this._highlightedMenuItemElement); 300 this._showSubMenu(this._highlightedMenuItemElement);
284 this._subMenu._focus();
285 this._subMenu._highlightNext(); 301 this._subMenu._highlightNext();
286 } 302 }
287 break; 303 break;
288 case 'Escape': 304 case 'Escape':
289 this._discardMenu(false, event); 305 this.discard();
290 break; 306 break;
291 case 'Enter': 307 case 'Enter':
292 if (!isEnterKey(event)) 308 if (!isEnterKey(event))
293 break; 309 break;
294 // Fall through 310 // Fall through
295 case ' ': // Space 311 case ' ': // Space
296 if (this._highlightedMenuItemElement) 312 if (this._highlightedMenuItemElement)
297 this._triggerAction(this._highlightedMenuItemElement, event); 313 this._triggerAction(this._highlightedMenuItemElement, event);
298 if (this._highlightedMenuItemElement._subItems) { 314 if (this._highlightedMenuItemElement._subItems)
299 this._subMenu._focus();
300 this._subMenu._highlightNext(); 315 this._subMenu._highlightNext();
301 }
302 break; 316 break;
303 } 317 }
304 event.consume(true); 318 event.consume(true);
305 } 319 }
306
307 /**
308 * @param {boolean} closeParentMenus
309 * @param {!Event=} event
310 */
311 _discardMenu(closeParentMenus, event) {
312 if (this._subMenu && !closeParentMenus)
313 return;
314
315 this._discardSubMenus();
316
317 if (this._parentMenu) {
318 if (closeParentMenus)
319 this._parentMenu._discardMenu(closeParentMenus, event);
320 else
321 this._parentMenu._focus();
322 }
323
324 if (event)
325 event.consume(true);
326 }
327
328 _discardSubMenus() {
329 if (this._subMenu)
330 this._subMenu._discardSubMenus();
331 if (this._glassPane) {
332 this._glassPane.hide();
333 delete this._glassPane;
334 if (this._onBodyMouseDown) {
335 this._document.body.removeEventListener('mousedown', this._onBodyMouseDo wn, false);
336 delete this._onBodyMouseDown;
337 }
338 }
339 if (this._parentMenu)
340 delete this._parentMenu._subMenu;
341 }
342 }; 320 };
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/http/tests/inspector-unit/soft-context-menu-expected.txt ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698