Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (157648 => 157649)
--- trunk/Source/WebInspectorUI/ChangeLog 2013-10-18 21:09:11 UTC (rev 157648)
+++ trunk/Source/WebInspectorUI/ChangeLog 2013-10-18 21:41:51 UTC (rev 157649)
@@ -1,3 +1,73 @@
+2013-10-18 Alexandru Chiculita <[email protected]>
+
+ 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 <[email protected]>
Web Inspector: Go to line keyboard command and dialog
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (157648 => 157649)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2013-10-18 21:09:11 UTC (rev 157648)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2013-10-18 21:41:51 UTC (rev 157649)
@@ -179,6 +179,7 @@
l o c a l i z e d S t r i n g s [ " F i l t e r P r o f i l e L i s t " ] = " F i l t e r P r o f i l e L i s t " ;
l o c a l i z e d S t r i n g s [ " F i l t e r R e s o u r c e L i s t " ] = " F i l t e r R e s o u r c e L i s t " ;
l o c a l i z e d S t r i n g s [ " F i l t e r S e a r c h R e s u l t s " ] = " F i l t e r S e a r c h R e s u l t s " ;
+ l o c a l i z e d S t r i n g s [ " F l o w s " ] = " F l o w s " ;
l o c a l i z e d S t r i n g s [ " F o n t " ] = " F o n t " ;
l o c a l i z e d S t r i n g s [ " F o n t s " ] = " F o n t s " ;
l o c a l i z e d S t r i n g s [ " F o r c e d P s e u d o - C l a s s e s " ] = " F o r c e d P s e u d o - C l a s s e s " ;
Modified: trunk/Source/WebInspectorUI/Scripts/copy-user-interface-resources.sh (157648 => 157649)
--- trunk/Source/WebInspectorUI/Scripts/copy-user-interface-resources.sh 2013-10-18 21:09:11 UTC (rev 157648)
+++ trunk/Source/WebInspectorUI/Scripts/copy-user-interface-resources.sh 2013-10-18 21:41:51 UTC (rev 157649)
@@ -13,6 +13,7 @@
* Copyright (C) 2013 Matt Holden <[email protected]>
* Copyright (C) 2013 Samsung Electronics. All rights reserved.
* Copyright (C) 2013 Seokju Kwon ([email protected])
+ * 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
Modified: trunk/Source/WebInspectorUI/UserInterface/CSSObserver.js (157648 => 157649)
--- trunk/Source/WebInspectorUI/UserInterface/CSSObserver.js 2013-10-18 21:09:11 UTC (rev 157648)
+++ trunk/Source/WebInspectorUI/UserInterface/CSSObserver.js 2013-10-18 21:41:51 UTC (rev 157649)
@@ -55,17 +55,22 @@
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);
}
};
Added: trunk/Source/WebInspectorUI/UserInterface/ContentFlow.js (0 => 157649)
--- trunk/Source/WebInspectorUI/UserInterface/ContentFlow.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/ContentFlow.js 2013-10-18 21:41:51 UTC (rev 157649)
@@ -0,0 +1,81 @@
+/*
+ * 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;
Added: trunk/Source/WebInspectorUI/UserInterface/ContentFlowIcon.css (0 => 157649)
--- trunk/Source/WebInspectorUI/UserInterface/ContentFlowIcon.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/ContentFlowIcon.css 2013-10-18 21:41:51 UTC (rev 157649)
@@ -0,0 +1,32 @@
+/*
+ * 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);
+}
Added: trunk/Source/WebInspectorUI/UserInterface/ContentFlowTreeElement.js (0 => 157649)
--- trunk/Source/WebInspectorUI/UserInterface/ContentFlowTreeElement.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/ContentFlowTreeElement.js 2013-10-18 21:41:51 UTC (rev 157649)
@@ -0,0 +1,44 @@
+/*
+ * 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;
Modified: trunk/Source/WebInspectorUI/UserInterface/DOMTree.js (157648 => 157649)
--- trunk/Source/WebInspectorUI/UserInterface/DOMTree.js 2013-10-18 21:09:11 UTC (rev 157648)
+++ trunk/Source/WebInspectorUI/UserInterface/DOMTree.js 2013-10-18 21:41:51 UTC (rev 157649)
@@ -31,6 +31,7 @@
this._rootDOMNode = null;
this._requestIdentifier = 0;
+ this._flowMap = {};
this._frame.addEventListener(WebInspector.Frame.Event.PageExecutionContextChanged, this._framePageExecutionContextChanged, this);
@@ -41,12 +42,18 @@
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 @@
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 @@
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});
}
};
Modified: trunk/Source/WebInspectorUI/UserInterface/DOMTreeManager.js (157648 => 157649)
--- trunk/Source/WebInspectorUI/UserInterface/DOMTreeManager.js 2013-10-18 21:09:11 UTC (rev 157648)
+++ trunk/Source/WebInspectorUI/UserInterface/DOMTreeManager.js 2013-10-18 21:41:51 UTC (rev 157649)
@@ -39,6 +39,7 @@
this._idToDOMNode = {};
this._document = null;
this._attributeLoadNodeIds = {};
+ this._flows = {};
}
WebInspector.Object.addConstructorFunctions(WebInspector.DOMTreeManager);
@@ -52,9 +53,20 @@
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 = {
/**
* @param {function(WebInspector.DOMDocument)=} callback
@@ -519,6 +531,79 @@
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);
}
}
Modified: trunk/Source/WebInspectorUI/UserInterface/FrameTreeElement.js (157648 => 157649)
--- trunk/Source/WebInspectorUI/UserInterface/FrameTreeElement.js 2013-10-18 21:09:11 UTC (rev 157648)
+++ trunk/Source/WebInspectorUI/UserInterface/FrameTreeElement.js 2013-10-18 21:41:51 UTC (rev 157649)
@@ -40,6 +40,10 @@
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 @@
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 @@
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 @@
_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 @@
_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 @@
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 @@
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 @@
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 @@
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)
Added: trunk/Source/WebInspectorUI/UserInterface/Images/ContentFlow.svg (0 => 157649)
--- trunk/Source/WebInspectorUI/UserInterface/Images/ContentFlow.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/ContentFlow.svg 2013-10-18 21:41:51 UTC (rev 157649)
@@ -0,0 +1,8 @@
+<?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"/>
+ <rect x="2.676" y="8.497" fill="rgb(112, 112, 112)" width="2.755" height="4.35"/>
+ <rect x="8.891" y="2.967" fill="rgb(112, 112, 112)" width="4.412" height="10.108"/>
+</svg>
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (157648 => 157649)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2013-10-18 21:09:11 UTC (rev 157648)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2013-10-18 21:41:51 UTC (rev 157649)
@@ -44,6 +44,7 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
@@ -231,6 +232,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
@@ -264,6 +266,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
Modified: trunk/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js (157648 => 157649)
--- trunk/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js 2013-10-18 21:09:11 UTC (rev 157648)
+++ trunk/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js 2013-10-18 21:41:51 UTC (rev 157649)
@@ -610,6 +610,13 @@
_treeElementSelected: function(treeElement, selectedByUser)
{
+ if (treeElement instanceof WebInspector.ContentFlowTreeElement) {
+ // FIXME: Implement DOM tree inspector for content flow tree elements.
+ // https://bugs.webkit.org/show_bug.cgi?id=122927
+ console.log("Content Flow view not implemented");
+ return;
+ }
+
if (treeElement instanceof WebInspector.FolderTreeElement)
return;
