Commit 0e035b16 authored by achicu@adobe.com's avatar achicu@adobe.com

Web Inspector: [CSS Regions] Show a list of containing regions when clicking a...

Web Inspector: [CSS Regions] Show a list of containing regions when clicking a node that is part of a flow
https://bugs.webkit.org/show_bug.cgi?id=124614

Reviewed by Timothy Hatcher.

Source/WebInspectorUI:

Added a new function in DOMTreeManager called getNodeContentFlowInfo that can be used
to retrieve an object with the following structure:
{
     "regionFlow": <Reference to the ContentFlow object referenced by the -webkit-flow-from property of the node>,
     "contentFlow": <Reference to the ContentFlow object referenced by the -webkit-flow-into property of
                     the node or a parent of the node>,
     "regions": [ list of DOMNodes representing the regions containers of the node. The node is split across all these regions. ]
}

Also, used this method to display a two new sections in the Computed Styles panel.
1. Section "Flows": can have up to two Simple Rows: "Region Flow" and "Content Flow".
2. Section "Container Regions" contains a DOMTreeDataGrid with the list of regions.

The sections are only visible when there's content to display.

Next to the "Region Flow" simple row I've added an arrow that will take the user to the "ContentFlowDOMTreeContentView" of the
ContentFlow. The same happens for the "Content Flow", but in this case the element will also be highlighted.

Part of the patch I've added the DOMTreeDataGridNode. LayerTreeDataGrid has a lot of CSS in common with it, so I
will make another patch to refactor LayerTreeDataGrid to use DOMTreeDataGridNode as a base class.

* Localizations/en.lproj/localizedStrings.js:
* UserInterface/ComputedStyleDetailsPanel.css: Added.
(.details-section > .content > .group > .row.simple.content-flow-link > .label):
(.details-section > .content > .group > .row.simple.content-flow-link > .value):
(.details-section > .content > .group > .row.simple.content-flow-link > .value > div):
(.details-section > .content > .group > .row.simple.content-flow-link > .value > div > .icon):
(.details-section > .content > .group > .row.simple.content-flow-link > .value > div > span):
(.details-section > .content > .group > .row.simple.content-flow-link > .value > div > .go-to-arrow):
(.details-section > .content > .group > .row.simple.content-flow-link:hover > .value > div > .go-to-arrow):
* UserInterface/ComputedStyleDetailsPanel.js:
(WebInspector.ComputedStyleDetailsPanel):
(WebInspector.ComputedStyleDetailsPanel.prototype.get regionFlow):
(WebInspector.ComputedStyleDetailsPanel.prototype.set regionFlow):
(WebInspector.ComputedStyleDetailsPanel.prototype.get contentFlow):
(WebInspector.ComputedStyleDetailsPanel.prototype.set contentFlow):
(WebInspector.ComputedStyleDetailsPanel.prototype.get containerRegions):
(WebInspector.ComputedStyleDetailsPanel.prototype.set containerRegions):
(WebInspector.ComputedStyleDetailsPanel.prototype.refresh):
(WebInspector.ComputedStyleDetailsPanel.prototype._computedStyleShowAllCheckboxValueChanged):
(WebInspector.ComputedStyleDetailsPanel.prototype._resetFlowDetails):
(WebInspector.ComputedStyleDetailsPanel.prototype._refreshFlowDetails.contentFlowInfoReady):
(WebInspector.ComputedStyleDetailsPanel.prototype._refreshFlowDetails):
(WebInspector.ComputedStyleDetailsPanel.prototype._goToRegionFlowArrowWasClicked):
(WebInspector.ComputedStyleDetailsPanel.prototype._goToContentFlowArrowWasClicked):
* UserInterface/DOMTreeDataGrid.css: Added.
(.dom-tree-data-grid .data-grid):
(.dom-tree-data-grid .data-grid table.data):
(.dom-tree-data-grid .data-container):
(.dom-tree-data-grid .data-container tr):
(.dom-tree-data-grid .data-container td > div):
(.dom-tree-data-grid .data-container .name-column):
(.dom-tree-data-grid .data-container .name-column .icon):
(.dom-tree-data-grid .data-container .name-column .label):
(.dom-tree-data-grid .data-container tr:hover .name-column .label):
(.dom-tree-data-grid .data-container .go-to-arrow):
(.dom-tree-data-grid .data-container tr:hover .go-to-arrow):
(.dom-tree-data-grid .data-container tbody > tr:nth-child(2n)):
(.dom-tree-data-grid .data-container tbody > tr:nth-child(2n+1)):
* UserInterface/DOMTreeDataGrid.js: Added.
(WebInspector.DOMTreeDataGrid):
(WebInspector.DOMTreeDataGrid.prototype._onmousemove):
(WebInspector.DOMTreeDataGrid.prototype._onmouseout):
* UserInterface/DOMTreeDataGridNode.js: Added.
(WebInspector.DOMTreeDataGridNode):
(WebInspector.DOMTreeDataGridNode.prototype.get domNode):
(WebInspector.DOMTreeDataGridNode.prototype.createCellContent):
(WebInspector.DOMTreeDataGridNode.prototype._updateNodeName):
(WebInspector.DOMTreeDataGridNode.prototype._makeNameCell):
(WebInspector.DOMTreeDataGridNode.prototype._updateNameCellData):
(WebInspector.DOMTreeDataGridNode.prototype._goToArrowWasClicked):
* UserInterface/DOMTreeManager.js:
(WebInspector.DOMTreeManager.prototype.unregisteredNamedFlowContentElement):
(WebInspector.DOMTreeManager.prototype.nodeRequested):
(WebInspector.DOMTreeManager.prototype._coerceRemoteArrayOfDOMNodes):
(WebInspector.DOMTreeManager.prototype.domNodeResolved):
(WebInspector.DOMTreeManager.prototype.regionNodesAvailable):
(WebInspector.DOMTreeManager.prototype.get if):
(WebInspector.DOMTreeManager.prototype.get var):
(WebInspector.DOMTreeManager.prototype.backendFunction.getComputedProperty):
(WebInspector.DOMTreeManager.prototype.backendFunction.getContentFlowName):
(WebInspector.DOMTreeManager.prototype.):
* UserInterface/DataGrid.css:
(.data-grid.no-header > table.header):
(.data-grid.no-header .data-container):
* UserInterface/DetailsSection.js:
(WebInspector.DetailsSection):
* UserInterface/InspectorBackend.js:
(InspectorBackendClass.prototype._wrap):
* UserInterface/Main.html:
* UserInterface/ResourceSidebarPanel.js:
(WebInspector.ResourceSidebarPanel.prototype.showContentFlowDOMTree):
* UserInterface/RuntimeManager.js:
(WebInspector.RuntimeManager.prototype.evaluateInInspectedWindow):
(WebInspector.RuntimeManager.prototype.getPropertiesForRemoteObject):

LayoutTests:

Added a new test to check the new WebInspector function called DOMTreeManager.getNodeContentFlowInfo.

* http/tests/inspector-protocol/resources/InspectorTest.js:
When testing the inspector code, we want to catch and log any uncaught exceptions or console.errors/asserts.
(InspectorTest.importInspectorScripts.console.error.window.onerror):
(InspectorTest.importInspectorScripts.console.assert):
(InspectorTest.importInspectorScripts):
* inspector-protocol/model/content-node-region-info-expected.txt: Added.
* inspector-protocol/model/content-node-region-info.html: Added.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@160198 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent b8f51544
2013-12-05 Alexandru Chiculita <achicu@adobe.com>
Web Inspector: [CSS Regions] Show a list of containing regions when clicking a node that is part of a flow
https://bugs.webkit.org/show_bug.cgi?id=124614
Reviewed by Timothy Hatcher.
Added a new test to check the new WebInspector function called DOMTreeManager.getNodeContentFlowInfo.
* http/tests/inspector-protocol/resources/InspectorTest.js:
When testing the inspector code, we want to catch and log any uncaught exceptions or console.errors/asserts.
(InspectorTest.importInspectorScripts.console.error.window.onerror):
(InspectorTest.importInspectorScripts.console.assert):
(InspectorTest.importInspectorScripts):
* inspector-protocol/model/content-node-region-info-expected.txt: Added.
* inspector-protocol/model/content-node-region-info.html: Added.
2013-12-05 Zoltan Horvath <zoltan@webkit.org>
[CSS Shapes] Update negative-arguments inset parsing test to test for the argument not for the commas
......@@ -153,6 +153,21 @@ InspectorTest.importScript = function(scriptName)
InspectorTest.importInspectorScripts = function()
{
// Catch any errors and finish the test early.
console.error = window.onerror = function()
{
console.log(Array.prototype.join.call(arguments, ', '));
InspectorTest.completeTest();
};
console.assert = function(assertion, message)
{
if (assertion)
return;
console.log("ASSERT:" + message);
InspectorTest.completeTest();
};
// Note: This function overwrites the InspectorFrontendAPI, so there's currently no
// way to intercept the messages from the backend.
......@@ -182,10 +197,13 @@ InspectorTest.importInspectorScripts = function()
"DOMNode",
"ContentFlow",
"DOMTree",
"DOMUtilities",
"ExecutionContext",
"ExecutionContextList",
"CSSStyleManager",
"Color"
"Color",
"RuntimeObserver",
"RuntimeManager"
];
for (var i = 0; i < inspectorScripts.length; ++i)
InspectorTest.importScript("../../../../../Source/WebInspectorUI/UserInterface/" + inspectorScripts[i] + ".js");
......@@ -197,10 +215,13 @@ InspectorTest.importInspectorScripts = function()
InspectorBackend.registerPageDispatcher(new WebInspector.PageObserver);
InspectorBackend.registerDOMDispatcher(new WebInspector.DOMObserver);
InspectorBackend.registerCSSDispatcher(new WebInspector.CSSObserver);
if (InspectorBackend.registerRuntimeDispatcher)
InspectorBackend.registerRuntimeDispatcher(new WebInspector.RuntimeObserver);
WebInspector.frameResourceManager = new WebInspector.FrameResourceManager;
WebInspector.domTreeManager = new WebInspector.DOMTreeManager;
WebInspector.cssStyleManager = new WebInspector.CSSStyleManager;
WebInspector.runtimeManager = new WebInspector.RuntimeManager;
InspectorFrontendHost.loaded();
}
......
Testing that the DOMTreeManager.getNodeContentFlowInfo returns the containing regions.
Selector: #flow
Region flow name: none
Content flow name: flow
Regions count: 2
Regions: div#region1.region, div#region2.region
Selector: .contentNode1
Region flow name: none
Content flow name: flow
Regions count: 1
Regions: div#region1.region
Selector: .contentNode2
Region flow name: none
Content flow name: flow
Regions count: 2
Regions: div#region1.region, div#region2.region
Selector: body
Region flow name: none
Content flow name: none
Regions count: N/A
Regions: N/A
Selector: #region1
Region flow name: flow
Content flow name: none
Regions count: N/A
Regions: N/A
Selector: #region2
Region flow name: flow
Content flow name: none
Regions count: N/A
Regions: N/A
<!doctype html>
<html>
<head>
<style>
#flow
{
-webkit-flow-into: flow;
}
.contentNode1
{
width: 100%;
height: 50px;
}
.contentNode2
{
width: 100%;
height: 150px;
}
.region
{
-webkit-flow-from: flow;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript" src="../../http/tests/inspector-protocol/resources/protocol-test.js"></script>
<script>
function test()
{
var queryList = ["#flow", ".contentNode1", ".contentNode2", "body", "#region1", "#region2"];
var documentNodeId;
InspectorTest.importInspectorScripts();
WebInspector.domTreeManager.requestDocument(function(documentNode) {
documentNodeId = documentNode.id;
WebInspector.domTreeManager.getNamedFlowCollection(documentNodeId);
next();
});
function query(selector, callback)
{
InspectorTest.log("\nSelector: " + selector);
WebInspector.domTreeManager.querySelector(documentNodeId, selector, function(contentNodeId) {
if (!contentNodeId) {
InspectorTest.log("DOM node not found.");
callback();
}
var domNode = WebInspector.domTreeManager.nodeForId(contentNodeId);
WebInspector.domTreeManager.getNodeContentFlowInfo(domNode, function(error, result) {
console.assert(!error);
if (result) {
InspectorTest.log("Region flow name: " + (result.regionFlow ? result.regionFlow.name : "none"));
InspectorTest.log("Content flow name: " + (result.contentFlow ? result.contentFlow.name : "none"));
InspectorTest.log("Regions count: " + (result.regions ? result.regions.length : "N/A"));
InspectorTest.log("Regions: " + (result.regions ? result.regions.map(WebInspector.displayNameForNode).join(", ") : "N/A"));
} else
InspectorTest.log("No region flow information.");
callback();
});
});
}
function next()
{
if (!queryList.length)
return InspectorTest.completeTest();
query(queryList.shift(), next);
}
}
</script>
</head>
<body onload="runTest()">
<p>Testing that the DOMTreeManager.getNodeContentFlowInfo returns the containing regions.</p>
<div id="flow">
<div class="contentNode1"></div>
<div class="contentNode2"></div>
</div>
<div id="region1" class="region"></div>
<div id="region2" class="region"></div>
</body>
</html>
2013-12-05 Alexandru Chiculita <achicu@adobe.com>
Web Inspector: [CSS Regions] Show a list of containing regions when clicking a node that is part of a flow
https://bugs.webkit.org/show_bug.cgi?id=124614
Reviewed by Timothy Hatcher.
Added a new function in DOMTreeManager called getNodeContentFlowInfo that can be used
to retrieve an object with the following structure:
{
"regionFlow": <Reference to the ContentFlow object referenced by the -webkit-flow-from property of the node>,
"contentFlow": <Reference to the ContentFlow object referenced by the -webkit-flow-into property of
the node or a parent of the node>,
"regions": [ list of DOMNodes representing the regions containers of the node. The node is split across all these regions. ]
}
Also, used this method to display a two new sections in the Computed Styles panel.
1. Section "Flows": can have up to two Simple Rows: "Region Flow" and "Content Flow".
2. Section "Container Regions" contains a DOMTreeDataGrid with the list of regions.
The sections are only visible when there's content to display.
Next to the "Region Flow" simple row I've added an arrow that will take the user to the "ContentFlowDOMTreeContentView" of the
ContentFlow. The same happens for the "Content Flow", but in this case the element will also be highlighted.
Part of the patch I've added the DOMTreeDataGridNode. LayerTreeDataGrid has a lot of CSS in common with it, so I
will make another patch to refactor LayerTreeDataGrid to use DOMTreeDataGridNode as a base class.
* Localizations/en.lproj/localizedStrings.js:
* UserInterface/ComputedStyleDetailsPanel.css: Added.
(.details-section > .content > .group > .row.simple.content-flow-link > .label):
(.details-section > .content > .group > .row.simple.content-flow-link > .value):
(.details-section > .content > .group > .row.simple.content-flow-link > .value > div):
(.details-section > .content > .group > .row.simple.content-flow-link > .value > div > .icon):
(.details-section > .content > .group > .row.simple.content-flow-link > .value > div > span):
(.details-section > .content > .group > .row.simple.content-flow-link > .value > div > .go-to-arrow):
(.details-section > .content > .group > .row.simple.content-flow-link:hover > .value > div > .go-to-arrow):
* UserInterface/ComputedStyleDetailsPanel.js:
(WebInspector.ComputedStyleDetailsPanel):
(WebInspector.ComputedStyleDetailsPanel.prototype.get regionFlow):
(WebInspector.ComputedStyleDetailsPanel.prototype.set regionFlow):
(WebInspector.ComputedStyleDetailsPanel.prototype.get contentFlow):
(WebInspector.ComputedStyleDetailsPanel.prototype.set contentFlow):
(WebInspector.ComputedStyleDetailsPanel.prototype.get containerRegions):
(WebInspector.ComputedStyleDetailsPanel.prototype.set containerRegions):
(WebInspector.ComputedStyleDetailsPanel.prototype.refresh):
(WebInspector.ComputedStyleDetailsPanel.prototype._computedStyleShowAllCheckboxValueChanged):
(WebInspector.ComputedStyleDetailsPanel.prototype._resetFlowDetails):
(WebInspector.ComputedStyleDetailsPanel.prototype._refreshFlowDetails.contentFlowInfoReady):
(WebInspector.ComputedStyleDetailsPanel.prototype._refreshFlowDetails):
(WebInspector.ComputedStyleDetailsPanel.prototype._goToRegionFlowArrowWasClicked):
(WebInspector.ComputedStyleDetailsPanel.prototype._goToContentFlowArrowWasClicked):
* UserInterface/DOMTreeDataGrid.css: Added.
(.dom-tree-data-grid .data-grid):
(.dom-tree-data-grid .data-grid table.data):
(.dom-tree-data-grid .data-container):
(.dom-tree-data-grid .data-container tr):
(.dom-tree-data-grid .data-container td > div):
(.dom-tree-data-grid .data-container .name-column):
(.dom-tree-data-grid .data-container .name-column .icon):
(.dom-tree-data-grid .data-container .name-column .label):
(.dom-tree-data-grid .data-container tr:hover .name-column .label):
(.dom-tree-data-grid .data-container .go-to-arrow):
(.dom-tree-data-grid .data-container tr:hover .go-to-arrow):
(.dom-tree-data-grid .data-container tbody > tr:nth-child(2n)):
(.dom-tree-data-grid .data-container tbody > tr:nth-child(2n+1)):
* UserInterface/DOMTreeDataGrid.js: Added.
(WebInspector.DOMTreeDataGrid):
(WebInspector.DOMTreeDataGrid.prototype._onmousemove):
(WebInspector.DOMTreeDataGrid.prototype._onmouseout):
* UserInterface/DOMTreeDataGridNode.js: Added.
(WebInspector.DOMTreeDataGridNode):
(WebInspector.DOMTreeDataGridNode.prototype.get domNode):
(WebInspector.DOMTreeDataGridNode.prototype.createCellContent):
(WebInspector.DOMTreeDataGridNode.prototype._updateNodeName):
(WebInspector.DOMTreeDataGridNode.prototype._makeNameCell):
(WebInspector.DOMTreeDataGridNode.prototype._updateNameCellData):
(WebInspector.DOMTreeDataGridNode.prototype._goToArrowWasClicked):
* UserInterface/DOMTreeManager.js:
(WebInspector.DOMTreeManager.prototype.unregisteredNamedFlowContentElement):
(WebInspector.DOMTreeManager.prototype.nodeRequested):
(WebInspector.DOMTreeManager.prototype._coerceRemoteArrayOfDOMNodes):
(WebInspector.DOMTreeManager.prototype.domNodeResolved):
(WebInspector.DOMTreeManager.prototype.regionNodesAvailable):
(WebInspector.DOMTreeManager.prototype.get if):
(WebInspector.DOMTreeManager.prototype.get var):
(WebInspector.DOMTreeManager.prototype.backendFunction.getComputedProperty):
(WebInspector.DOMTreeManager.prototype.backendFunction.getContentFlowName):
(WebInspector.DOMTreeManager.prototype.):
* UserInterface/DataGrid.css:
(.data-grid.no-header > table.header):
(.data-grid.no-header .data-container):
* UserInterface/DetailsSection.js:
(WebInspector.DetailsSection):
* UserInterface/InspectorBackend.js:
(InspectorBackendClass.prototype._wrap):
* UserInterface/Main.html:
* UserInterface/ResourceSidebarPanel.js:
(WebInspector.ResourceSidebarPanel.prototype.showContentFlowDOMTree):
* UserInterface/RuntimeManager.js:
(WebInspector.RuntimeManager.prototype.evaluateInInspectedWindow):
(WebInspector.RuntimeManager.prototype.getPropertiesForRemoteObject):
2013-12-04 Antoine Quint <graouts@apple.com>
Web Inspector: ColorWheel uses old Color constructor
......
/*
* 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
* 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 APPLE INC. AND ITS CONTRIBUTORS ``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 APPLE INC. OR ITS CONTRIBUTORS
* 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.
*/
.details-section > .content > .group > .row.simple.content-flow-link > .value > span > .icon {
width: 12px;
height: 12px;
content: url(Images/ContentFlow.svg);
margin-right: 4px;
-webkit-user-select: none;
}
.details-section > .content > .group > .row.simple.content-flow-link span
{
vertical-align: top;
}
......@@ -49,7 +49,43 @@ WebInspector.ComputedStyleDetailsPanel = function()
propertiesRow.element.appendChild(this._propertiesTextEditor.element);
// Region flow name is used to display the "flow-from" property of the Region Containers.
this._regionFlowFragment = document.createElement("span");
this._regionFlowFragment.appendChild(document.createElement("img")).className = "icon";
this._regionFlowNameLabelValue = this._regionFlowFragment.appendChild(document.createElement("span"));
var goToRegionFlowButton = this._regionFlowFragment.appendChild(WebInspector.createGoToArrowButton());
goToRegionFlowButton.addEventListener("click", this._goToRegionFlowArrowWasClicked.bind(this));
this._regionFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Region Flow"));
this._regionFlowNameRow.element.classList.add("content-flow-link");
// Content flow name is used to display the "flow-into" property of the Content nodes.
this._contentFlowFragment = document.createElement("span");
this._contentFlowFragment.appendChild(document.createElement("img")).className = "icon";
this._contentFlowNameLabelValue = this._contentFlowFragment.appendChild(document.createElement("span"));
var goToContentFlowButton = this._contentFlowFragment.appendChild(WebInspector.createGoToArrowButton());
goToContentFlowButton.addEventListener("click", this._goToContentFlowArrowWasClicked.bind(this));
this._contentFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Content Flow"));
this._contentFlowNameRow.element.classList.add("content-flow-link");
var flowNamesGroup = new WebInspector.DetailsSectionGroup([this._regionFlowNameRow, this._contentFlowNameRow]);
this._flowNamesSection = new WebInspector.DetailsSection("content-flow", WebInspector.UIString("Flows"), [flowNamesGroup]);
this._containerRegionsDataGrid = new WebInspector.DOMTreeDataGrid;
this._containerRegionsDataGrid.element.classList.add("no-header");
var containerRegionsRow = new WebInspector.DetailsSectionDataGridRow(this._containerRegionsDataGrid);
var containerRegionsGroup = new WebInspector.DetailsSectionGroup([containerRegionsRow]);
this._containerRegionsFlowSection = new WebInspector.DetailsSection("container-regions", WebInspector.UIString("Container Regions"), [containerRegionsGroup]);
this.element.appendChild(propertiesSection.element);
this.element.appendChild(this._flowNamesSection.element);
this.element.appendChild(this._containerRegionsFlowSection.element);
this._resetFlowDetails();
};
WebInspector.ComputedStyleDetailsPanel.StyleClassName = "computed";
......@@ -59,9 +95,57 @@ WebInspector.ComputedStyleDetailsPanel.prototype = {
// Public
get regionFlow()
{
return this._regionFlow;
},
set regionFlow(regionFlow)
{
this._regionFlow = regionFlow;
this._regionFlowNameLabelValue.textContent = regionFlow ? regionFlow.name : "";
this._regionFlowNameRow.value = regionFlow ? this._regionFlowFragment : null;
this._updateFlowNamesSectionVisibility();
},
get contentFlow()
{
return this._contentFlow;
},
set contentFlow(contentFlow)
{
this._contentFlow = contentFlow;
this._contentFlowNameLabelValue.textContent = contentFlow ? contentFlow.name : "";
this._contentFlowNameRow.value = contentFlow ? this._contentFlowFragment : null;
this._updateFlowNamesSectionVisibility();
},
get containerRegions()
{
return this._containerRegions;
},
set containerRegions(regions)
{
this._containerRegions = regions;
if (!regions || !regions.length) {
this._containerRegionsFlowSection.element.classList.add("hidden");
return;
}
this._containerRegionsDataGrid.removeChildren();
for (var regionNode of regions)
this._containerRegionsDataGrid.appendChild(new WebInspector.DOMTreeDataGridNode(regionNode));
this._containerRegionsFlowSection.element.classList.remove("hidden");
},
refresh: function()
{
this._propertiesTextEditor.style = this.nodeStyles.computedStyle;
this._refreshFlowDetails(this.nodeStyles.node);
},
// Protected
......@@ -85,6 +169,50 @@ WebInspector.ComputedStyleDetailsPanel.prototype = {
var checked = this._computedStyleShowAllCheckbox.checked;
this._computedStyleShowAllSetting.value = checked;
this._propertiesTextEditor.showsImplicitProperties = checked;
},
_updateFlowNamesSectionVisibility: function()
{
this._flowNamesSection.element.classList.toggle("hidden", !this._contentFlow && !this._regionFlow);
},
_resetFlowDetails : function()
{
this.regionFlow = null;
this.contentFlow = null;
this.containerRegions = null;
},
_refreshFlowDetails: function(domNode)
{
this._resetFlowDetails();
if (!domNode)
return;
function contentFlowInfoReady(error, flowData)
{
// Element is not part of any flow.
if (error || !flowData) {
this._resetFlowDetails();
return;
}
this.regionFlow = flowData.regionFlow;
this.contentFlow = flowData.contentFlow;
this.containerRegions = flowData.regions;
}
WebInspector.domTreeManager.getNodeContentFlowInfo(domNode, contentFlowInfoReady.bind(this));
},
_goToRegionFlowArrowWasClicked: function()
{
WebInspector.resourceSidebarPanel.showContentFlowDOMTree(this._regionFlow);
},
_goToContentFlowArrowWasClicked: function()
{
WebInspector.resourceSidebarPanel.showContentFlowDOMTree(this._contentFlow, this.nodeStyles.node, true);
}
};
......
/*
* Copyright (C) 2013 Apple Inc. 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 APPLE INC. AND ITS CONTRIBUTORS ``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 APPLE INC. OR ITS CONTRIBUTORS
* 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.
*/
.dom-tree-data-grid .data-grid {
position: relative;
top: 0;
width: 100%;
height: 100%;
/* Turn off the default borders, we want to snap to edges. */
border: none;
}
.dom-tree-data-grid .data-grid table.data {
background-size: 100% 44px;
}
.dom-tree-data-grid .data-container {
position: absolute;
/* Leave room for the data grid header. */
top: 16px;
/* Use all remaining vertical space in the container. */
bottom: 0;
/* Let the inline table content scroll, independently of the header. */
overflow-y: auto;
overflow-x: hidden;
}
.dom-tree-data-grid .data-container tr {
height: 22px;
}
.dom-tree-data-grid .data-container td > div {
display: -webkit-flex;
width: 100%;
height: 100%;
-webkit-align-items: center;
-webkit-justify-content: flex-end;
}
.dom-tree-data-grid .data-container .name-column {
padding-right: 0;
}
.dom-tree-data-grid .data-container .name-column .icon {
vertical-align: top;
width: 16px;
height: 16px;
/* FIXME: There can be multiple types of DOM nodes that we might need to support in the future. */
content: url(Images/DOMElement.svg);
}
.dom-tree-data-grid .data-container .name-column .label {
-webkit-flex: 1;
padding: 0 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dom-tree-data-grid .data-container tr:hover .name-column .label {
padding-right: 0;
}
.dom-tree-data-grid .data-container .go-to-arrow {
display: none;
}
.dom-tree-data-grid .data-container tr:hover .go-to-arrow {
display: block;
}
.dom-tree-data-grid .data-container tbody > tr:nth-child(2n) {
background-color: white;
}
.dom-tree-data-grid .data-container tbody > tr:nth-child(2n+1) {
background-color: rgb(243, 246, 250);
}
/*
* 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
* 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 APPLE INC. AND ITS CONTRIBUTORS ``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 APPLE INC. OR ITS CONTRIBUTORS
* 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.DOMTreeDataGrid = function() {
WebInspector.DataGrid.call(this, {
name: { title: WebInspector.UIString("Node"), sortable: false }
});
this._previousHoveredElement = null;
this.element.classList.add("dom-tree-data-grid");
this.element.addEventListener("mousemove", this._onmousemove.bind(this), false);
this.element.addEventListener("mouseout", this._onmouseout.bind(this), false);
};
WebInspector.DOMTreeDataGrid.prototype = {
constructor: WebInspector.DOMTreeDataGrid,
__proto__: WebInspector.DataGrid.prototype,
_onmousemove: function(event)
{
var gridNode = this.dataGridNodeFromNode(event.target);
if (!gridNode || this._previousHoveredElement === gridNode.domNode)
return;
this._previousHoveredElement = gridNode.domNode;
WebInspector.domTreeManager.highlightDOMNode(gridNode.domNode.id);
},