Commit 750ac612 authored by achicu@adobe.com's avatar 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):


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@158788 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent d823229f
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>
Remove custom Function.prototype.bind() in favor of native version
......
......@@ -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.Event = {
WebInspector.ContentFlow.prototype = {
constructor: WebInspector.ContentFlow,
__proto__: WebInspector.Object.prototype,
// Public
......@@ -105,6 +106,3 @@ WebInspector.ContentFlow.prototype = {
this.dispatchEventToListeners(WebInspector.ContentFlow.Event.ContentNodeWasRemoved, {node: contentNode});
}
};
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.
*/
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);
}
};
......@@ -72,6 +72,9 @@ WebInspector.ContentView = function(representedObject)
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 @@ WebInspector.ContentView.isViewable = function(representedObject)
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;
......
......@@ -481,6 +481,11 @@ WebInspector.DOMTreeElement.prototype = {
this.treeOutline.suppressRevealAndSelect = false;
},
ondeselect: function(treeElement)
{
this.treeOutline.selectDOMNode(null);
},
ondelete: function()
{
var startTagTreeElement = this.treeOutline.findTreeElement(this.representedObject);
......
......@@ -155,7 +155,8 @@ WebInspector.DOMTreeOutline.prototype = {
// 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();
},
......
......@@ -400,6 +400,7 @@
<script src="MIMETypeUtilities.js"></script>
<script src="LoadLocalizedStrings.js"></script>
<script src="GoToLineDialog.js"></script>
<script src="ContentFlowTreeContentView.js"></script>
<script src="Main.js"></script>
<script>
......
......@@ -322,7 +322,7 @@ WebInspector.sidebarPanelForCurrentContentView = function()
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 ||
......
......@@ -610,19 +610,13 @@ WebInspector.ResourceSidebarPanel.prototype = {
_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;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment