LayoutTests/ChangeLog

 12013-11-21 Alexandru Chiculita <achicu@adobe.com>
 2
 3 Web Inspector: [CSS Regions] Show a list of containing regions when clicking a node that is part of a flow
 4 https://bugs.webkit.org/show_bug.cgi?id=124614
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Added a new test to check the new WebInspector function called DOMTreeManager.getNodeContentFlowInfo.
 9
 10 * http/tests/inspector-protocol/resources/InspectorTest.js:
 11 When testing the inspector code, we want to catch and log any uncaught exceptions or console.errors/asserts.
 12 (InspectorTest.importInspectorScripts.console.error.window.onerror):
 13 (InspectorTest.importInspectorScripts.console.assert):
 14 (InspectorTest.importInspectorScripts):
 15 * inspector-protocol/model/content-node-region-info-expected.txt: Added.
 16 * inspector-protocol/model/content-node-region-info.html: Added.
 17
1182013-11-20 Michał Pakuła vel Rutka <m.pakula@samsung.com>
219
320 Unreviewed EFL gardening

LayoutTests/http/tests/inspector-protocol/resources/InspectorTest.js

@@InspectorTest.importScript = function(scriptName)
153153
154154InspectorTest.importInspectorScripts = function()
155155{
 156 // Catch any errors and finish the test early.
 157 console.error = window.onerror = function()
 158 {
 159 console.log(Array.prototype.join.call(arguments, ', '));
 160 InspectorTest.completeTest();
 161 };
 162
 163 console.assert = function(assertion, message)
 164 {
 165 if (assertion)
 166 return;
 167 console.log("ASSERT:" + message);
 168 InspectorTest.completeTest();
 169 };
 170
156171 // Note: This function overwrites the InspectorFrontendAPI, so there's currently no
157172 // way to intercept the messages from the backend.
158173

@@InspectorTest.importInspectorScripts = function()
182197 "DOMNode",
183198 "ContentFlow",
184199 "DOMTree",
 200 "DOMUtilities",
185201 "ExecutionContext",
186202 "ExecutionContextList",
187203 "CSSStyleManager",
188  "Color"
 204 "Color",
 205 "RuntimeObserver",
 206 "RuntimeManager"
189207 ];
190208 for (var i = 0; i < inspectorScripts.length; ++i)
191209 InspectorTest.importScript("../../../../../Source/WebInspectorUI/UserInterface/" + inspectorScripts[i] + ".js");

@@InspectorTest.importInspectorScripts = function()
197215 InspectorBackend.registerPageDispatcher(new WebInspector.PageObserver);
198216 InspectorBackend.registerDOMDispatcher(new WebInspector.DOMObserver);
199217 InspectorBackend.registerCSSDispatcher(new WebInspector.CSSObserver);
 218 if (InspectorBackend.registerRuntimeDispatcher)
 219 InspectorBackend.registerRuntimeDispatcher(new WebInspector.RuntimeObserver);
200220
201221 WebInspector.frameResourceManager = new WebInspector.FrameResourceManager;
202222 WebInspector.domTreeManager = new WebInspector.DOMTreeManager;
203223 WebInspector.cssStyleManager = new WebInspector.CSSStyleManager;
 224 WebInspector.runtimeManager = new WebInspector.RuntimeManager;
204225
205226 InspectorFrontendHost.loaded();
206227}

LayoutTests/inspector-protocol/model/content-node-region-info-expected.txt

 1Testing that the DOMTreeManager.getNodeContentFlowInfo returns the containing regions.
 2
 3
 4Selector: #flow
 5Region flow name: none
 6Content flow name: flow
 7Regions count: 2
 8Regions: div#region1.region, div#region2.region
 9
 10Selector: .contentNode1
 11Region flow name: none
 12Content flow name: flow
 13Regions count: 1
 14Regions: div#region1.region
 15
 16Selector: .contentNode2
 17Region flow name: none
 18Content flow name: flow
 19Regions count: 2
 20Regions: div#region1.region, div#region2.region
 21
 22Selector: body
 23Region flow name: none
 24Content flow name: none
 25Regions count: N/A
 26Regions: N/A
 27
 28Selector: #region1
 29Region flow name: flow
 30Content flow name: none
 31Regions count: N/A
 32Regions: N/A
 33
 34Selector: #region2
 35Region flow name: flow
 36Content flow name: none
 37Regions count: N/A
 38Regions: N/A
 39

LayoutTests/inspector-protocol/model/content-node-region-info.html

 1<!doctype html>
 2<html>
 3<head>
 4<style>
 5#flow
 6{
 7 -webkit-flow-into: flow;
 8}
 9.contentNode1
 10{
 11 width: 100%;
 12 height: 50px;
 13}
 14.contentNode2
 15{
 16 width: 100%;
 17 height: 150px;
 18}
 19.region
 20{
 21 -webkit-flow-from: flow;
 22 width: 100px;
 23 height: 100px;
 24}
 25</style>
 26<script type="text/javascript" src="../../http/tests/inspector-protocol/resources/protocol-test.js"></script>
 27<script>
 28function test()
 29{
 30 var queryList = ["#flow", ".contentNode1", ".contentNode2", "body", "#region1", "#region2"];
 31 var documentNodeId;
 32
 33 InspectorTest.importInspectorScripts();
 34 WebInspector.domTreeManager.requestDocument(function(documentNode) {
 35 documentNodeId = documentNode.id;
 36 WebInspector.domTreeManager.getNamedFlowCollection(documentNodeId);
 37 next();
 38 });
 39
 40 function query(selector, callback)
 41 {
 42 InspectorTest.log("\nSelector: " + selector);
 43 WebInspector.domTreeManager.querySelector(documentNodeId, selector, function(contentNodeId) {
 44 if (!contentNodeId) {
 45 InspectorTest.log("DOM node not found.");
 46 callback();
 47 }
 48 var domNode = WebInspector.domTreeManager.nodeForId(contentNodeId);
 49 WebInspector.domTreeManager.getNodeContentFlowInfo(domNode, function(error, result) {
 50 console.assert(!error);
 51 if (result) {
 52 InspectorTest.log("Region flow name: " + (result.regionFlow ? result.regionFlow.name : "none"));
 53 InspectorTest.log("Content flow name: " + (result.contentFlow ? result.contentFlow.name : "none"));
 54 InspectorTest.log("Regions count: " + (result.regions ? result.regions.length : "N/A"));
 55 InspectorTest.log("Regions: " + (result.regions ? result.regions.map(WebInspector.displayNameForNode).join(", ") : "N/A"));
 56 } else
 57 InspectorTest.log("No region flow information.");
 58 callback();
 59 });
 60 });
 61 }
 62
 63 function next()
 64 {
 65 if (!queryList.length)
 66 return InspectorTest.completeTest();
 67 query(queryList.shift(), next);
 68 }
 69}
 70</script>
 71</head>
 72<body onload="runTest()">
 73 <p>Testing that the DOMTreeManager.getNodeContentFlowInfo returns the containing regions.</p>
 74
 75 <div id="flow">
 76 <div class="contentNode1"></div>
 77 <div class="contentNode2"></div>
 78 </div>
 79
 80 <div id="region1" class="region"></div>
 81 <div id="region2" class="region"></div>
 82</body>
 83</html>

Source/WebInspectorUI/ChangeLog

 12013-11-21 Alexandru Chiculita <achicu@adobe.com>
 2
 3 Web Inspector: [CSS Regions] Show a list of containing regions when clicking a node that is part of a flow
 4 https://bugs.webkit.org/show_bug.cgi?id=124614
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Added a new function in DOMTreeManager called getNodeContentFlowInfo that can be used
 9 to retrieve an object with the following structure:
 10 {
 11 "regionFlow": <Reference to the ContentFlow object referenced by the -webkit-flow-from property of the node>,
 12 "contentFlow": <Reference to the ContentFlow object referenced by the -webkit-flow-into property of
 13 the node or a parent of the node>,
 14 "regions": [ list of DOMNodes representing the regions containers of the node. The node is split across all these regions. ]
 15 }
 16
 17 Also, used this method to display a new section in the Computed Styles panel. The section is called "Region flow"
 18 and can have up to two Simple Rows: "Region Flow" and "Content Flow"; and a DOMTreeDataGrid with the list of regions.
 19 If regions.length === 0 then a "No Container Regions" label is displayed instead.
 20
 21 Next to the "RegionFlow" simple row I've added an arrow that will take the user to the "ContentFlowDOMTreeContentView" of the
 22 ContentFlow. The same happens for the "ContentFlow", but in this case the element will also be highlighted.
 23
 24 Part of the patch I've added the DOMTreeDataGridNode. LayerTreeDataGrid has a lot of CSS in common with it, so I
 25 will make another patch to refactor LayerTreeDataGrid to use DOMTreeDataGridNode as a base class.
 26
 27 * Localizations/en.lproj/localizedStrings.js:
 28 * UserInterface/ComputedStyleDetailsPanel.css: Added.
 29 (.region-flow.details-section > .content > .group > .row.simple.empty:last-child):
 30 (.region-flow.details-section > .content > .group > .row.simple > .value > span > span):
 31 * UserInterface/ComputedStyleDetailsPanel.js:
 32 (WebInspector.ComputedStyleDetailsPanel):
 33 (WebInspector.ComputedStyleDetailsPanel.prototype.refresh):
 34 (WebInspector.ComputedStyleDetailsPanel.prototype._computedStyleShowAllCheckboxValueChanged):
 35 (WebInspector.ComputedStyleDetailsPanel.prototype._resetRegionsGroup):
 36 (WebInspector.ComputedStyleDetailsPanel.prototype._refreshRegionsGroup.contentFlowInfoReady):
 37 (WebInspector.ComputedStyleDetailsPanel.prototype._refreshRegionsGroup):
 38 (WebInspector.ComputedStyleDetailsPanel.prototype._goToRegionFlowArrowWasClicked):
 39 (WebInspector.ComputedStyleDetailsPanel.prototype._goToContentFlowArrowWasClicked):
 40 * UserInterface/DOMTreeDataGrid.css: Added.
 41 (.dom-tree-data-grid .data-grid):
 42 (.dom-tree-data-grid .data-grid table.data):
 43 (.dom-tree-data-grid .data-container):
 44 (.dom-tree-data-grid .data-container tr):
 45 (.dom-tree-data-grid .data-container td > div):
 46 (.dom-tree-data-grid .data-container .name-column):
 47 (.dom-tree-data-grid .data-container .name-column .icon):
 48 (.dom-tree-data-grid .data-container .name-column .label):
 49 (.dom-tree-data-grid .data-container tr:hover .name-column .label):
 50 (.dom-tree-data-grid .data-container .go-to-arrow):
 51 (.dom-tree-data-grid .data-container tr:hover .go-to-arrow):
 52 (.dom-tree-data-grid .data-container tbody > tr:nth-child(2n)):
 53 (.dom-tree-data-grid .data-container tbody > tr:nth-child(2n+1)):
 54 * UserInterface/DOMTreeDataGrid.js: Added.
 55 (WebInspector.DOMTreeDataGrid):
 56 (WebInspector.DOMTreeDataGrid.prototype._onmousemove):
 57 (WebInspector.DOMTreeDataGrid.prototype._onmouseout):
 58 * UserInterface/DOMTreeDataGridNode.js: Added.
 59 (WebInspector.DOMTreeDataGridNode):
 60 (WebInspector.DOMTreeDataGridNode.prototype.get domNode):
 61 (WebInspector.DOMTreeDataGridNode.prototype.createCellContent):
 62 (WebInspector.DOMTreeDataGridNode.prototype._updateNodeName):
 63 (WebInspector.DOMTreeDataGridNode.prototype._makeNameCell):
 64 (WebInspector.DOMTreeDataGridNode.prototype._updateNameCellData):
 65 (WebInspector.DOMTreeDataGridNode.prototype._goToArrowWasClicked):
 66 * UserInterface/DOMTreeManager.js:
 67 (WebInspector.DOMTreeManager.prototype.unregisteredNamedFlowContentElement):
 68 (WebInspector.DOMTreeManager.prototype.nodeRequested):
 69 (WebInspector.DOMTreeManager.prototype._coerceRemoteArrayOfDOMNodes):
 70 (WebInspector.DOMTreeManager.prototype.domNodeResolved):
 71 (WebInspector.DOMTreeManager.prototype.regionNodesAvailable):
 72 (WebInspector.DOMTreeManager.prototype.get if):
 73 (WebInspector.DOMTreeManager.prototype.get var):
 74 (WebInspector.DOMTreeManager.prototype.backendFunction.getComputedProperty):
 75 (WebInspector.DOMTreeManager.prototype.backendFunction.getContentFlowName):
 76 (WebInspector.DOMTreeManager.prototype.):
 77 * UserInterface/DataGrid.css:
 78 (.data-grid.no-header > table.header):
 79 (.data-grid.no-header .data-container):
 80 * UserInterface/DetailsSection.js:
 81 (WebInspector.DetailsSection):
 82 * UserInterface/InspectorBackend.js:
 83 (InspectorBackendClass.prototype._wrap):
 84 * UserInterface/Main.html:
 85 * UserInterface/ResourceSidebarPanel.js:
 86 (WebInspector.ResourceSidebarPanel.prototype.showContentFlowDOMTree):
 87 * UserInterface/RuntimeManager.js:
 88 (WebInspector.RuntimeManager.prototype.evaluateInInspectedWindow):
 89 (WebInspector.RuntimeManager.prototype.getPropertiesForRemoteObject):
 90
1912013-11-19 Antoine Quint <graouts@apple.com>
292
393 Web Inspector: layer info sidebar should convert to MB for very large layers

Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

Binary file, nothing to see here

Source/WebInspectorUI/UserInterface/ComputedStyleDetailsPanel.css

 1/*
 2 * Copyright (C) 2013 Adobe Systems Inc. All rights reserved.
 3 *
 4 * Redistribution and use in source and binary forms, with or without
 5 * modification, are permitted provided that the following conditions
 6 * are met:
 7 * 1. Redistributions of source code must retain the above copyright
 8 * notice, this list of conditions and the following disclaimer.
 9 * 2. Redistributions in binary form must reproduce the above copyright
 10 * notice, this list of conditions and the following disclaimer in the
 11 * documentation and/or other materials provided with the distribution.
 12 *
 13 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
 14 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 15 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
 17 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 18 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 19 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 20 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 21 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 22 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
 23 * THE POSSIBILITY OF SUCH DAMAGE.
 24 */
 25
 26.region-flow.details-section > .content > .group > .row.simple:not(.empty),
 27.region-flow.details-section > .content > .group > .row.simple.empty:last-child {
 28 /* Avoid leaking the two cells layout out of the simple row. */
 29 display: table;
 30 table-layout: fixed;
 31 width: 100%;
 32}
 33
 34.region-flow.details-section > .content > .group > .row.simple > .value > span > span {
 35 vertical-align: top;
 36}

Source/WebInspectorUI/UserInterface/ComputedStyleDetailsPanel.js

@@WebInspector.ComputedStyleDetailsPanel = function()
4949
5050 propertiesRow.element.appendChild(this._propertiesTextEditor.element);
5151
 52 // Region Flow section
 53
 54 this._regionFlow = null;
 55 this._contentFlow = null;
 56
 57 // Region flow name is used to display the "flow-from" property of the Region Containers.
 58
 59 this._regionFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Region Flow"));
 60 this._regionFlowNameLabelValue = document.createElement("span");
 61 var goToRegionFlowButton = WebInspector.createGoToArrowButton();
 62 goToRegionFlowButton.addEventListener("click", this._goToRegionFlowArrowWasClicked.bind(this), false);
 63
 64 this._regionFlowNameLabelFragment = document.createElement("span");
 65 this._regionFlowNameLabelFragment.appendChild(this._regionFlowNameLabelValue);
 66 this._regionFlowNameLabelFragment.appendChild(goToRegionFlowButton);
 67
 68 // Content flow name is used to display the "flow-into" property of the Content nodes.
 69
 70 this._contentFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Content Flow"));
 71 this._contentFlowNameLabelValue = document.createElement("span");
 72 var goToContentFlowButton = WebInspector.createGoToArrowButton();
 73 goToContentFlowButton.addEventListener("click", this._goToContentFlowArrowWasClicked.bind(this), false);
 74
 75 this._contentFlowNameLabelFragment = document.createElement("span");
 76 this._contentFlowNameLabelFragment.appendChild(this._contentFlowNameLabelValue);
 77 this._contentFlowNameLabelFragment.appendChild(goToContentFlowButton);
 78
 79 this._containingRegionsDataGrid = new WebInspector.DOMTreeDataGrid;
 80 this._containingRegionsDataGrid.element.classList.add("no-header");
 81 this._containingRegionsRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Container Regions"));
 82
 83 var contentFlowGroup = new WebInspector.DetailsSectionGroup([this._regionFlowNameRow, this._contentFlowNameRow]);
 84 var containerRegionsGroup = new WebInspector.DetailsSectionGroup([this._containingRegionsRow]);
 85 var regionFlowSection = new WebInspector.DetailsSection("region-flow", WebInspector.UIString("Region Flow"), [contentFlowGroup, containerRegionsGroup]);
 86
5287 this.element.appendChild(propertiesSection.element);
 88 this.element.appendChild(regionFlowSection.element);
5389};
5490
5591WebInspector.ComputedStyleDetailsPanel.StyleClassName = "computed";

@@WebInspector.ComputedStyleDetailsPanel.prototype = {
6298 refresh: function()
6399 {
64100 this._propertiesTextEditor.style = this.nodeStyles.computedStyle;
 101 this._refreshRegionsGroup(this.nodeStyles.node);
65102 },
66103
67104 // Protected

@@WebInspector.ComputedStyleDetailsPanel.prototype = {
85122 var checked = this._computedStyleShowAllCheckbox.checked;
86123 this._computedStyleShowAllSetting.value = checked;
87124 this._propertiesTextEditor.showsImplicitProperties = checked;
 125 },
 126
 127 _resetRegionsGroup: function()
 128 {
 129 this._regionFlowNameRow.value = null;
 130 this._regionFlowNameLabelValue.textContent = "";
 131
 132 this._contentFlowNameRow.value = null;
 133 this._contentFlowNameLabelValue.textContent = "";
 134
 135 this._containingRegionsRow.dataGrid = null;
 136 this._containingRegionsDataGrid.removeChildren();
 137 },
 138
 139 _refreshRegionsGroup: function(domNode)
 140 {
 141 if (!domNode) {
 142 this._resetRegionsGroup();
 143 return;
 144 }
 145
 146 function contentFlowInfoReady(error, flowData)
 147 {
 148 // Element is not part of any flow.
 149 if (error || !flowData) {
 150 this._resetRegionsGroup();
 151 return;
 152 }
 153
 154 this._regionFlow = flowData.regionFlow;
 155 this._contentFlow = flowData.contentFlow;
 156
 157 this._regionFlowNameLabelValue.textContent = this._regionFlow ? this._regionFlow.name : "";
 158 this._contentFlowNameLabelValue.textContent = this._contentFlow ? this._contentFlow.name : "";
 159
 160 this._regionFlowNameRow.value = this._regionFlow ? this._regionFlowNameLabelFragment : null;
 161 this._contentFlowNameRow.value = this._contentFlow ? this._contentFlowNameLabelFragment : null;
 162
 163 if (!flowData.regions || !flowData.regions.length) {
 164 this._containingRegionsRow.dataGrid = null;
 165 return;
 166 }
 167
 168 this._containingRegionsDataGrid.removeChildren();
 169 for (var regionNode of flowData.regions)
 170 this._containingRegionsDataGrid.appendChild(new WebInspector.DOMTreeDataGridNode(regionNode));
 171
 172 this._containingRegionsRow.dataGrid = this._containingRegionsDataGrid;
 173 }
 174
 175 WebInspector.domTreeManager.getNodeContentFlowInfo(domNode, contentFlowInfoReady.bind(this));
 176 },
 177
 178 _goToRegionFlowArrowWasClicked: function()
 179 {
 180 WebInspector.resourceSidebarPanel.showContentFlowDOMTree(this._regionFlow);
 181 },
 182
 183 _goToContentFlowArrowWasClicked: function()
 184 {
 185 WebInspector.resourceSidebarPanel.showContentFlowDOMTree(this._contentFlow, this.nodeStyles.node, true);
88186 }
89187};
90188

Source/WebInspectorUI/UserInterface/DOMTreeDataGrid.css

 1/*
 2 * Copyright (C) 2013 Apple Inc. All rights reserved.
 3 *
 4 * Redistribution and use in source and binary forms, with or without
 5 * modification, are permitted provided that the following conditions
 6 * are met:
 7 * 1. Redistributions of source code must retain the above copyright
 8 * notice, this list of conditions and the following disclaimer.
 9 * 2. Redistributions in binary form must reproduce the above copyright
 10 * notice, this list of conditions and the following disclaimer in the
 11 * documentation and/or other materials provided with the distribution.
 12 *
 13 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
 14 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 15 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
 17 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 18 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 19 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 20 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 21 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 22 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
 23 * THE POSSIBILITY OF SUCH DAMAGE.
 24 */
 25
 26 .dom-tree-data-grid .data-grid {
 27 position: relative;
 28 top: 0;
 29 width: 100%;
 30 height: 100%;
 31 /* Turn off the default borders, we want to snap to edges. */
 32 border: none;
 33}
 34
 35.dom-tree-data-grid .data-grid table.data {
 36 background-size: 100% 44px;
 37}
 38
 39.dom-tree-data-grid .data-container {
 40 position: absolute;
 41 /* Leave room for the data grid header. */
 42 top: 16px;
 43 /* Use all remaining vertical space in the container. */
 44 bottom: 0;
 45 /* Let the inline table content scroll, independently of the header. */
 46 overflow-y: auto;
 47 overflow-x: hidden;
 48}
 49
 50.dom-tree-data-grid .data-container tr {
 51 height: 22px;
 52}
 53
 54.dom-tree-data-grid .data-container td > div {
 55 display: -webkit-flex;
 56 width: 100%;
 57 height: 100%;
 58 -webkit-align-items: center;
 59 -webkit-justify-content: flex-end;
 60}
 61
 62.dom-tree-data-grid .data-container .name-column {
 63 padding-right: 0;
 64}
 65
 66.dom-tree-data-grid .data-container .name-column .icon {
 67 vertical-align: top;
 68 width: 16px;
 69 height: 16px;
 70 content: url(Images/DOMElement.svg);
 71}
 72
 73.dom-tree-data-grid .data-container .name-column .label {
 74 -webkit-flex: 1;
 75 padding: 0 4px;
 76
 77 white-space: nowrap;
 78 overflow: hidden;
 79 text-overflow: ellipsis;
 80}
 81
 82.dom-tree-data-grid .data-container tr:hover .name-column .label {
 83 padding-right: 0;
 84}
 85
 86.dom-tree-data-grid .data-container .go-to-arrow {
 87 display: none;
 88}
 89
 90.dom-tree-data-grid .data-container tr:hover .go-to-arrow {
 91 display: block;
 92}
 93
 94.dom-tree-data-grid .data-container tbody > tr:nth-child(2n) {
 95 background-color: white;
 96}
 97
 98.dom-tree-data-grid .data-container tbody > tr:nth-child(2n+1) {
 99 background-color: rgb(243, 246, 250);
 100}

Source/WebInspectorUI/UserInterface/DOMTreeDataGrid.js

 1/*
 2 * Copyright (C) 2013 Adobe Systems Inc. All rights reserved.
 3 *
 4 * Redistribution and use in source and binary forms, with or without
 5 * modification, are permitted provided that the following conditions
 6 * are met:
 7 * 1. Redistributions of source code must retain the above copyright
 8 * notice, this list of conditions and the following disclaimer.
 9 * 2. Redistributions in binary form must reproduce the above copyright
 10 * notice, this list of conditions and the following disclaimer in the
 11 * documentation and/or other materials provided with the distribution.
 12 *
 13 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
 14 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 15 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
 17 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 18 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 19 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 20 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 21 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 22 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
 23 * THE POSSIBILITY OF SUCH DAMAGE.
 24 */
 25
 26WebInspector.DOMTreeDataGrid = function() {
 27 WebInspector.DataGrid.call(this, {
 28 name: { title: WebInspector.UIString("Node"), sortable: false }
 29 });
 30
 31 this._previousHoveredElement = null;
 32
 33 this.element.classList.add("dom-tree-data-grid");
 34
 35 this.element.addEventListener("mousemove", this._onmousemove.bind(this), false);
 36 this.element.addEventListener("mouseout", this._onmouseout.bind(this), false);
 37};
 38
 39WebInspector.DOMTreeDataGrid.prototype = {
 40 constructor: WebInspector.DOMTreeDataGrid,
 41 __proto__: WebInspector.DataGrid.prototype,
 42
 43 _onmousemove: function(event)
 44 {
 45 var gridNode = this.dataGridNodeFromNode(event.target);
 46 if (!gridNode || this._previousHoveredElement === gridNode.domNode)
 47 return;
 48 this._previousHoveredElement = gridNode.domNode;
 49 WebInspector.domTreeManager.highlightDOMNode(gridNode.domNode.id);
 50 },
 51
 52 _onmouseout: function(event) {
 53 if (!this._previousHoveredElement)
 54 return;
 55 WebInspector.domTreeManager.hideDOMNodeHighlight();
 56 this._previousHoveredElement = null;
 57 }
 58};
 59

Source/WebInspectorUI/UserInterface/DOMTreeDataGridNode.js

 1/*
 2 * Copyright (C) 2013 Adobe Systems Inc. All rights reserved.
 3 *
 4 * Redistribution and use in source and binary forms, with or without
 5 * modification, are permitted provided that the following conditions
 6 * are met:
 7 * 1. Redistributions of source code must retain the above copyright
 8 * notice, this list of conditions and the following disclaimer.
 9 * 2. Redistributions in binary form must reproduce the above copyright
 10 * notice, this list of conditions and the following disclaimer in the
 11 * documentation and/or other materials provided with the distribution.
 12 *
 13 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
 14 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 15 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
 17 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 18 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 19 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 20 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 21 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 22 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
 23 * THE POSSIBILITY OF SUCH DAMAGE.
 24 */
 25
 26WebInspector.DOMTreeDataGridNode = function(domNode)
 27{
 28 WebInspector.DataGridNode.call(this);
 29
 30 this._nameLabel = null;
 31 this._domNode = domNode;
 32 this._updateNodeName();
 33};
 34
 35WebInspector.DOMTreeDataGridNode.prototype = {
 36 constructor: WebInspector.DOMTreeDataGridNode,
 37 __proto__: WebInspector.DataGridNode.prototype,
 38
 39 get domNode()
 40 {
 41 return this._domNode;
 42 },
 43
 44 // DataGridNode Overrides.
 45
 46 createCellContent: function(columnIdentifier, cell)
 47 {
 48 if (columnIdentifier !== "name")
 49 return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier, cell);
 50
 51 var cell = this._makeNameCell();
 52 this._updateNameCellData();
 53 return cell;
 54 },
 55
 56 // Private
 57
 58 _updateNodeName: function()
 59 {
 60 this.data = {name: WebInspector.displayNameForNode(this._domNode)};
 61 },
 62
 63 _makeNameCell: function()
 64 {
 65 var fragment = document.createDocumentFragment();
 66
 67 fragment.appendChild(document.createElement("img")).className = "icon";
 68
 69 this._nameLabel = document.createElement("div");
 70 this._nameLabel.className = "label";
 71 fragment.appendChild(this._nameLabel);
 72
 73 var goToButton = fragment.appendChild(WebInspector.createGoToArrowButton());
 74 goToButton.addEventListener("click", this._goToArrowWasClicked.bind(this), false);
 75
 76 return fragment;
 77 },
 78
 79 _updateNameCellData: function()
 80 {
 81 this._nameLabel.textContent = this.data.name;
 82 },
 83
 84 _goToArrowWasClicked: function()
 85 {
 86 WebInspector.resourceSidebarPanel.showMainFrameDOMTree(this._domNode, true);
 87 }
 88};
 89

Source/WebInspectorUI/UserInterface/DOMTreeManager.js

@@WebInspector.DOMTreeManager.prototype = {
656656
657657 this._contentNodesToFlowsMap.delete(contentNodeId);
658658 flow.removeContentNode(this.nodeForId(contentNodeId));
 659 },
 660
 661 _coerceRemoteArrayOfDOMNodes: function(objectId, callback)
 662 {
 663 var length, nodes, received = 0, lastError = null, domTreeManager = this;
 664
 665 function nodeRequested(index, error, nodeId)
 666 {
 667 if (error)
 668 lastError = error;
 669 else
 670 nodes[index] = domTreeManager._idToDOMNode[nodeId];
 671 if (++received === length)
 672 callback(lastError, nodes);
 673 }
 674
 675 WebInspector.runtimeManager.getPropertiesForRemoteObject(objectId, function(error, properties) {
 676 if (error) {
 677 callback(error);
 678 return;
 679 }
 680
 681 var lengthProperty = properties.get("length");
 682 if (!lengthProperty || lengthProperty.value.type !== "number") {
 683 callback(null);
 684 return;
 685 }
 686
 687 length = lengthProperty.value.value;
 688 if (!length) {
 689 callback(null, []);
 690 return;
 691 }
 692
 693 nodes = new Array(length);
 694 for (var i = 0; i < length; ++i) {
 695 var nodeProperty = properties.get(String(i));
 696 console.assert(nodeProperty.value.type === "object");
 697 DOMAgent.requestNode(nodeProperty.value.objectId, nodeRequested.bind(null, i));
 698 }
 699 });
 700 },
 701
 702 getNodeContentFlowInfo: function(domNode, resultReadyCallback)
 703 {
 704 DOMAgent.resolveNode(domNode.id, domNodeResolved.bind(this));
 705
 706 function domNodeResolved(error, remoteObject)
 707 {
 708 if (error) {
 709 resultReadyCallback(error);
 710 return;
 711 }
 712 // Serialize "backendFunction" and execute it in the context of the page
 713 // passing the DOMNode as the "this" reference.
 714 var evalParameters = {
 715 objectId: remoteObject.objectId,
 716 functionDeclaration: backendFunction.toString(),
 717 doNotPauseOnExceptionsAndMuteConsole: true,
 718 returnByValue: false,
 719 generatePreview: false
 720 };
 721 RuntimeAgent.callFunctionOn.invoke(evalParameters, regionNodesAvailable.bind(this));
 722 }
 723
 724 function regionNodesAvailable(error, remoteObject, wasThrown)
 725 {
 726 if (error) {
 727 resultReadyCallback(error);
 728 return;
 729 }
 730
 731 if (wasThrown) {
 732 // We should never get here, but having the error is useful for debugging.
 733 console.error("Error while executing backend function:", JSON.stringify(remoteObject));
 734 resultReadyCallback(null);
 735 return;
 736 }
 737
 738 // The backend function can never return null.
 739 console.assert(remoteObject.type === "object");
 740 console.assert(remoteObject.objectId);
 741 WebInspector.runtimeManager.getPropertiesForRemoteObject(remoteObject.objectId, remoteObjectPropertiesAvailable.bind(this));
 742 }
 743
 744 function remoteObjectPropertiesAvailable(error, properties) {
 745 if (error) {
 746 resultReadyCallback(error);
 747 return;
 748 }
 749
 750 var result = {
 751 regionFlow: null,
 752 contentFlow: null,
 753 regions: null
 754 };
 755
 756 var regionFlowNameProperty = properties.get("regionFlowName");
 757 if (regionFlowNameProperty && regionFlowNameProperty.value && regionFlowNameProperty.value.value) {
 758 console.assert(regionFlowNameProperty.value.type === "string");
 759 var regionFlowKey = WebInspector.DOMTreeManager._flowPayloadHashKey({documentNodeId: domNode.ownerDocument.id, name: regionFlowNameProperty.value.value});
 760 result.regionFlow = this._flows.get(regionFlowKey);
 761 }
 762
 763 var contentFlowNameProperty = properties.get("contentFlowName");
 764 if (contentFlowNameProperty && contentFlowNameProperty.value && contentFlowNameProperty.value.value) {
 765 console.assert(contentFlowNameProperty.value.type === "string");
 766 var contentFlowKey = WebInspector.DOMTreeManager._flowPayloadHashKey({documentNodeId: domNode.ownerDocument.id, name: contentFlowNameProperty.value.value});
 767 result.contentFlow = this._flows.get(contentFlowKey);
 768 }
 769
 770 var regionsProperty = properties.get("regions");
 771 if (!regionsProperty || !regionsProperty.value.objectId) {
 772 // The list of regions is null.
 773 resultReadyCallback(null, result);
 774 return;
 775 }
 776
 777 console.assert(regionsProperty.value.type === "object");
 778 console.assert(regionsProperty.value.subtype === "array");
 779 this._coerceRemoteArrayOfDOMNodes(regionsProperty.value.objectId, function(error, nodes) {
 780 result.regions = nodes;
 781 resultReadyCallback(error, result);
 782 });
 783 }
 784
 785 // Note that "backendFunction" is serialized and executed in the context of the page.
 786 function backendFunction()
 787 {
 788 function getComputedProperty(node, propertyName)
 789 {
 790 if (!node.ownerDocument || !node.ownerDocument.defaultView)
 791 return null;
 792 var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
 793 return computedStyle ? computedStyle[propertyName] : null;
 794 }
 795
 796 function getContentFlowName(node)
 797 {
 798 for (; node; node = node.parentNode) {
 799 var flowName = getComputedProperty(node, "webkitFlowInto");
 800 if (flowName && flowName !== "none")
 801 return flowName;
 802 }
 803 return null;
 804 }
 805
 806 var node = this;
 807
 808 // Even detached nodes have an ownerDocument.
 809 console.assert(node.ownerDocument);
 810
 811 var result = {
 812 regionFlowName: getComputedProperty(node, "webkitFlowFrom"),
 813 contentFlowName: getContentFlowName(node),
 814 regions: null
 815 };
 816
 817 if (result.contentFlowName) {
 818 var flowThread = node.ownerDocument.webkitGetNamedFlows().namedItem(result.contentFlowName);
 819 if (flowThread)
 820 result.regions = flowThread.getRegionsByContent(node);
 821 }
 822
 823 return result;
 824 }
659825 }
660826}
661827

Source/WebInspectorUI/UserInterface/DataGrid.css

6464 border: 1px solid rgb(181, 181, 181);
6565}
6666
 67.data-grid.no-header > table.header {
 68 display: none;
 69}
 70
 71.data-grid.no-header .data-container {
 72 top: 0;
 73}
 74
6775.data-grid th {
6876 text-align: left;
6977 vertical-align: middle;

Source/WebInspectorUI/UserInterface/DetailsSection.js

@@WebInspector.DetailsSection = function(identifier, title, groups, optionsElement
3030
3131 this._element = document.createElement("div");
3232 this._element.className = WebInspector.DetailsSection.StyleClassName;
 33 this._element.classList.add(identifier);
3334
3435 this._headerElement = document.createElement("div");
3536 this._headerElement.addEventListener("click", this._headerElementClicked.bind(this));

Source/WebInspectorUI/UserInterface/InspectorBackend.js

@@InspectorBackendClass.prototype = {
5757 callback.methodName = method;
5858 if (this.dumpInspectorTimeStats)
5959 callback.sendRequestTime = Date.now();
60 
 60
6161 return callbackId;
6262 },
6363

Source/WebInspectorUI/UserInterface/Main.html

9292 <link rel="stylesheet" href="JavaScriptProfileView.css">
9393 <link rel="stylesheet" href="NetworkTimeline.css">
9494 <link rel="stylesheet" href="CSSStyleDetailsSidebarPanel.css">
 95 <link rel="stylesheet" href="DOMTreeDataGrid.css">
9596 <link rel="stylesheet" href="LayerTreeSidebarPanel.css">
9697 <link rel="stylesheet" href="EventListenerSectionGroup.css">
9798 <link rel="stylesheet" href="Breakpoint.css">

123124 <link rel="stylesheet" href="ColorPicker.css">
124125 <link rel="stylesheet" href="CodeMirrorDragToAlterNumberController.css">
125126 <link rel="stylesheet" href="GoToLineDialog.css">
 127 <link rel="stylesheet" href="ComputedStyleDetailsPanel.css">
126128
127129 <script src="External/CodeMirror/codemirror.js"></script>
128130 <script src="External/CodeMirror/comment.js"></script>

305307 <script src="EventListenerSectionGroup.js"></script>
306308 <script src="EventListenerSection.js"></script>
307309 <script src="DOMNodeDetailsSidebarPanel.js"></script>
 310 <script src="DOMTreeDataGrid.js"></script>
 311 <script src="DOMTreeDataGridNode.js"></script>
308312 <script src="LayerTreeDataGridNode.js"></script>
309313 <script src="LayerTreeDataGrid.js"></script>
310314 <script src="LayerTreeSidebarPanel.js"></script>

Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js

@@WebInspector.ResourceSidebarPanel.prototype = {
112112 WebInspector.contentBrowser.showContentView(contentView);
113113 },
114114
 115 showContentFlowDOMTree: function(contentFlow, nodeToSelect, preventFocusChange)
 116 {
 117 var contentView = WebInspector.contentBrowser.contentViewForRepresentedObject(contentFlow);
 118 if (nodeToSelect)
 119 contentView.selectAndRevealDOMNode(nodeToSelect, preventFocusChange);
 120 WebInspector.contentBrowser.showContentView(contentView);
 121 },
 122
115123 showSourceCodeForFrame: function(frameIdentifier, revealAndSelectTreeElement)
116124 {
117125 delete this._frameIdentifierToShowSourceCodeWhenAvailable;

Source/WebInspectorUI/UserInterface/RuntimeManager.js

@@WebInspector.RuntimeManager.prototype = {
6767 // in iOS 6. Fallback to including the frame identifier (frameId).
6868 var contextId = WebInspector.quickConsole.executionContextIdentifier;
6969 RuntimeAgent.evaluate.invoke({expression: expression, objectGroup: objectGroup, includeCommandLineAPI: includeCommandLineAPI, doNotPauseOnExceptionsAndMuteConsole: doNotPauseOnExceptionsAndMuteConsole, contextId: contextId, frameId: contextId, returnByValue: returnByValue}, evalCallback);
 70 },
 71
 72 getPropertiesForRemoteObject: function(objectId, callback)
 73 {
 74 RuntimeAgent.getProperties(objectId, function(error, result) {
 75 if (error) {
 76 callback(error);
 77 return;
 78 }
 79 var properties = new Map;
 80 for (var property of result)
 81 properties.set(property.name, property);
 82 callback(null, properties);
 83 });
7084 }
7185};
7286