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

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: Get rid of pointless experimental code" Created 8 years, 3 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 82 matching lines...) Expand 10 before | Expand all | Expand 10 after
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 this.menu.handleKeyDown(e);
97 e.preventDefault(); 97 e.preventDefault();
98 e.stopPropagation(); 98 e.stopPropagation();
99 } 99 }
100 break; 100 break;
101 101
102 case 'activate': 102 case 'activate':
103 case 'blur':
104 case 'resize': 103 case 'resize':
105 this.hideMenu(); 104 this.hideMenu();
106 break; 105 break;
107 } 106 }
108 }, 107 },
109 108
110 /** 109 /**
111 * Shows the menu. 110 * Shows the menu.
112 */ 111 */
113 showMenu: function() { 112 showMenu: function() {
114 this.hideMenu(); 113 this.hideMenu();
115 114
116 var event = document.createEvent('UIEvents'); 115 var event = document.createEvent('UIEvents');
117 event.initUIEvent('menushow', true, true, window, null); 116 event.initUIEvent('menushow', true, true, window, null);
118 117
119 if (this.dispatchEvent(event)) { 118 if (this.dispatchEvent(event)) {
120 this.menu.hidden = false; 119 this.menu.hidden = false;
121 120
122 this.setAttribute('menu-shown', ''); 121 this.setAttribute('menu-shown', '');
122 this.menu.selectedIndex = 0;
Dan Beam 2012/09/21 03:44:50 should the first item always be selected when show
aboxhall 2012/09/21 06:46:00 The selectedIndex is set back to -1 below, so it s
Dan Beam 2012/09/21 10:23:48 Where is it set to -1? Either way I guess this met
aboxhall 2012/09/24 00:48:52 It's set to -1 in the hideMenu() method below. I
123 123
124 // when the menu is shown we steal all keyboard events. 124 // when the menu is shown we steal all keyboard events.
125 var doc = this.ownerDocument; 125 var doc = this.ownerDocument;
126 var win = doc.defaultView; 126 var win = doc.defaultView;
127 this.showingEvents_.add(doc, 'keydown', this, true); 127 this.showingEvents_.add(doc, 'keydown', this, true);
128 this.showingEvents_.add(doc, 'mousedown', this, true); 128 this.showingEvents_.add(doc, 'mousedown', this, true);
129 this.showingEvents_.add(doc, 'blur', this, true); 129 this.showingEvents_.add(doc, 'blur', this, true);
130 this.showingEvents_.add(win, 'resize', this); 130 this.showingEvents_.add(win, 'resize', this);
131 this.showingEvents_.add(this.menu, 'activate', this); 131 this.showingEvents_.add(this.menu, 'activate', this);
132 this.positionMenu_(); 132 this.positionMenu_();
133 } 133 }
134 }, 134 },
135 135
136 /** 136 /**
137 * Hides the menu. If your menu can go out of scope, make sure to call this 137 * Hides the menu. If your menu can go out of scope, make sure to call this
138 * first. 138 * first.
139 */ 139 */
140 hideMenu: function() { 140 hideMenu: function() {
141 if (!this.isMenuShown()) 141 if (!this.isMenuShown())
142 return; 142 return;
143 143
144 this.removeAttribute('menu-shown'); 144 this.removeAttribute('menu-shown');
145 this.menu.hidden = true; 145 this.menu.hidden = true;
146 146
147 this.showingEvents_.removeAll(); 147 this.showingEvents_.removeAll();
148 this.menu.selectedIndex = -1; 148 this.menu.selectedIndex = -1;
149 this.focus();
Dan Beam 2012/09/21 03:44:50 I'm confused by this ^
aboxhall 2012/09/21 06:46:00 It puts the focus back on the menu button when the
Dan Beam 2012/09/21 10:23:48 How does focus()ing a hidden element put the focus
aboxhall 2012/09/24 00:48:52 It's not focusing a hidden element, it's focusing
149 }, 150 },
150 151
151 /** 152 /**
152 * Whether the menu is shown. 153 * Whether the menu is shown.
153 */ 154 */
154 isMenuShown: function() { 155 isMenuShown: function() {
155 return this.hasAttribute('menu-shown'); 156 return this.hasAttribute('menu-shown');
156 }, 157 },
157 158
158 /** 159 /**
(...skipping 13 matching lines...) Expand all
172 switch (e.keyIdentifier) { 173 switch (e.keyIdentifier) {
173 case 'Down': 174 case 'Down':
174 case 'Up': 175 case 'Up':
175 case 'Enter': 176 case 'Enter':
176 case 'U+0020': // Space 177 case 'U+0020': // Space
177 if (!this.isMenuShown()) 178 if (!this.isMenuShown())
178 this.showMenu(); 179 this.showMenu();
179 e.preventDefault(); 180 e.preventDefault();
180 break; 181 break;
181 case 'Esc': 182 case 'Esc':
183 case 'U+0009':
Dan Beam 2012/09/21 03:44:50 case 'U+0009': // Whatever the heck this key is.
Dan Beam 2012/09/21 10:23:48 Ping
aboxhall 2012/09/24 00:48:52 Oopsies. It's 'Tab'. Fixed.
182 case 'U+001B': // Maybe this is remote desktop playing a prank? 184 case 'U+001B': // Maybe this is remote desktop playing a prank?
183 this.hideMenu(); 185 this.hideMenu();
184 break; 186 break;
185 } 187 }
186 } 188 }
187 }; 189 };
188 190
189 /** 191 /**
190 * Helper for styling a menu button with a drop-down arrow indicator. 192 * 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. 193 * Creates a new 2D canvas context and draws a downward-facing arrow into it.
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
230 'drop-down-arrow-hover', ARROW_WIDTH, ARROW_HEIGHT, hoverColor); 232 'drop-down-arrow-hover', ARROW_WIDTH, ARROW_HEIGHT, hoverColor);
231 createDropDownArrowCanvas( 233 createDropDownArrowCanvas(
232 'drop-down-arrow-active', ARROW_WIDTH, ARROW_HEIGHT, activeColor); 234 'drop-down-arrow-active', ARROW_WIDTH, ARROW_HEIGHT, activeColor);
233 }; 235 };
234 236
235 // Export 237 // Export
236 return { 238 return {
237 MenuButton: MenuButton 239 MenuButton: MenuButton
238 }; 240 };
239 }); 241 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698