Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (158787 => 158788)
--- trunk/Source/WebInspectorUI/ChangeLog 2013-11-06 22:04:09 UTC (rev 158787)
+++ trunk/Source/WebInspectorUI/ChangeLog 2013-11-06 22:08:46 UTC (rev 158788)
@@ -1,3 +1,40 @@
+2013-11-06 Alexandru Chiculita <[email protected]>
+
+ Web Inspector: CSS Regions: When a flow is clicked the content of flow needs to be displayed
+ https://bugs.webkit.org/show_bug.cgi?id=122927
+
+ Reviewed by Joseph Pecoraro.
+
+ ContentFlowTreeContentView is now used to display the content nodes of a ContentFlow. It is
+ very similar to the DOMTreeContentView class, but can handle multiple root nodes.
+
+ * UserInterface/ContentFlowTreeContentView.js: Added.
+ (WebInspector.ContentFlowTreeContentView):
+ (WebInspector.ContentFlowTreeContentView.prototype.get selectionPathComponents):
+ (WebInspector.ContentFlowTreeContentView.prototype.updateLayout):
+ (WebInspector.ContentFlowTreeContentView.prototype.shown):
+ (WebInspector.ContentFlowTreeContentView.prototype.hidden):
+ (WebInspector.ContentFlowTreeContentView.prototype.closed):
+ (WebInspector.ContentFlowTreeContentView.prototype._selectedNodeDidChange):
+ (WebInspector.ContentFlowTreeContentView.prototype._pathComponentSelected):
+ (WebInspector.ContentFlowTreeContentView.prototype._createContentNodeTree):
+ (WebInspector.ContentFlowTreeContentView.prototype._createContentTrees):
+ (WebInspector.ContentFlowTreeContentView.prototype._contentNodeWasAdded):
+ (WebInspector.ContentFlowTreeContentView.prototype._contentNodeWasRemoved):
+ * UserInterface/ContentView.js:
+ (WebInspector.ContentView):
+ (WebInspector.ContentView.isViewable):
+ * UserInterface/DOMTreeElement.js:
+ (WebInspector.DOMTreeElement.prototype.ondeselect): We need to remove the selected "dom node"
+ so that the element is not going to stay selected after the we move to a different DOM tree.
+ * UserInterface/DOMTreeOutline.js:
+ (WebInspector.DOMTreeOutline.prototype.selectDOMNode):
+ * UserInterface/Main.html:
+ * UserInterface/Main.js:
+ (WebInspector.sidebarPanelForRepresentedObject):
+ * UserInterface/ResourceSidebarPanel.js:
+ (WebInspector.ResourceSidebarPanel.prototype._treeElementSelected):
+
2013-11-01 Antoine Quint <[email protected]>
Remove custom Function.prototype.bind() in favor of native version
Modified: trunk/Source/WebInspectorUI/UserInterface/ContentFlow.js (158787 => 158788)
--- trunk/Source/WebInspectorUI/UserInterface/ContentFlow.js 2013-11-06 22:04:09 UTC (rev 158787)
+++ trunk/Source/WebInspectorUI/UserInterface/ContentFlow.js 2013-11-06 22:08:46 UTC (rev 158788)
@@ -12,7 +12,7 @@
* 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
@@ -46,6 +46,7 @@
WebInspector.ContentFlow.prototype = {
constructor: WebInspector.ContentFlow,
+ __proto__: WebInspector.Object.prototype,
// Public
@@ -105,6 +106,3 @@
this.dispatchEventToListeners(WebInspector.ContentFlow.Event.ContentNodeWasRemoved, {node: contentNode});
}
};
-
-
-WebInspector.ContentFlow.prototype.__proto__ = WebInspector.Object.prototype;
Added: trunk/Source/WebInspectorUI/UserInterface/ContentFlowTreeContentView.js (0 => 158788)
--- trunk/Source/WebInspectorUI/UserInterface/ContentFlowTreeContentView.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/ContentFlowTreeContentView.js 2013-11-06 22:08:46 UTC (rev 158788)
@@ -0,0 +1,188 @@
+/*
+ * 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.ContentFlowTreeContentView = function(contentFlow)
+{
+ console.assert(contentFlow);
+
+ WebInspector.ContentView.call(this, contentFlow);
+
+ this._selectedTreeElement = null;
+
+ // Map of contentNode ids to DOMTreeOutline objects.
+ this._nodesMap = new Map();
+
+ this._createContentTrees();
+
+ contentFlow.addEventListener(WebInspector.ContentFlow.Event.ContentNodeWasAdded, this._contentNodeWasAdded, this);
+ contentFlow.addEventListener(WebInspector.ContentFlow.Event.ContentNodeWasRemoved, this._contentNodeWasRemoved, this);
+};
+
+WebInspector.ContentFlowTreeContentView.StyleClassName = "content-flow-tree";
+
+WebInspector.ContentFlowTreeContentView.prototype = {
+ constructor: WebInspector.ContentFlowTreeContentView,
+ __proto__: WebInspector.ContentView.prototype,
+
+ // Public
+
+ get selectionPathComponents()
+ {
+ var treeElement = this._selectedTreeElement;
+ var pathComponents = [];
+
+ while (treeElement && !treeElement.root) {
+ // The close tag is contained within the element it closes. So skip it since we don't want to
+ // show the same node twice in the hierarchy.
+ if (treeElement.isCloseTag()) {
+ treeElement = treeElement.parent;
+ continue;
+ }
+
+ // FIXME: ContentFlow.contentNodes should be linked to each other.
+ var pathComponent = new WebInspector.DOMTreeElementPathComponent(treeElement, treeElement.representedObject);
+ pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
+ pathComponents.unshift(pathComponent);
+
+ // Do not display elements outside the ContentFlow.
+ if (this._nodesMap.has(treeElement.representedObject.id))
+ break;
+
+ treeElement = treeElement.parent;
+ }
+
+ return pathComponents;
+ },
+
+ updateLayout: function()
+ {
+ this._nodesMap.forEach(function(node) {
+ node.updateSelection();
+ });
+ },
+
+ shown: function()
+ {
+ var omitFocus = WebInspector.isConsoleFocused();
+ this._nodesMap.forEach(function(node) {
+ node.setVisible(true, omitFocus);
+ });
+ },
+
+ hidden: function()
+ {
+ WebInspector.domTreeManager.hideDOMNodeHighlight();
+ this._nodesMap.forEach(function(node) {
+ node.setVisible(false);
+ });
+ },
+
+ closed: function()
+ {
+ this.representedObject.removeEventListener(WebInspector.ContentFlow.Event.ContentNodeWasAdded, this._contentNodeWasAdded, this);
+ this.representedObject.removeEventListener(WebInspector.ContentFlow.Event.ContentNodeWasRemoved, this._contentNodeWasRemoved, this);
+ this._nodesMap.forEach(function(node) {
+ node.close();
+ });
+ },
+
+ // Private
+
+ _selectedNodeDidChange: function(contentNodeOutline, event)
+ {
+ var selectedTreeElement = contentNodeOutline.selectedTreeElement;
+ if (this._selectedTreeElement === selectedTreeElement)
+ return;
+
+ // Make sure that moving from one tree to the other will deselect the previous element.
+ if (this._selectedTreeElement && this._selectedTreeElement.treeOutline !== contentNodeOutline)
+ this._selectedTreeElement.deselect();
+
+ this._selectedTreeElement = selectedTreeElement;
+ if (selectedTreeElement) {
+ // FIXME: Switching between different ContentFlowTreeContentView or DOMTreeContentView elements should call ConsoleAgent.addInspectedNode.
+ ConsoleAgent.addInspectedNode(selectedTreeElement.representedObject.id);
+ }
+
+ this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+ },
+
+ _pathComponentSelected: function(event)
+ {
+ console.assert(event.data.pathComponent instanceof WebInspector.DOMTreeElementPathComponent);
+ console.assert(event.data.pathComponent.domTreeElement instanceof WebInspector.DOMTreeElement);
+
+ var treeElement = event.data.pathComponent.domTreeElement;
+ treeElement.treeOutline.selectDOMNode(treeElement.representedObject, true);
+ },
+
+ _createContentNodeTree: function(node)
+ {
+ console.assert(!this._nodesMap.has(node.id));
+
+ // FIXME: DOMTree's should be linked to each other when navigating with keyboard up/down events.
+ var contentNodeOutline = new WebInspector.DOMTreeOutline(false, true, true);
+ contentNodeOutline.addEventListener(WebInspector.DOMTreeOutline.Event.SelectedNodeChanged, this._selectedNodeDidChange.bind(this, contentNodeOutline), this);
+ contentNodeOutline.setVisible(this.visible, WebInspector.isConsoleFocused());
+ contentNodeOutline.wireToDomAgent();
+ contentNodeOutline.rootDOMNode = node;
+
+ this._nodesMap.set(node.id, contentNodeOutline);
+
+ return contentNodeOutline;
+ },
+
+ _createContentTrees: function()
+ {
+ for (var contentNode of this.representedObject.contentNodes) {
+ var contentNodeOutline = this._createContentNodeTree(contentNode);
+ this.element.appendChild(contentNodeOutline.element);
+ }
+ },
+
+ _contentNodeWasAdded: function(event)
+ {
+ var treeElement = this._createContentNodeTree(event.data.node);
+ if (event.data.before) {
+ var beforeElement = this._nodesMap.get(event.data.before.id);
+ console.assert(beforeElement);
+ this.element.insertBefore(treeElement.element, beforeElement.element);
+ } else
+ this.element.appendChild(treeElement.element);
+ },
+
+ _contentNodeWasRemoved: function(event)
+ {
+ var contentNodeOutline = this._nodesMap.get(event.data.node.id);
+ contentNodeOutline.close();
+ contentNodeOutline.element.remove();
+
+ this._nodesMap.remove(event.data.node.id);
+ }
+};
Modified: trunk/Source/WebInspectorUI/UserInterface/ContentView.js (158787 => 158788)
--- trunk/Source/WebInspectorUI/UserInterface/ContentView.js 2013-11-06 22:04:09 UTC (rev 158787)
+++ trunk/Source/WebInspectorUI/UserInterface/ContentView.js 2013-11-06 22:08:46 UTC (rev 158788)
@@ -72,6 +72,9 @@
if (representedObject instanceof WebInspector.CanvasProfileObject)
return new WebInspector.CanvasProfileView(representedObject);
+ if (representedObject instanceof WebInspector.ContentFlow)
+ return new WebInspector.ContentFlowTreeContentView(representedObject);
+
if (typeof representedObject === "string" || representedObject instanceof String)
return new WebInspector.TextContentView(representedObject);
@@ -126,6 +129,8 @@
return true;
if (representedObject instanceof WebInspector.CanvasProfileObject)
return true;
+ if (representedObject instanceof WebInspector.ContentFlow)
+ return true;
if (typeof representedObject === "string" || representedObject instanceof String)
return true;
return false;
Modified: trunk/Source/WebInspectorUI/UserInterface/DOMTreeElement.js (158787 => 158788)
--- trunk/Source/WebInspectorUI/UserInterface/DOMTreeElement.js 2013-11-06 22:04:09 UTC (rev 158787)
+++ trunk/Source/WebInspectorUI/UserInterface/DOMTreeElement.js 2013-11-06 22:08:46 UTC (rev 158788)
@@ -481,6 +481,11 @@
this.treeOutline.suppressRevealAndSelect = false;
},
+ ondeselect: function(treeElement)
+ {
+ this.treeOutline.selectDOMNode(null);
+ },
+
ondelete: function()
{
var startTagTreeElement = this.treeOutline.findTreeElement(this.representedObject);
Modified: trunk/Source/WebInspectorUI/UserInterface/DOMTreeOutline.js (158787 => 158788)
--- trunk/Source/WebInspectorUI/UserInterface/DOMTreeOutline.js 2013-11-06 22:04:09 UTC (rev 158787)
+++ trunk/Source/WebInspectorUI/UserInterface/DOMTreeOutline.js 2013-11-06 22:08:46 UTC (rev 158788)
@@ -155,7 +155,8 @@
// and the select() call would change the selectedDOMNode and reenter this setter. So to
// avoid calling _selectedNodeChanged() twice, first check if _selectedDOMNode is the same
// node as the one passed in.
- if (this._selectedDOMNode === node)
+ // Note that _revealAndSelectNode will not do anything for a null node.
+ if (!node || this._selectedDOMNode === node)
this._selectedNodeChanged();
},
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (158787 => 158788)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2013-11-06 22:04:09 UTC (rev 158787)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2013-11-06 22:08:46 UTC (rev 158788)
@@ -400,6 +400,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script>
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.js (158787 => 158788)
--- trunk/Source/WebInspectorUI/UserInterface/Main.js 2013-11-06 22:04:09 UTC (rev 158787)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.js 2013-11-06 22:08:46 UTC (rev 158788)
@@ -322,7 +322,7 @@
WebInspector.sidebarPanelForRepresentedObject = function(representedObject)
{
if (representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.Resource ||
- representedObject instanceof WebInspector.Script)
+ representedObject instanceof WebInspector.Script || representedObject instanceof WebInspector.ContentFlow)
return this.resourceSidebarPanel;
if (representedObject instanceof WebInspector.DOMStorageObject || representedObject instanceof WebInspector.CookieStorageObject ||
Modified: trunk/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js (158787 => 158788)
--- trunk/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js 2013-11-06 22:04:09 UTC (rev 158787)
+++ trunk/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js 2013-11-06 22:08:46 UTC (rev 158788)
@@ -610,19 +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;
if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement ||
treeElement instanceof WebInspector.StorageTreeElement || treeElement instanceof WebInspector.DatabaseTableTreeElement ||
- treeElement instanceof WebInspector.DatabaseTreeElement || treeElement instanceof WebInspector.ApplicationCacheFrameTreeElement) {
+ treeElement instanceof WebInspector.DatabaseTreeElement || treeElement instanceof WebInspector.ApplicationCacheFrameTreeElement ||
+ treeElement instanceof WebInspector.ContentFlowTreeElement) {
WebInspector.contentBrowser.showContentViewForRepresentedObject(treeElement.representedObject);
return;
}
