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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2653693002: [tracing] Make tab-view rerender after reset/clear
Patch Set: Created 3 years, 10 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>
charliea (OOO until 10-5) 2017/01/24 01:01:04 Does this also solve https://github.com/catapult-p
hjd 2017/01/24 09:30:25 Yep! :)
charliea (OOO until 10-5) 2017/01/24 01:01:04 I see in the CL description that you considered ob
hjd 2017/01/24 09:30:25 I think so although I didn't try it. (I was so fru
charliea (OOO until 10-5) 2017/01/24 22:46:59 Sounds good. I definitely think that way is the wa
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 <!--
11 @fileoverview A view that allows the user to control which single tab is 11 @fileoverview A view that allows the user to control which single tab is
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after
69 background-color: white; 69 background-color: white;
70 border: 1px solid #8e8e8e; 70 border: 1px solid #8e8e8e;
71 border-bottom: 1px solid white; 71 border-bottom: 1px solid white;
72 } 72 }
73 73
74 #subView { 74 #subView {
75 flex: 1 1 auto; 75 flex: 1 1 auto;
76 overflow: auto; 76 overflow: auto;
77 } 77 }
78 </style> 78 </style>
79 <div id='tabs' hidden="[[tabsHidden]]"> 79 <div id='tabs' hidden="[[tabsHidden]]">
charliea (OOO until 10-5) 2017/01/24 01:01:04 nit: consistently use " over ' It does indeed loo
hjd 2017/01/24 09:30:25 Done.
80 <label id=selection_description>[[label_]]</label> 80 <label id=selection_description>[[label_]]</label>
81 <template is=dom-repeat items=[[subViews_]]> 81 <template is=dom-repeat items=[[wrappedSubViews_]]>
82 <tab> 82 <tab>
83 <input type=radio name=tabs id$=[[computeRadioId_(item)]] 83 <input type=radio name=tabs id$="[[computeRadioId_(item.subView)]]"
84 on-change='onTabChanged_' 84 on-change='onTabChanged_'
85 checked$='[[isChecked_(item)]]' /> 85 checked$="[[isChecked_(item.subView, selectedSubView_)]]" />
86 <label for$=[[computeRadioId_(item)]]> 86 <label for$="[[computeRadioId_(item.subView)]]">
87 <template is=dom-if if=[[item.tabIcon]]> 87 <template is=dom-if if="[[item.subView.tabIcon]]">
88 <span style$='[[item.tabIcon.style]]'>[[item.tabIcon.text]]</span> 88 <span style$="[[item.subView.tabIcon.style]]">[[item.subView.tabIc on.text]]</span>
89 </template> 89 </template>
90 [[item.tabLabel]] 90 [[item.subView.tabLabel]]
91 </label> 91 </label>
92 </tab> 92 </tab>
93 </template> 93 </template>
94 </div> 94 </div>
95 <div id='subView'></div> 95 <div id='subView'></div>
96 <content> 96 <content>
97 </content> 97 </content>
98 </template> 98 </template>
99 </dom-module> 99 </dom-module>
100 <script> 100 <script>
101 'use strict'; 101 'use strict';
102 102
103 Polymer({ 103 Polymer({
104 is: 'tr-ui-b-tab-view', 104 is: 'tr-ui-b-tab-view',
105 105
106 properties: { 106 properties: {
107 label_: { 107 label_: {
108 type: String, 108 type: String,
109 value: () => '' 109 value: () => ''
110 }, 110 },
111 selectedSubView_: Object, 111 selectedSubView_: Object,
112 subViews_: { 112 subViews_: {
113 type: Array, 113 type: Array,
114 value: () => [] 114 value: () => []
115 }, 115 },
116 wrappedSubViews_: {
117 type: Array,
118 computed: 'computeWrappedSubViews_(subViews_, subViews_.splices)',
119 },
116 tabsHidden: { 120 tabsHidden: {
117 type: Boolean, 121 type: Boolean,
118 value: false, 122 value: false,
119 observer: 'tabsHiddenChanged_' 123 observer: 'tabsHiddenChanged_'
120 } 124 }
121 }, 125 },
122 126
123 ready: function() { 127 ready: function() {
124 this.$.tabs.addEventListener('keydown', this.onKeyDown_.bind(this), true); 128 this.$.tabs.addEventListener('keydown', this.onKeyDown_.bind(this), true);
125 this.updateFocusability_(); 129 this.updateFocusability_();
126 }, 130 },
127 131
128 set label(newLabel) { 132 set label(newLabel) {
129 this.set('label_', newLabel); 133 this.set('label_', newLabel);
130 }, 134 },
131 135
132 get tabs() { 136 get tabs() {
133 return this.get('subViews_'); 137 return this.get('subViews_');
134 }, 138 },
135 139
136 get selectedSubView() { 140 get selectedSubView() {
137 return this.selectedSubView_; 141 return this.selectedSubView_;
138 }, 142 },
139 143
140 set selectedSubView(subView) { 144 set selectedSubView(subView) {
145 console.log('set selectedSubView', subView);
charliea (OOO until 10-5) 2017/01/24 01:01:04 nit: don't want console.logs in production code
hjd 2017/01/24 09:30:25 oops, I thought I removed that. Thanks!
141 if (subView === this.selectedSubView_) 146 if (subView === this.selectedSubView_)
142 return; 147 return;
143 148
144 if (this.selectedSubView_) { 149 if (this.selectedSubView_) {
145 Polymer.dom(this.$.subView).removeChild(this.selectedSubView_); 150 Polymer.dom(this.$.subView).removeChild(this.selectedSubView_);
146 var oldInput = this.root.getElementById(this.computeRadioId_( 151 var oldInput = this.root.getElementById(this.computeRadioId_(
147 this.selectedSubView_)); 152 this.selectedSubView_));
148 if (oldInput) { 153 if (oldInput) {
149 oldInput.checked = false; 154 oldInput.checked = false;
150 } 155 }
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
184 this.push('subViews_', subView); 189 this.push('subViews_', subView);
185 this.selectedSubView = subViews[0]; 190 this.selectedSubView = subViews[0];
186 } 191 }
187 else { 192 else {
188 this.selectedSubView = undefined; 193 this.selectedSubView = undefined;
189 } 194 }
190 this.updateFocusability_(); 195 this.updateFocusability_();
191 }, 196 },
192 197
193 onTabChanged_: function(event) { 198 onTabChanged_: function(event) {
194 this.selectedSubView = event.model.item; 199 this.selectedSubView = event.model.item.subView;
195 }, 200 },
196 201
197 isChecked_: function(subView) { 202 isChecked_: function(subView) {
198 return this.selectedSubView_ === subView; 203 return this.selectedSubView_ === subView;
199 }, 204 },
200 205
201 tabsHiddenChanged_: function() { 206 tabsHiddenChanged_: function() {
202 this.updateFocusability_(); 207 this.updateFocusability_();
203 }, 208 },
204 209
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after
257 }, 262 },
258 263
259 computeRadioId_: function(subView) { 264 computeRadioId_: function(subView) {
260 // We can't just use the tagName as the radio's ID because there are 265 // We can't just use the tagName as the radio's ID because there are
261 // instances where a single subview type can handle multiple event types, 266 // instances where a single subview type can handle multiple event types,
262 // and thus might be present multiple times in a single tab view. In order 267 // and thus might be present multiple times in a single tab view. In order
263 // to avoid the case where we might have two tabs with the same ID, we 268 // to avoid the case where we might have two tabs with the same ID, we
264 // uniquify this ID by appending the tab's label with all spaces replaced 269 // uniquify this ID by appending the tab's label with all spaces replaced
265 // by dashes (because spaces aren't allowed in HTML IDs). 270 // by dashes (because spaces aren't allowed in HTML IDs).
266 return subView.tagName + '-' + subView.tabLabel.replace(/ /g, '-'); 271 return subView.tagName + '-' + subView.tabLabel.replace(/ /g, '-');
267 } 272 },
273
274 computeWrappedSubViews_: function(subViews_) {
275 return subViews_.map((subView) => {
276 return { subView: subView };
charliea (OOO until 10-5) 2017/01/24 01:01:04 This can just be return { subView }; This match
hjd 2017/01/24 09:30:25 Yeah I keep forgetting :( Done.
277 });
278 },
279
268 }); 280 });
269 </script> 281 </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