| 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="stylesheet" href="/tracing/ui/base/list_view.css"> | |
| 9 | |
| 10 <link rel="import" href="/tracing/base/event.html"> | 8 <link rel="import" href="/tracing/base/event.html"> |
| 11 <link rel="import" href="/tracing/ui/base/container_that_decorates_its_children.
html"> | 9 <link rel="import" href="/tracing/ui/base/container_that_decorates_its_children.
html"> |
| 12 <link rel="import" href="/tracing/ui/base/ui.html"> | 10 <link rel="import" href="/tracing/ui/base/ui.html"> |
| 13 <link rel="import" href="/tracing/ui/base/utils.html"> | 11 <link rel="import" href="/tracing/ui/base/utils.html"> |
| 14 | 12 |
| 15 <script> | 13 <script> |
| 16 'use strict'; | 14 'use strict'; |
| 17 | 15 |
| 18 /** | 16 /** |
| 19 * @fileoverview Simple list view. | 17 * @fileoverview Simple list view. |
| 20 */ | 18 */ |
| 21 tr.exportTo('tr.ui.b', function() { | 19 tr.exportTo('tr.ui.b', function() { |
| 22 /** | 20 /** |
| 23 * @constructor | 21 * @constructor |
| 24 */ | 22 */ |
| 25 const ListView = tr.ui.b.define( | 23 const ListView = tr.ui.b.define( |
| 26 'x-list-view', tr.ui.b.ContainerThatDecoratesItsChildren); | 24 'x-list-view', tr.ui.b.ContainerThatDecoratesItsChildren); |
| 27 | 25 |
| 28 ListView.prototype = { | 26 ListView.prototype = { |
| 29 __proto__: tr.ui.b.ContainerThatDecoratesItsChildren.prototype, | 27 __proto__: tr.ui.b.ContainerThatDecoratesItsChildren.prototype, |
| 30 | 28 |
| 31 decorate() { | 29 decorate() { |
| 32 tr.ui.b.ContainerThatDecoratesItsChildren.prototype.decorate.call(this); | 30 tr.ui.b.ContainerThatDecoratesItsChildren.prototype.decorate.call(this); |
| 33 | 31 |
| 34 Polymer.dom(this).classList.add('x-list-view'); | 32 Polymer.dom(this).classList.add('x-list-view'); |
| 33 this.style.display = 'block'; |
| 34 this.style.userSelect = 'none'; |
| 35 this.style.outline = 'none'; |
| 35 this.onItemClicked_ = this.onItemClicked_.bind(this); | 36 this.onItemClicked_ = this.onItemClicked_.bind(this); |
| 36 this.onKeyDown_ = this.onKeyDown_.bind(this); | 37 this.onKeyDown_ = this.onKeyDown_.bind(this); |
| 37 this.tabIndex = 0; | 38 this.tabIndex = 0; |
| 38 this.addEventListener('keydown', this.onKeyDown_); | 39 this.addEventListener('keydown', this.onKeyDown_); |
| 39 | 40 |
| 40 this.selectionChanged_ = false; | 41 this.selectionChanged_ = false; |
| 41 }, | 42 }, |
| 42 | 43 |
| 43 decorateChild_(item) { | 44 decorateChild_(item) { |
| 44 Polymer.dom(item).classList.add('list-item'); | 45 Polymer.dom(item).classList.add('list-item'); |
| 46 item.style.paddingTop = '2px'; |
| 47 item.style.paddingRight = '4px'; |
| 48 item.style.paddingBottom = '2px'; |
| 49 item.style.paddingLeft = '4px'; |
| 45 item.addEventListener('click', this.onItemClicked_, true); | 50 item.addEventListener('click', this.onItemClicked_, true); |
| 46 | 51 |
| 47 Object.defineProperty( | 52 Object.defineProperty( |
| 48 item, | 53 item, |
| 49 'selected', { | 54 'selected', { |
| 50 configurable: true, | 55 configurable: true, |
| 51 get: () => item.hasAttribute('selected'), | 56 get: () => item.hasAttribute('selected'), |
| 52 set: value => { | 57 set: value => { |
| 53 // |this| is the ListView. | 58 // |this| is the ListView. |
| 54 const oldSelection = this.selectedElement; | 59 const oldSelection = this.selectedElement; |
| 55 if (oldSelection && oldSelection !== item && value) { | 60 if (oldSelection && oldSelection !== item && value) { |
| 56 Polymer.dom(this.selectedElement).removeAttribute('selected'); | 61 Polymer.dom(this.selectedElement).removeAttribute('selected'); |
| 57 } | 62 } |
| 58 if (value) { | 63 if (value) { |
| 59 Polymer.dom(item).setAttribute('selected', 'selected'); | 64 Polymer.dom(item).setAttribute('selected', 'selected'); |
| 65 item.style.backgroundColor = 'rgb(171, 217, 202)'; |
| 66 item.style.outline = '1px dotted rgba(0,0,0,0.1)'; |
| 67 item.style.outlineOffset = 0; |
| 60 } else { | 68 } else { |
| 61 Polymer.dom(item).removeAttribute('selected'); | 69 Polymer.dom(item).removeAttribute('selected'); |
| 70 item.style.backgroundColor = ''; |
| 62 } | 71 } |
| 63 const newSelection = this.selectedElement; | 72 const newSelection = this.selectedElement; |
| 64 if (newSelection !== oldSelection) { | 73 if (newSelection !== oldSelection) { |
| 65 tr.b.dispatchSimpleEvent(this, 'selection-changed', false); | 74 tr.b.dispatchSimpleEvent(this, 'selection-changed', false); |
| 66 } | 75 } |
| 67 }, | 76 }, |
| 68 }); | 77 }); |
| 69 }, | 78 }, |
| 70 | 79 |
| 71 undecorateChild_(item) { | 80 undecorateChild_(item) { |
| (...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 154 e.preventDefault(); | 163 e.preventDefault(); |
| 155 return true; | 164 return true; |
| 156 } | 165 } |
| 157 } | 166 } |
| 158 }, | 167 }, |
| 159 | 168 |
| 160 addItem(textContent) { | 169 addItem(textContent) { |
| 161 const item = document.createElement('div'); | 170 const item = document.createElement('div'); |
| 162 Polymer.dom(item).textContent = textContent; | 171 Polymer.dom(item).textContent = textContent; |
| 163 Polymer.dom(this).appendChild(item); | 172 Polymer.dom(this).appendChild(item); |
| 173 item.style.userSelect = 'none'; |
| 164 return item; | 174 return item; |
| 165 } | 175 } |
| 166 | 176 |
| 167 }; | 177 }; |
| 168 | 178 |
| 169 return { | 179 return { |
| 170 ListView, | 180 ListView, |
| 171 }; | 181 }; |
| 172 }); | 182 }); |
| 173 </script> | 183 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 3017523002:
Fix uses of /deep/ in trace viewer. (Closed)
