DevTools: extract a component for layer viewer

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

 /*
  * Copyright (C) 2014 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
  * @extends {WebInspector.VBox}
  * @param {!WebInspector.LayerViewHost} layerViewHost
  * @implements {WebInspector.LayerView}
  */
 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.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);
     this._canvasElement.addEventListener("mouseup", this._onMouseUp.bind(this), false);
     this._canvasElement.addEventListener("mouseleave", this._onMouseMove.bind(this), false);
     this._canvasElement.addEventListener("mousemove", this._onMouseMove.bind(this), false);
     this._canvasElement.addEventListener("contextmenu", this._onContextMenu.bind(this), false);
 
     this._lastSelection = {};
     this._layerTree = null;
@@ skipping 576 matching lines @@
             this._drawRectangle(vertices, this._gl.LINE_LOOP, rect.borderColor);
     },
 
     _update: function()
     {
         if (!this.isShowing()) {
             this._needsUpdate = true;
             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();
         this._gl.viewportWidth = this._canvasElement.width;
         this._gl.viewportHeight = this._canvasElement.height;
 
         this._calculateDepthsAndVisibility();
         this._calculateRects();
         this._updateTransformAndConstraints();
 
         this._textureManager.setScale(Number.constrain(0.1, 1, this._scale));
         gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
         this._rects.forEach(this._drawViewRect.bind(this));
         this._drawViewportAndChrome();
     },
 
     /**
      * @return {!Node}
      */
     _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)]));
         return fragment;
     },
 
     /**
      * @param {!Event} event
      * @return {?WebInspector.LayerView.Selection}
      */
@@ skipping 38 matching lines @@
         toolbar.appendToolbarItem(checkbox);
         var setting = WebInspector.settings.createSetting(name, value);
         WebInspector.SettingsUI.bindCheckbox(checkbox.inputElement, setting);
         setting.addChangeListener(this._update, this);
         return setting;
     },
 
     _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);
     },
 
     /**
      * @param {!Event} event
      */
     _onContextMenu: function(event)
     {
@@ skipping 341 matching lines @@
  */
 WebInspector.LayerTextureManager.Tile = function(snapshot, rect, traceEvent)
 {
     this.snapshot = snapshot;
     this.rect = rect;
     this.traceEvent = traceEvent;
     this.scale = 0;
     /** @type {?WebGLTexture} */
     this.texture = null;
 }