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

Side by Side Diff: chrome/browser/resources/shared/js/cr/ui/menu_button.js

Issue 10966027: Basic keyboard access for recently_closed menu on NTP. Allows using up and down arrows to navigate,… (Closed) Base URL: http://git.chromium.org/chromium/src.git@master
Patch Set: Don't steal keyboard events that the menu doesn't handle, and detect focusin on unrelated elements … Created 8 years, 2 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
OLDNEW
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 cr.define('cr.ui', function() { 5 cr.define('cr.ui', function() {
6 /** @const */ 6 /** @const */
7 var Menu = cr.ui.Menu; 7 var Menu = cr.ui.Menu;
8 /** @const */ 8 /** @const */
9 var positionPopupAroundElement = cr.ui.positionPopupAroundElement; 9 var positionPopupAroundElement = cr.ui.positionPopupAroundElement;
10 10
(...skipping 75 matching lines...) Expand 10 before | Expand all | Expand 10 after
86 this.showMenu(); 86 this.showMenu();
87 // Prevent the button from stealing focus on mousedown. 87 // Prevent the button from stealing focus on mousedown.
88 e.preventDefault(); 88 e.preventDefault();
89 } 89 }
90 } 90 }
91 break; 91 break;
92 case 'keydown': 92 case 'keydown':
93 this.handleKeyDown(e); 93 this.handleKeyDown(e);
94 // If the menu is visible we let it handle all the keyboard events. 94 // If the menu is visible we let it handle all the keyboard events.
95 if (this.isMenuShown() && e.currentTarget == this.ownerDocument) { 95 if (this.isMenuShown() && e.currentTarget == this.ownerDocument) {
96 this.menu.handleKeyDown(e); 96 if (this.menu.handleKeyDown(e)) {
97 e.preventDefault(); 97 e.preventDefault();
98 e.stopPropagation(); 98 e.stopPropagation();
99 }
99 } 100 }
100 break; 101 break;
101 102
103 case 'focusin':
104 if (!this.contains(e.target) && !this.menu.contains(e.target))
105 this.hideMenu();
106 break;
107
102 case 'activate': 108 case 'activate':
103 case 'blur':
104 case 'resize': 109 case 'resize':
105 this.hideMenu(); 110 this.hideMenu();
106 break; 111 break;
107 } 112 }
108 }, 113 },
109 114
110 /** 115 /**
111 * Shows the menu. 116 * Shows the menu.
112 */ 117 */
113 showMenu: function() { 118 showMenu: function() {
114 this.hideMenu(); 119 this.hideMenu();
115 120
116 var event = document.createEvent('UIEvents'); 121 var event = document.createEvent('UIEvents');
117 event.initUIEvent('menushow', true, true, window, null); 122 event.initUIEvent('menushow', true, true, window, null);
118 123
119 if (this.dispatchEvent(event)) { 124 if (this.dispatchEvent(event)) {
120 this.menu.hidden = false; 125 this.menu.hidden = false;
121 126
122 this.setAttribute('menu-shown', ''); 127 this.setAttribute('menu-shown', '');
128 this.menu.focusSelectedItem();
123 129
124 // when the menu is shown we steal all keyboard events. 130 // when the menu is shown we steal all keyboard events.
125 var doc = this.ownerDocument; 131 var doc = this.ownerDocument;
126 var win = doc.defaultView; 132 var win = doc.defaultView;
127 this.showingEvents_.add(doc, 'keydown', this, true); 133 this.showingEvents_.add(doc, 'keydown', this, true);
128 this.showingEvents_.add(doc, 'mousedown', this, true); 134 this.showingEvents_.add(doc, 'mousedown', this, true);
129 this.showingEvents_.add(doc, 'blur', this, true); 135 this.showingEvents_.add(doc, 'focusin', this, true);
130 this.showingEvents_.add(win, 'resize', this); 136 this.showingEvents_.add(win, 'resize', this);
131 this.showingEvents_.add(this.menu, 'activate', this); 137 this.showingEvents_.add(this.menu, 'activate', this);
132 this.positionMenu_(); 138 this.positionMenu_();
133 } 139 }
134 }, 140 },
135 141
136 /** 142 /**
137 * Hides the menu. If your menu can go out of scope, make sure to call this 143 * Hides the menu. If your menu can go out of scope, make sure to call this
138 * first. 144 * first.
139 */ 145 */
140 hideMenu: function() { 146 hideMenu: function() {
141 if (!this.isMenuShown()) 147 if (!this.isMenuShown())
142 return; 148 return;
143 149
144 this.removeAttribute('menu-shown'); 150 this.removeAttribute('menu-shown');
145 this.menu.hidden = true; 151 this.menu.hidden = true;
146 152
147 this.showingEvents_.removeAll(); 153 this.showingEvents_.removeAll();
148 this.menu.selectedIndex = -1; 154 this.focus();
149 }, 155 },
150 156
151 /** 157 /**
152 * Whether the menu is shown. 158 * Whether the menu is shown.
153 */ 159 */
154 isMenuShown: function() { 160 isMenuShown: function() {
155 return this.hasAttribute('menu-shown'); 161 return this.hasAttribute('menu-shown');
156 }, 162 },
157 163
158 /** 164 /**
(...skipping 14 matching lines...) Expand all
173 case 'Down': 179 case 'Down':
174 case 'Up': 180 case 'Up':
175 case 'Enter': 181 case 'Enter':
176 case 'U+0020': // Space 182 case 'U+0020': // Space
177 if (!this.isMenuShown()) 183 if (!this.isMenuShown())
178 this.showMenu(); 184 this.showMenu();
179 e.preventDefault(); 185 e.preventDefault();
180 break; 186 break;
181 case 'Esc': 187 case 'Esc':
182 case 'U+001B': // Maybe this is remote desktop playing a prank? 188 case 'U+001B': // Maybe this is remote desktop playing a prank?
189 case 'U+0009': // Tab
183 this.hideMenu(); 190 this.hideMenu();
184 break; 191 break;
185 } 192 }
186 } 193 }
187 }; 194 };
188 195
189 /** 196 /**
190 * Helper for styling a menu button with a drop-down arrow indicator. 197 * Helper for styling a menu button with a drop-down arrow indicator.
191 * Creates a new 2D canvas context and draws a downward-facing arrow into it. 198 * Creates a new 2D canvas context and draws a downward-facing arrow into it.
192 * @param {string} canvasName The name of the canvas. The canvas can be 199 * @param {string} canvasName The name of the canvas. The canvas can be
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after
230 'drop-down-arrow-hover', ARROW_WIDTH, ARROW_HEIGHT, hoverColor); 237 'drop-down-arrow-hover', ARROW_WIDTH, ARROW_HEIGHT, hoverColor);
231 createDropDownArrowCanvas( 238 createDropDownArrowCanvas(
232 'drop-down-arrow-active', ARROW_WIDTH, ARROW_HEIGHT, activeColor); 239 'drop-down-arrow-active', ARROW_WIDTH, ARROW_HEIGHT, activeColor);
233 }; 240 };
234 241
235 // Export 242 // Export
236 return { 243 return {
237 MenuButton: MenuButton 244 MenuButton: MenuButton
238 }; 245 };
239 }); 246 });
OLDNEW
« no previous file with comments | « chrome/browser/resources/shared/js/cr/ui/menu.js ('k') | chrome/browser/resources/shared/js/cr/ui/menu_item.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698