Roll reference builds to 35.0.1916.114.

chrome_linux64/resources/inspector/LayersPanel.js

Index: chrome_linux64/resources/inspector/LayersPanel.js
===================================================================
--- chrome_linux64/resources/inspector/LayersPanel.js	(revision 273864)
+++ chrome_linux64/resources/inspector/LayersPanel.js	(working copy)
@@ -1,64 +1,4 @@
-WebInspector.LayerTreeModel=function()
-{WebInspector.Object.call(this);this._layersById={};this._lastPaintRectByLayerId={};InspectorBackend.registerLayerTreeDispatcher(new WebInspector.LayerTreeDispatcher(this));WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.DocumentUpdated,this._onDocumentUpdated,this);}
-WebInspector.LayerTreeModel.Events={LayerTreeChanged:"LayerTreeChanged",LayerPainted:"LayerPainted",}
-WebInspector.LayerTreeModel.prototype={disable:function()
-{if(!this._enabled)
-return;this._enabled=false;LayerTreeAgent.disable();},enable:function(callback)
-{if(this._enabled)
-return;this._enabled=true;WebInspector.domAgent.requestDocument(onDocumentAvailable.bind(this));function onDocumentAvailable()
-{if(!this._enabled)
-return;LayerTreeAgent.enable();}},root:function()
-{return this._root;},contentRoot:function()
-{return this._contentRoot;},forEachLayer:function(callback,root)
-{if(!root){root=this.root();if(!root)
-return false;}
-return callback(root)||root.children().some(this.forEachLayer.bind(this,callback));},layerById:function(id)
-{return this._layersById[id]||null;},_repopulate:function(payload)
-{var oldLayersById=this._layersById;this._layersById={};for(var i=0;i<payload.length;++i){var layerId=payload[i].layerId;var layer=oldLayersById[layerId];if(layer)
-layer._reset(payload[i]);else
-layer=new WebInspector.Layer(payload[i]);this._layersById[layerId]=layer;var parentId=layer.parentId();if(!this._contentRoot&&layer.nodeId())
-this._contentRoot=layer;var lastPaintRect=this._lastPaintRectByLayerId[layerId];if(lastPaintRect)
-layer._lastPaintRect=lastPaintRect;if(parentId){var parent=this._layersById[parentId];if(!parent)
-console.assert(parent,"missing parent "+parentId+" for layer "+layerId);parent.addChild(layer);}else{if(this._root)
-console.assert(false,"Multiple root layers");this._root=layer;}}
-this._lastPaintRectByLayerId={};},_layerTreeChanged:function(payload)
-{this._root=null;this._contentRoot=null;if(payload)
-this._repopulate(payload);this.dispatchEventToListeners(WebInspector.LayerTreeModel.Events.LayerTreeChanged);},_layerPainted:function(layerId,clipRect)
-{var layer=this._layersById[layerId];if(!layer){this._lastPaintRectByLayerId[layerId]=clipRect;return;}
-layer._didPaint(clipRect);this.dispatchEventToListeners(WebInspector.LayerTreeModel.Events.LayerPainted,layer);},_onDocumentUpdated:function()
-{this.disable();this.enable();},__proto__:WebInspector.Object.prototype}
-WebInspector.Layer=function(layerPayload)
-{this._reset(layerPayload);}
-WebInspector.Layer.prototype={id:function()
-{return this._layerPayload.layerId;},parentId:function()
-{return this._layerPayload.parentLayerId;},parent:function()
-{return this._parent;},isRoot:function()
-{return!this.parentId();},children:function()
-{return this._children;},addChild:function(child)
-{if(child._parent)
-console.assert(false,"Child already has a parent");this._children.push(child);child._parent=this;},nodeId:function()
-{return this._layerPayload.nodeId;},nodeIdForSelfOrAncestor:function()
-{for(var layer=this;layer;layer=layer._parent){var nodeId=layer._layerPayload.nodeId;if(nodeId)
-return nodeId;}
-return null;},offsetX:function()
-{return this._layerPayload.offsetX;},offsetY:function()
-{return this._layerPayload.offsetY;},width:function()
-{return this._layerPayload.width;},height:function()
-{return this._layerPayload.height;},transform:function()
-{return this._layerPayload.transform;},anchorPoint:function()
-{return[this._layerPayload.anchorX||0,this._layerPayload.anchorY||0,this._layerPayload.anchorZ||0,];},invisible:function()
-{return this._layerPayload.invisible;},paintCount:function()
-{return this._paintCount||this._layerPayload.paintCount;},lastPaintRect:function()
-{return this._lastPaintRect;},requestCompositingReasons:function(callback)
-{var wrappedCallback=InspectorBackend.wrapClientCallback(callback,"LayerTreeAgent.reasonsForCompositingLayer(): ",undefined,[]);LayerTreeAgent.compositingReasons(this.id(),wrappedCallback);},requestSnapshot:function(callback)
-{var wrappedCallback=InspectorBackend.wrapClientCallback(callback,"LayerTreeAgent.makeSnapshot(): ",WebInspector.PaintProfilerSnapshot);LayerTreeAgent.makeSnapshot(this.id(),wrappedCallback);},_didPaint:function(rect)
-{this._lastPaintRect=rect;this._paintCount=this.paintCount()+1;this._image=null;},_reset:function(layerPayload)
-{this._children=[];this._parent=null;this._paintCount=0;this._layerPayload=layerPayload;this._image=null;}}
-WebInspector.LayerTreeDispatcher=function(layerTreeModel)
-{this._layerTreeModel=layerTreeModel;}
-WebInspector.LayerTreeDispatcher.prototype={layerTreeDidChange:function(payload)
-{this._layerTreeModel._layerTreeChanged(payload);},layerPainted:function(layerId,clipRect)
-{this._layerTreeModel._layerPainted(layerId,clipRect);}};WebInspector.LayerTree=function(model,treeOutline)
+WebInspector.LayerTree=function(model,treeOutline)
 {WebInspector.Object.call(this);this._model=model;this._treeOutline=treeOutline;this._treeOutline.childrenListElement.addEventListener("mousemove",this._onMouseMove.bind(this),false);this._treeOutline.childrenListElement.addEventListener("mouseout",this._onMouseMove.bind(this),false);this._treeOutline.childrenListElement.addEventListener("contextmenu",this._onContextMenu.bind(this),true);this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged,this._update.bind(this));this._lastHoveredNode=null;}
 WebInspector.LayerTree.Events={LayerHovered:"LayerHovered",LayerSelected:"LayerSelected"}
 WebInspector.LayerTree.prototype={selectLayer:function(layer)
@@ -72,7 +12,7 @@
 {var seenLayers={};function updateLayer(layer)
 {var id=layer.id();if(seenLayers[id])
 console.assert(false,"Duplicate layer id: "+id);seenLayers[id]=true;var node=this._treeOutline.getCachedTreeElement(layer);var parent=layer===this._model.contentRoot()?this._treeOutline:this._treeOutline.getCachedTreeElement(layer.parent());if(!parent)
-console.assert(false,"Parent is not in the tree");if(!node){node=new WebInspector.LayerTreeElement(this,layer);parent.appendChild(node);}else{var oldParentId=node.parent.representedObject&&node.parent.representedObject.id();if(oldParentId!==layer.parentId()){(node.parent||this._treeOutline).removeChild(node);parent.appendChild(node);}
+console.assert(false,"Parent is not in the tree");if(!node){node=new WebInspector.LayerTreeElement(this,layer);parent.appendChild(node);}else{if(node.parent!==parent){node.parent.removeChild(node);parent.appendChild(node);}
 node._update();}}
 if(this._model.contentRoot())
 this._model.forEachLayer(updateLayer.bind(this),this._model.contentRoot());for(var node=(this._treeOutline.children[0]);node&&!node.root;){if(seenLayers[node.representedObject.id()]){node=node.traverseNextTreeElement(false);}else{var nextNode=node.nextSibling||node.parent;node.parent.removeChild(node);if(node===this._lastHoveredNode)
@@ -82,20 +22,21 @@
 {var layer=(node.representedObject);this.dispatchEventToListeners(WebInspector.LayerTree.Events.LayerSelected,layer);},_onContextMenu:function(event)
 {var node=this._treeOutline.treeElementFromPoint(event.pageX,event.pageY);if(!node||!node.representedObject)
 return;var layer=(node.representedObject);if(!layer)
-return;var nodeId=layer.nodeId();if(!nodeId)
-return;var domNode=WebInspector.domAgent.nodeForId(nodeId);if(!domNode)
+return;var nodeId=layer.nodeIdForSelfOrAncestor();if(!nodeId)
+return;var domNode=WebInspector.domModel.nodeForId(nodeId);if(!domNode)
 return;var contextMenu=new WebInspector.ContextMenu(event);contextMenu.appendApplicableItems(domNode);contextMenu.show();},__proto__:WebInspector.Object.prototype}
 WebInspector.LayerTreeElement=function(tree,layer)
 {TreeElement.call(this,"",layer);this._layerTree=tree;this._update();}
 WebInspector.LayerTreeElement.prototype={onattach:function()
 {var selection=document.createElement("div");selection.className="selection";this.listItemElement.insertBefore(selection,this.listItemElement.firstChild);},_update:function()
-{var layer=(this.representedObject);var nodeId=layer.nodeIdForSelfOrAncestor();var node=nodeId?WebInspector.domAgent.nodeForId(nodeId):null;var title=document.createDocumentFragment();title.createChild("div","selection");title.appendChild(document.createTextNode(node?WebInspector.DOMPresentationUtils.appropriateSelectorFor(node,false):"#"+layer.id()));var details=title.createChild("span","dimmed");details.textContent=WebInspector.UIString(" (%d × %d)",layer.width(),layer.height());this.title=title;},onselect:function()
+{var layer=(this.representedObject);var nodeId=layer.nodeIdForSelfOrAncestor();var node=nodeId?WebInspector.domModel.nodeForId(nodeId):null;var title=document.createDocumentFragment();title.createChild("div","selection");title.appendChild(document.createTextNode(node?WebInspector.DOMPresentationUtils.simpleSelector(node):"#"+layer.id()));var details=title.createChild("span","dimmed");details.textContent=WebInspector.UIString(" (%d × %d)",layer.width(),layer.height());this.title=title;},onselect:function()
 {this._layerTree._selectedNodeChanged(this);return false;},setHovered:function(hovered)
-{this.listItemElement.enableStyleClass("hovered",hovered);},__proto__:TreeElement.prototype};WebInspector.Layers3DView=function(model)
-{WebInspector.View.call(this);this.element.classList.add("fill");this.element.classList.add("layers-3d-view");this._emptyView=new WebInspector.EmptyView(WebInspector.UIString("Not in the composited mode.\nConsider forcing composited mode in Settings."));this._model=model;this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged,this._update,this);this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerPainted,this._onLayerPainted,this);this._rotatingContainerElement=this.element.createChild("div","fill rotating-container");this.element.addEventListener("mousemove",this._onMouseMove.bind(this),false);this.element.addEventListener("mouseout",this._onMouseMove.bind(this),false);this.element.addEventListener("mousedown",this._onMouseDown.bind(this),false);this.element.addEventListener("mouseup",this._onMouseUp.bind(this),false);this.element.addEventListener("contextmenu",this._onContextMenu.bind(this),false);this.element.addEventListener("dblclick",this._onDoubleClick.bind(this),false);this.element.addEventListener("click",this._onClick.bind(this),false);this._elementsByLayerId={};this._rotateX=0;this._rotateY=0;this._scaleAdjustmentStylesheet=this.element.ownerDocument.head.createChild("style");this._scaleAdjustmentStylesheet.disabled=true;this._lastOutlinedElement={};this._layerImage=document.createElement("img");WebInspector.settings.showPaintRects.addChangeListener(this._update,this);}
+{this.listItemElement.classList.toggle("hovered",hovered);},__proto__:TreeElement.prototype};WebInspector.Layers3DView=function(model)
+{WebInspector.VBox.call(this);this.element.classList.add("layers-3d-view");this._emptyView=new WebInspector.EmptyView(WebInspector.UIString("Not in the composited mode.\nConsider forcing composited mode in Settings."));this._model=model;this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged,this._update,this);this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerPainted,this._onLayerPainted,this);this._rotatingContainerElement=this.element.createChild("div","fill rotating-container");this._transformController=new WebInspector.TransformController(this.element);this._transformController.addEventListener(WebInspector.TransformController.Events.TransformChanged,this._onTransformChanged,this);this.element.addEventListener("dblclick",this._onDoubleClick.bind(this),false);this.element.addEventListener("click",this._onClick.bind(this),false);this.element.addEventListener("mouseout",this._onMouseMove.bind(this),false);this.element.addEventListener("mousemove",this._onMouseMove.bind(this),false);this.element.addEventListener("contextmenu",this._onContextMenu.bind(this),false);this._elementsByLayerId={};this._scaleAdjustmentStylesheet=this.element.ownerDocument.head.createChild("style");this._scaleAdjustmentStylesheet.disabled=true;this._lastOutlinedElement={};this._layerImage=document.createElement("img");this._layerImage.style.width="100%";this._layerImage.style.height="100%";WebInspector.settings.showPaintRects.addChangeListener(this._update,this);}
 WebInspector.Layers3DView.OutlineType={Hovered:"hovered",Selected:"selected"}
 WebInspector.Layers3DView.Events={LayerHovered:"LayerHovered",LayerSelected:"LayerSelected",LayerSnapshotRequested:"LayerSnapshotRequested"}
 WebInspector.Layers3DView.PaintRectColors=[WebInspector.Color.fromRGBA([0,0x5F,0,0x3F]),WebInspector.Color.fromRGBA([0,0xAF,0,0x3F]),WebInspector.Color.fromRGBA([0,0xFF,0,0x3F])]
+WebInspector.Layers3DView.ScrollRectTitles={RepaintsOnScroll:WebInspector.UIString("repaints on scroll"),TouchEventHandler:WebInspector.UIString("touch event listener"),WheelEventHandler:WebInspector.UIString("mousewheel event listener")}
 WebInspector.Layers3DView.prototype={onResize:function()
 {this._update();},willHide:function()
 {this._scaleAdjustmentStylesheet.disabled=true;},wasShown:function()
@@ -109,50 +50,61 @@
 {var element=this._elementForLayer(layer);this._layerImage.removeAttribute("src");if(imageURL)
 this._layerImage.src=imageURL;element.appendChild(this._layerImage);},_scaleToFit:function()
 {var root=this._model.contentRoot();if(!root)
-return;const padding=40;var scaleX=this._clientWidth/(root.width()+2*padding);var scaleY=this._clientHeight/(root.height()+2*padding);this._scale=Math.min(scaleX,scaleY);const screenLayerSpacing=20;this._layerSpacing=Math.ceil(screenLayerSpacing/this._scale)+"px";const screenLayerThickness=4;var layerThickness=Math.ceil(screenLayerThickness/this._scale)+"px";var stylesheetContent=".layer-container .side-wall { height: "+layerThickness+"; width: "+layerThickness+"; } "+".layer-container .back-wall { -webkit-transform: translateZ(-"+layerThickness+"); } "+".layer-container { -webkit-transform: translateZ("+this._layerSpacing+"); }";var stylesheetTextNode=this._scaleAdjustmentStylesheet.firstChild;if(!stylesheetTextNode||stylesheetTextNode.nodeType!==Node.TEXT_NODE||stylesheetTextNode.nextSibling)
+return;const padding=40;var scaleX=this._clientWidth/(root.width()+2*padding);var scaleY=this._clientHeight/(root.height()+2*padding);var autoScale=Math.min(scaleX,scaleY);this._scale=autoScale*this._transformController.scale();this._paddingX=((this._clientWidth/autoScale-root.width())>>1)*this._scale;this._paddingY=((this._clientHeight/autoScale-root.height())>>1)*this._scale;const screenLayerSpacing=20;this._layerSpacing=screenLayerSpacing+"px";const screenLayerThickness=4;var layerThickness=screenLayerThickness+"px";var stylesheetContent=".layer-container .side-wall { height: "+layerThickness+"; width: "+layerThickness+"; } "+".layer-container .back-wall { -webkit-transform: translateZ(-"+layerThickness+"); } "+".layer-container { -webkit-transform: translateZ("+this._layerSpacing+"); }";var stylesheetTextNode=this._scaleAdjustmentStylesheet.firstChild;if(!stylesheetTextNode||stylesheetTextNode.nodeType!==Node.TEXT_NODE||stylesheetTextNode.nextSibling)
 this._scaleAdjustmentStylesheet.textContent=stylesheetContent;else
-stylesheetTextNode.nodeValue=stylesheetContent;var element=this._elementForLayer(root);element.style.webkitTransform="scale3d("+this._scale+","+this._scale+","+this._scale+")";element.style.webkitTransformOrigin="";element.style.left=((this._clientWidth-root.width()*this._scale)>>1)+"px";element.style.top=((this._clientHeight-root.height()*this._scale)>>1)+"px";},_update:function()
+stylesheetTextNode.nodeValue=stylesheetContent;var style=this._elementForLayer(root).style;style.left=Math.round(this._paddingX)+"px";style.top=Math.round(this._paddingY)+"px";style.webkitTransformOrigin="";},_onTransformChanged:function(event)
+{var changedTransforms=(event.data);if(changedTransforms&WebInspector.TransformController.TransformType.Scale)
+this._update();else
+this._updateTransform();},_updateTransform:function()
+{var root=this._model.contentRoot();if(!root)
+return;var offsetX=this._transformController.offsetX();var offsetY=this._transformController.offsetY();var style=this._rotatingContainerElement.style;style.webkitTransform="translateZ(10000px)"+" rotateX("+this._transformController.rotateX()+"deg) rotateY("+this._transformController.rotateY()+"deg)"+" translateX("+offsetX+"px) translateY("+offsetY+"px)";style.webkitTransformOrigin=Math.round(this._paddingX+offsetX+root.width()*this._scale/2)+"px "+Math.round(this._paddingY+offsetY+root.height()*this._scale/2)+"px";},_createScrollRectElement:function(layer)
+{var element=document.createElement("div");var parentLayerElement=this._elementsByLayerId[layer.id()];element.className="scroll-rect";parentLayerElement.appendChild(element);return element;},_updateScrollRectElement:function(rect,element)
+{var style=element.style;style.width=Math.round(rect.rect.width*this._scale)+"px";style.height=Math.round(rect.rect.height*this._scale)+"px";style.left=Math.round(rect.rect.x*this._scale)+"px";style.top=Math.round(rect.rect.y*this._scale)+"px";element.title=WebInspector.Layers3DView.ScrollRectTitles[rect.type];},_updateScrollRectsForLayer:function(layer)
+{var layerDetails=this._elementsByLayerId[layer.id()].__layerDetails;function removeElement(element)
+{element.remove()}
+if(layer.scrollRects().length!==layerDetails.scrollRectElements.length){layerDetails.scrollRectElements.forEach(removeElement);layerDetails.scrollRectElements=layer.scrollRects().map(this._createScrollRectElement.bind(this,layer));}
+for(var i=0;i<layer.scrollRects().length;++i)
+this._updateScrollRectElement(layer.scrollRects()[i],layerDetails.scrollRectElements[i]);},_update:function()
 {if(!this.isShowing()){this._needsUpdate=true;return;}
 if(!this._model.contentRoot()){this._emptyView.show(this.element);this._rotatingContainerElement.removeChildren();return;}
 this._emptyView.detach();function updateLayer(layer)
-{this._updateLayerElement(this._elementForLayer(layer));}
+{this._updateLayerElement(this._elementForLayer(layer));this._updateScrollRectsForLayer(layer);}
 this._clientWidth=this.element.clientWidth;this._clientHeight=this.element.clientHeight;for(var layerId in this._elementsByLayerId){if(this._model.layerById(layerId))
 continue;this._elementsByLayerId[layerId].remove();delete this._elementsByLayerId[layerId];}
-this._scaleToFit();this._model.forEachLayer(updateLayer.bind(this),this._model.contentRoot());this._needsUpdate=false;},_onLayerPainted:function(event)
+this._scaleToFit();this._updateTransform();this._model.forEachLayer(updateLayer.bind(this));this._needsUpdate=false;},_onLayerPainted:function(event)
 {var layer=(event.data);this._updatePaintRect(this._elementForLayer(layer));},_elementForLayer:function(layer)
 {var element=this._elementsByLayerId[layer.id()];if(element){element.__layerDetails.layer=layer;return element;}
-element=document.createElement("div");element.className="layer-container";["fill back-wall","side-wall top","side-wall right","side-wall bottom","side-wall left"].forEach(element.createChild.bind(element,"div"));element.__layerDetails=new WebInspector.LayerDetails(layer,element.createChild("div","paint-rect"));this._elementsByLayerId[layer.id()]=element;return element;},_updateLayerElement:function(element)
-{var layer=element.__layerDetails.layer;var style=element.style;var isContentRoot=layer===this._model.contentRoot();var parentElement=isContentRoot?this._rotatingContainerElement:this._elementForLayer(layer.parent());element.__layerDetails.depth=parentElement.__layerDetails?parentElement.__layerDetails.depth+1:0;element.enableStyleClass("invisible",layer.invisible());this._updateElementColor(element);if(parentElement!==element.parentElement)
-parentElement.appendChild(element);style.width=layer.width()+"px";style.height=layer.height()+"px";this._updatePaintRect(element);if(isContentRoot)
-return;style.left=layer.offsetX()+"px";style.top=layer.offsetY()+"px";var transform=layer.transform();if(transform){style.webkitTransform="matrix3d("+transform.map(toFixed5).join(",")+") translateZ("+this._layerSpacing+")";var anchor=layer.anchorPoint();style.webkitTransformOrigin=Math.round(anchor[0]*100)+"% "+Math.round(anchor[1]*100)+"% "+anchor[2];}else{style.webkitTransform="";style.webkitTransformOrigin="";}
+element=document.createElement("div");element.__layerDetails=new WebInspector.LayerDetails(layer,element.createChild("div","paint-rect"));["fill back-wall","side-wall top","side-wall right","side-wall bottom","side-wall left"].forEach(element.createChild.bind(element,"div"));this._elementsByLayerId[layer.id()]=element;return element;},_updateLayerElement:function(element)
+{var layer=element.__layerDetails.layer;var style=element.style;var contentRoot=(this._model.contentRoot());var isContentRoot=layer===contentRoot;var isRoot=layer===this._model.root();var parentElement;if(isContentRoot){parentElement=this._rotatingContainerElement;element.__layerDetails.depth=0;}else if(isRoot){parentElement=this._elementForLayer(contentRoot);element.__layerDetails.depth=undefined;}else{parentElement=this._elementForLayer(layer.parent());element.__layerDetails.depth=parentElement.__layerDetails.isAboveContentRoot()?undefined:parentElement.__layerDetails.depth+1;}
+if(!element.__layerDetails.isAboveContentRoot())
+element.className="layer-container";else
+element.className="layer-transparent";element.classList.toggle("invisible",layer.invisible());this._updateElementColor(element);if(parentElement!==element.parentElement)
+parentElement.appendChild(element);style.width=Math.round(layer.width()*this._scale)+"px";style.height=Math.round(layer.height()*this._scale)+"px";this._updatePaintRect(element);if(isContentRoot||isRoot)
+return;style.left=Math.round(layer.offsetX()*this._scale)+"px";style.top=Math.round(layer.offsetY()*this._scale)+"px";var transform=layer.transform();if(transform){transform=transform.slice();for(var i=12;i<15;++i)
+transform[i]*=this._scale;style.webkitTransform="matrix3d("+transform.map(toFixed5).join(",")+") translateZ("+this._layerSpacing+")";var anchor=layer.anchorPoint();style.webkitTransformOrigin=Math.round(anchor[0]*100)+"% "+Math.round(anchor[1]*100)+"% "+anchor[2];}else{style.webkitTransform="";style.webkitTransformOrigin="";}
 function toFixed5(x)
 {return x.toFixed(5);}},_updatePaintRect:function(element)
 {var details=element.__layerDetails;var paintRect=details.layer.lastPaintRect();var paintRectElement=details.paintRectElement;if(!paintRect||!WebInspector.settings.showPaintRects.get()){paintRectElement.classList.add("hidden");return;}
 paintRectElement.classList.remove("hidden");if(details.paintCount===details.layer.paintCount())
-return;details.paintCount=details.layer.paintCount();var style=paintRectElement.style;style.left=paintRect.x+"px";style.top=paintRect.y+"px";style.width=paintRect.width+"px";style.height=paintRect.height+"px";var color=WebInspector.Layers3DView.PaintRectColors[details.paintCount%WebInspector.Layers3DView.PaintRectColors.length];style.borderWidth=Math.ceil(1/this._scale)+"px";style.borderColor=color.toString(WebInspector.Color.Format.RGBA);},_updateElementColor:function(element)
+return;details.paintCount=details.layer.paintCount();var style=paintRectElement.style;style.left=Math.round(paintRect.x*this._scale)+"px";style.top=Math.round(paintRect.y*this._scale)+"px";style.width=Math.round(paintRect.width*this._scale)+"px";style.height=Math.round(paintRect.height*this._scale)+"px";var color=WebInspector.Layers3DView.PaintRectColors[details.paintCount%WebInspector.Layers3DView.PaintRectColors.length];style.borderWidth=Math.ceil(1/this._scale)+"px";style.borderColor=color.toString(WebInspector.Color.Format.RGBA);},_updateElementColor:function(element)
 {var color;if(element===this._lastOutlinedElement[WebInspector.Layers3DView.OutlineType.Selected])
 color=WebInspector.Color.PageHighlight.Content.toString(WebInspector.Color.Format.RGBA)||"";else{const base=144;var component=base+20*((element.__layerDetails.depth-1)%5);color="rgba("+component+","+component+","+component+", 0.8)";}
-element.style.backgroundColor=color;},_onMouseDown:function(event)
-{if(event.which!==1)
-return;this._setReferencePoint(event);},_setReferencePoint:function(event)
-{this._originX=event.clientX;this._originY=event.clientY;this._oldRotateX=this._rotateX;this._oldRotateY=this._rotateY;},_resetReferencePoint:function()
-{delete this._originX;delete this._originY;delete this._oldRotateX;delete this._oldRotateY;},_onMouseUp:function(event)
-{if(event.which!==1)
-return;this._resetReferencePoint();},_layerFromEventPoint:function(event)
+element.style.backgroundColor=color;},_layerFromEventPoint:function(event)
 {var element=this.element.ownerDocument.elementFromPoint(event.pageX,event.pageY);if(!element)
-return null;element=element.enclosingNodeOrSelfWithClass("layer-container");return element&&element.__layerDetails&&element.__layerDetails.layer;},_onMouseMove:function(event)
-{if(!event.which){this.dispatchEventToListeners(WebInspector.Layers3DView.Events.LayerHovered,this._layerFromEventPoint(event));return;}
-if(event.which===1){if(typeof this._originX!=="number")
-this._setReferencePoint(event);this._rotateX=this._oldRotateX+(this._originY-event.clientY)/2;this._rotateY=this._oldRotateY-(this._originX-event.clientX)/4;this._rotatingContainerElement.style.webkitTransform="translateZ(10000px) rotateX("+this._rotateX+"deg) rotateY("+this._rotateY+"deg)";}},_onContextMenu:function(event)
-{var layer=this._layerFromEventPoint(event);var nodeId=layer&&layer.nodeId();if(!nodeId)
-return;var domNode=WebInspector.domAgent.nodeForId(nodeId);if(!domNode)
-return;var contextMenu=new WebInspector.ContextMenu(event);contextMenu.appendApplicableItems(domNode);contextMenu.show();},_onClick:function(event)
+return null;element=element.enclosingNodeOrSelfWithClass("layer-container");return element&&element.__layerDetails&&element.__layerDetails.layer;},_onContextMenu:function(event)
+{var layer=this._layerFromEventPoint(event);var nodeId=layer&&layer.nodeIdForSelfOrAncestor();if(!nodeId)
+return;var domNode=WebInspector.domModel.nodeForId(nodeId);if(!domNode)
+return;var contextMenu=new WebInspector.ContextMenu(event);contextMenu.appendApplicableItems(domNode);contextMenu.show();},_onMouseMove:function(event)
+{if(event.which)
+return;this.dispatchEventToListeners(WebInspector.Layers3DView.Events.LayerHovered,this._layerFromEventPoint(event));},_onClick:function(event)
 {this.dispatchEventToListeners(WebInspector.Layers3DView.Events.LayerSelected,this._layerFromEventPoint(event));},_onDoubleClick:function(event)
 {var layer=this._layerFromEventPoint(event);if(layer)
-this.dispatchEventToListeners(WebInspector.Layers3DView.Events.LayerSnapshotRequested,layer);event.stopPropagation();},__proto__:WebInspector.View.prototype}
+this.dispatchEventToListeners(WebInspector.Layers3DView.Events.LayerSnapshotRequested,layer);event.stopPropagation();},__proto__:WebInspector.VBox.prototype}
 WebInspector.LayerDetails=function(layer,paintRectElement)
-{this.layer=layer;this.depth=0;this.paintRectElement=paintRectElement;this.paintCount=0;};WebInspector.LayerDetailsView=function(model)
-{WebInspector.View.call(this);this.element.classList.add("fill");this.element.classList.add("layer-details-view");this._emptyView=new WebInspector.EmptyView(WebInspector.UIString("Select a layer to see its details"));this._createTable();this._model=model;this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged,this._onLayerTreeUpdated,this);this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerPainted,this._onLayerPainted,this);}
+{this.layer=layer;this.depth=0;this.paintRectElement=paintRectElement;this.paintCount=0;this.scrollRectElements=[];}
+WebInspector.LayerDetails.prototype={isAboveContentRoot:function()
+{return this.depth===undefined;}};WebInspector.LayerDetailsView=function(model)
+{WebInspector.VBox.call(this);this.element.classList.add("layer-details-view");this._emptyView=new WebInspector.EmptyView(WebInspector.UIString("Select a layer to see its details"));this._createTable();this._model=model;this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged,this._onLayerTreeUpdated,this);this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerPainted,this._onLayerPainted,this);}
 WebInspector.LayerDetailsView.CompositingReasonDetail={"transform3D":WebInspector.UIString("Composition due to association with an element with a CSS 3D transform."),"video":WebInspector.UIString("Composition due to association with a <video> element."),"canvas":WebInspector.UIString("Composition due to the element being a <canvas> element."),"plugin":WebInspector.UIString("Composition due to association with a plugin."),"iFrame":WebInspector.UIString("Composition due to association with an <iframe> element."),"backfaceVisibilityHidden":WebInspector.UIString("Composition due to association with an element with a \"backface-visibility: hidden\" style."),"animation":WebInspector.UIString("Composition due to association with an animated element."),"filters":WebInspector.UIString("Composition due to association with an element with CSS filters applied."),"positionFixed":WebInspector.UIString("Composition due to association with an element with a \"position: fixed\" style."),"positionSticky":WebInspector.UIString("Composition due to association with an element with a \"position: sticky\" style."),"overflowScrollingTouch":WebInspector.UIString("Composition due to association with an element with a \"overflow-scrolling: touch\" style."),"blending":WebInspector.UIString("Composition due to association with an element that has blend mode other than \"normal\"."),"assumedOverlap":WebInspector.UIString("Composition due to association with an element that may overlap other composited elements."),"overlap":WebInspector.UIString("Composition due to association with an element overlapping other composited elements."),"negativeZIndexChildren":WebInspector.UIString("Composition due to association with an element with descendants that have a negative z-index."),"transformWithCompositedDescendants":WebInspector.UIString("Composition due to association with an element with composited descendants."),"opacityWithCompositedDescendants":WebInspector.UIString("Composition due to association with an element with opacity applied and composited descendants."),"maskWithCompositedDescendants":WebInspector.UIString("Composition due to association with a masked element and composited descendants."),"reflectionWithCompositedDescendants":WebInspector.UIString("Composition due to association with an element with a reflection and composited descendants."),"filterWithCompositedDescendants":WebInspector.UIString("Composition due to association with an element with CSS filters applied and composited descendants."),"blendingWithCompositedDescendants":WebInspector.UIString("Composition due to association with an element with CSS blending applied and composited descendants."),"clipsCompositingDescendants":WebInspector.UIString("Composition due to association with an element clipping compositing descendants."),"perspective":WebInspector.UIString("Composition due to association with an element with perspective applied."),"preserve3D":WebInspector.UIString("Composition due to association with an element with a \"transform-style: preserve-3d\" style."),"root":WebInspector.UIString("Root layer."),"layerForClip":WebInspector.UIString("Layer for clip."),"layerForScrollbar":WebInspector.UIString("Layer for scrollbar."),"layerForScrollingContainer":WebInspector.UIString("Layer for scrolling container."),"layerForForeground":WebInspector.UIString("Layer for foreground."),"layerForBackground":WebInspector.UIString("Layer for background."),"layerForMask":WebInspector.UIString("Layer for mask."),"layerForVideoOverlay":WebInspector.UIString("Layer for video overlay.")};WebInspector.LayerDetailsView.prototype={setLayer:function(layer)
 {this._layer=layer;if(this.isShowing())
 this._update();},wasShown:function()
@@ -168,8 +120,8 @@
 {if(!compositingReasons||!compositingReasons.length){this._compositingReasonsCell.textContent="n/a";return;}
 var fragment=document.createDocumentFragment();for(var i=0;i<compositingReasons.length;++i){if(i)
 fragment.appendChild(document.createTextNode(","));var span=document.createElement("span");span.title=WebInspector.LayerDetailsView.CompositingReasonDetail[compositingReasons[i]]||"";span.textContent=compositingReasons[i];fragment.appendChild(span);}
-this._compositingReasonsCell.removeChildren();this._compositingReasonsCell.appendChild(fragment);},__proto__:WebInspector.View.prototype};WebInspector.PaintProfilerView=function(model,layers3DView)
-{WebInspector.View.call(this);this.element.classList.add("fill","paint-profiler-view");this._model=model;this._layers3DView=layers3DView;this._canvas=this.element.createChild("canvas","fill");this._context=this._canvas.getContext("2d");this._selectionWindow=new WebInspector.OverviewGrid.Window(this.element,this.element);this._selectionWindow.addEventListener(WebInspector.OverviewGrid.Events.WindowChanged,this._onWindowChanged,this);this._innerBarWidth=4*window.devicePixelRatio;this._minBarHeight=4*window.devicePixelRatio;this._barPaddingWidth=2*window.devicePixelRatio;this._outerBarWidth=this._innerBarWidth+this._barPaddingWidth;this._reset();}
+this._compositingReasonsCell.removeChildren();this._compositingReasonsCell.appendChild(fragment);},__proto__:WebInspector.VBox.prototype};WebInspector.PaintProfilerView=function(model,layers3DView)
+{WebInspector.VBox.call(this);this.element.classList.add("paint-profiler-view");this._model=model;this._layers3DView=layers3DView;this._canvas=this.element.createChild("canvas","fill");this._context=this._canvas.getContext("2d");this._selectionWindow=new WebInspector.OverviewGrid.Window(this.element,this.element);this._selectionWindow.addEventListener(WebInspector.OverviewGrid.Events.WindowChanged,this._onWindowChanged,this);this._innerBarWidth=4*window.devicePixelRatio;this._minBarHeight=4*window.devicePixelRatio;this._barPaddingWidth=2*window.devicePixelRatio;this._outerBarWidth=this._innerBarWidth+this._barPaddingWidth;this._reset();}
 WebInspector.PaintProfilerView.prototype={onResize:function()
 {this._update();},_update:function()
 {this._canvas.width=this.element.clientWidth*window.devicePixelRatio;this._canvas.height=this.element.clientHeight*window.devicePixelRatio;this._samplesPerBar=0;if(!this._profiles||!this._profiles.length)
@@ -188,11 +140,33 @@
 {this._snapshot=snapshot;if(!snapshot){this._profiles=null;this._update();return;}
 snapshot.requestImage(null,null,this._layers3DView.showImageForLayer.bind(this._layers3DView,this._layer));snapshot.profile(onProfileDone.bind(this));}
 function onProfileDone(profiles)
-{this._profiles=profiles;this._update();}},__proto__:WebInspector.View.prototype};;WebInspector.LayersPanel=function()
-{WebInspector.Panel.call(this,"layers");this.registerRequiredCSS("layersPanel.css");const initialLayerTreeSidebarWidth=225;const minimumMainWidthPercent=0.5;this.createSidebarViewWithTree();this.splitView.sidebarElement().classList.add("outline-disclosure");this.sidebarTreeElement.classList.remove("sidebar-tree");this._model=new WebInspector.LayerTreeModel();this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged,this._onLayerTreeUpdated,this);this._currentlySelectedLayer=null;this._currentlyHoveredLayer=null;this._layerTree=new WebInspector.LayerTree(this._model,this.sidebarTree);this._layerTree.addEventListener(WebInspector.LayerTree.Events.LayerSelected,this._onLayerSelected,this);this._layerTree.addEventListener(WebInspector.LayerTree.Events.LayerHovered,this._onLayerHovered,this);this._rightSplitView=new WebInspector.SplitView(false,"layerDetailsSplitView");this.splitView.setMainView(this._rightSplitView);this._layers3DView=new WebInspector.Layers3DView(this._model);this._layers3DView.show(this._rightSplitView.firstElement());this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.LayerSelected,this._onLayerSelected,this);this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.LayerHovered,this._onLayerHovered,this);this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.LayerSnapshotRequested,this._onSnapshotRequested,this);this._tabbedPane=new WebInspector.TabbedPane();this._tabbedPane.element.classList.add("fill");this._tabbedPane.show(this._rightSplitView.secondElement());this._layerDetailsView=new WebInspector.LayerDetailsView(this._model);this._tabbedPane.appendTab(WebInspector.LayersPanel.DetailsViewTabs.Details,WebInspector.UIString("Details"),this._layerDetailsView);this._paintProfilerView=new WebInspector.PaintProfilerView(this._model,this._layers3DView);this._tabbedPane.appendTab(WebInspector.LayersPanel.DetailsViewTabs.Profiler,WebInspector.UIString("Profiler"),this._paintProfilerView);}
+{this._profiles=profiles;this._update();}},__proto__:WebInspector.VBox.prototype};;WebInspector.TransformController=function(element)
+{this.element=element;element.addEventListener("mousemove",this._onMouseMove.bind(this),false);element.addEventListener("mousedown",this._onMouseDown.bind(this),false);element.addEventListener("mouseup",this._onMouseUp.bind(this),false);element.addEventListener("mousewheel",this._onMouseWheel.bind(this),false);this.reset();}
+WebInspector.TransformController.Events={TransformChanged:"TransformChanged"}
+WebInspector.TransformController.TransformType={Offset:1<<0,Scale:1<<1,Rotation:1<<2}
+WebInspector.TransformController.prototype={_postChangeEvent:function(changeType)
+{this.dispatchEventToListeners(WebInspector.TransformController.Events.TransformChanged,changeType);},_onMouseMove:function(event)
+{if(event.which!==1)
+return;if(typeof this._originX!=="number")
+this._setReferencePoint(event);this._rotateX=this._oldRotateX+(this._originY-event.clientY)/2;this._rotateY=this._oldRotateY-(this._originX-event.clientX)/4;this._postChangeEvent(WebInspector.TransformController.TransformType.Rotation);},reset:function()
+{this._scale=1;this._offsetX=0;this._offsetY=0;this._rotateX=0;this._rotateY=0;},scale:function()
+{return this._scale;},offsetX:function()
+{return this._offsetX;},offsetY:function()
+{return this._offsetY;},rotateX:function()
+{return this._rotateX;},rotateY:function()
+{return this._rotateY;},_onMouseWheel:function(event)
+{if(event.shiftKey){const zoomFactor=1.1;const mouseWheelZoomSpeed=1/120;var scaleFactor=Math.pow(zoomFactor,event.wheelDeltaY*mouseWheelZoomSpeed);this._scale*=scaleFactor;this._offsetX-=(event.clientX-this.element.totalOffsetLeft()-this._offsetX)*(scaleFactor-1);this._offsetY-=(event.clientY-this.element.totalOffsetTop()-this._offsetY)*(scaleFactor-1);this._postChangeEvent(WebInspector.TransformController.TransformType.Scale|WebInspector.TransformController.TransformType.Offset);}else{this._offsetX+=event.wheelDeltaX;this._offsetY+=event.wheelDeltaY;this._postChangeEvent(WebInspector.TransformController.TransformType.Offset);}},_setReferencePoint:function(event)
+{this._originX=event.clientX;this._originY=event.clientY;this._oldRotateX=this._rotateX;this._oldRotateY=this._rotateY;},_resetReferencePoint:function()
+{delete this._originX;delete this._originY;delete this._oldRotateX;delete this._oldRotateY;},_onMouseDown:function(event)
+{if(event.which!==1)
+return;this._setReferencePoint(event);},_onMouseUp:function(event)
+{if(event.which!==1)
+return;this._resetReferencePoint();},__proto__:WebInspector.Object.prototype};WebInspector.LayersPanel=function()
+{WebInspector.PanelWithSidebarTree.call(this,"layers",225);this.registerRequiredCSS("layersPanel.css");this.sidebarElement().classList.add("outline-disclosure");this.sidebarTree.element.classList.remove("sidebar-tree");this._model=new WebInspector.LayerTreeModel();this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged,this._onLayerTreeUpdated,this);this._currentlySelectedLayer=null;this._currentlyHoveredLayer=null;this._layerTree=new WebInspector.LayerTree(this._model,this.sidebarTree);this._layerTree.addEventListener(WebInspector.LayerTree.Events.LayerSelected,this._onLayerSelected,this);this._layerTree.addEventListener(WebInspector.LayerTree.Events.LayerHovered,this._onLayerHovered,this);this._rightSplitView=new WebInspector.SplitView(false,true,"layerDetailsSplitViewState");this._rightSplitView.show(this.mainElement());this._layers3DView=new WebInspector.Layers3DView(this._model);this._layers3DView.show(this._rightSplitView.mainElement());this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.LayerSelected,this._onLayerSelected,this);this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.LayerHovered,this._onLayerHovered,this);this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.LayerSnapshotRequested,this._onSnapshotRequested,this);this._tabbedPane=new WebInspector.TabbedPane();this._tabbedPane.show(this._rightSplitView.sidebarElement());this._layerDetailsView=new WebInspector.LayerDetailsView(this._model);this._tabbedPane.appendTab(WebInspector.LayersPanel.DetailsViewTabs.Details,WebInspector.UIString("Details"),this._layerDetailsView);this._paintProfilerView=new WebInspector.PaintProfilerView(this._model,this._layers3DView);this._tabbedPane.appendTab(WebInspector.LayersPanel.DetailsViewTabs.Profiler,WebInspector.UIString("Profiler"),this._paintProfilerView);}
 WebInspector.LayersPanel.DetailsViewTabs={Details:"details",Profiler:"profiler"};WebInspector.LayersPanel.prototype={wasShown:function()
-{WebInspector.Panel.prototype.wasShown.call(this);this.sidebarTreeElement.focus();this._model.enable();},willHide:function()
-{this._model.disable();WebInspector.Panel.prototype.willHide.call(this);},_onLayerTreeUpdated:function()
+{WebInspector.Panel.prototype.wasShown.call(this);this.sidebarTree.element.focus();this._model.enable();},willHide:function()
+{this._model.disable();WebInspector.Panel.prototype.willHide.call(this);},_showSnapshot:function(snapshot)
+{this._model.setSnapshot(snapshot);},_onLayerTreeUpdated:function()
 {if(this._currentlySelectedLayer&&!this._model.layerById(this._currentlySelectedLayer.id()))
 this._selectLayer(null);if(this._currentlyHoveredLayer&&!this._model.layerById(this._currentlyHoveredLayer.id()))
 this._hoverLayer(null);},_onLayerSelected:function(event)
@@ -201,9 +175,14 @@
 {var layer=(event.data);this._tabbedPane.selectTab(WebInspector.LayersPanel.DetailsViewTabs.Profiler);this._paintProfilerView.profile(layer);},_selectLayer:function(layer)
 {if(this._currentlySelectedLayer===layer)
 return;this._currentlySelectedLayer=layer;var nodeId=layer&&layer.nodeIdForSelfOrAncestor();if(nodeId)
-WebInspector.domAgent.highlightDOMNodeForTwoSeconds(nodeId);else
-WebInspector.domAgent.hideDOMNodeHighlight();this._layerTree.selectLayer(layer);this._layers3DView.selectLayer(layer);this._layerDetailsView.setLayer(layer);},_hoverLayer:function(layer)
+WebInspector.domModel.highlightDOMNodeForTwoSeconds(nodeId);else
+WebInspector.domModel.hideDOMNodeHighlight();this._layerTree.selectLayer(layer);this._layers3DView.selectLayer(layer);this._layerDetailsView.setLayer(layer);},_hoverLayer:function(layer)
 {if(this._currentlyHoveredLayer===layer)
 return;this._currentlyHoveredLayer=layer;var nodeId=layer&&layer.nodeIdForSelfOrAncestor();if(nodeId)
-WebInspector.domAgent.highlightDOMNode(nodeId);else
-WebInspector.domAgent.hideDOMNodeHighlight();this._layerTree.hoverLayer(layer);this._layers3DView.hoverLayer(layer);},__proto__:WebInspector.Panel.prototype}
+WebInspector.domModel.highlightDOMNode(nodeId);else
+WebInspector.domModel.hideDOMNodeHighlight();this._layerTree.hoverLayer(layer);this._layers3DView.hoverLayer(layer);},__proto__:WebInspector.PanelWithSidebarTree.prototype}
+WebInspector.LayersPanel.LayerTreeRevealer=function()
+{}
+WebInspector.LayersPanel.LayerTreeRevealer.prototype={reveal:function(layerTree)
+{if(layerTree instanceof WebInspector.LayerTreeSnapshot)
+(WebInspector.inspectorView.showPanel("layers"))._showSnapshot(layerTree);}}