Chromium Code Reviews Chromium Code Reviews
Issue 3017523002:
Fix uses of /deep/ in trace viewer. (Closed)
| OLD | NEW |
|---|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <!-- | 2 <!-- |
| 3 Copyright (c) 2015 The Chromium Authors. All rights reserved. | 3 Copyright (c) 2015 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/color.html"> | 8 <link rel="import" href="/tracing/base/color.html"> |
| 9 <link rel="import" href="/tracing/base/math/quad.html"> | 9 <link rel="import" href="/tracing/base/math/quad.html"> |
| 10 <link rel="import" href="/tracing/base/math/range.html"> | 10 <link rel="import" href="/tracing/base/math/range.html"> |
| 11 <link rel="import" href="/tracing/base/raf.html"> | 11 <link rel="import" href="/tracing/base/raf.html"> |
| 12 <link rel="import" href="/tracing/base/unit_scale.html"> | 12 <link rel="import" href="/tracing/base/unit_scale.html"> |
| 13 <link rel="import" href="/tracing/extras/chrome/cc/debug_colors.html"> | 13 <link rel="import" href="/tracing/extras/chrome/cc/debug_colors.html"> |
| 14 <link rel="import" href="/tracing/extras/chrome/cc/picture.html"> | 14 <link rel="import" href="/tracing/extras/chrome/cc/picture.html"> |
| 15 <link rel="import" href="/tracing/extras/chrome/cc/render_pass.html"> | 15 <link rel="import" href="/tracing/extras/chrome/cc/render_pass.html"> |
| 16 <link rel="import" href="/tracing/extras/chrome/cc/tile.html"> | 16 <link rel="import" href="/tracing/extras/chrome/cc/tile.html"> |
| 17 <link rel="import" href="/tracing/extras/chrome/cc/util.html"> | 17 <link rel="import" href="/tracing/extras/chrome/cc/util.html"> |
| 18 <link rel="import" href="/tracing/model/event_set.html"> | 18 <link rel="import" href="/tracing/model/event_set.html"> |
| 19 <link rel="import" href="/tracing/ui/base/info_bar.html"> | 19 <link rel="import" href="/tracing/ui/base/info_bar.html"> |
| 20 <link rel="import" href="/tracing/ui/base/quad_stack_view.html"> | 20 <link rel="import" href="/tracing/ui/base/quad_stack_view.html"> |
| 21 <link rel="import" href="/tracing/ui/base/utils.html"> | 21 <link rel="import" href="/tracing/ui/base/utils.html"> |
| 22 | 22 |
| 23 <style> | |
| 24 * /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view { | |
| 25 position: relative; | |
| 26 } | |
| 27 | |
| 28 * /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view > top-controls { | |
| 29 flex: 0 0 auto; | |
| 30 background-image: -webkit-gradient(linear, | |
| 31 0 0, 100% 0, | |
| 32 from(#E5E5E5), | |
| 33 to(#D1D1D1)); | |
| 34 border-bottom: 1px solid #8e8e8e; | |
| 35 border-top: 1px solid white; | |
| 36 display: flex; | |
| 37 flex-flow: row wrap; | |
| 38 flex-direction: row; | |
| 39 font-size: 14px; | |
| 40 padding-left: 2px; | |
| 41 overflow: hidden; | |
| 42 } | |
| 43 | |
| 44 * /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view > | |
| 45 top-controls input[type='checkbox'] { | |
| 46 vertical-align: -2px; | |
| 47 } | |
| 48 | |
| 49 * /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view > .what-rasterized { | |
| 50 color: -webkit-link; | |
| 51 cursor: pointer; | |
| 52 text-decoration: underline; | |
| 53 position: absolute; | |
| 54 bottom: 10px; | |
| 55 left: 10px; | |
| 56 } | |
| 57 | |
| 58 * /deep/ tr-ui-e-chrome-cc-layer-tree-quad-stack-view > #input-event { | |
| 59 background-image: url('./images/input-event.png'); | |
| 60 display: none; | |
| 61 } | |
| 62 </style> | |
| 63 | |
| 64 <template id='tr-ui-e-chrome-cc-layer-tree-quad-stack-view-template'> | 23 <template id='tr-ui-e-chrome-cc-layer-tree-quad-stack-view-template'> |
| 24 <style> | |
| 25 #input-event { | |
| 26 background-image: url('./images/input-event.png'); | |
| 27 display: none; | |
| 28 } | |
| 29 </style> | |
| 65 <img id='input-event'/> | 30 <img id='input-event'/> |
| 66 </template> | 31 </template> |
| 67 | 32 |
| 68 <script> | 33 <script> |
| 69 'use strict'; | 34 'use strict'; |
| 70 | 35 |
| 71 /** | 36 /** |
| 72 * @fileoverview Graphical view of LayerTreeImpl, with controls for | 37 * @fileoverview Graphical view of LayerTreeImpl, with controls for |
| 73 * type of layer content shown and info bar for content-loading warnings. | 38 * type of layer content shown and info bar for content-loading warnings. |
| 74 */ | 39 */ |
| (...skipping 17 matching lines...) Expand all Loading... | |
| 92 /** | 57 /** |
| 93 * @constructor | 58 * @constructor |
| 94 */ | 59 */ |
| 95 const LayerTreeQuadStackView = | 60 const LayerTreeQuadStackView = |
| 96 tr.ui.b.define('tr-ui-e-chrome-cc-layer-tree-quad-stack-view'); | 61 tr.ui.b.define('tr-ui-e-chrome-cc-layer-tree-quad-stack-view'); |
| 97 | 62 |
| 98 LayerTreeQuadStackView.prototype = { | 63 LayerTreeQuadStackView.prototype = { |
| 99 __proto__: HTMLDivElement.prototype, | 64 __proto__: HTMLDivElement.prototype, |
| 100 | 65 |
| 101 decorate() { | 66 decorate() { |
| 67 this.style.flexGrow = 1; | |
| 68 this.style.flexShrink = 1; | |
| 69 this.style.flexBasis = '100%'; | |
| 70 this.style.flexDirection = 'column'; | |
| 71 this.style.minHeight = 0; | |
| 72 this.style.display = 'flex'; | |
| 73 this.style.width = '100%'; | |
| 74 | |
| 102 this.isRenderPassQuads_ = false; | 75 this.isRenderPassQuads_ = false; |
| 103 this.pictureAsImageData_ = {}; // Maps picture.guid to PictureAsImageData. | 76 this.pictureAsImageData_ = {}; // Maps picture.guid to PictureAsImageData. |
| 104 this.messages_ = []; | 77 this.messages_ = []; |
| 105 this.controls_ = document.createElement('top-controls'); | 78 this.controls_ = document.createElement('top-controls'); |
| 79 this.controls_.style.flexGrow = 0; | |
| 80 this.controls_.style.flexShrink = 0; | |
| 81 this.controls_.style.flexBasis = 'auto'; | |
| 82 this.controls_.style.backgroundImage = | |
| 83 '-webkit-gradient(linear, 0 0, 100% 0, from(#E5E5E5), to(#D1D1D1))'; | |
| 84 this.controls_.style.borderBottom = '1px solid #8e8e8e'; | |
| 85 this.controls_.style.borderTop = '1px solid white'; | |
| 86 this.controls_.style.display = 'flex'; | |
| 87 this.controls_.style.flexDirection = 'row'; | |
| 88 this.controls_.style.flexWrap = 'wrap'; | |
| 89 this.controls_.style.fontSize = '14px'; | |
| 90 this.controls_.style.paddingLeft = '2px'; | |
| 91 this.controls_.style.overflow = 'hidden'; | |
| 106 this.infoBar_ = document.createElement('tr-ui-b-info-bar'); | 92 this.infoBar_ = document.createElement('tr-ui-b-info-bar'); |
| 107 this.quadStackView_ = new tr.ui.b.QuadStackView(); | 93 this.quadStackView_ = new tr.ui.b.QuadStackView(); |
| 108 this.quadStackView_.addEventListener( | 94 this.quadStackView_.addEventListener( |
| 109 'selectionchange', this.onQuadStackViewSelectionChange_.bind(this)); | 95 'selectionchange', this.onQuadStackViewSelectionChange_.bind(this)); |
| 110 this.extraHighlightsByLayerId_ = undefined; | 96 this.extraHighlightsByLayerId_ = undefined; |
| 111 this.inputEventImageData_ = undefined; | 97 this.inputEventImageData_ = undefined; |
| 112 | 98 |
| 113 const m = tr.ui.b.MOUSE_SELECTOR_MODE; | 99 const m = tr.ui.b.MOUSE_SELECTOR_MODE; |
| 114 const mms = this.quadStackView_.mouseModeSelector; | 100 const mms = this.quadStackView_.mouseModeSelector; |
| 115 mms.settingsKey = 'tr.e.cc.layerTreeQuadStackView.mouseModeSelector'; | 101 mms.settingsKey = 'tr.e.cc.layerTreeQuadStackView.mouseModeSelector'; |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 147 value: TILE_HEATMAP_TYPE.USING_GPU_MEMORY} | 133 value: TILE_HEATMAP_TYPE.USING_GPU_MEMORY} |
| 148 ]); | 134 ]); |
| 149 Polymer.dom(this.controls_).appendChild(tileHeatmapSelector); | 135 Polymer.dom(this.controls_).appendChild(tileHeatmapSelector); |
| 150 | 136 |
| 151 const showOtherLayersCheckbox = tr.ui.b.createCheckBox( | 137 const showOtherLayersCheckbox = tr.ui.b.createCheckBox( |
| 152 this, 'showOtherLayers', | 138 this, 'showOtherLayers', |
| 153 'layerView.showOtherLayers', true, | 139 'layerView.showOtherLayers', true, |
| 154 'Other layers/passes'); | 140 'Other layers/passes'); |
| 155 showOtherLayersCheckbox.title = | 141 showOtherLayersCheckbox.title = |
| 156 'When checked, show all layers, selected or not.'; | 142 'When checked, show all layers, selected or not.'; |
| 143 showOtherLayersCheckbox.style.verticalAlign = '-2px'; | |
| 157 Polymer.dom(this.controls_).appendChild(showOtherLayersCheckbox); | 144 Polymer.dom(this.controls_).appendChild(showOtherLayersCheckbox); |
| 158 | 145 |
| 159 const showInvalidationsCheckbox = tr.ui.b.createCheckBox( | 146 const showInvalidationsCheckbox = tr.ui.b.createCheckBox( |
| 160 this, 'showInvalidations', | 147 this, 'showInvalidations', |
| 161 'layerView.showInvalidations', true, | 148 'layerView.showInvalidations', true, |
| 162 'Invalidations'); | 149 'Invalidations'); |
| 163 showInvalidationsCheckbox.title = | 150 showInvalidationsCheckbox.title = |
| 164 'When checked, compositing invalidations are highlighted in red'; | 151 'When checked, compositing invalidations are highlighted in red'; |
| 152 showInvalidationsCheckbox.style.verticalAlign = '-2px'; | |
| 165 Polymer.dom(this.controls_).appendChild(showInvalidationsCheckbox); | 153 Polymer.dom(this.controls_).appendChild(showInvalidationsCheckbox); |
| 166 | 154 |
| 167 const showUnrecordedRegionCheckbox = tr.ui.b.createCheckBox( | 155 const showUnrecordedRegionCheckbox = tr.ui.b.createCheckBox( |
| 168 this, 'showUnrecordedRegion', | 156 this, 'showUnrecordedRegion', |
| 169 'layerView.showUnrecordedRegion', true, | 157 'layerView.showUnrecordedRegion', true, |
| 170 'Unrecorded area'); | 158 'Unrecorded area'); |
| 171 showUnrecordedRegionCheckbox.title = | 159 showUnrecordedRegionCheckbox.title = |
| 172 'When checked, unrecorded areas are highlighted in yellow'; | 160 'When checked, unrecorded areas are highlighted in yellow'; |
| 161 showUnrecordedRegionCheckbox.style.verticalAlign = '-2px'; | |
| 173 Polymer.dom(this.controls_).appendChild(showUnrecordedRegionCheckbox); | 162 Polymer.dom(this.controls_).appendChild(showUnrecordedRegionCheckbox); |
| 174 | 163 |
| 175 const showBottlenecksCheckbox = tr.ui.b.createCheckBox( | 164 const showBottlenecksCheckbox = tr.ui.b.createCheckBox( |
| 176 this, 'showBottlenecks', | 165 this, 'showBottlenecks', |
| 177 'layerView.showBottlenecks', true, | 166 'layerView.showBottlenecks', true, |
| 178 'Bottlenecks'); | 167 'Bottlenecks'); |
| 179 showBottlenecksCheckbox.title = | 168 showBottlenecksCheckbox.title = |
| 180 'When checked, scroll bottlenecks are highlighted'; | 169 'When checked, scroll bottlenecks are highlighted'; |
| 170 showBottlenecksCheckbox.style.verticalAlign = '-2px'; | |
| 181 Polymer.dom(this.controls_).appendChild(showBottlenecksCheckbox); | 171 Polymer.dom(this.controls_).appendChild(showBottlenecksCheckbox); |
| 182 | 172 |
| 183 const showLayoutRectsCheckbox = tr.ui.b.createCheckBox( | 173 const showLayoutRectsCheckbox = tr.ui.b.createCheckBox( |
| 184 this, 'showLayoutRects', | 174 this, 'showLayoutRects', |
| 185 'layerView.showLayoutRects', false, | 175 'layerView.showLayoutRects', false, |
| 186 'Layout rects'); | 176 'Layout rects'); |
| 187 showLayoutRectsCheckbox.title = | 177 showLayoutRectsCheckbox.title = |
| 188 'When checked, shows rects for regions where layout happened'; | 178 'When checked, shows rects for regions where layout happened'; |
| 179 showLayoutRectsCheckbox.style.verticalAlign = '-2px'; | |
| 189 Polymer.dom(this.controls_).appendChild(showLayoutRectsCheckbox); | 180 Polymer.dom(this.controls_).appendChild(showLayoutRectsCheckbox); |
| 190 | 181 |
| 191 const showContentsCheckbox = tr.ui.b.createCheckBox( | 182 const showContentsCheckbox = tr.ui.b.createCheckBox( |
| 192 this, 'showContents', | 183 this, 'showContents', |
| 193 'layerView.showContents', true, | 184 'layerView.showContents', true, |
| 194 'Contents'); | 185 'Contents'); |
| 195 showContentsCheckbox.title = | 186 showContentsCheckbox.title = |
| 196 'When checked, show the rendered contents inside the layer outlines'; | 187 'When checked, show the rendered contents inside the layer outlines'; |
| 188 showContentsCheckbox.style.verticalAlign = '-2px'; | |
| 197 Polymer.dom(this.controls_).appendChild(showContentsCheckbox); | 189 Polymer.dom(this.controls_).appendChild(showContentsCheckbox); |
| 198 | 190 |
| 199 const showAnimationBoundsCheckbox = tr.ui.b.createCheckBox( | 191 const showAnimationBoundsCheckbox = tr.ui.b.createCheckBox( |
| 200 this, 'showAnimationBounds', | 192 this, 'showAnimationBounds', |
| 201 'layerView.showAnimationBounds', false, | 193 'layerView.showAnimationBounds', false, |
| 202 'Animation Bounds'); | 194 'Animation Bounds'); |
| 203 showAnimationBoundsCheckbox.title = 'When checked, show a border around' + | 195 showAnimationBoundsCheckbox.title = 'When checked, show a border around' + |
| 204 ' a layer showing the extent of its animation.'; | 196 ' a layer showing the extent of its animation.'; |
| 197 showAnimationBoundsCheckbox.style.verticalAlign = '-2px'; | |
|
fmeawad
2017/09/27 20:51:24
Can we move -2px into a const called VERTICAL_ALIG
| |
| 205 Polymer.dom(this.controls_).appendChild(showAnimationBoundsCheckbox); | 198 Polymer.dom(this.controls_).appendChild(showAnimationBoundsCheckbox); |
| 206 | 199 |
| 207 const showInputEventsCheckbox = tr.ui.b.createCheckBox( | 200 const showInputEventsCheckbox = tr.ui.b.createCheckBox( |
| 208 this, 'showInputEvents', | 201 this, 'showInputEvents', |
| 209 'layerView.showInputEvents', true, | 202 'layerView.showInputEvents', true, |
| 210 'Input events'); | 203 'Input events'); |
| 211 showInputEventsCheckbox.title = 'When checked, input events are ' + | 204 showInputEventsCheckbox.title = 'When checked, input events are ' + |
| 212 'displayed as circles.'; | 205 'displayed as circles.'; |
| 206 showInputEventsCheckbox.style.verticalAlign = '-2px'; | |
| 213 Polymer.dom(this.controls_).appendChild(showInputEventsCheckbox); | 207 Polymer.dom(this.controls_).appendChild(showInputEventsCheckbox); |
| 214 | 208 |
| 215 this.whatRasterizedLink_ = document.createElement('a'); | 209 this.whatRasterizedLink_ = document.createElement('a'); |
| 216 Polymer.dom(this.whatRasterizedLink_).classList.add('what-rasterized'); | 210 Polymer.dom(this.whatRasterizedLink_).classList.add('what-rasterized'); |
| 217 Polymer.dom(this.whatRasterizedLink_).textContent = 'What rasterized?'; | 211 Polymer.dom(this.whatRasterizedLink_).textContent = 'What rasterized?'; |
| 218 this.whatRasterizedLink_.addEventListener( | 212 this.whatRasterizedLink_.addEventListener( |
| 219 'click', this.onWhatRasterizedLinkClicked_.bind(this)); | 213 'click', this.onWhatRasterizedLinkClicked_.bind(this)); |
| 220 Polymer.dom(this).appendChild(this.whatRasterizedLink_); | 214 Polymer.dom(this).appendChild(this.whatRasterizedLink_); |
| 221 }, | 215 }, |
| 222 | 216 |
| (...skipping 980 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 1203 event.selection = new tr.model.EventSet(tasks); | 1197 event.selection = new tr.model.EventSet(tasks); |
| 1204 this.dispatchEvent(event); | 1198 this.dispatchEvent(event); |
| 1205 } | 1199 } |
| 1206 }; | 1200 }; |
| 1207 | 1201 |
| 1208 return { | 1202 return { |
| 1209 LayerTreeQuadStackView, | 1203 LayerTreeQuadStackView, |
| 1210 }; | 1204 }; |
| 1211 }); | 1205 }); |
| 1212 </script> | 1206 </script> |
| OLD | NEW |
