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

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: Add menu/menuitem role, comment for Tab character, and keep track of last selected item. 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 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':
dmazzoni 2012/09/24 17:49:06 Just checking, do we want to handle 'blur' still b
aboxhall 2012/09/24 22:39:38 This makes sense, but as I describe below, it actu
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.focusSelectedItem();
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.focus();
149 }, 149 },
150 150
151 /** 151 /**
152 * Whether the menu is shown. 152 * Whether the menu is shown.
153 */ 153 */
154 isMenuShown: function() { 154 isMenuShown: function() {
155 return this.hasAttribute('menu-shown'); 155 return this.hasAttribute('menu-shown');
156 }, 156 },
157 157
158 /** 158 /**
(...skipping 14 matching lines...) Expand all
173 case 'Down': 173 case 'Down':
174 case 'Up': 174 case 'Up':
175 case 'Enter': 175 case 'Enter':
176 case 'U+0020': // Space 176 case 'U+0020': // Space
177 if (!this.isMenuShown()) 177 if (!this.isMenuShown())
178 this.showMenu(); 178 this.showMenu();
179 e.preventDefault(); 179 e.preventDefault();
180 break; 180 break;
181 case 'Esc': 181 case 'Esc':
182 case 'U+001B': // Maybe this is remote desktop playing a prank? 182 case 'U+001B': // Maybe this is remote desktop playing a prank?
183 case 'U+0009': // Tab
dmazzoni 2012/09/24 17:49:06 Specifically trapping the tab key worries me a bit
aboxhall 2012/09/24 22:39:38 So, I did have the same thought while I was workin
dmazzoni 2012/09/24 22:48:56 OK. If it isn't needed, that's fine. I'm still cur
aboxhall 2012/09/25 04:31:30 Ok, it's triggered by a mouse event at line 78 of
183 this.hideMenu(); 184 this.hideMenu();
184 break; 185 break;
185 } 186 }
186 } 187 }
187 }; 188 };
188 189
189 /** 190 /**
190 * Helper for styling a menu button with a drop-down arrow indicator. 191 * 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. 192 * 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 193 * @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); 231 'drop-down-arrow-hover', ARROW_WIDTH, ARROW_HEIGHT, hoverColor);
231 createDropDownArrowCanvas( 232 createDropDownArrowCanvas(
232 'drop-down-arrow-active', ARROW_WIDTH, ARROW_HEIGHT, activeColor); 233 'drop-down-arrow-active', ARROW_WIDTH, ARROW_HEIGHT, activeColor);
233 }; 234 };
234 235
235 // Export 236 // Export
236 return { 237 return {
237 MenuButton: MenuButton 238 MenuButton: MenuButton
238 }; 239 };
239 }); 240 });
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