Chromium Code Reviews Chromium Code Reviews
Issue 2162963002:
[polymer] Merge of master into polymer10-migration (Closed)
Base URL: git@github.com:catapult-project/catapult.git@polymer10-migration| OLD | NEW |
|---|---|
| 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/ui/analysis/analysis_sub_view.html"> | |
| 9 | |
| 8 <!-- | 10 <!-- |
| 9 @fileoverview A series of tabs for the analysis view that controls which | 11 @fileoverview A series of tabs for the analysis view that controls which |
| 10 analysis sub-view is being displayed. | 12 analysis sub-view is being displayed. |
| 11 | 13 |
| 12 We follow a fairly standard web convention of backing our tabs with hidden radio | 14 We follow a fairly standard web convention of backing our tabs with hidden radio |
| 13 buttons but visible radio button labels (the tabs themselves) which toggle the | 15 buttons but visible radio button labels (the tabs themselves) which toggle the |
| 14 input element when clicked. Using hidden radio buttons makes sense, as both tabs | 16 input element when clicked. Using hidden radio buttons makes sense, as both tabs |
| 15 and radio buttons are input elements that allow user selection through clicking | 17 and radio buttons are input elements that allow user selection through clicking |
| 16 and limit users to having one option selected at a time. | 18 and limit users to having one option selected at a time. |
| 17 --> | 19 --> |
| (...skipping 30 matching lines...) Expand all Loading... | |
| 48 margin: 5px 0px 0px 15px; | 50 margin: 5px 0px 0px 15px; |
| 49 padding: 3px 10px 3px 10px; | 51 padding: 3px 10px 3px 10px; |
| 50 } | 52 } |
| 51 | 53 |
| 52 #tabs input[type=radio]:checked ~ label { | 54 #tabs input[type=radio]:checked ~ label { |
| 53 background-color: white; | 55 background-color: white; |
| 54 border: 1px solid #8e8e8e; | 56 border: 1px solid #8e8e8e; |
| 55 border-bottom: 1px solid white; | 57 border-bottom: 1px solid white; |
| 56 } | 58 } |
| 57 </style> | 59 </style> |
| 58 <div id='tabs'> | 60 <div id='tabs' hidden="[[tabsHidden]]"> |
|
charliea (OOO until 10-5)
2016/07/19 15:08:08
The value set view that Ben created for results2.h
| |
| 59 <label id=selection_description>[[label_]]</label> | 61 <label id=selection_description>[[label_]]</label> |
| 60 <template is=dom-repeat items=[[subViews_]]> | 62 <template is=dom-repeat items=[[subViews_]]> |
| 61 <tab> | 63 <tab> |
| 62 <input type=radio name=tabs id$=[[computeRadioId_(item)]] | 64 <input type=radio name=tabs id$=[[computeRadioId_(item)]] |
| 63 on-change='onTabChanged_' | 65 on-change='onTabChanged_' |
| 64 checked$='[[isChecked_(item)]]' /> | 66 checked$='[[isChecked_(item)]]' /> |
| 65 <label for$=[[computeRadioId_(item)]]>[[item.tabLabel]]</label> | 67 <label for$=[[computeRadioId_(item)]]>[[item.tabLabel]]</label> |
| 66 </tab> | 68 </tab> |
| 67 </template> | 69 </template> |
| 68 </div> | 70 </div> |
| 69 <div id='subView'></div> | 71 <div id='subView'></div> |
| 70 <content> | 72 <content> |
| 71 </content> | 73 </content> |
| 72 </template> | 74 </template> |
| 73 </dom-module> | 75 </dom-module> |
| 74 <script> | 76 <script> |
| 75 'use strict'; | 77 'use strict'; |
| 76 | 78 |
| 77 Polymer({ | 79 Polymer({ |
| 78 is: 'tr-ui-a-tab-view', | 80 is: 'tr-ui-a-tab-view', |
| 79 | 81 |
| 80 properties: { | 82 properties: { |
| 81 label_: { | 83 label_: { |
| 82 type: String, | 84 type: String, |
| 83 value: () => '' | 85 value: () => '' |
| 84 }, | 86 }, |
| 87 selectedSubView_: Object, | |
| 85 subViews_: { | 88 subViews_: { |
| 86 type: Array, | 89 type: Array, |
| 87 value: () => [] | 90 value: () => [] |
| 88 }, | 91 }, |
| 89 selectedSubView_: Object | 92 tabsHidden: { |
| 93 type: Boolean, | |
| 94 value: false | |
| 95 } | |
| 90 }, | 96 }, |
| 91 | 97 |
| 92 set label(newLabel) { | 98 set label(newLabel) { |
| 93 this.set('label_', newLabel); | 99 this.set('label_', newLabel); |
| 94 }, | 100 }, |
| 95 | 101 |
| 96 get tabs() { | 102 get tabs() { |
| 97 return this.get('subViews_'); | 103 return this.get('subViews_'); |
| 98 }, | 104 }, |
| 99 | 105 |
| (...skipping 15 matching lines...) Expand all Loading... | |
| 115 | 121 |
| 116 this.fire('selected-tab-change'); | 122 this.fire('selected-tab-change'); |
| 117 }, | 123 }, |
| 118 | 124 |
| 119 clearSubViews: function() { | 125 clearSubViews: function() { |
| 120 this.splice('subViews_', 0, this.subViews_.length); | 126 this.splice('subViews_', 0, this.subViews_.length); |
| 121 this.selectedSubView = undefined; | 127 this.selectedSubView = undefined; |
| 122 }, | 128 }, |
| 123 | 129 |
| 124 addSubView: function(subView) { | 130 addSubView: function(subView) { |
| 125 if (!(subView instanceof HTMLElement) || | |
|
charliea (OOO until 10-5)
2016/07/19 15:08:06
When I rewrote the tab view, I assumed that it wou
| |
| 126 !subView.behaviors || | |
| 127 subView.behaviors.indexOf( | |
| 128 tr.ui.analysis.behaviors.AnalysisSubView) < 0) { | |
| 129 throw new Error('Sub-view being added must be a registered Polymer ' + | |
| 130 'element with the sub-view behavior'); | |
| 131 } | |
| 132 | |
| 133 if (!this.selectedSubView_) | 131 if (!this.selectedSubView_) |
| 134 this.selectedSubView = subView; | 132 this.selectedSubView = subView; |
| 135 | 133 |
| 136 this.push('subViews_', subView); | 134 this.push('subViews_', subView); |
| 137 }, | 135 }, |
| 138 | 136 |
| 139 onTabChanged_: function(event) { | 137 onTabChanged_: function(event) { |
| 140 this.selectedSubView = event.model.item; | 138 this.selectedSubView = event.model.item; |
| 141 }, | 139 }, |
| 142 | 140 |
| 143 isChecked_: function(subView) { | 141 isChecked_: function(subView) { |
| 144 return this.selectedSubView_ === subView; | 142 return this.selectedSubView_ === subView; |
| 145 }, | 143 }, |
| 146 | 144 |
| 147 computeRadioId_: function(subView) { | 145 computeRadioId_: function(subView) { |
| 148 // We can't just use the tagName as the radio's ID because there are | 146 // We can't just use the tagName as the radio's ID because there are |
| 149 // instances where a single subview type can handle multiple event types, | 147 // instances where a single subview type can handle multiple event types, |
| 150 // and thus might be present multiple times in a single tab view. In order | 148 // and thus might be present multiple times in a single tab view. In order |
| 151 // to avoid the case where we might have two tabs with the same ID, we | 149 // to avoid the case where we might have two tabs with the same ID, we |
| 152 // uniquify this ID by appending the tab's label with all spaces replaced | 150 // uniquify this ID by appending the tab's label with all spaces replaced |
| 153 // by dashes (because spaces aren't allowed in HTML IDs). | 151 // by dashes (because spaces aren't allowed in HTML IDs). |
| 154 return subView.tagName + '-' + subView.tabLabel.replace(/ /g, '-'); | 152 return subView.tagName + '-' + subView.tabLabel.replace(/ /g, '-'); |
| 155 } | 153 } |
| 156 }); | 154 }); |
| 157 </script> | 155 </script> |
| OLD | NEW |
