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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: tracing/tracing/ui/base/tab_view.html

Issue 2374483002: [tracing] Add keyboard navigation to the tab view (Closed)
Patch Set: Created 4 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
« no previous file with comments | « no previous file | 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 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <!-- 2 <!--
3 Copyright (c) 2014 The Chromium Authors. All rights reserved. 3 Copyright (c) 2014 The Chromium Authors. All rights reserved.
4 Use of this source code is governed by a BSD-style license that can be 4 Use of this source code is governed by a BSD-style license that can be
5 found in the LICENSE file. 5 found in the LICENSE file.
6 --> 6 -->
7 7
8 <link rel="import" href="/tracing/base/base.html"> 8 <link rel="import" href="/tracing/base/base.html">
9 9
10 <!-- 10 <!--
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after
53 display: inline-block; 53 display: inline-block;
54 border: 1px solid #ececec; 54 border: 1px solid #ececec;
55 margin: 5px 0px 0px 15px; 55 margin: 5px 0px 0px 15px;
56 padding: 3px 10px 3px 10px; 56 padding: 3px 10px 3px 10px;
57 } 57 }
58 58
59 #tabs tab label span { 59 #tabs tab label span {
60 font-weight: bold; 60 font-weight: bold;
61 } 61 }
62 62
63 #tabs:focus input[type=radio]:checked ~ label {
64 outline: dotted 1px #8e8e8e;
65 outline-offset: -2px;
66 }
67
63 #tabs input[type=radio]:checked ~ label { 68 #tabs input[type=radio]:checked ~ label {
64 background-color: white; 69 background-color: white;
65 border: 1px solid #8e8e8e; 70 border: 1px solid #8e8e8e;
66 border-bottom: 1px solid white; 71 border-bottom: 1px solid white;
67 } 72 }
68 73
69 #subView { 74 #subView {
70 flex: 1 1 auto; 75 flex: 1 1 auto;
71 overflow: auto; 76 overflow: auto;
72 } 77 }
(...skipping 30 matching lines...) Expand all
103 type: String, 108 type: String,
104 value: () => '' 109 value: () => ''
105 }, 110 },
106 selectedSubView_: Object, 111 selectedSubView_: Object,
107 subViews_: { 112 subViews_: {
108 type: Array, 113 type: Array,
109 value: () => [] 114 value: () => []
110 }, 115 },
111 tabsHidden: { 116 tabsHidden: {
112 type: Boolean, 117 type: Boolean,
113 value: false 118 value: false,
119 observer: 'tabsHiddenChanged_'
120 },
121 focusable_: {
petrcermak 2016/09/27 13:33:06 I don't think there's any value in adding a privat
hjd 2016/09/28 10:05:57 Done.
122 type: Boolean,
123 value: false,
114 } 124 }
115 }, 125 },
116 126
127 ready: function() {
128 this.$.tabs.addEventListener('keydown', this.onKeyDown_.bind(this), true);
129 this.updateFocusability_();
130 },
131
117 set label(newLabel) { 132 set label(newLabel) {
118 this.set('label_', newLabel); 133 this.set('label_', newLabel);
119 }, 134 },
120 135
121 get tabs() { 136 get tabs() {
122 return this.get('subViews_'); 137 return this.get('subViews_');
123 }, 138 },
124 139
125 get selectedSubView() { 140 get selectedSubView() {
126 return this.selectedSubView_; 141 return this.selectedSubView_;
(...skipping 10 matching lines...) Expand all
137 152
138 if (subView) 153 if (subView)
139 Polymer.dom(this.$.subView).appendChild(subView); 154 Polymer.dom(this.$.subView).appendChild(subView);
140 155
141 this.fire('selected-tab-change'); 156 this.fire('selected-tab-change');
142 }, 157 },
143 158
144 clearSubViews: function() { 159 clearSubViews: function() {
145 this.splice('subViews_', 0, this.subViews_.length); 160 this.splice('subViews_', 0, this.subViews_.length);
146 this.selectedSubView = undefined; 161 this.selectedSubView = undefined;
162 this.updateFocusability_();
147 }, 163 },
148 164
149 addSubView: function(subView) { 165 addSubView: function(subView) {
150 if (!this.selectedSubView_) 166 if (!this.selectedSubView_)
151 this.selectedSubView = subView; 167 this.selectedSubView = subView;
152 168
153 this.push('subViews_', subView); 169 this.push('subViews_', subView);
170 this.updateFocusability_();
154 }, 171 },
155 172
156 resetSubViews: function(subViews) { 173 resetSubViews: function(subViews) {
157 this.splice('subViews_', 0, this.subViews_.length); 174 this.splice('subViews_', 0, this.subViews_.length);
158 if (subViews.length) { 175 if (subViews.length) {
159 for (var subView of subViews) 176 for (var subView of subViews)
160 this.push('subViews_', subView); 177 this.push('subViews_', subView);
161 this.selectedSubView = subViews[0]; 178 this.selectedSubView = subViews[0];
162 } 179 }
163 else { 180 else {
164 this.selectedSubView = undefined; 181 this.selectedSubView = undefined;
165 } 182 }
183 this.updateFocusability_();
166 }, 184 },
167 185
168 onTabChanged_: function(event) { 186 onTabChanged_: function(event) {
169 this.selectedSubView = event.model.item; 187 this.selectedSubView = event.model.item;
170 }, 188 },
171 189
172 isChecked_: function(subView) { 190 isChecked_: function(subView) {
173 return this.selectedSubView_ === subView; 191 return this.selectedSubView_ === subView;
174 }, 192 },
175 193
194 tabsHiddenChanged_: function() {
195 this.updateFocusability_();
196 },
197
198 onKeyDown_: function(e) {
199 if (this.tabsHidden || !this.selectedSubView_)
200 return;
201
202 var currentIndex = this.subViews_.indexOf(this.selectedSubView_);
203 var nextIndex = undefined;
204 switch (e.keyCode) {
205 // Arrow left.
206 case 37:
207 nextIndex = currentIndex - 1;
208 break;
209 // Arrow right.
210 case 39:
211 nextIndex = currentIndex + 1;
212 break;
213 }
214
215 if (nextIndex === undefined)
216 return;
217
218 var tab = Polymer.dom(this.root).querySelectorAll('#tabs tab')[nextIndex];
219 if (tab)
220 tab.firstElementChild.click();
petrcermak 2016/09/27 13:33:06 Could you try doing .checked = true? It would be b
petrcermak 2016/09/27 13:33:06 To prepare for the structure of the tab changing i
hjd 2016/09/28 10:05:57 Done.
hjd 2016/09/28 10:05:57 I tried it but it didn't seem to work :( I'll leav
221
222 e.stopPropagation();
223 e.preventDefault();
224 },
225
226 shouldBeFocusable_: function() {
227 return !this.tabsHidden && this.subViews_.length > 0;
228 },
229
230 updateFocusability_: function() {
231 var focusableNow = this.shouldBeFocusable_();
petrcermak 2016/09/27 13:33:06 as explained in one of my previous comments, I thi
hjd 2016/09/28 10:05:57 Done.
232 if (this.get('focusable_') === focusableNow)
petrcermak 2016/09/27 13:33:06 BTW, you could just do `this.focusable_` here and
hjd 2016/09/28 10:05:57 Acknowledged.
233 return;
234 this.set('focusable_', focusableNow);
235 if (focusableNow) {
236 Polymer.dom(this.$.tabs).setAttribute('tabindex', 0);
237 } else {
238 Polymer.dom(this.$.tabs).removeAttribute('tabindex');
239 }
240 },
241
176 computeRadioId_: function(subView) { 242 computeRadioId_: function(subView) {
177 // We can't just use the tagName as the radio's ID because there are 243 // We can't just use the tagName as the radio's ID because there are
178 // instances where a single subview type can handle multiple event types, 244 // instances where a single subview type can handle multiple event types,
179 // and thus might be present multiple times in a single tab view. In order 245 // and thus might be present multiple times in a single tab view. In order
180 // to avoid the case where we might have two tabs with the same ID, we 246 // to avoid the case where we might have two tabs with the same ID, we
181 // uniquify this ID by appending the tab's label with all spaces replaced 247 // uniquify this ID by appending the tab's label with all spaces replaced
182 // by dashes (because spaces aren't allowed in HTML IDs). 248 // by dashes (because spaces aren't allowed in HTML IDs).
183 return subView.tagName + '-' + subView.tabLabel.replace(/ /g, '-'); 249 return subView.tagName + '-' + subView.tabLabel.replace(/ /g, '-');
184 } 250 }
185 }); 251 });
186 </script> 252 </script>
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698