DevTools: extract a component for layer viewer

This lets the layer view to be reused without bringing the entire Timeline
panel as a dependency. Also, made all component widgets of the layer viewer
to be web components.

Review-Url: https://codereview.chromium.org/2358253002
Cr-Commit-Position: refs/heads/master@{#420565}

third_party/WebKit/Source/devtools/BUILD.gn

@@ -310,6 +310,7 @@ devtools_module_json_files = [
   "front_end/heap_snapshot_worker/module.json",
   "front_end/host/module.json",
   "front_end/layers/module.json",
+  "front_end/layer_viewer/module.json",
   "front_end/main/module.json",
   "front_end/network/module.json",
   "front_end/platform/module.json",
@@ -688,18 +689,24 @@ devtools_timeline_model_js_files = [
   "front_end/timeline_model/TimelineModel.js",
   "front_end/timeline_model/TimelineProfileTree.js",
 ]
+devtools_layer_viewer_js_files = [
+  "front_end/layer_viewer/LayerDetailsView.js",
+  "front_end/layer_viewer/LayerTreeOutline.js",
+  "front_end/layer_viewer/LayerViewHost.js",
+  "front_end/layer_viewer/Layers3DView.js",
+  "front_end/layer_viewer/PaintProfilerView.js",
+  "front_end/layer_viewer/TransformController.js",
+  "front_end/layer_viewer/layerDetailsView.css",
+  "front_end/layer_viewer/layers3DView.css",
+  "front_end/layer_viewer/paintProfiler.css",
+]
 devtools_timeline_js_files = [
   "front_end/timeline/invalidationsTree.css",
   "front_end/timeline/timelineFlamechartPopover.css",
   "front_end/timeline/timelinePanel.css",
   "front_end/timeline/timelineStatusDialog.css",
   "front_end/timeline/CountersGraph.js",
-  "front_end/timeline/LayerDetailsView.js",
-  "front_end/timeline/LayerTreeOutline.js",
-  "front_end/timeline/LayerViewHost.js",
-  "front_end/timeline/Layers3DView.js",
   "front_end/timeline/MemoryCountersGraph.js",
-  "front_end/timeline/PaintProfilerView.js",
   "front_end/timeline/TimelineController.js",
   "front_end/timeline/TimelineEventOverview.js",
   "front_end/timeline/TimelineFlameChart.js",
@@ -709,7 +716,6 @@ devtools_timeline_js_files = [
   "front_end/timeline/TimelinePanel.js",
   "front_end/timeline/TimelineTreeView.js",
   "front_end/timeline/TimelineUIUtils.js",
-  "front_end/timeline/TransformController.js",
 ]
 devtools_ui_lazy_js_files = [
   "front_end/ui_lazy/dataGrid.css",
@@ -850,7 +856,8 @@ devtools_modules_js_files =
     devtools_snippets_js_files + devtools_source_frame_js_files +
     devtools_sources_js_files + devtools_temp_storage_shared_worker_js_files +
     devtools_text_editor_js_files + devtools_timeline_model_js_files +
-    devtools_timeline_js_files + devtools_ui_lazy_js_files
+    devtools_timeline_js_files + devtools_ui_lazy_js_files +
+    devtools_layer_viewer_js_files
 
 all_devtools_files = devtools_cm_css_files + devtools_cm_js_files +
                      devtools_core_files + devtools_module_json_files +

third_party/WebKit/Source/devtools/front_end/inspector.json

@@ -29,6 +29,7 @@
         { "name": "cm_modes", "type": "remote" },
         { "name": "settings" },
         { "name": "layers", "condition": "!v8only" },
+        { "name": "layer_viewer", "condition": "!v8only" },
         { "name": "snippets" },
         { "name": "diff" },
         { "name": "sass", "condition": "!v8only" },

third_party/WebKit/Source/devtools/front_end/timeline/LayerDetailsView.js → third_party/WebKit/Source/devtools/front_end/layer_viewer/LayerDetailsView.js

@@ -36,8 +36,8 @@
  */
 WebInspector.LayerDetailsView = function(layerViewHost)
 {
-    WebInspector.Widget.call(this);
-    this.element.classList.add("layer-details-view");
+    WebInspector.Widget.call(this, true);
+    this.registerRequiredCSS("layer_viewer/layerDetailsView.css");
     this._layerViewHost = layerViewHost;
     this._layerViewHost.registerView(this);
     this._emptyWidget = new WebInspector.EmptyWidget(WebInspector.UIString("Select a layer to see its details"));
@@ -158,12 +158,12 @@ WebInspector.LayerDetailsView.prototype = {
         if (!layer) {
             this._tableElement.remove();
             this._paintProfilerButton.remove();
-            this._emptyWidget.show(this.element);
+            this._emptyWidget.show(this.contentElement);
             return;
         }
         this._emptyWidget.detach();
-        this.element.appendChild(this._tableElement);
-        this.element.appendChild(this._paintProfilerButton);
+        this.contentElement.appendChild(this._tableElement);
+        this.contentElement.appendChild(this._paintProfilerButton);
         this._sizeCell.textContent = WebInspector.UIString("%d × %d (at %d,%d)", layer.width(), layer.height(), layer.offsetX(), layer.offsetY());
         this._paintCountCell.parentElement.classList.toggle("hidden", !layer.paintCount());
         this._paintCountCell.textContent = layer.paintCount();
@@ -177,14 +177,14 @@ WebInspector.LayerDetailsView.prototype = {
 
     _buildContent: function()
     {
-        this._tableElement = this.element.createChild("table");
+        this._tableElement = this.contentElement.createChild("table");
         this._tbodyElement = this._tableElement.createChild("tbody");
         this._sizeCell = this._createRow(WebInspector.UIString("Size"));
         this._compositingReasonsCell = this._createRow(WebInspector.UIString("Compositing Reasons"));
         this._memoryEstimateCell = this._createRow(WebInspector.UIString("Memory estimate"));
         this._paintCountCell = this._createRow(WebInspector.UIString("Paint count"));
         this._scrollRectsCell = this._createRow(WebInspector.UIString("Slow scroll regions"));
-        this._paintProfilerButton = this.element.createChild("a", "hidden link");
+        this._paintProfilerButton = this.contentElement.createChild("a", "hidden link");
         this._paintProfilerButton.textContent = WebInspector.UIString("Paint Profiler");
         this._paintProfilerButton.addEventListener("click", this._onPaintProfilerButtonClicked.bind(this));
     },

third_party/WebKit/Source/devtools/front_end/timeline/LayerTreeOutline.js → third_party/WebKit/Source/devtools/front_end/layer_viewer/LayerTreeOutline.js

@@ -41,7 +41,7 @@ WebInspector.LayerTreeOutline = function(layerViewHost)
     this._layerViewHost.registerView(this);
 
     this._treeOutline = new TreeOutlineInShadow();
-    this._treeOutline.element.classList.add("layer-tree");
+    this._treeOutline.element.classList.add("layer-tree", "overflow-auto");
     this._treeOutline.element.addEventListener("mousemove", this._onMouseMove.bind(this), false);
     this._treeOutline.element.addEventListener("mouseout", this._onMouseMove.bind(this), false);
     this._treeOutline.element.addEventListener("contextmenu", this._onContextMenu.bind(this), true);

third_party/WebKit/Source/devtools/front_end/timeline/Layers3DView.js → third_party/WebKit/Source/devtools/front_end/layer_viewer/Layers3DView.js

@@ -36,20 +36,21 @@
  */
 WebInspector.Layers3DView = function(layerViewHost)
 {
-    WebInspector.VBox.call(this);
-    this.element.classList.add("layers-3d-view");
+    WebInspector.VBox.call(this, true);
+    this.registerRequiredCSS("layer_viewer/layers3DView.css");
+    this.contentElement.classList.add("layers-3d-view");
     this._failBanner = new WebInspector.VBox();
-    this._failBanner.element.classList.add("banner");
+    this._failBanner.element.classList.add("full-widget-dimmed-banner");
     this._failBanner.element.createTextChild(WebInspector.UIString("Layer information is not yet available."));
 
     this._layerViewHost = layerViewHost;
     this._layerViewHost.registerView(this);
 
-    this._transformController = new WebInspector.TransformController(this.element);
+    this._transformController = new WebInspector.TransformController(this.contentElement);
     this._transformController.addEventListener(WebInspector.TransformController.Events.TransformChanged, this._update, this);
     this._initToolbar();
 
-    this._canvasElement = this.element.createChild("canvas");
+    this._canvasElement = this.contentElement.createChild("canvas");
     this._canvasElement.tabIndex = 0;
     this._canvasElement.addEventListener("dblclick", this._onDoubleClick.bind(this), false);
     this._canvasElement.addEventListener("mousedown", this._onMouseDown.bind(this), false);
@@ -646,14 +647,14 @@ WebInspector.Layers3DView.prototype = {
             return;
         }
         if (!this._layerTree || !this._layerTree.root()) {
-            this._failBanner.show(this.element);
+            this._failBanner.show(this.contentElement);
             return;
         }
         var gl = this._initGLIfNecessary();
         if (!gl) {
             this._failBanner.element.removeChildren();
             this._failBanner.element.appendChild(this._webglDisabledBanner());
-            this._failBanner.show(this.element);
+            this._failBanner.show(this.contentElement);
             return;
         }
         this._failBanner.detach();
@@ -677,7 +678,7 @@ WebInspector.Layers3DView.prototype = {
      */
     _webglDisabledBanner: function()
     {
-        var fragment = this.element.ownerDocument.createDocumentFragment();
+        var fragment = this.contentElement.ownerDocument.createDocumentFragment();
         fragment.createChild("div").textContent = WebInspector.UIString("Can't display layers,");
         fragment.createChild("div").textContent = WebInspector.UIString("WebGL support is disabled in your browser.");
         fragment.appendChild(WebInspector.formatLocalized("Check %s for possible reasons.", [WebInspector.linkifyURLAsNode("about:gpu", undefined, undefined, true)]));
@@ -736,7 +737,7 @@ WebInspector.Layers3DView.prototype = {
     _initToolbar: function()
     {
         this._panelToolbar = this._transformController.toolbar();
-        this.element.appendChild(this._panelToolbar.element);
+        this.contentElement.appendChild(this._panelToolbar.element);
         this._showSlowScrollRectsSetting = this._createVisibilitySetting("Slow scroll rects", "frameViewerShowSlowScrollRects", true, this._panelToolbar);
         this._showPaintsSetting = this._createVisibilitySetting("Paints", "frameViewerShowPaints", true, this._panelToolbar);
         WebInspector.moduleSetting("frameViewerHideChromeWindow").addChangeListener(this._update, this);

third_party/WebKit/Source/devtools/front_end/timeline/PaintProfilerView.js → third_party/WebKit/Source/devtools/front_end/layer_viewer/PaintProfilerView.js

@@ -35,14 +35,15 @@
  */
 WebInspector.PaintProfilerView = function(showImageCallback)
 {
-    WebInspector.HBox.call(this);
-    this.element.classList.add("paint-profiler-overview", "hbox");
-    this._canvasContainer = this.element.createChild("div", "paint-profiler-canvas-container");
-    this._progressBanner = this.element.createChild("div", "banner hidden");
+    WebInspector.HBox.call(this, true);
+    this.registerRequiredCSS("layer_viewer/paintProfiler.css");
+    this.contentElement.classList.add("paint-profiler-overview");
+    this._canvasContainer = this.contentElement.createChild("div", "paint-profiler-canvas-container");
+    this._progressBanner = this.contentElement.createChild("div", "full-widget-dimmed-banner hidden");
     this._progressBanner.textContent = WebInspector.UIString("Profiling\u2026");
     this._pieChart = new WebInspector.PieChart(55, this._formatPieChartTime.bind(this), true);
     this._pieChart.element.classList.add("paint-profiler-pie-chart");
-    this.element.appendChild(this._pieChart.element);
+    this.contentElement.appendChild(this._pieChart.element);
 
     this._showImageCallback = showImageCallback;
 
@@ -259,7 +260,7 @@ WebInspector.PaintProfilerCommandLogView = function()
 {
     WebInspector.VBox.call(this);
     this.setMinimumSize(100, 25);
-    this.element.classList.add("profiler-log-view");
+    this.element.classList.add("overflow-auto");
 
     this._treeOutline = new TreeOutlineInShadow();
     this.element.appendChild(this._treeOutline.element);

third_party/WebKit/Source/devtools/front_end/layer_viewer/layerDetailsView.css

+/*
+ * Copyright 2016 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+table td {
+    padding-left: 8px;
+}
+
+table td:first-child {
+    font-weight: bold;
+}
+
+.scroll-rect.active {
+    background-color: rgba(100, 100, 100, 0.2);
+}
+
+ul {
+    list-style: none;
+    -webkit-padding-start: 0;
+    -webkit-margin-before: 0;
+    -webkit-margin-after: 0;
+}
+
+a {
+    padding: 8px;
+    display: block;
+}

third_party/WebKit/Source/devtools/front_end/layer_viewer/layers3DView.css

+/*
+ * Copyright 2016 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.layers-3d-view {
+    overflow: hidden;
+    -webkit-user-select: none;
+}
+
+canvas {
+    flex: 1 1;
+}

third_party/WebKit/Source/devtools/front_end/layer_viewer/module.json

+{
+    "dependencies": [
+        "components",
+        "sdk",
+        "timeline_model",
+        "ui",
+        "ui_lazy"
+    ],
+    "scripts": [
+        "LayerDetailsView.js",
+        "LayerTreeOutline.js",
+        "LayerViewHost.js",
+        "Layers3DView.js",
+        "PaintProfilerView.js",
+        "TransformController.js"
+    ],
+    "resources": [
+        "layers3DView.css",
+        "paintProfiler.css",
+        "layerDetailsView.css"
+    ]
+}

third_party/WebKit/Source/devtools/front_end/layer_viewer/paintProfiler.css

+/*
+ * Copyright 2016 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.paint-profiler-overview {
+    background-color: #eee;
+}
+
+.paint-profiler-canvas-container {
+    flex: auto;
+    position: relative;
+}
+
+.paint-profiler-pie-chart {
+    width: 60px !important;
+    height: 60px !important;
+    padding: 2px;
+    overflow: hidden;
+    font-size: 10px;
+}
+
+.paint-profiler-canvas-container canvas {
+    z-index: 200;
+    background-color: white;
+    opacity: 0.95;
+    height: 100%;
+    width: 100%;
+}
+
+.paint-profiler-canvas-container .overview-grid-dividers-background,
+.paint-profiler-canvas-container .overview-grid-window {
+    bottom: 0;
+    height: auto;
+}
+
+.paint-profiler-canvas-container .overview-grid-window-resizer {
+    z-index: 2000;
+}
+
+.paint-profiler-image-view {
+    overflow: hidden;
+}
+
+.paint-profiler-image-view .paint-profiler-image-container {
+    -webkit-transform-origin: 0 0;
+}
+
+.paint-profiler-image-view .paint-profiler-image-container div {
+    border-color: rgba(100, 100, 100, 0.4);
+    border-style: solid;
+    z-index: 100;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.paint-profiler-image-view img {
+    border: solid 1px black;
+}

third_party/WebKit/Source/devtools/front_end/layers/LayersPanel.js

@@ -36,7 +36,6 @@
 WebInspector.LayersPanel = function()
 {
     WebInspector.PanelWithSidebar.call(this, "layers", 225);
-    this.registerRequiredCSS("timeline/timelinePanel.css");
 
     /** @type {?WebInspector.LayerTreeModel} */
     this._model = null;

third_party/WebKit/Source/devtools/front_end/layers/module.json

@@ -13,7 +13,7 @@
             "className": "WebInspector.LayersPanel.LayerTreeRevealer"
         }
     ],
-    "dependencies": ["timeline"],
+    "dependencies": ["layer_viewer", "timeline_model"],
     "experiment": "layersPanel",
     "scripts": [
         "LayerPaintProfilerView.js",

third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js

@@ -743,7 +743,7 @@ WebInspector.TimelinePanel.prototype = {
         hintText.createChild("br");
         hintText.appendChild(WebInspector.formatLocalized("Then, zoom and pan the timeline with the mousewheel and %s keys.", [navigateNode]));
         this._hideRecordingHelpMessage();
-        this._helpMessageElement = this._searchableView.element.createChild("div", "banner timeline-status-pane");
+        this._helpMessageElement = this._searchableView.element.createChild("div", "full-widget-dimmed-banner timeline-status-pane");
         this._helpMessageElement.appendChild(hintText);
     },
 

third_party/WebKit/Source/devtools/front_end/timeline/TimelineTreeView.js

@@ -239,7 +239,7 @@ WebInspector.TimelineTreeView.prototype = {
         this._detailsView.detachChildWidgets();
         this._detailsView.element.removeChildren();
         if (!selectedNode || !this._showDetailsForNode(selectedNode)) {
-            var banner = this._detailsView.element.createChild("div", "banner");
+            var banner = this._detailsView.element.createChild("div", "full-widget-dimmed-banner");
             banner.createTextChild(WebInspector.UIString("Select item for details."));
         }
     },

third_party/WebKit/Source/devtools/front_end/timeline/module.json

@@ -114,15 +114,12 @@
     "dependencies": [
         "components",
         "components_lazy",
+        "layer_viewer",
         "timeline_model",
         "ui_lazy"
     ],
     "scripts": [
         "CountersGraph.js",
-        "LayerDetailsView.js",
-        "LayerTreeOutline.js",
-        "LayerViewHost.js",
-        "Layers3DView.js",
         "MemoryCountersGraph.js",
         "TimelineController.js",
         "TimelineLoader.js",
@@ -132,8 +129,6 @@
         "TimelineUIUtils.js",
         "TimelineLayersView.js",
         "TimelinePaintProfilerView.js",
-        "TransformController.js",
-        "PaintProfilerView.js",
         "TimelinePanel.js"
     ],
     "resources": [

third_party/WebKit/Source/devtools/front_end/timeline/timelinePanel.css

@@ -37,30 +37,6 @@
     border-bottom: 1px solid rgb(140, 140, 140);
 }
 
-.panel.timeline .banner,
-.panel.layers .banner {
-    color: #777;
-    background-color: white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    padding: 20px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    font-size: 13px;
-    overflow: auto;
-    z-index: 500;
-}
-
-.panel.timeline .banner a,
-.panel.layers .banner a {
-    color: inherit;
-}
-
 #timeline-overview-panel .timeline-graph-bar {
     pointer-events: none;
 }
@@ -461,113 +437,10 @@
     overflow: hidden;
 }
 
-.timeline-status-pane.banner {
+.timeline-status-pane.full-widget-dimmed-banner {
     text-align: left !important;
 }
 
-.layer-tree,
-.profiler-log-view {
-    overflow: auto;
-}
-
-.layers-3d-view {
-    overflow: hidden;
-    -webkit-user-select: none;
-}
-
-.layers-3d-view canvas {
-    flex: 1 1;
-}
-
-.transform-control-panel {
-    white-space: nowrap;
-    flex: none;
-}
-
-.layer-details-view table td {
-    padding-left: 8px;
-}
-
-.layer-details-view table td:first-child {
-    font-weight: bold;
-}
-
-.layer-details-view .scroll-rect.active {
-    background-color: rgba(100, 100, 100, 0.2);
-}
-
-.paint-profiler-overview .banner {
-    z-index: 500;
-}
-
-.paint-profiler-canvas-container {
-    flex: auto;
-    position: relative;
-}
-
-.paint-profiler-overview {
-    background-color: #eee;
-}
-
-.paint-profiler-pie-chart {
-    width: 60px !important;
-    height: 60px !important;
-    padding: 2px;
-    overflow: hidden;
-    font-size: 10px;
-}
-
-.paint-profiler-canvas-container canvas {
-    z-index: 200;
-    background-color: white;
-    opacity: 0.95;
-    height: 100%;
-    width: 100%;
-}
-
-.paint-profiler-canvas-container .overview-grid-dividers-background,
-.paint-profiler-canvas-container .overview-grid-window {
-    bottom: 0;
-    height: auto;
-}
-
-.paint-profiler-canvas-container .overview-grid-window-resizer {
-    z-index: 2000;
-}
-
-.paint-profiler-image-view {
-    overflow: hidden;
-}
-
-.paint-profiler-image-view .paint-profiler-image-container {
-    -webkit-transform-origin: 0 0;
-}
-
-.paint-profiler-image-view .paint-profiler-image-container div {
-    border-color: rgba(100, 100, 100, 0.4);
-    border-style: solid;
-    z-index: 100;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-.paint-profiler-image-view img {
-    border: solid 1px black;
-}
-
-.layer-details-view ul {
-    list-style: none;
-    -webkit-padding-start: 0;
-    -webkit-margin-before: 0;
-    -webkit-margin-after: 0;
-}
-
-.layer-details-view a {
-    padding: 8px;
-    display: block;
-}
-
 .timeline-layers-view > div:last-child,
 .timeline-layers-view-properties > div:last-child {
     background-color: #eee;
@@ -715,7 +588,7 @@
     border-bottom-color: transparent;
 }
 
-.timeline-tree-view .timeline-details-view-body .banner {
+.timeline-tree-view .timeline-details-view-body .full-widget-dimmed-banner {
     background-color: inherit;
 }
 

third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css

@@ -292,3 +292,25 @@ body.inactive select.chrome-select,
 label[is=dt-icon-label] {
     flex: none;
 }
+
+.full-widget-dimmed-banner a {
+    color: inherit;
+}
+
+.full-widget-dimmed-banner {
+    color: #777;
+    background-color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 20px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    font-size: 13px;
+    overflow: auto;
+    z-index: 500;
+}