DevTools: extract a component for layer viewer

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

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 18 matching lines @@
  */
 
 /**
  * @constructor
  * @param {!WebInspector.LayerViewHost} layerViewHost
  * @extends {WebInspector.Widget}
  * @implements {WebInspector.LayerView}
  */
 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"));
     this._buildContent();
 }
 
 /**
  * @enum {string}
  */
 /** @enum {symbol} */
@@ skipping 102 matching lines @@
             ", " + scrollRect.rect.width + ", " + scrollRect.rect.height + ")";
         element.addEventListener("click", this._onScrollRectClicked.bind(this, index), false);
     },
 
     update: function()
     {
         var layer = this._selection && this._selection.layer();
         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();
         this._memoryEstimateCell.textContent = Number.bytesToString(layer.gpuMemoryUsage());
         layer.requestCompositingReasons(this._updateCompositingReasons.bind(this));
         this._scrollRectsCell.removeChildren();
         layer.scrollRects().forEach(this._createScrollRectElement.bind(this));
         var traceEvent = this._selection.type() === WebInspector.LayerView.Selection.Type.Tile ? /** @type {!WebInspector.LayerView.TileSelection} */ (this._selection).traceEvent() : null;
         this._paintProfilerButton.classList.toggle("hidden", !traceEvent);
     },
 
     _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));
     },
 
     /**
      * @param {string} title
      */
     _createRow: function(title)
     {
         var tr = this._tbodyElement.createChild("tr");
@@ skipping 17 matching lines @@
             var text = WebInspector.LayerDetailsView.CompositingReasonDetail[compositingReasons[i]] || compositingReasons[i];
             // If the text is more than one word but does not terminate with period, add the period.
             if (/\s.*[^.]$/.test(text))
                 text += ".";
             list.createChild("li").textContent = text;
         }
     },
 
     __proto__: WebInspector.Widget.prototype
 }