Changeset 158788 in webkit

Timestamp:

Nov 6, 2013 2:08:46 PM (10 years ago)

Author:

Alexandru Chiculita

Message:

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):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/ContentFlow.js (modified) (3 diffs)
• UserInterface/ContentFlowTreeContentView.js (added)
• UserInterface/ContentView.js (modified) (2 diffs)
• UserInterface/DOMTreeElement.js (modified) (1 diff)
• UserInterface/DOMTreeOutline.js (modified) (1 diff)
• UserInterface/Main.html (modified) (1 diff)
• UserInterface/Main.js (modified) (1 diff)
• UserInterface/ResourceSidebarPanel.js (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2013-11-06  Alexandru Chiculita  <achicu@adobe.com>
+
+        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  <graouts@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/ContentFlow.js

@@ -13 +13 @@
  *    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
@@ -47 +47 @@
 
     constructor: WebInspector.ContentFlow,
+    __proto__: WebInspector.Object.prototype,
 
     // Public
@@ -106 +107 @@
     }
 };
-
-
-WebInspector.ContentFlow.prototype.__proto__ = WebInspector.Object.prototype;

trunk/Source/WebInspectorUI/UserInterface/ContentView.js

@@ -73 +73 @@
             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 +129 @@
         return true;
     if (representedObject instanceof WebInspector.CanvasProfileObject)
+        return true;
+    if (representedObject instanceof WebInspector.ContentFlow)
         return true;
     if (typeof representedObject === "string" || representedObject instanceof String)

trunk/Source/WebInspectorUI/UserInterface/DOMTreeElement.js

@@ -482 +482 @@
     },
 
+    ondeselect: function(treeElement)
+    {
+        this.treeOutline.selectDOMNode(null);
+    },
+
     ondelete: function()
     {

trunk/Source/WebInspectorUI/UserInterface/DOMTreeOutline.js

@@ -156 +156 @@
         // 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();
     },

trunk/Source/WebInspectorUI/UserInterface/Main.html

@@ -401 +401 @@
     <script src="LoadLocalizedStrings.js"></script>
     <script src="GoToLineDialog.js"></script>
+    <script src="ContentFlowTreeContentView.js"></script>
     <script src="Main.js"></script>
 

trunk/Source/WebInspectorUI/UserInterface/Main.js

@@ -323 +323 @@
 {
     if (representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.Resource ||
-        representedObject instanceof WebInspector.Script)
+        representedObject instanceof WebInspector.Script || representedObject instanceof WebInspector.ContentFlow)
         return this.resourceSidebarPanel;
 

trunk/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js

@@ -611 +611 @@
     _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;
@@ -623 +616 @@
         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;