Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 1 | /* |
| 2 | * Copyright (C) 2013 Google Inc. All rights reserved. |
| 3 | * |
| 4 | * Redistribution and use in source and binary forms, with or without |
| 5 | * modification, are permitted provided that the following conditions are |
| 6 | * met: |
| 7 | * |
| 8 | * * Redistributions of source code must retain the above copyright |
| 9 | * notice, this list of conditions and the following disclaimer. |
| 10 | * * Redistributions in binary form must reproduce the above |
| 11 | * copyright notice, this list of conditions and the following disclaimer |
| 12 | * in the documentation and/or other materials provided with the |
| 13 | * distribution. |
| 14 | * * Neither the name of Google Inc. nor the names of its |
| 15 | * contributors may be used to endorse or promote products derived from |
| 16 | * this software without specific prior written permission. |
| 17 | * |
| 18 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
| 19 | * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
| 20 | * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
| 21 | * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
| 22 | * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
| 23 | * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
| 24 | * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
| 25 | * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
| 26 | * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 27 | * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
| 28 | * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 29 | */ |
Paul Lewis | ce12468 | 2020-01-10 15:42:55 | [diff] [blame] | 30 | |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 31 | import * as Common from '../common/common.js'; |
Jack Franklin | 9c225ca | 2020-04-29 09:55:17 | [diff] [blame] | 32 | import * as Platform from '../platform/platform.js'; |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 33 | import * as SDK from '../sdk/sdk.js'; |
| 34 | import * as UI from '../ui/ui.js'; |
| 35 | |
Paul Lewis | ce12468 | 2020-01-10 15:42:55 | [diff] [blame] | 36 | import {LayerView, LayerViewHost, ScrollRectSelection, Selection, SnapshotSelection, Type,} from './LayerViewHost.js'; // eslint-disable-line no-unused-vars |
| 37 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 38 | /** |
Paul Lewis | ce12468 | 2020-01-10 15:42:55 | [diff] [blame] | 39 | * @implements {LayerView} |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 40 | * @unrestricted |
| 41 | */ |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 42 | export class LayerDetailsView extends UI.Widget.Widget { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 43 | /** |
Paul Lewis | ce12468 | 2020-01-10 15:42:55 | [diff] [blame] | 44 | * @param {!LayerViewHost} layerViewHost |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 45 | */ |
| 46 | constructor(layerViewHost) { |
| 47 | super(true); |
Jack Franklin | 71519f8 | 2020-11-03 12:08:59 | [diff] [blame^] | 48 | this.registerRequiredCSS('layer_viewer/layerDetailsView.css', {enableLegacyPatching: true}); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 49 | this._layerViewHost = layerViewHost; |
| 50 | this._layerViewHost.registerView(this); |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 51 | this._emptyWidget = new UI.EmptyWidget.EmptyWidget(Common.UIString.UIString('Select a layer to see its details')); |
Michael Liao | f2ae96f | 2019-10-21 19:01:04 | [diff] [blame] | 52 | this._layerSnapshotMap = this._layerViewHost.getLayerSnapshotMap(); |
Alex Rudenko | 238b58a | 2020-10-12 09:09:45 | [diff] [blame] | 53 | |
| 54 | /** |
| 55 | * @type {!HTMLElement} |
| 56 | */ |
| 57 | this._tableElement; |
| 58 | /** |
| 59 | * @type {!HTMLElement} |
| 60 | */ |
| 61 | this._tbodyElement; |
| 62 | /** |
| 63 | * @type {!HTMLElement} |
| 64 | */ |
| 65 | this._sizeCell; |
| 66 | /** |
| 67 | * @type {!HTMLElement} |
| 68 | */ |
| 69 | this._compositingReasonsCell; |
| 70 | /** |
| 71 | * @type {!HTMLElement} |
| 72 | */ |
| 73 | this._memoryEstimateCell; |
| 74 | /** |
| 75 | * @type {!HTMLElement} |
| 76 | */ |
| 77 | this._paintCountCell; |
| 78 | /** |
| 79 | * @type {!HTMLElement} |
| 80 | */ |
| 81 | this._scrollRectsCell; |
| 82 | /** |
| 83 | * @type {!HTMLElement} |
| 84 | */ |
| 85 | this._stickyPositionConstraintCell; |
| 86 | /** |
| 87 | * @type {!HTMLElement} |
| 88 | */ |
| 89 | this._paintProfilerLink; |
| 90 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 91 | this._buildContent(); |
Alex Rudenko | 238b58a | 2020-10-12 09:09:45 | [diff] [blame] | 92 | /** |
| 93 | * @type {?Selection} |
| 94 | */ |
| 95 | this._selection = null; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 96 | } |
| 97 | |
| 98 | /** |
Paul Lewis | ce12468 | 2020-01-10 15:42:55 | [diff] [blame] | 99 | * @param {?Selection} selection |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 100 | * @override |
| 101 | */ |
| 102 | hoverObject(selection) { |
| 103 | } |
| 104 | |
| 105 | /** |
Paul Lewis | ce12468 | 2020-01-10 15:42:55 | [diff] [blame] | 106 | * @param {?Selection} selection |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 107 | * @override |
| 108 | */ |
| 109 | selectObject(selection) { |
| 110 | this._selection = selection; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 111 | if (this.isShowing()) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 112 | this.update(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 113 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 114 | } |
| 115 | |
| 116 | /** |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 117 | * @param {?SDK.LayerTreeBase.LayerTreeBase} layerTree |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 118 | * @override |
| 119 | */ |
| 120 | setLayerTree(layerTree) { |
| 121 | } |
| 122 | |
| 123 | /** |
| 124 | * @override |
| 125 | */ |
| 126 | wasShown() { |
| 127 | super.wasShown(); |
| 128 | this.update(); |
| 129 | } |
| 130 | |
| 131 | /** |
| 132 | * @param {number} index |
| 133 | * @param {!Event} event |
| 134 | */ |
| 135 | _onScrollRectClicked(index, event) { |
Alex Rudenko | 238b58a | 2020-10-12 09:09:45 | [diff] [blame] | 136 | if (/** @type {!KeyboardEvent} */ (event).which !== 1) { |
| 137 | return; |
| 138 | } |
| 139 | if (!this._selection) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 140 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 141 | } |
Paul Lewis | ce12468 | 2020-01-10 15:42:55 | [diff] [blame] | 142 | this._layerViewHost.selectObject(new ScrollRectSelection(this._selection.layer(), index)); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 143 | } |
| 144 | |
Michael Liao | f2ae96f | 2019-10-21 19:01:04 | [diff] [blame] | 145 | _invokeProfilerLink() { |
Alex Rudenko | 238b58a | 2020-10-12 09:09:45 | [diff] [blame] | 146 | if (!this._selection) { |
| 147 | return; |
| 148 | } |
Paul Lewis | ce12468 | 2020-01-10 15:42:55 | [diff] [blame] | 149 | const snapshotSelection = this._selection.type() === Type.Snapshot ? |
Michael Liao | f2ae96f | 2019-10-21 19:01:04 | [diff] [blame] | 150 | this._selection : |
| 151 | this._layerSnapshotMap.get(this._selection.layer()); |
| 152 | if (snapshotSelection) { |
Paul Lewis | c3ea260 | 2019-11-27 11:55:16 | [diff] [blame] | 153 | this.dispatchEventToListeners(Events.PaintProfilerRequested, snapshotSelection); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 154 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 155 | } |
| 156 | |
| 157 | /** |
| 158 | * @param {!Protocol.LayerTree.ScrollRect} scrollRect |
| 159 | * @param {number} index |
| 160 | */ |
| 161 | _createScrollRectElement(scrollRect, index) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 162 | if (index) { |
Sigurd Schneider | 23c5297 | 2020-10-13 09:31:14 | [diff] [blame] | 163 | UI.UIUtils.createTextChild(this._scrollRectsCell, ', '); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 164 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 165 | const element = this._scrollRectsCell.createChild('span', 'scroll-rect'); |
Alex Rudenko | 238b58a | 2020-10-12 09:09:45 | [diff] [blame] | 166 | if (this._selection && /** @type {!ScrollRectSelection} */ (this._selection).scrollRectIndex === index) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 167 | element.classList.add('active'); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 168 | } |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 169 | element.textContent = Common.UIString.UIString( |
Paul Lewis | ce12468 | 2020-01-10 15:42:55 | [diff] [blame] | 170 | '%s %d × %d (at %d, %d)', slowScrollRectNames.get(scrollRect.type), scrollRect.rect.width, |
Paul Lewis | c3ea260 | 2019-11-27 11:55:16 | [diff] [blame] | 171 | scrollRect.rect.height, scrollRect.rect.x, scrollRect.rect.y); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 172 | element.addEventListener('click', this._onScrollRectClicked.bind(this, index), false); |
| 173 | } |
| 174 | |
| 175 | /** |
| 176 | * @param {string} title |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 177 | * @param {?SDK.LayerTreeBase.Layer} layer |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 178 | * @return {string} |
| 179 | */ |
| 180 | _formatStickyAncestorLayer(title, layer) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 181 | if (!layer) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 182 | return ''; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 183 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 184 | |
| 185 | const node = layer.nodeForSelfOrAncestor(); |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 186 | const name = node ? node.simpleSelector() : Common.UIString.UIString('<unnamed>'); |
| 187 | return Common.UIString.UIString('%s: %s (%s)', title, name, layer.id()); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 188 | } |
| 189 | |
| 190 | /** |
| 191 | * @param {string} title |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 192 | * @param {?SDK.LayerTreeBase.Layer} layer |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 193 | */ |
| 194 | _createStickyAncestorChild(title, layer) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 195 | if (!layer) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 196 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 197 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 198 | |
Sigurd Schneider | 23c5297 | 2020-10-13 09:31:14 | [diff] [blame] | 199 | UI.UIUtils.createTextChild(this._stickyPositionConstraintCell, ', '); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 200 | const child = this._stickyPositionConstraintCell.createChild('span'); |
| 201 | child.textContent = this._formatStickyAncestorLayer(title, layer); |
| 202 | } |
| 203 | |
| 204 | /** |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 205 | * @param {?SDK.LayerTreeBase.StickyPositionConstraint} constraint |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 206 | */ |
| 207 | _populateStickyPositionConstraintCell(constraint) { |
| 208 | this._stickyPositionConstraintCell.removeChildren(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 209 | if (!constraint) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 210 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 211 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 212 | |
| 213 | const stickyBoxRect = constraint.stickyBoxRect(); |
| 214 | const stickyBoxRectElement = this._stickyPositionConstraintCell.createChild('span'); |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 215 | stickyBoxRectElement.textContent = Common.UIString.UIString( |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 216 | 'Sticky Box %d × %d (at %d, %d)', stickyBoxRect.width, stickyBoxRect.height, stickyBoxRect.x, stickyBoxRect.y); |
| 217 | |
Sigurd Schneider | 23c5297 | 2020-10-13 09:31:14 | [diff] [blame] | 218 | UI.UIUtils.createTextChild(this._stickyPositionConstraintCell, ', '); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 219 | |
| 220 | const containingBlockRect = constraint.containingBlockRect(); |
| 221 | const containingBlockRectElement = this._stickyPositionConstraintCell.createChild('span'); |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 222 | containingBlockRectElement.textContent = Common.UIString.UIString( |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 223 | 'Containing Block %d × %d (at %d, %d)', containingBlockRect.width, containingBlockRect.height, |
| 224 | containingBlockRect.x, containingBlockRect.y); |
| 225 | |
| 226 | this._createStickyAncestorChild( |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 227 | Common.UIString.UIString('Nearest Layer Shifting Sticky Box'), constraint.nearestLayerShiftingStickyBox()); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 228 | this._createStickyAncestorChild( |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 229 | Common.UIString.UIString('Nearest Layer Shifting Containing Block'), |
| 230 | constraint.nearestLayerShiftingContainingBlock()); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 231 | } |
| 232 | |
| 233 | update() { |
| 234 | const layer = this._selection && this._selection.layer(); |
| 235 | if (!layer) { |
| 236 | this._tableElement.remove(); |
Michael Liao | f2ae96f | 2019-10-21 19:01:04 | [diff] [blame] | 237 | this._paintProfilerLink.remove(); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 238 | this._emptyWidget.show(this.contentElement); |
| 239 | return; |
| 240 | } |
| 241 | this._emptyWidget.detach(); |
| 242 | this.contentElement.appendChild(this._tableElement); |
Michael Liao | f2ae96f | 2019-10-21 19:01:04 | [diff] [blame] | 243 | this.contentElement.appendChild(this._paintProfilerLink); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 244 | this._sizeCell.textContent = |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 245 | Common.UIString.UIString('%d × %d (at %d,%d)', layer.width(), layer.height(), layer.offsetX(), layer.offsetY()); |
Alex Rudenko | 238b58a | 2020-10-12 09:09:45 | [diff] [blame] | 246 | if (this._paintCountCell.parentElement) { |
| 247 | this._paintCountCell.parentElement.classList.toggle('hidden', !layer.paintCount()); |
| 248 | } |
| 249 | this._paintCountCell.textContent = String(layer.paintCount()); |
Jack Franklin | 9c225ca | 2020-04-29 09:55:17 | [diff] [blame] | 250 | this._memoryEstimateCell.textContent = Platform.NumberUtilities.bytesToString(layer.gpuMemoryUsage()); |
Lorne Mitchell | f768708 | 2020-01-30 18:49:44 | [diff] [blame] | 251 | layer.requestCompositingReasonIds().then(this._updateCompositingReasons.bind(this)); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 252 | this._scrollRectsCell.removeChildren(); |
| 253 | layer.scrollRects().forEach(this._createScrollRectElement.bind(this)); |
| 254 | this._populateStickyPositionConstraintCell(layer.stickyPositionConstraint()); |
Alex Rudenko | 238b58a | 2020-10-12 09:09:45 | [diff] [blame] | 255 | const snapshot = this._selection && this._selection.type() === Type.Snapshot ? |
Paul Lewis | ce12468 | 2020-01-10 15:42:55 | [diff] [blame] | 256 | /** @type {!SnapshotSelection} */ (this._selection).snapshot() : |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 257 | null; |
Michael Liao | f2ae96f | 2019-10-21 19:01:04 | [diff] [blame] | 258 | |
| 259 | this._paintProfilerLink.classList.toggle('hidden', !(this._layerSnapshotMap.has(layer) || snapshot)); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 260 | } |
| 261 | |
| 262 | _buildContent() { |
Alex Rudenko | 238b58a | 2020-10-12 09:09:45 | [diff] [blame] | 263 | this._tableElement = /** @type {!HTMLElement} */ (this.contentElement.createChild('table')); |
| 264 | this._tbodyElement = /** @type {!HTMLElement} */ (this._tableElement.createChild('tbody')); |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 265 | this._sizeCell = this._createRow(Common.UIString.UIString('Size')); |
| 266 | this._compositingReasonsCell = this._createRow(Common.UIString.UIString('Compositing Reasons')); |
| 267 | this._memoryEstimateCell = this._createRow(Common.UIString.UIString('Memory estimate')); |
| 268 | this._paintCountCell = this._createRow(Common.UIString.UIString('Paint count')); |
| 269 | this._scrollRectsCell = this._createRow(Common.UIString.UIString('Slow scroll regions')); |
| 270 | this._stickyPositionConstraintCell = this._createRow(Common.UIString.UIString('Sticky position constraint')); |
Alex Rudenko | 238b58a | 2020-10-12 09:09:45 | [diff] [blame] | 271 | this._paintProfilerLink = |
| 272 | /** @type {!HTMLElement} */ (this.contentElement.createChild('span', 'hidden devtools-link link-margin')); |
Michael Liao | f2ae96f | 2019-10-21 19:01:04 | [diff] [blame] | 273 | UI.ARIAUtils.markAsLink(this._paintProfilerLink); |
| 274 | this._paintProfilerLink.textContent = ls`Paint Profiler`; |
| 275 | this._paintProfilerLink.tabIndex = 0; |
| 276 | this._paintProfilerLink.addEventListener('click', e => { |
| 277 | e.consume(true); |
| 278 | this._invokeProfilerLink(); |
| 279 | }); |
| 280 | this._paintProfilerLink.addEventListener('keydown', event => { |
| 281 | if (isEnterKey(event)) { |
| 282 | event.consume(); |
| 283 | this._invokeProfilerLink(); |
| 284 | } |
| 285 | }); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 286 | } |
| 287 | |
| 288 | /** |
| 289 | * @param {string} title |
| 290 | */ |
| 291 | _createRow(title) { |
| 292 | const tr = this._tbodyElement.createChild('tr'); |
| 293 | const titleCell = tr.createChild('td'); |
| 294 | titleCell.textContent = title; |
| 295 | return tr.createChild('td'); |
| 296 | } |
| 297 | |
| 298 | /** |
Lorne Mitchell | f768708 | 2020-01-30 18:49:44 | [diff] [blame] | 299 | * @param {!Array.<string>} compositingReasonIds |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 300 | */ |
Lorne Mitchell | f768708 | 2020-01-30 18:49:44 | [diff] [blame] | 301 | _updateCompositingReasons(compositingReasonIds) { |
| 302 | if (!compositingReasonIds || !compositingReasonIds.length) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 303 | this._compositingReasonsCell.textContent = 'n/a'; |
| 304 | return; |
| 305 | } |
| 306 | this._compositingReasonsCell.removeChildren(); |
| 307 | const list = this._compositingReasonsCell.createChild('ul'); |
Lorne Mitchell | f768708 | 2020-01-30 18:49:44 | [diff] [blame] | 308 | const compositingReasons = LayerDetailsView.getCompositingReasons(compositingReasonIds); |
| 309 | for (const compositingReason of compositingReasons) { |
| 310 | list.createChild('li').textContent = compositingReason; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 311 | } |
| 312 | } |
Lorne Mitchell | f768708 | 2020-01-30 18:49:44 | [diff] [blame] | 313 | |
| 314 | /** |
| 315 | * @param {!Array.<string>} compositingReasonIds |
| 316 | */ |
| 317 | static getCompositingReasons(compositingReasonIds) { |
| 318 | const compositingReasons = []; |
| 319 | for (const compositingReasonId of compositingReasonIds) { |
| 320 | const compositingReason = compositingReasonIdToReason.get(compositingReasonId); |
| 321 | if (compositingReason) { |
| 322 | compositingReasons.push(compositingReason); |
| 323 | } else { |
| 324 | console.error(`Compositing reason id '${compositingReasonId}' is not recognized.`); |
| 325 | } |
| 326 | } |
| 327 | return compositingReasons; |
| 328 | } |
Paul Lewis | c3ea260 | 2019-11-27 11:55:16 | [diff] [blame] | 329 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 330 | |
Lorne Mitchell | f768708 | 2020-01-30 18:49:44 | [diff] [blame] | 331 | // The compositing reason IDs are defined in third_party/blink/renderer/platform/graphics/compositing_reasons.cc |
| 332 | const compositingReasonIdToReason = new Map([ |
| 333 | ['transform3D', ls`Has a 3d transform.`], |
| 334 | ['video', ls`Is an accelerated video.`], |
| 335 | [ |
| 336 | 'canvas', |
| 337 | ls |
| 338 | `Is an accelerated canvas, or is a display list backed canvas that was promoted to a layer based on a performance heuristic.` |
| 339 | ], |
| 340 | ['plugin', ls`Is an accelerated plugin.`], |
| 341 | ['iFrame', ls`Is an accelerated iFrame.`], |
| 342 | ['backfaceVisibilityHidden', ls`Has backface-visibility: hidden.`], |
| 343 | ['activeTransformAnimation', ls`Has an active accelerated transform animation or transition.`], |
| 344 | ['activeOpacityAnimation', ls`Has an active accelerated opacity animation or transition.`], |
| 345 | ['activeFilterAnimation', ls`Has an active accelerated filter animation or transition.`], |
| 346 | ['activeBackdropFilterAnimation', ls`Has an active accelerated backdrop filter animation or transition.`], |
| 347 | ['immersiveArOverlay', ls`Is DOM overlay for WebXR immersive-ar mode.`], |
| 348 | ['scrollDependentPosition', ls`Is fixed or sticky position.`], |
| 349 | ['overflowScrolling', ls`Is a scrollable overflow element.`], |
| 350 | ['overflowScrollingParent', ls`Scroll parent is not an ancestor.`], |
| 351 | ['outOfFlowClipping', ls`Has clipping ancestor.`], |
| 352 | ['videoOverlay', ls`Is overlay controls for video.`], |
| 353 | ['willChangeTransform', ls`Has a will-change: transform compositing hint.`], |
| 354 | ['willChangeOpacity', ls`Has a will-change: opacity compositing hint.`], |
| 355 | ['willChangeOther', ls`Has a will-change compositing hint other than transform and opacity.`], |
| 356 | ['backdropFilter', ls`Has a backdrop filter.`], |
| 357 | ['rootScroller', ls`Is the document.rootScroller.`], |
| 358 | ['assumedOverlap', ls`Might overlap other composited content.`], |
| 359 | ['overlap', ls`Overlaps other composited content.`], |
| 360 | ['negativeZIndexChildren', ls`Parent with composited negative z-index content.`], |
| 361 | ['squashingDisallowed', ls`Layer was separately composited because it could not be squashed.`], |
| 362 | [ |
| 363 | 'opacityWithCompositedDescendants', |
| 364 | ls`Has opacity that needs to be applied by compositor because of composited descendants.` |
| 365 | ], |
| 366 | [ |
| 367 | 'maskWithCompositedDescendants', |
| 368 | ls`Has a mask that needs to be known by compositor because of composited descendants.` |
| 369 | ], |
| 370 | [ |
| 371 | 'reflectionWithCompositedDescendants', |
| 372 | ls`Has a reflection that needs to be known by compositor because of composited descendants.` |
| 373 | ], |
| 374 | [ |
| 375 | 'filterWithCompositedDescendants', |
| 376 | ls`Has a filter effect that needs to be known by compositor because of composited descendants.` |
| 377 | ], |
| 378 | [ |
| 379 | 'blendingWithCompositedDescendants', |
| 380 | ls`Has a blending effect that needs to be known by compositor because of composited descendants.` |
| 381 | ], |
| 382 | [ |
| 383 | 'clipsCompositingDescendants', |
| 384 | ls`Has a clip that needs to be known by compositor because of composited descendants.` |
| 385 | ], |
| 386 | [ |
| 387 | 'perspectiveWith3DDescendants', |
| 388 | ls`Has a perspective transform that needs to be known by compositor because of 3d descendants.` |
| 389 | ], |
| 390 | [ |
| 391 | 'preserve3DWith3DDescendants', |
| 392 | ls`Has a preserves-3d property that needs to be known by compositor because of 3d descendants.` |
| 393 | ], |
| 394 | ['isolateCompositedDescendants', ls`Should isolate descendants to apply a blend effect.`], |
| 395 | ['positionFixedWithCompositedDescendants', ls`Is a position:fixed element with composited descendants.`], |
| 396 | ['root', ls`Is the root layer.`], |
| 397 | ['layerForHorizontalScrollbar', ls`Secondary layer, the horizontal scrollbar layer.`], |
| 398 | ['layerForVerticalScrollbar', ls`Secondary layer, the vertical scrollbar layer.`], |
| 399 | ['layerForOverflowControlsHost', ls`Secondary layer, the overflow controls host layer.`], |
| 400 | ['layerForScrollCorner', ls`Secondary layer, the scroll corner layer.`], |
| 401 | ['layerForScrollingContents', ls`Secondary layer, to house contents that can be scrolled.`], |
| 402 | ['layerForScrollingContainer', ls`Secondary layer, used to position the scrolling contents while scrolling.`], |
| 403 | ['layerForSquashingContents', ls`Secondary layer, home for a group of squashable content.`], |
| 404 | [ |
| 405 | 'layerForSquashingContainer', |
| 406 | ls`Secondary layer, no-op layer to place the squashing layer correctly in the composited layer tree.` |
| 407 | ], |
| 408 | [ |
| 409 | 'layerForForeground', |
| 410 | ls`Secondary layer, to contain any normal flow and positive z-index contents on top of a negative z-index layer.` |
| 411 | ], |
| 412 | ['layerForMask', ls`Secondary layer, to contain the mask contents.`], |
| 413 | ['layerForDecoration', ls`Layer painted on top of other layers as decoration.`], |
| 414 | ['layerForOther', ls`Layer for link highlight, frame overlay, etc.`] |
| 415 | ]); |
| 416 | |
| 417 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 418 | /** @enum {symbol} */ |
Paul Lewis | c3ea260 | 2019-11-27 11:55:16 | [diff] [blame] | 419 | export const Events = { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 420 | PaintProfilerRequested: Symbol('PaintProfilerRequested') |
| 421 | }; |
| 422 | |
Paul Lewis | ce12468 | 2020-01-10 15:42:55 | [diff] [blame] | 423 | export const slowScrollRectNames = new Map([ |
Tim van der Lippe | 288f401 | 2020-02-13 14:10:02 | [diff] [blame] | 424 | [SDK.LayerTreeBase.Layer.ScrollRectType.NonFastScrollable, Common.UIString.UIString('Non fast scrollable')], |
| 425 | [SDK.LayerTreeBase.Layer.ScrollRectType.TouchEventHandler, Common.UIString.UIString('Touch event handler')], |
| 426 | [SDK.LayerTreeBase.Layer.ScrollRectType.WheelEventHandler, Common.UIString.UIString('Wheel event handler')], |
| 427 | [SDK.LayerTreeBase.Layer.ScrollRectType.RepaintsOnScroll, Common.UIString.UIString('Repaints on scroll')], |
| 428 | [ |
| 429 | SDK.LayerTreeBase.Layer.ScrollRectType.MainThreadScrollingReason, |
| 430 | Common.UIString.UIString('Main thread scrolling reason') |
| 431 | ] |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 432 | ]); |