DevTools: better visual feedback for hovered objects is Layers3DView

Source/devtools/front_end/timeline/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 33 matching lines @@
 
     this._canvasElement = this.element.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._lastActiveObject = {};
+    this._lastSelection = {};
     this._picturesForLayer = {};
     this._scrollRectQuadsForLayer = {};
     this._isVisible = {};
     this._layerTree = null;
     this._textureManager = new WebInspector.LayerTextureManager();
     this._textureManager.addEventListener(WebInspector.LayerTextureManager.Events.TextureUpdated, this._update, this);
     /** @type Array.<!WebGLTexture|undefined> */
     this._chromeTextures = [];
 
     WebInspector.settings.showPaintRects.addChangeListener(this._update, this);
@@ skipping 58 matching lines @@
     "uniform mat4 uPMatrix;\n" +
     "varying vec2 vTextureCoord;\n" +
     "varying vec4 vColor;\n" +
     "void main(void)\n" +
     "{\n" +
         "gl_Position = uPMatrix * vec4(aVertexPosition, 1.0);\n" +
         "vColor = aVertexColor;\n" +
         "vTextureCoord = aTextureCoord;\n" +
     "}";
 
-WebInspector.Layers3DView.SelectedBackgroundColor = [20, 40, 110, 0.66];
-WebInspector.Layers3DView.BackgroundColor = [0, 0, 0, 0];
 WebInspector.Layers3DView.HoveredBorderColor = [0, 0, 255, 1];
 WebInspector.Layers3DView.SelectedBorderColor = [0, 255, 0, 1];
 WebInspector.Layers3DView.BorderColor = [0, 0, 0, 1];
 WebInspector.Layers3DView.ViewportBorderColor = [160, 160, 160, 1];
-WebInspector.Layers3DView.ScrollRectBackgroundColor = [178, 0, 0, 0.4];
-WebInspector.Layers3DView.SelectedScrollRectBackgroundColor = [178, 0, 0, 0.6];
-WebInspector.Layers3DView.ScrollRectBorderColor = [178, 0, 0, 1];
+WebInspector.Layers3DView.ScrollRectBackgroundColor = [178, 100, 100, 0.6];
+WebInspector.Layers3DView.HoveredImageMaskColor = [200, 200, 255, 1];
 WebInspector.Layers3DView.BorderWidth = 1;
 WebInspector.Layers3DView.SelectedBorderWidth = 2;
 WebInspector.Layers3DView.ViewportBorderWidth = 3;
 
 WebInspector.Layers3DView.LayerSpacing = 20;
 WebInspector.Layers3DView.ScrollRectSpacing = 4;
 
 WebInspector.Layers3DView.prototype = {
     /**
      * @param {?WebInspector.LayerTreeBase} layerTree
@@ skipping 41 matching lines @@
     },
 
     wasShown: function()
     {
         if (this._needsUpdate)
             this._update();
     },
 
     /**
      * @param {!WebInspector.Layers3DView.OutlineType} type
-     * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
+     * @param {?WebInspector.Layers3DView.Selection} selection
      */
-    _setOutline: function(type, activeObject)
+    _setOutline: function(type, selection)
     {
-        this._lastActiveObject[type] = activeObject;
+        this._lastSelection[type] = selection;
         this._update();
     },
 
     /**
-     * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
+     * @param {?WebInspector.Layers3DView.Selection} selection
      */
-    hoverObject: function(activeObject)
+    hoverObject: function(selection)
     {
-        this._setOutline(WebInspector.Layers3DView.OutlineType.Hovered, activeObject);
+        this._setOutline(WebInspector.Layers3DView.OutlineType.Hovered, selection);
     },
 
     /**
-     * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
+     * @param {?WebInspector.Layers3DView.Selection} selection
      */
-    selectObject: function(activeObject)
+    selectObject: function(selection)
     {
         this._setOutline(WebInspector.Layers3DView.OutlineType.Hovered, null);
-        this._setOutline(WebInspector.Layers3DView.OutlineType.Selected, activeObject);
+        this._setOutline(WebInspector.Layers3DView.OutlineType.Selected, selection);
     },
 
     /**
      * @param {!Element} canvas
      * @return {!WebGLRenderingContext}
      */
     _initGL: function(canvas)
     {
         var gl = canvas.getContext("webgl");
         gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
@@ skipping 127 matching lines @@
     },
 
     _calculateDepths: function()
     {
         this._depthByLayerId = {};
         this._isVisible = {};
         var depth = 0;
         var root = this._layerTree.root();
         var queue = [root];
         this._depthByLayerId[root.id()] = 0;
-        this._isVisible[root.id()] = this._layerTree.root() === root;
+        this._isVisible[root.id()] = !this._layerTree.contentRoot();
         while (queue.length > 0) {
             var layer = queue.shift();
             var children = layer.children();
             for (var i = 0; i < children.length; ++i) {
                 this._depthByLayerId[children[i].id()] = ++depth;
                 this._isVisible[children[i].id()] = children[i] === this._layerTree.contentRoot() || this._isVisible[layer.id()];
                 queue.push(children[i]);
             }
         }
         this._maxDepth = depth;
     },
 
     /**
      * @param {!WebInspector.Layers3DView.OutlineType} type
-     * @param {!WebInspector.Layer} layer
-     * @param {number=} scrollRectIndex
+     * @param {!WebInspector.Layers3DView.Selection} selection
      */
-    _isObjectActive: function(type, layer, scrollRectIndex)
+    _isSelectionActive: function(type, selection)
     {
-        var activeObject = this._lastActiveObject[type];
-        return activeObject && activeObject.layer && activeObject.layer.id() === layer.id() && (typeof scrollRectIndex !== "number" || activeObject.scrollRectIndex === scrollRectIndex);
+        return this._lastSelection[type] && this._lastSelection[type].isEqual(selection);
     },
 
     /**
-     * @param {!WebInspector.Layer} layer
-     * @return {!WebInspector.Layers3DView.LayerStyle}
-     */
-    _styleForLayer: function(layer)
-    {
-        var isSelected = this._isObjectActive(WebInspector.Layers3DView.OutlineType.Selected, layer);
-        var isHovered = this._isObjectActive(WebInspector.Layers3DView.OutlineType.Hovered, layer);
-        var borderColor;
-        if (isSelected)
-            borderColor = WebInspector.Layers3DView.SelectedBorderColor;
-        else if (isHovered)
-            borderColor = WebInspector.Layers3DView.HoveredBorderColor;
-        else
-            borderColor = WebInspector.Layers3DView.BorderColor;
-        var borderWidth = isSelected ? WebInspector.Layers3DView.SelectedBorderWidth : WebInspector.Layers3DView.BorderWidth;
-        return {borderColor: borderColor, borderWidth: borderWidth};
-    },
-
-    /**
      * @param {!WebInspector.Layer} layer
      * @return {number}
      */
     _depthForLayer: function(layer)
     {
         return this._depthByLayerId[layer.id()] * WebInspector.Layers3DView.LayerSpacing;
     },
 
     /**
      * @param {!WebInspector.Layer} layer
      * @param {number} index
      * @return {number}
      */
     _calculateScrollRectDepth: function(layer, index)
     {
         return this._depthForLayer(layer) + index * WebInspector.Layers3DView.ScrollRectSpacing + 1;
     },
 
     /**
      * @param {!WebInspector.Layer} layer
      */
     _calculateLayerRect: function(layer)
     {
         if (!this._isVisible[layer.id()])
             return;
-        var activeObject = WebInspector.Layers3DView.ActiveObject.createLayerActiveObject(layer);
-        var rect = new WebInspector.Layers3DView.Rectangle(activeObject);
-        var style = this._styleForLayer(layer);
+        var selection = new WebInspector.Layers3DView.LayerSelection(layer);
+        var rect = new WebInspector.Layers3DView.Rectangle(selection);
         rect.setVertices(layer.quad(), this._depthForLayer(layer));
-        rect.lineWidth = style.borderWidth;
-        rect.borderColor = style.borderColor;
+        this._appendRect(rect);
+    },
+
+    /**
+     * @param {!WebInspector.Layers3DView.Rectangle} rect
+     */
+    _appendRect: function(rect)
+    {
+        var selection = rect.relatedObject;
+        var isSelected = this._isSelectionActive(WebInspector.Layers3DView.OutlineType.Selected, selection);
+        var isHovered = this._isSelectionActive(WebInspector.Layers3DView.OutlineType.Hovered, selection);
+        if (isSelected) {
+            rect.borderColor = WebInspector.Layers3DView.SelectedBorderColor;
+        } else if (isHovered) {
+            rect.borderColor = WebInspector.Layers3DView.HoveredBorderColor;
+            var fillColor = rect.fillColor || [255, 255, 255, 1];
+            var maskColor = WebInspector.Layers3DView.HoveredImageMaskColor;
+            rect.fillColor = [fillColor[0] * maskColor[0] / 255, fillColor[1] * maskColor[1] / 255, fillColor[2] * maskColor[2] / 255, fillColor[3] * maskColor[3]];
+        } else {
+            rect.borderColor = WebInspector.Layers3DView.BorderColor;
+        }
+        rect.lineWidth = isSelected ? WebInspector.Layers3DView.SelectedBorderWidth : WebInspector.Layers3DView.BorderWidth;
         this._rects.push(rect);
     },
 
     /**
      * @param {!WebInspector.Layer} layer
      */
     _calculateLayerScrollRects: function(layer)
     {
         var scrollRects = layer.scrollRects();
         for (var i = 0; i < scrollRects.length; ++i) {
-            var activeObject = WebInspector.Layers3DView.ActiveObject.createScrollRectActiveObject(layer, i);
-            var rect = new WebInspector.Layers3DView.Rectangle(activeObject);
+            var selection = new WebInspector.Layers3DView.ScrollRectSelection(layer, i);
+            var rect = new WebInspector.Layers3DView.Rectangle(selection);
             rect.calculateVerticesFromRect(layer, scrollRects[i].rect, this._calculateScrollRectDepth(layer, i));
-            var isSelected = this._isObjectActive(WebInspector.Layers3DView.OutlineType.Selected, layer, i);
-            var color = isSelected ? WebInspector.Layers3DView.SelectedScrollRectBackgroundColor : WebInspector.Layers3DView.ScrollRectBackgroundColor;
-            rect.fillColor = color;
-            rect.borderColor = WebInspector.Layers3DView.ScrollRectBorderColor;
-            this._rects.push(rect);
+            rect.fillColor = WebInspector.Layers3DView.ScrollRectBackgroundColor;
+            this._appendRect(rect);
         }
     },
 
     /**
      * @param {!WebInspector.Layer} layer
      */
     _calculateLayerImageRect: function(layer)
     {
         var layerTexture = this._layerTexture;
         if (layer.id() !== layerTexture.layerId)
             return;
-        var activeObject = WebInspector.Layers3DView.ActiveObject.createLayerActiveObject(layer);
-        var rect = new WebInspector.Layers3DView.Rectangle(activeObject);
+        var selection = new WebInspector.Layers3DView.LayerSelection(layer);
+        var rect = new WebInspector.Layers3DView.Rectangle(selection);
         rect.setVertices(layer.quad(), this._depthForLayer(layer));
         rect.texture = layerTexture.texture;
-        this._rects.push(rect);
+        this._appendRect(rect);
     },
 
     /**
      * @param {!WebInspector.Layer} layer
      */
     _calculateLayerTileRects: function(layer)
     {
         var tiles = this._textureManager.tilesForLayer(layer.id());
         for (var i = 0; i < tiles.length; ++i) {
             var tile = tiles[i];
             if (!tile.texture)
                 continue;
-            var activeObject = WebInspector.Layers3DView.ActiveObject.createTileActiveObject(layer, tile.traceEvent);
-            var rect = new WebInspector.Layers3DView.Rectangle(activeObject);
+            var selection = new WebInspector.Layers3DView.TileSelection(layer, tile.traceEvent);
+            var rect = new WebInspector.Layers3DView.Rectangle(selection);
             rect.calculateVerticesFromRect(layer, {x: tile.rect[0], y: tile.rect[1], width: tile.rect[2], height: tile.rect[3]}, this._depthForLayer(layer) + 1);
             rect.texture = tile.texture;
-            this._rects.push(rect);
+            this._appendRect(rect);
         }
     },
 
     _calculateRects: function()
     {
         this._rects = [];
 
         this._layerTree.forEachLayer(this._calculateLayerRect.bind(this));
 
         if (this._showSlowScrollRectsSetting.get())
             this._layerTree.forEachLayer(this._calculateLayerScrollRects.bind(this));
 
         if (this._showPaintsSetting.get()) {
             if (this._layerTexture)
                 this._layerTree.forEachLayer(this._calculateLayerImageRect.bind(this));
             else
                 this._layerTree.forEachLayer(this._calculateLayerTileRects.bind(this));
         }
     },
 
     /**
      * @param {!Array.<number>} color
      * @return {!Array.<number>}
      */
     _makeColorsArray: function(color)
     {
         var colors = [];
         var normalizedColor = [color[0] / 255, color[1] / 255, color[2] / 255, color[3]];
-        for (var i = 0; i < 4; i++) {
+        for (var i = 0; i < 4; i++)
             colors = colors.concat(normalizedColor);
-        }
         return colors;
     },
 
     /**
      * @param {!Object} attribute
      * @param {!Array.<number>} array
      * @param {!number} length
      */
     _setVertexAttribute: function(attribute, array, length)
     {
         var gl = this._gl;
         var buffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(array), gl.STATIC_DRAW);
         gl.vertexAttribPointer(attribute, length, gl.FLOAT, false, 0, 0);
     },
 
     /**
      * @param {!Array.<number>} vertices
      * @param {number} mode
      * @param {!Array.<number>=} color
      * @param {!Object=} texture
      */
     _drawRectangle: function(vertices, mode, color, texture)
     {
         var gl = this._gl;
         var white = [255, 255, 255, 1];
+        color = color || white;
         this._setVertexAttribute(this._shaderProgram.vertexPositionAttribute, vertices, 3);
         this._setVertexAttribute(this._shaderProgram.textureCoordAttribute, [0, 1, 1, 1, 1, 0, 0, 0], 2);
+        this._setVertexAttribute(this._shaderProgram.vertexColorAttribute, this._makeColorsArray(color), color.length);
 
         if (texture) {
-            this._setVertexAttribute(this._shaderProgram.vertexColorAttribute, this._makeColorsArray(white), white.length);
             gl.activeTexture(gl.TEXTURE0);
             gl.bindTexture(gl.TEXTURE_2D, texture);
             gl.uniform1i(this._shaderProgram.samplerUniform, 0);
         } else {
-            this._setVertexAttribute(this._shaderProgram.vertexColorAttribute, this._makeColorsArray(color || white), color.length);
             gl.bindTexture(gl.TEXTURE_2D, this._whiteTexture);
         }
 
         var numberOfVertices = vertices.length / 3;
         gl.drawArrays(mode, 0, numberOfVertices);
     },
 
     /**
      * @param {!Array.<number>} vertices
      * @param {!WebGLTexture} texture
+     * @param {!Array.<number>=} color
      */
-    _drawTexture: function(vertices, texture)
+    _drawTexture: function(vertices, texture, color)
     {
-        this._drawRectangle(vertices, this._gl.TRIANGLE_FAN, undefined, texture);
+        this._drawRectangle(vertices, this._gl.TRIANGLE_FAN, color, texture);
     },
 
     _drawViewportAndChrome: function()
     {
         var viewport = this._layerTree.viewportSize();
         if (!viewport)
             return;
 
         var drawChrome = !WebInspector.settings.frameViewerHideChromeWindow.get() && this._chromeTextures.length >= 3 && this._chromeTextures.indexOf(undefined) < 0;
         var z = (this._maxDepth + 1) * WebInspector.Layers3DView.LayerSpacing;
@@ skipping 21 matching lines @@
         }
     },
 
     /**
      * @param {!WebInspector.Layers3DView.Rectangle} rect
      */
     _drawViewRect: function(rect)
     {
         var vertices = rect.vertices;
         if (rect.texture)
-            this._drawTexture(vertices, rect.texture);
+            this._drawTexture(vertices, rect.texture, rect.fillColor || undefined);
         else if (rect.fillColor)
             this._drawRectangle(vertices, this._gl.TRIANGLE_FAN, rect.fillColor);
         this._gl.lineWidth(rect.lineWidth);
         if (rect.borderColor)
             this._drawRectangle(vertices, this._gl.LINE_LOOP, rect.borderColor);
     },
 
     _update: function()
     {
         if (!this.isShowing()) {
@@ skipping 15 matching lines @@
         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();
     },
 
     /**
      * @param {!Event} event
-     * @return {?WebInspector.Layers3DView.ActiveObject}
+     * @return {?WebInspector.Layers3DView.Selection}
      */
-    _activeObjectFromEventPoint: function(event)
+    _selectionFromEventPoint: function(event)
     {
         if (!this._layerTree)
             return null;
         var closestIntersectionPoint = Infinity;
         var closestObject = null;
         var projectionMatrix = new WebKitCSSMatrix().scale(1, -1, -1).translate(-1, -1, 0).multiply(this._projectionMatrix);
         var x0 = (event.clientX - this._canvasElement.totalOffsetLeft()) * window.devicePixelRatio;
         var y0 = -(event.clientY - this._canvasElement.totalOffsetTop()) * window.devicePixelRatio;
 
         /**
@@ skipping 38 matching lines @@
         this._showSlowScrollRectsSetting = this._createVisibilitySetting("Slow scroll rects", "frameViewerShowSlowScrollRects", true, this._panelStatusBarElement);
         this._showPaintsSetting = this._createVisibilitySetting("Paints", "frameViewerShowPaints", true, this._panelStatusBarElement);
         WebInspector.settings.frameViewerHideChromeWindow.addChangeListener(this._update, this);
     },
 
     /**
      * @param {!Event} event
      */
     _onContextMenu: function(event)
     {
-        var activeObject = this._activeObjectFromEventPoint(event);
-        var node = activeObject && activeObject.layer && activeObject.layer.nodeForSelfOrAncestor();
+        var selection = this._selectionFromEventPoint(event);
+        var node = selection && selection.layer && selection.layer.nodeForSelfOrAncestor();
         var contextMenu = new WebInspector.ContextMenu(event);
         contextMenu.appendItem(WebInspector.UIString("Reset View"), this._transformController.resetAndNotify.bind(this._transformController), false);
-        if (activeObject && activeObject.type() === WebInspector.Layers3DView.ActiveObject.Type.Tile)
-            contextMenu.appendItem(WebInspector.UIString("Show Paint Profiler"), this.dispatchEventToListeners.bind(this, WebInspector.Layers3DView.Events.PaintProfilerRequested, activeObject.traceEvent), false);
+        if (selection && selection.type() === WebInspector.Layers3DView.Selection.Type.Tile)
+            contextMenu.appendItem(WebInspector.UIString("Show Paint Profiler"), this.dispatchEventToListeners.bind(this, WebInspector.Layers3DView.Events.PaintProfilerRequested, selection.traceEvent), false);
         if (node)
             contextMenu.appendApplicableItems(node);
         contextMenu.show();
     },
 
     /**
      * @param {!Event} event
      */
     _onMouseMove: function(event)
     {
         if (event.which)
             return;
-        this.dispatchEventToListeners(WebInspector.Layers3DView.Events.ObjectHovered, this._activeObjectFromEventPoint(event));
+        this.dispatchEventToListeners(WebInspector.Layers3DView.Events.ObjectHovered, this._selectionFromEventPoint(event));
     },
 
     /**
      * @param {!Event} event
      */
     _onMouseDown: function(event)
     {
         this._mouseDownX = event.clientX;
         this._mouseDownY = event.clientY;
     },
 
     /**
      * @param {!Event} event
      */
     _onMouseUp: function(event)
     {
         const maxDistanceInPixels = 6;
         if (this._mouseDownX && Math.abs(event.clientX - this._mouseDownX) < maxDistanceInPixels && Math.abs(event.clientY - this._mouseDownY) < maxDistanceInPixels)
-            this.dispatchEventToListeners(WebInspector.Layers3DView.Events.ObjectSelected, this._activeObjectFromEventPoint(event));
+            this.dispatchEventToListeners(WebInspector.Layers3DView.Events.ObjectSelected, this._selectionFromEventPoint(event));
         delete this._mouseDownX;
         delete this._mouseDownY;
     },
 
     /**
      * @param {!Event} event
      */
     _onDoubleClick: function(event)
     {
-        var object = this._activeObjectFromEventPoint(event);
+        var object = this._selectionFromEventPoint(event);
         if (object) {
-            if (object.type() == WebInspector.Layers3DView.ActiveObject.Type.Tile)
+            if (object.type() == WebInspector.Layers3DView.Selection.Type.Tile)
                 this.dispatchEventToListeners(WebInspector.Layers3DView.Events.PaintProfilerRequested, object.traceEvent);
             else if (object.layer)
                 this.dispatchEventToListeners(WebInspector.Layers3DView.Events.LayerSnapshotRequested, object.layer);
         }
         event.stopPropagation();
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
@@ skipping 159 matching lines @@
         this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_WRAP_T, this._gl.CLAMP_TO_EDGE);
         this._gl.bindTexture(this._gl.TEXTURE_2D, null);
         return texture;
     },
 
     __proto__: WebInspector.Object.prototype
 }
 
 /**
  * @constructor
- * @param {?WebInspector.Layers3DView.ActiveObject} relatedObject
+ * @param {?WebInspector.Layers3DView.Selection} relatedObject
  */
 WebInspector.Layers3DView.Rectangle = function(relatedObject)
 {
     this.relatedObject = relatedObject;
     /** @type {number} */
     this.lineWidth = 1;
     /** @type {?Array.<number>} */
     this.borderColor = null;
     /** @type {?Array.<number>} */
     this.fillColor = null;
@@ skipping 91 matching lines @@
             var product = WebInspector.Geometry.scalarProduct(normal, WebInspector.Geometry.crossProduct(tVects[i], tVects[(i + 1) % tVects.length]));
             if (product < 0)
                 return undefined;
         }
         return t;
     }
 }
 
 /**
  * @constructor
+ * @param {!WebInspector.Layers3DView.Selection.Type} type
  */
-WebInspector.Layers3DView.ActiveObject = function()
+WebInspector.Layers3DView.Selection = function(type)
 {
+    this._type = type;
 }
 
 /**
  * @enum {string}
  */
-WebInspector.Layers3DView.ActiveObject.Type = {
+WebInspector.Layers3DView.Selection.Type = {
     Layer: "Layer",
     ScrollRect: "ScrollRect",
     Tile: "Tile",
 };
 
-/**
- * @param {!WebInspector.Layer} layer
- * @return {!WebInspector.Layers3DView.ActiveObject}
- */
-WebInspector.Layers3DView.ActiveObject.createLayerActiveObject = function(layer)
-{
-    var activeObject = new WebInspector.Layers3DView.ActiveObject();
-    activeObject._type = WebInspector.Layers3DView.ActiveObject.Type.Layer;
-    activeObject.layer = layer;
-    return activeObject;
-}
-
-/**
- * @param {!WebInspector.Layer} layer
- * @param {number} scrollRectIndex
- * @return {!WebInspector.Layers3DView.ActiveObject}
- */
-WebInspector.Layers3DView.ActiveObject.createScrollRectActiveObject = function(layer, scrollRectIndex)
-{
-    var activeObject = new WebInspector.Layers3DView.ActiveObject();
-    activeObject._type = WebInspector.Layers3DView.ActiveObject.Type.ScrollRect;
-    activeObject.layer = layer;
-    activeObject.scrollRectIndex = scrollRectIndex;
-    return activeObject;
-}
-
-/**
- * @param {!WebInspector.Layer} layer
- * @param {!WebInspector.TracingModel.Event} traceEvent
- * @return {!WebInspector.Layers3DView.ActiveObject}
- */
-WebInspector.Layers3DView.ActiveObject.createTileActiveObject = function(layer, traceEvent)
-{
-    var activeObject = new WebInspector.Layers3DView.ActiveObject();
-    activeObject._type = WebInspector.Layers3DView.ActiveObject.Type.Tile;
-    activeObject.layer = layer;
-    activeObject.traceEvent = traceEvent;
-    return activeObject;
-}
-
-WebInspector.Layers3DView.ActiveObject.prototype = {
+WebInspector.Layers3DView.Selection.prototype = {
     /**
-     * @return {!WebInspector.Layers3DView.ActiveObject.Type}
+     * @return {!WebInspector.Layers3DView.Selection.Type}
      */
     type: function()
     {
         return this._type;
+    },
+
+    /**
+     * @param {!WebInspector.Layers3DView.Selection} other
+     * @return {boolean}
+     */
+    isEqual: function(other)
+    {
+        return false;
     }
 };
 
 /**
  * @constructor
+ * @extends {WebInspector.Layers3DView.Selection}
+ */
+WebInspector.Layers3DView.LayerSelection = function(layer)
+{
+    WebInspector.Layers3DView.Selection.call(this, WebInspector.Layers3DView.Selection.Type.Layer);
+    this.layer = layer;
+}
+
+WebInspector.Layers3DView.LayerSelection.prototype = {
+    /**
+     * @override
+     * @param {!WebInspector.Layers3DView.Selection} other
+     * @return {boolean}
+     */
+    isEqual: function(other)
+    {
+        return other._type === WebInspector.Layers3DView.Selection.Type.Layer && other.layer.id() === this.layer.id();
+    },
+
+    __proto__: WebInspector.Layers3DView.Selection.prototype
+};
+
+/**
+ * @constructor
+ * @extends {WebInspector.Layers3DView.Selection}
+ */
+WebInspector.Layers3DView.ScrollRectSelection = function(layer, scrollRectIndex)
+{
+    WebInspector.Layers3DView.Selection.call(this, WebInspector.Layers3DView.Selection.Type.ScrollRect);
+    this.layer = layer;
+    this.scrollRectIndex = scrollRectIndex;
+}
+
+WebInspector.Layers3DView.ScrollRectSelection.prototype = {
+    /**
+     * @override
+     * @param {!WebInspector.Layers3DView.Selection} other
+     * @return {boolean}
+     */
+    isEqual: function(other)
+    {
+        return other._type === WebInspector.Layers3DView.Selection.Type.ScrollRect &&
+            this.layer.id() === other.layer.id() && this.scrollRectIndex === other.scrollRectIndex
+    },
+
+    __proto__: WebInspector.Layers3DView.Selection.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.Layers3DView.Selection}
+ * @param {!WebInspector.Layer} layer
+ * @param {!WebInspector.TracingModel.Event} traceEvent
+ */
+WebInspector.Layers3DView.TileSelection = function(layer, traceEvent)
+{
+    WebInspector.Layers3DView.Selection.call(this, WebInspector.Layers3DView.Selection.Type.Tile);
+    this.layer = layer;
+    this.traceEvent = traceEvent;
+}
+
+WebInspector.Layers3DView.TileSelection.prototype = {
+    /**
+     * @override
+     * @param {!WebInspector.Layers3DView.Selection} other
+     * @return {boolean}
+     */
+    isEqual: function(other)
+    {
+        return other._type === WebInspector.Layers3DView.Selection.Type.Tile
+            && this.layer.id() === other.layer.id() && this.traceEvent === other.traceEvent;
+    },
+
+    __proto__: WebInspector.Layers3DView.Selection.prototype
+}
+
+/**
+ * @constructor
  * @param {!WebInspector.PaintProfilerSnapshot} snapshot
  * @param {!Array.<number>} rect
  * @param {!WebInspector.TracingModel.Event} traceEvent
  */
 WebInspector.LayerTextureManager.Tile = function(snapshot, rect, traceEvent)
 {
     this.snapshot = snapshot;
     this.rect = rect;
     this.traceEvent = traceEvent;
     this.scale = 0;
     /** @type {?WebGLTexture} */
     this.texture = null;
 }