Commit 3fb6c1d9 authored by achicu@adobe.com's avatar achicu@adobe.com

Web Inspector: CSS Regions: Add the list of flows in the FrameTreeElement

https://bugs.webkit.org/show_bug.cgi?id=122924

Reviewed by Timothy Hatcher.

Added code to collect the flows from the backend into the DOMTree object
on the frontend. Added ContentFlow to represent the flows on the frontend
side and created ContentFlowTreeElement to display the flows in the FrameTreeElement.

* Localizations/en.lproj/localizedStrings.js:
* Scripts/copy-user-interface-resources.sh:
* UserInterface/CSSObserver.js:
(WebInspector.CSSObserver.prototype.namedFlowCreated):
(WebInspector.CSSObserver.prototype.namedFlowRemoved):
(WebInspector.CSSObserver.prototype.regionLayoutUpdated):
(WebInspector.CSSObserver.prototype.regionOversetChanged):
* UserInterface/ContentFlow.js: Added.
(WebInspector.ContentFlow):
(WebInspector.ContentFlow.prototype.get id):
(WebInspector.ContentFlow.prototype.get documentNodeIdentifier):
(WebInspector.ContentFlow.prototype.get name):
(WebInspector.ContentFlow.prototype.get overset):
(WebInspector.ContentFlow.prototype.set overset):
* UserInterface/ContentFlowIcon.css: Added.
(.content-flow-icon .icon):
* UserInterface/ContentFlowTreeElement.js: Added.
(WebInspector.ContentFlowTreeElement):
* UserInterface/DOMTree.js:
(WebInspector.DOMTree):
(WebInspector.DOMTree.prototype.get flowMap):
(WebInspector.DOMTree.prototype.get flowsCount):
(WebInspector.DOMTree.prototype._framePageExecutionContextChanged):
(WebInspector.DOMTree.prototype.requestContentFlowList):
(WebInspector.DOMTree.prototype._isContentFlowInCurrentDocument):
(WebInspector.DOMTree.prototype._contentFlowListWasUpdated):
(WebInspector.DOMTree.prototype._contentFlowWasAdded):
(WebInspector.DOMTree.prototype._contentFlowWasRemoved):
* UserInterface/DOMTreeManager.js:
(WebInspector.DOMTreeManager):
(WebInspector.DOMTreeManager._flowPayloadHashKey):
(WebInspector.DOMTreeManager.prototype._buildHighlightConfig):
(WebInspector.DOMTreeManager.prototype._createContentFlowFromPayload):
(WebInspector.DOMTreeManager.prototype._updateContentFlowFromPayload):
(WebInspector.DOMTreeManager.prototype.getNamedFlowCollection):
(WebInspector.DOMTreeManager.prototype.namedFlowCreated):
(WebInspector.DOMTreeManager.prototype.namedFlowRemoved):
(WebInspector.DOMTreeManager.prototype._sendNamedFlowUpdateEvents):
(WebInspector.DOMTreeManager.prototype.regionLayoutUpdated):
(WebInspector.DOMTreeManager.prototype.regionOversetChanged):
* UserInterface/FrameTreeElement.js:
(WebInspector.FrameTreeElement):
(WebInspector.FrameTreeElement.prototype.onpopulate):
(WebInspector.FrameTreeElement.prototype.onexpand):
(WebInspector.FrameTreeElement.prototype._childContentFlowWasAdded):
(WebInspector.FrameTreeElement.prototype._childContentFlowWasRemoved):
(WebInspector.FrameTreeElement.prototype._rootDOMNodeInvalidated):
(WebInspector.FrameTreeElement.prototype._addChildForRepresentedObject):
(WebInspector.FrameTreeElement.prototype._removeChildForRepresentedObject):
(WebInspector.FrameTreeElement.prototype._addTreeElementForRepresentedObject):
(WebInspector.FrameTreeElement.prototype._compareResourceTreeElements):
(WebInspector.FrameTreeElement.prototype._insertResourceTreeElement):
(WebInspector.FrameTreeElement.prototype._parentTreeElementForRepresentedObject):
(WebInspector.FrameTreeElement.prototype._shouldGroupIntoFolders):
* UserInterface/Images/ContentFlow.svg: Added.
* UserInterface/Main.html:
* UserInterface/ResourceSidebarPanel.js:
(WebInspector.ResourceSidebarPanel.prototype._treeElementSelected):


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@157649 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent ea22dd58
2013-10-18 Alexandru Chiculita <achicu@adobe.com>
Web Inspector: CSS Regions: Add the list of flows in the FrameTreeElement
https://bugs.webkit.org/show_bug.cgi?id=122924
Reviewed by Timothy Hatcher.
Added code to collect the flows from the backend into the DOMTree object
on the frontend. Added ContentFlow to represent the flows on the frontend
side and created ContentFlowTreeElement to display the flows in the FrameTreeElement.
* Localizations/en.lproj/localizedStrings.js:
* Scripts/copy-user-interface-resources.sh:
* UserInterface/CSSObserver.js:
(WebInspector.CSSObserver.prototype.namedFlowCreated):
(WebInspector.CSSObserver.prototype.namedFlowRemoved):
(WebInspector.CSSObserver.prototype.regionLayoutUpdated):
(WebInspector.CSSObserver.prototype.regionOversetChanged):
* UserInterface/ContentFlow.js: Added.
(WebInspector.ContentFlow):
(WebInspector.ContentFlow.prototype.get id):
(WebInspector.ContentFlow.prototype.get documentNodeIdentifier):
(WebInspector.ContentFlow.prototype.get name):
(WebInspector.ContentFlow.prototype.get overset):
(WebInspector.ContentFlow.prototype.set overset):
* UserInterface/ContentFlowIcon.css: Added.
(.content-flow-icon .icon):
* UserInterface/ContentFlowTreeElement.js: Added.
(WebInspector.ContentFlowTreeElement):
* UserInterface/DOMTree.js:
(WebInspector.DOMTree):
(WebInspector.DOMTree.prototype.get flowMap):
(WebInspector.DOMTree.prototype.get flowsCount):
(WebInspector.DOMTree.prototype._framePageExecutionContextChanged):
(WebInspector.DOMTree.prototype.requestContentFlowList):
(WebInspector.DOMTree.prototype._isContentFlowInCurrentDocument):
(WebInspector.DOMTree.prototype._contentFlowListWasUpdated):
(WebInspector.DOMTree.prototype._contentFlowWasAdded):
(WebInspector.DOMTree.prototype._contentFlowWasRemoved):
* UserInterface/DOMTreeManager.js:
(WebInspector.DOMTreeManager):
(WebInspector.DOMTreeManager._flowPayloadHashKey):
(WebInspector.DOMTreeManager.prototype._buildHighlightConfig):
(WebInspector.DOMTreeManager.prototype._createContentFlowFromPayload):
(WebInspector.DOMTreeManager.prototype._updateContentFlowFromPayload):
(WebInspector.DOMTreeManager.prototype.getNamedFlowCollection):
(WebInspector.DOMTreeManager.prototype.namedFlowCreated):
(WebInspector.DOMTreeManager.prototype.namedFlowRemoved):
(WebInspector.DOMTreeManager.prototype._sendNamedFlowUpdateEvents):
(WebInspector.DOMTreeManager.prototype.regionLayoutUpdated):
(WebInspector.DOMTreeManager.prototype.regionOversetChanged):
* UserInterface/FrameTreeElement.js:
(WebInspector.FrameTreeElement):
(WebInspector.FrameTreeElement.prototype.onpopulate):
(WebInspector.FrameTreeElement.prototype.onexpand):
(WebInspector.FrameTreeElement.prototype._childContentFlowWasAdded):
(WebInspector.FrameTreeElement.prototype._childContentFlowWasRemoved):
(WebInspector.FrameTreeElement.prototype._rootDOMNodeInvalidated):
(WebInspector.FrameTreeElement.prototype._addChildForRepresentedObject):
(WebInspector.FrameTreeElement.prototype._removeChildForRepresentedObject):
(WebInspector.FrameTreeElement.prototype._addTreeElementForRepresentedObject):
(WebInspector.FrameTreeElement.prototype._compareResourceTreeElements):
(WebInspector.FrameTreeElement.prototype._insertResourceTreeElement):
(WebInspector.FrameTreeElement.prototype._parentTreeElementForRepresentedObject):
(WebInspector.FrameTreeElement.prototype._shouldGroupIntoFolders):
* UserInterface/Images/ContentFlow.svg: Added.
* UserInterface/Main.html:
* UserInterface/ResourceSidebarPanel.js:
(WebInspector.ResourceSidebarPanel.prototype._treeElementSelected):
2013-10-17 Antoine Quint <graouts@apple.com>
Web Inspector: Go to line keyboard command and dialog
......
......@@ -13,6 +13,7 @@ LICENSE=$(cat <<EOF
* Copyright (C) 2013 Matt Holden <jftholden@yahoo.com>
* Copyright (C) 2013 Samsung Electronics. All rights reserved.
* Copyright (C) 2013 Seokju Kwon (seokju.kwon@gmail.com)
* Copyright (C) 2013 Adobe Systems Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
......
......@@ -55,17 +55,22 @@ WebInspector.CSSObserver.prototype = {
namedFlowCreated: function(namedFlow)
{
// FIXME: Not implemented.
WebInspector.domTreeManager.namedFlowCreated(namedFlow);
},
namedFlowRemoved: function(documentNodeId, flowName)
{
// FIXME: Not implemented.
WebInspector.domTreeManager.namedFlowRemoved(documentNodeId, flowName);
},
regionLayoutUpdated: function(namedFlow)
{
// FIXME: Not implemented.
WebInspector.domTreeManager.regionLayoutUpdated(namedFlow);
},
regionOversetChanged: function(namedFlow)
{
WebInspector.domTreeManager.regionOversetChanged(namedFlow);
}
};
......
/*
* Copyright (C) 2013 Adobe Systems Incorporated. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
*
* 1. Redistributions of source code must retain the above
* copyright notice, this list of conditions and the following
* disclaimer.
* 2. Redistributions in binary form must reproduce the above
* copyright notice, this list of conditions and the following
* disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDER "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE
* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
* OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
* PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
* TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
* THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
* SUCH DAMAGE.
*/
WebInspector.ContentFlow = function(documentNodeIdentifier, name, overset)
{
WebInspector.Object.call(this);
this._documentNodeIdentifier = documentNodeIdentifier;
this._name = name;
this._overset = overset;
};
WebInspector.ContentFlow.Event = {
OversetWasChanged: "content-flow-overset-was-changed"
};
WebInspector.ContentFlow.prototype = {
constructor: WebInspector.ContentFlow,
// Public
get id()
{
// Use the flow node id, to avoid collisions when we change main document id.
return this._documentNodeIdentifier + ":" + this._name;
},
get documentNodeIdentifier()
{
return this._documentNodeIdentifier;
},
get name()
{
return this._name;
},
get overset()
{
return this._overset;
},
set overset(overset)
{
if (this._overset === overset)
return;
this._overset = overset;
this.dispatchEventToListeners(WebInspector.ContentFlow.Event.FlowOversetWasChanged);
}
};
WebInspector.ContentFlow.prototype.__proto__ = WebInspector.Object.prototype;
/*
* Copyright (C) 2013 Adobe Systems Incorporated. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
*
* 1. Redistributions of source code must retain the above
* copyright notice, this list of conditions and the following
* disclaimer.
* 2. Redistributions in binary form must reproduce the above
* copyright notice, this list of conditions and the following
* disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDER "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE
* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
* OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
* PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
* TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
* THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
* SUCH DAMAGE.
*/
.content-flow-icon .icon {
content: url(Images/ContentFlow.svg);
}
/*
* Copyright (C) 2013 Adobe Systems Incorporated. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
*
* 1. Redistributions of source code must retain the above
* copyright notice, this list of conditions and the following
* disclaimer.
* 2. Redistributions in binary form must reproduce the above
* copyright notice, this list of conditions and the following
* disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDER "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE
* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
* OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
* PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
* TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
* THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
* SUCH DAMAGE.
*/
WebInspector.ContentFlowTreeElement = function(representedObject)
{
console.assert(representedObject instanceof WebInspector.ContentFlow);
WebInspector.GeneralTreeElement.call(this, [WebInspector.ContentFlowTreeElement.StyleClassName, WebInspector.ContentFlowTreeElement.ContentFlowIconStyleClassName], representedObject.name, null, representedObject, false);
this.small = true;
};
WebInspector.ContentFlowTreeElement.ContentFlowIconStyleClassName = "content-flow-icon";
WebInspector.ContentFlowTreeElement.prototype = {
constructor: WebInspector.ContentFlowTreeElement
};
WebInspector.ContentFlowTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
......@@ -31,6 +31,7 @@ WebInspector.DOMTree = function(frame)
this._rootDOMNode = null;
this._requestIdentifier = 0;
this._flowMap = {};
this._frame.addEventListener(WebInspector.Frame.Event.PageExecutionContextChanged, this._framePageExecutionContextChanged, this);
......@@ -41,12 +42,18 @@ WebInspector.DOMTree = function(frame)
WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.NodeRemoved, this._nodeRemoved, this);
this._frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._frameMainResourceDidChange, this);
}
WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.ContentFlowListWasUpdated, this._contentFlowListWasUpdated, this);
WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.ContentFlowWasAdded, this._contentFlowWasAdded, this);
WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.ContentFlowWasRemoved, this._contentFlowWasRemoved, this);
};
WebInspector.Object.addConstructorFunctions(WebInspector.DOMTree);
WebInspector.DOMTree.Event = {
RootDOMNodeInvalidated: "dom-tree-root-dom-node-invalidated"
RootDOMNodeInvalidated: "dom-tree-root-dom-node-invalidated",
ContentFlowWasAdded: "dom-tree-content-flow-was-added",
ContentFlowWasRemoved: "dom-tree-content-flow-was-removed"
};
WebInspector.DOMTree.prototype = {
......@@ -59,6 +66,16 @@ WebInspector.DOMTree.prototype = {
return this._frame;
},
get flowMap()
{
return this._flowMap;
},
get flowsCount()
{
return Object.keys(this._flowMap).length;
},
invalidate: function()
{
// Set to null so it is fetched again next time requestRootDOMNode is called.
......@@ -230,6 +247,87 @@ WebInspector.DOMTree.prototype = {
this._requestRootDOMNode();
}
},
requestContentFlowList: function()
{
this.requestRootDOMNode(function(rootNode) {
// Let the backend know we are interested about the named flow events for this document.
WebInspector.domTreeManager.getNamedFlowCollection(rootNode.id);
});
},
_isContentFlowInCurrentDocument: function(flow)
{
return this._rootDOMNode && this._rootDOMNode.id === flow.documentNodeIdentifier;
},
_contentFlowListWasUpdated: function(event)
{
if (!this._rootDOMNode || this._rootDOMNode.id !== event.data.documentNodeIdentifier)
return;
// Assume that all the flows have been removed.
var deletedFlows = {};
for (var flowId in this._flowMap)
deletedFlows[flowId] = this._flowMap[flowId];
var newFlows = [];
var flows = event.data.flows;
for (var i = 0; i < flows.length; ++i) {
var flow = flows[i];
// All the flows received from WebKit are part of the same document.
console.assert(this._isContentFlowInCurrentDocument(flow));
var flowId = flow.id;
if (this._flowMap.hasOwnProperty(flowId)) {
// Remove the flow name from the deleted list.
console.assert(deletedFlows.hasOwnProperty(flowKey));
delete deletedFlows[flowId];
} else {
this._flowMap[flowId] = flow;
newFlows.push(flow);
}
}
for (var flowId in deletedFlows) {
delete this._flowMap[flowId];
}
// Send update events to listeners.
for (var flowId in deletedFlows)
this.dispatchEventToListeners(WebInspector.DOMTree.Event.ContentFlowWasRemoved, {flow: deletedFlows[flowId]});
for (var i = 0; i < newFlows.length; ++i)
this.dispatchEventToListeners(WebInspector.DOMTree.Event.ContentFlowWasAdded, {flow: newFlows[i]});
},
_contentFlowWasAdded: function(event)
{
var flow = event.data.flow;
if (!this._isContentFlowInCurrentDocument(flow))
return;
var flowId = flow.id;
console.assert(!this._flowMap.hasOwnProperty(flowId));
this._flowMap[flowId] = flow;
this.dispatchEventToListeners(WebInspector.DOMTree.Event.ContentFlowWasAdded, {flow: flow});
},
_contentFlowWasRemoved: function(event)
{
var flow = event.data.flow;
if (!this._isContentFlowInCurrentDocument(flow))
return;
var flowId = flow.id;
console.assert(this._flowMap.hasOwnProperty(flowId));
delete this._flowMap[flowId];
this.dispatchEventToListeners(WebInspector.DOMTree.Event.ContentFlowWasRemoved, {flow: flow});
}
};
......
......@@ -39,6 +39,7 @@ WebInspector.DOMTreeManager = function() {
this._idToDOMNode = {};
this._document = null;
this._attributeLoadNodeIds = {};
this._flows = {};
}
WebInspector.Object.addConstructorFunctions(WebInspector.DOMTreeManager);
......@@ -52,7 +53,18 @@ WebInspector.DOMTreeManager.Event = {
DocumentUpdated: "dom-tree-manager-document-updated",
ChildNodeCountUpdated: "dom-tree-manager-child-node-count-updated",
DOMNodeWasInspected: "dom-tree-manager-dom-node-was-inspected",
InspectModeStateChanged: "dom-tree-manager-inspect-mode-state-changed"
InspectModeStateChanged: "dom-tree-manager-inspect-mode-state-changed",
ContentFlowListWasUpdated: "dom-tree-manager-content-flow-list-was-updated",
ContentFlowWasAdded: "dom-tree-manager-content-flow-was-added",
ContentFlowWasRemoved: "dom-tree-manager-content-flow-was-removed",
RegionLayoutUpdated: "dom-tree-manager-region-layout-updated",
RegionOversetChanged: "dom-tree-manager-region-overset-changed"
};
WebInspector.DOMTreeManager._flowPayloadHashKey = function(flowPayload)
{
// Use the flow node id, to avoid collisions when we change main document id.
return flowPayload.documentNodeId + ":" + flowPayload.name;
};
WebInspector.DOMTreeManager.prototype = {
......@@ -519,6 +531,79 @@ WebInspector.DOMTreeManager.prototype = {
highlightConfig.marginColor = {r: 246, g: 178, b: 107, a: 0.66};
return highlightConfig;
},
_createContentFlowFromPayload: function(flowPayload)
{
// FIXME: Collect the content and regions from the payload.
return new WebInspector.ContentFlow(flowPayload.documentNodeId, flowPayload.name, flowPayload.overset);
},
_updateContentFlowFromPayload: function(contentFlow, flowPayload)
{
// FIXME: Collect the content and regions from the payload.
contentFlow.overset = flowPayload.overset;
},
getNamedFlowCollection: function(documentNodeIdentifier)
{
function onNamedFlowCollectionAvailable(error, flows)
{
if (error) {
console.error("Error while getting the named flows for document " + documentNodeIdentifier + ": " + error);
return;
}
var contentFlows = [];
for (var i = 0; i < flows.length; ++i) {
var flowPayload = flows[i];
var flowKey = WebInspector.DOMTreeManager._flowPayloadHashKey(flowPayload);
var contentFlow = this._flows[flowKey];
if (contentFlow)
this._updateContentFlowFromPayload(contentFlow, flowPayload);
else {
contentFlow = this._createContentFlowFromPayload(flowPayload);
this._flows[flowKey] = contentFlow;
}
contentFlows.push(contentFlow);
}
this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.ContentFlowListWasUpdated, {documentNodeIdentifier: documentNodeIdentifier, flows: contentFlows});
}
CSSAgent.getNamedFlowCollection(documentNodeIdentifier, onNamedFlowCollectionAvailable.bind(this));
},
namedFlowCreated: function(flowPayload)
{
var flowKey = WebInspector.DOMTreeManager._flowPayloadHashKey(flowPayload);
console.assert(!this._flows.hasOwnProperty(flowKey));
var contentFlow = this._createContentFlowFromPayload(flowPayload);
this._flows[flowKey] = contentFlow;
this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.ContentFlowWasAdded, {flow: contentFlow});
},
namedFlowRemoved: function(documentNodeIdentifier, flowName)
{
var flowKey = WebInspector.DOMTreeManager._flowPayloadHashKey({documentNodeId: documentNodeIdentifier, name: flowName});
var contentFlow = this._flows[flowKey];
console.assert(contentFlow);
delete this._flows[flowKey];
this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.ContentFlowWasRemoved, {flow: contentFlow});
},
_sendNamedFlowUpdateEvents: function(flowPayload)
{
var flowKey = WebInspector.DOMTreeManager._flowPayloadHashKey(flowPayload);
console.assert(this._flows.hasOwnProperty(flowKey));
this._updateContentFlowFromPayload(this._flows[flowKey], flowPayload);
},
regionLayoutUpdated: function(flowPayload)
{
this._sendNamedFlowUpdateEvents(flowPayload);
},
regionOversetChanged: function(flowPayload)
{
this._sendNamedFlowUpdateEvents(flowPayload);
}
}
......
......@@ -40,6 +40,10 @@ WebInspector.FrameTreeElement = function(frame, representedObject)
frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasAdded, this._childFrameWasAdded, this);
frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasRemoved, this._childFrameWasRemoved, this);
frame.domTree.addEventListener(WebInspector.DOMTree.Event.ContentFlowWasAdded, this._childContentFlowWasAdded, this);
frame.domTree.addEventListener(WebInspector.DOMTree.Event.ContentFlowWasRemoved, this._childContentFlowWasRemoved, this);
frame.domTree.addEventListener(WebInspector.DOMTree.Event.RootDOMNodeInvalidated, this._rootDOMNodeInvalidated, this);
if (this._frame.isMainFrame()) {
this._downloadingPage = false;
WebInspector.notifications.addEventListener(WebInspector.Notification.PageArchiveStarted, this._pageArchiveStarted, this);
......@@ -176,11 +180,16 @@ WebInspector.FrameTreeElement.prototype = {
for (var j = 0; j < sourceMap.resources.length; ++j)
this._addTreeElementForRepresentedObject(sourceMap.resources[j]);
}
var flowMap = this._frame.domTree.flowMap;
for (var flowKey in flowMap)
this._addTreeElementForRepresentedObject(flowMap[flowKey]);
},
onexpand: function()
{
this._expandedSetting.value = true;
this._frame.domTree.requestContentFlowList();
},
oncollapse: function()
......@@ -264,6 +273,21 @@ WebInspector.FrameTreeElement.prototype = {
this._removeChildForRepresentedObject(event.data.childFrame);
},
_childContentFlowWasAdded: function(event)
{
this._addRepresentedObjectToNewChildQueue(event.data.flow);
},
_childContentFlowWasRemoved: function(event)
{
this._removeChildForRepresentedObject(event.data.flow);
},
_rootDOMNodeInvalidated: function() {
if (this.expanded)
this._frame.domTree.requestContentFlowList();
},
_addRepresentedObjectToNewChildQueue: function(representedObject)
{
// This queue reduces flashing as resources load and change folders when their type becomes known.
......@@ -298,8 +322,8 @@ WebInspector.FrameTreeElement.prototype = {
_addChildForRepresentedObject: function(representedObject)
{
console.assert(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame);
if (!(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame))
console.assert(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.ContentFlow);
if (!(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.ContentFlow))
return;
this._updateParentStatus();
......@@ -322,8 +346,8 @@ WebInspector.FrameTreeElement.prototype = {
_removeChildForRepresentedObject: function(representedObject)
{
console.assert(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame);
if (!(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame))
console.assert(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.ContentFlow);
if (!(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.ContentFlow))
return;
this._removeRepresentedObjectFromNewChildQueue(representedObject);
......@@ -355,6 +379,8 @@ WebInspector.FrameTreeElement.prototype = {
childTreeElement = new WebInspector.ResourceTreeElement(representedObject);
else if (representedObject instanceof WebInspector.Frame)
childTreeElement = new WebInspector.FrameTreeElement(representedObject);
else if (representedObject instanceof WebInspector.ContentFlow)
childTreeElement = new WebInspector.ContentFlowTreeElement(representedObject);
}
this._addTreeElement(childTreeElement);
......@@ -392,10 +418,31 @@ WebInspector.FrameTreeElement.prototype = {
this.insertChild(folderTreeElement, insertionIndexForObjectInListSortedByFunction(folderTreeElement, this.children, this._compareTreeElementsByMainTitle));
},
_compareResourceTreeElements: function(a, b)
{
if (a === b)
return 0;
var aIsResource = a instanceof WebInspector.ResourceTreeElement;
var bIsResource = b instanceof WebInspector.ResourceTreeElement;
if (aIsResource && bIsResource)
return WebInspector.ResourceTreeElement.compareResourceTreeElements(a, b);
if (!aIsResource && !bIsResource) {
// When both components are not resources then just compare the titles.
return a.mainTitle.localeCompare(b.mainTitle);
}
// Non-resources should appear before the resources.
// FIXME: There should be a better way to group the elements by their type.
return aIsResource ? 1 : -1;
},
_insertResourceTreeElement: function(parentTreeElement, childTreeElement)
{
console.assert(!childTreeElement.parent);
parentTreeElement.insertChild(childTreeElement, insertionIndexForObjectInListSortedByFunction(childTreeElement, parentTreeElement.children, WebInspector.ResourceTreeElement.compareResourceTreeElements));
parentTreeElement.insertChild(childTreeElement, insertionIndexForObjectInListSortedByFunction(childTreeElement, parentTreeElement.children, this._compareResourceTreeElements));
},
_removeTreeElement: function(childTreeElement, suppressOnDeselect, suppressSelectSibling)
......@@ -445,6 +492,12 @@ WebInspector.FrameTreeElement.prototype = {
return this._framesFolderTreeElement;
}
if (representedObject instanceof WebInspector.ContentFlow) {
if (!this._flowsFolderTreeElement)
this._flowsFolderTreeElement = createFolderTreeElement.call(this, "flows", WebInspector.UIString("Flows"));
return this._flowsFolderTreeElement;
}
if (representedObject instanceof WebInspector.Resource) {
var folderName = this._folderNameForResourceType(representedObject.type);
if (!folderName)
......@@ -484,6 +537,9 @@ WebInspector.FrameTreeElement.prototype = {
var numberOfMediumCategories = 0;
var foundLargeCategory = false;
// FIXME: Use this._frame.domTree.flowsCount to count the number of flows in a frame.
// https://bugs.webkit.org/show_bug.cgi?id=122926
if (this._frame.childFrames.length >= WebInspector.FrameTreeElement.LargeChildCountThreshold)
foundLargeCategory = true;
else if (this._frame.childFrames.length >= WebInspector.FrameTreeElement.MediumChildCountThreshold)
......
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright © 2013 Adobe Systems Inc. All rights reserved. -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="rgb(112, 112, 112)" d="M 13.179 0.75 H 2.821 c -1.141 0 -2.071 0.931 -2.071 2.071 v 10.357 c 0 1.141 0.931 2.071 2.071 2.071 h 10.357 c 1.141 0 2.071 -0.931 2.071 -2.071 V 2.821 C 15.25 1.681 14.319 0.75 13.179 0.75 M 13.179 1.785 c 0.57 0 1.035 0.466 1.035 1.036 v 10.357 c 0 0.57 -0.465 1.035 -1.035 1.035 H 2.821 c -0.57 0 -1.036 -0.465 -1.036 -1.035 V 2.821 c 0 -0.57 0.465 -1.036 1.036 -1.036 H 13.179"/>
<rect x="2.676" y="2.967" fill="rgb(112, 112, 112)" width="4.854" height="4.094"/>