Skip to content
Permalink
Browse files
Web Inspector: Create a container class for SidebarPane instances
https://bugs.webkit.org/show_bug.cgi?id=108183

Source/WebCore:

Patch by Vladislav Kaznacheev <kaznacheev@chromium.org> on 2013-02-04
Reviewed by Pavel Feldman.

SidebarPaneStack is responsible for pane title bar and expand/collapse behavior (previously handled by SidebarPane).
SidebarPanes are inserted into DOM lazily and can belong to more than one container.
SidebarPane is ready to be displayed in other types of containers (such as tabbed pane as requested in https://bugs.webkit.org/show_bug.cgi?id=107552).
There should be no visible changes except for one: DOM breakpoint pane expand/collapse state is no longer
shared between Elements and Sources sidebars.

* inspector/front-end/AuditResultView.js:
(WebInspector.AuditResultView):
* inspector/front-end/BreakpointsSidebarPane.js:
(WebInspector.JavaScriptBreakpointsSidebarPane.prototype._addBreakpoint):
(WebInspector.XHRBreakpointsSidebarPane.prototype.highlightBreakpoint):
(WebInspector.EventListenerBreakpointsSidebarPane.prototype.highlightBreakpoint):
* inspector/front-end/DOMBreakpointsSidebarPane.js:
(WebInspector.DOMBreakpointsSidebarPane.prototype.highlightBreakpoint):
* inspector/front-end/ElementsPanel.js:
(WebInspector.ElementsPanel):
(WebInspector.ElementsPanel.prototype.wasShown):
(WebInspector.ElementsPanel.prototype.updateStyles):
(WebInspector.ElementsPanel.prototype.updateMetrics):
(WebInspector.ElementsPanel.prototype.updateProperties):
(WebInspector.ElementsPanel.prototype.updateEventListeners):
* inspector/front-end/ExtensionPanel.js:
(WebInspector.ExtensionSidebarPane):
* inspector/front-end/ExtensionServer.js:
(WebInspector.ExtensionServer.prototype._onCreateSidebarPane):
* inspector/front-end/ScriptsPanel.js:
(WebInspector.ScriptsPanel.prototype.wasShown):
* inspector/front-end/SidebarPane.js:
(WebInspector.SidebarPane):
(WebInspector.SidebarPane.prototype.title):
(WebInspector.SidebarPane.prototype.prepareContent):
(WebInspector.SidebarPane.prototype.expand):
(WebInspector.SidebarPane.prototype.onContentReady):
(WebInspector.SidebarPane.prototype.setExpandCallback):
(WebInspector.SidebarPane.prototype.setShowCallback):
(WebInspector.SidebarPane.prototype.wasShown):
(WebInspector.SidebarPaneStack):
(WebInspector.SidebarPaneStack.prototype.wasShown):
(WebInspector.SidebarPaneStack.prototype.addPane):
(WebInspector.SidebarPaneStack.prototype._addTitle):
(WebInspector.SidebarPaneStack.prototype._attachToPane):
(WebInspector.SidebarPaneStack.prototype._isExpanded):
(WebInspector.SidebarPaneStack.prototype._setExpanded):
(WebInspector.SidebarPaneStack.prototype._onPaneExpanded):
(WebInspector.SidebarPaneStack.prototype._collapsePane):
(WebInspector.SidebarPaneStack.prototype._togglePane):
(WebInspector.SidebarPaneStack.prototype._onTitleKeyDown):
* inspector/front-end/StylesSidebarPane.js:
(WebInspector.StylesSidebarPane.prototype._refreshUpdate):
(WebInspector.StylesSidebarPane.prototype._rebuildUpdate):
(WebInspector.StylesSidebarPane.prototype.set _createNewRule):
(WebInspector.ComputedStyleSidebarPane.prototype.prepareContent):
* inspector/front-end/WatchExpressionsSidebarPane.js:
(WebInspector.WatchExpressionsSidebarPane):
(WebInspector.WatchExpressionsSidebarPane.prototype.wasShown):
(WebInspector.WatchExpressionsSidebarPane.prototype.addExpression):
(WebInspector.WatchExpressionsSidebarPane.prototype._addButtonClicked):
* inspector/front-end/inspector.css:
(.pane-title + .pane-title, .pane:not(.visible) + .pane-title, .pane-title:first-of-type):
(.pane-title):
(.pane-title:active):
(.pane-title::before):
(.pane-title.expanded::before):
(.pane-title > select):
(.pane-title > select:hover):
(.pane-title > select:active):
(.pane-title > select.select-settings):
(.pane-title > select.select-filter):
(.pane-title > select > option, .pane-title > select > hr):
(.pane-title > .pane-title-button):
(.pane-title > .pane-title-button:hover):
(.pane-title > .pane-title-button:active, .pane-title > .pane-title-button.toggled):
(.pane-title > .pane-title-button.add):
(.pane-title > .pane-title-button.element-state):
(.pane-title > .pane-title-button.refresh):
(.pane.visible > .body):
(.pane.visible:nth-last-of-type(1)):
(.panel-enabler-view button:not(.status-bar-item), .pane-title-button, button.show-all-nodes):
(.panel-enabler-view button:active:not(.status-bar-item), .pane-title-button:active, button.show-all-nodes:active):
(body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-view button:disabled:not(.status-bar-item), body.inactive .pane-title-button, .pane-title-button:disabled, body.inactive button.show-all-nodes):

LayoutTests:

Patch by Vladislav Kaznacheev <kaznacheev@chromium.org> on 2013-02-04
Reviewed by Pavel Feldman.

* http/tests/inspector/elements-test.js:
(initialize_ElementTest.stylesCallback):
(initialize_ElementTest.InspectorTest.selectNodeAndWaitForStylesWithComputed):
* inspector/audits/audits-panel-functional-expected.txt:
* inspector/audits/audits-panel-noimages-functional-expected.txt:
* inspector/debugger/error-in-watch-expressions.html:
* inspector/debugger/properties-special.html:
* inspector/debugger/watch-expressions-panel-switch.html:
* inspector/debugger/watch-expressions-preserve-expansion.html:
* inspector/extensions/extensions-audits-api-expected.txt:
* inspector/extensions/extensions-audits-content-script-expected.txt:
* inspector/extensions/extensions-audits-expected.txt:
* inspector/extensions/extensions-events.html:
* inspector/extensions/extensions-sidebar.html:
* inspector/styles/lazy-computed-style.html:

Canonical link: https://commits.webkit.org/127039@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@141777 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
kaznacheev authored and webkit-commit-queue committed Feb 4, 2013
1 parent 1ba301a commit 21719d27405281c6e94ab8593d162127e764829a
Showing 26 changed files with 416 additions and 188 deletions.
@@ -1,3 +1,27 @@
2013-02-04 Vladislav Kaznacheev <kaznacheev@chromium.org>

Web Inspector: Create a container class for SidebarPane instances
https://bugs.webkit.org/show_bug.cgi?id=108183


Reviewed by Pavel Feldman.

* http/tests/inspector/elements-test.js:
(initialize_ElementTest.stylesCallback):
(initialize_ElementTest.InspectorTest.selectNodeAndWaitForStylesWithComputed):
* inspector/audits/audits-panel-functional-expected.txt:
* inspector/audits/audits-panel-noimages-functional-expected.txt:
* inspector/debugger/error-in-watch-expressions.html:
* inspector/debugger/properties-special.html:
* inspector/debugger/watch-expressions-panel-switch.html:
* inspector/debugger/watch-expressions-preserve-expansion.html:
* inspector/extensions/extensions-audits-api-expected.txt:
* inspector/extensions/extensions-audits-content-script-expected.txt:
* inspector/extensions/extensions-audits-expected.txt:
* inspector/extensions/extensions-events.html:
* inspector/extensions/extensions-sidebar.html:
* inspector/styles/lazy-computed-style.html:

2013-02-04 Ádám Kallai <kadam@inf.u-szeged.hu>

[Qt][Wk2] Unreviewed gardnening. Skip failing tests.
@@ -111,7 +111,7 @@ InspectorTest.selectNodeAndWaitForStylesWithComputed = function(idValue, callbac

function stylesCallback(targetNode)
{
InspectorTest.addSniffer(WebInspector.SidebarPane.prototype, "expand", callback);
InspectorTest.addSniffer(WebInspector.SidebarPane.prototype, "onContentReady", callback);
WebInspector.panels.elements.sidebarPanes.computedStyle.expand();
}

@@ -1,14 +1,14 @@
Tests audit rules.
Page reloaded.
Network Utilization
Network Utilization
Combine external JavaScript (4)
There are multiple resources served from same domain. Consider combining them into as few files as possible.
4 JavaScript resources served from [domain].
Specify image dimensions (2)
A width and height should be specified for all images in order to speed up page display. The following image(s) are missing a width and/or height:
foo1.jpg
foo2.jpg
Web Page Performance
Web Page Performance
Optimize the order of styles and scripts (2)
The following external CSS files were included after an external JavaScript file in the document head. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.
audits-style1.css
@@ -1,10 +1,10 @@
Tests audit rules on a page without images.
Page reloaded.
Network Utilization
Network Utilization
Combine external JavaScript (4)
There are multiple resources served from same domain. Consider combining them into as few files as possible.
4 JavaScript resources served from [domain].
Web Page Performance
Web Page Performance
Optimize the order of styles and scripts (2)
The following external CSS files were included after an external JavaScript file in the document head. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.
audits-style1.css
@@ -10,7 +10,10 @@
// We need to initialize scripts panel so that watch expressions section is created.
WebInspector.showPanel("scripts");

var watchExpressionsSection = WebInspector.panels.scripts.sidebarPanes.watchExpressions.section;
var watchExpressionsPane = WebInspector.panels.scripts.sidebarPanes.watchExpressions;
watchExpressionsPane.expand();

var watchExpressionsSection = watchExpressionsPane.section;
watchExpressionsSection.watchExpressions = [];
watchExpressionsSection.watchExpressions.push("#$%");
watchExpressionsSection.update();
@@ -23,7 +23,10 @@
// We need to initialize scripts panel so that watch expressions section is created.
WebInspector.showPanel("scripts");

watchExpressionsSection = WebInspector.panels.scripts.sidebarPanes.watchExpressions.section;
var watchExpressionsPane = WebInspector.panels.scripts.sidebarPanes.watchExpressions;
watchExpressionsPane.expand();

watchExpressionsSection = watchExpressionsPane.section;
watchExpressionsSection.watchExpressions = [];
watchExpressionsSection.watchExpressions.push("Object(true)");
watchExpressionsSection.watchExpressions.push("(function(a,b) { return a + b; })");
@@ -23,7 +23,10 @@
// We need to initialize scripts panel so that watch expressions section is created.
WebInspector.showPanel("scripts");

watchExpressionsSection = WebInspector.panels.scripts.sidebarPanes.watchExpressions.section;
var watchExpressionsPane = WebInspector.panels.scripts.sidebarPanes.watchExpressions;
watchExpressionsPane.expand();

watchExpressionsSection = watchExpressionsPane.section;
watchExpressionsSection.watchExpressions = [];
watchExpressionsSection.watchExpressions.push("window.document");
watchExpressionsSection.watchExpressions.push("windowa.document");
@@ -24,7 +24,10 @@

function step1()
{
watchExpressionsSection = WebInspector.panels.scripts.sidebarPanes.watchExpressions.section;
var watchExpressionsPane = WebInspector.panels.scripts.sidebarPanes.watchExpressions;
watchExpressionsPane.expand();

watchExpressionsSection = watchExpressionsPane.section;
watchExpressionsSection.watchExpressions = [];
watchExpressionsSection.watchExpressions.push("globalObject");
watchExpressionsSection.watchExpressions.push("windowAlias");
@@ -36,6 +36,6 @@ category.onAuditStarted fired, results dump follows:
}
expanded : false
}
Extension audits
Extension audits
All tests done.

@@ -3,7 +3,7 @@ Tests audit formatters performing evals on content scripts in WebInspector Exten
Started extension.
Running tests...
RUNNING TEST: extension_testAudits
Extension audits
Extension audits
Rule with details subtree (1)
Test Formatters
main world object
@@ -5,7 +5,7 @@ Running tests...
RUNNING TEST: extension_testAudits
Progress: 50%
Progress: 75%
Extension audits
Extension audits
Failed rule (42)
this rule always fails
Rule with details subtree (1)
@@ -43,7 +43,7 @@ Progress: 75%
extensions-audits.html:20
Passed rule
this rule always passes ok
Extension audits that fail
Extension audits that fail
category.onAuditStarted fired
failedCategory.onAuditStarted fired, throwing exception
All tests done.
@@ -4,6 +4,30 @@
<script src="../../http/tests/inspector/extensions-test.js"></script>
<script type="text/javascript">

function initialize_extensionsSidebarTest()
{
InspectorTest.expandSidebar = function(callback)
{
var sidebar = InspectorTest._extensionSidebar();
InspectorTest.runAfterPendingDispatches(function() {
sidebar.expand();
callback();
});
}

InspectorTest._extensionSidebar = function()
{
var sidebarPanes = WebInspector.panel("elements").sidebarPanes;
// the sidebar of interest is presumed to always be last.
return sidebarPanes[Object.keys(sidebarPanes).pop()];
}
}

function extension_expandSidebar(callback)
{
evaluateOnFrontend("InspectorTest.expandSidebar(reply);", callback);
}

function extension_testOnSelectionChanged(nextTest)
{
function onSelectionChanged()
@@ -105,7 +129,7 @@
addListener(sidebar, "sidebar", "onShown");
sidebar.setPage(basePath + "extension-sidebar.html");
}
extension_showPanel("elements");
extension_showPanel("elements", extension_expandSidebar);
var basePath = location.pathname.replace(/\/[^/]*$/, "/");
function onSidebarCreated(sidebarPane)
{
@@ -8,14 +8,28 @@
{
InspectorTest.dumpSidebarContent = function(callback)
{
var sidebarPanes = WebInspector.panel("elements").sidebarPanes;
// the sidebar of interest is presumed to always be last.
var sidebar = sidebarPanes[Object.keys(sidebarPanes).pop()];
var sidebar = InspectorTest._extensionSidebar();
InspectorTest.runAfterPendingDispatches(function() {
InspectorTest.addResult("Sidebar content: " + sidebar.bodyElement.textContent);
callback();
});
}

InspectorTest.expandSidebar = function(callback)
{
var sidebar = InspectorTest._extensionSidebar();
InspectorTest.runAfterPendingDispatches(function() {
sidebar.expand();
callback();
});
}

InspectorTest._extensionSidebar = function()
{
var sidebarPanes = WebInspector.panel("elements").sidebarPanes;
// the sidebar of interest is presumed to always be last.
return sidebarPanes[Object.keys(sidebarPanes).pop()];
}
}

function extension_testSidebarSetPage(nextTest)
@@ -32,7 +46,7 @@
sidebar.onShown.addListener(onShown);
var basePath = location.pathname.replace(/\/[^/]*$/, "/");
sidebar.setPage(basePath + "extension-sidebar.html");
extension_showPanel("elements");
extension_showPanel("elements", extension_expandSidebar);
}
webInspector.panels.elements.createSidebarPane("Test Sidebar", onSidebarCreated);
}
@@ -42,6 +56,11 @@
evaluateOnFrontend("InspectorTest.dumpSidebarContent(reply);", nextTest);
}

function extension_expandSidebar(callback)
{
evaluateOnFrontend("InspectorTest.expandSidebar(reply);", callback);
}

function extension_testSidebarSetObject(nextTest)
{
function onSidebarCreated(sidebar)
@@ -105,7 +124,7 @@
sidebar = aSidebar;
sidebar.onShown.addListener(onShown);
sidebar.setPage(basePath + "extension-sidebar.html");
extension_showPanel("elements");
extension_showPanel("elements", extension_expandSidebar);
}
var didSetObject = false;
function onShown(frame)
@@ -29,7 +29,7 @@
{
InspectorTest.addResult("==== All styles (should be no computed) ====");
InspectorTest.dumpSelectedElementStyles(false, false);
InspectorTest.addSniffer(WebInspector.SidebarPane.prototype, "expand", step2);
InspectorTest.addSniffer(WebInspector.SidebarPane.prototype, "onContentReady", step2);
WebInspector.panels.elements.sidebarPanes.computedStyle.expand();
}

@@ -1,3 +1,91 @@
2013-02-04 Vladislav Kaznacheev <kaznacheev@chromium.org>

Web Inspector: Create a container class for SidebarPane instances
https://bugs.webkit.org/show_bug.cgi?id=108183

Reviewed by Pavel Feldman.

SidebarPaneStack is responsible for pane title bar and expand/collapse behavior (previously handled by SidebarPane).
SidebarPanes are inserted into DOM lazily and can belong to more than one container.
SidebarPane is ready to be displayed in other types of containers (such as tabbed pane as requested in https://bugs.webkit.org/show_bug.cgi?id=107552).
There should be no visible changes except for one: DOM breakpoint pane expand/collapse state is no longer
shared between Elements and Sources sidebars.

* inspector/front-end/AuditResultView.js:
(WebInspector.AuditResultView):
* inspector/front-end/BreakpointsSidebarPane.js:
(WebInspector.JavaScriptBreakpointsSidebarPane.prototype._addBreakpoint):
(WebInspector.XHRBreakpointsSidebarPane.prototype.highlightBreakpoint):
(WebInspector.EventListenerBreakpointsSidebarPane.prototype.highlightBreakpoint):
* inspector/front-end/DOMBreakpointsSidebarPane.js:
(WebInspector.DOMBreakpointsSidebarPane.prototype.highlightBreakpoint):
* inspector/front-end/ElementsPanel.js:
(WebInspector.ElementsPanel):
(WebInspector.ElementsPanel.prototype.wasShown):
(WebInspector.ElementsPanel.prototype.updateStyles):
(WebInspector.ElementsPanel.prototype.updateMetrics):
(WebInspector.ElementsPanel.prototype.updateProperties):
(WebInspector.ElementsPanel.prototype.updateEventListeners):
* inspector/front-end/ExtensionPanel.js:
(WebInspector.ExtensionSidebarPane):
* inspector/front-end/ExtensionServer.js:
(WebInspector.ExtensionServer.prototype._onCreateSidebarPane):
* inspector/front-end/ScriptsPanel.js:
(WebInspector.ScriptsPanel.prototype.wasShown):
* inspector/front-end/SidebarPane.js:
(WebInspector.SidebarPane):
(WebInspector.SidebarPane.prototype.title):
(WebInspector.SidebarPane.prototype.prepareContent):
(WebInspector.SidebarPane.prototype.expand):
(WebInspector.SidebarPane.prototype.onContentReady):
(WebInspector.SidebarPane.prototype.setExpandCallback):
(WebInspector.SidebarPane.prototype.setShowCallback):
(WebInspector.SidebarPane.prototype.wasShown):
(WebInspector.SidebarPaneStack):
(WebInspector.SidebarPaneStack.prototype.wasShown):
(WebInspector.SidebarPaneStack.prototype.addPane):
(WebInspector.SidebarPaneStack.prototype._addTitle):
(WebInspector.SidebarPaneStack.prototype._attachToPane):
(WebInspector.SidebarPaneStack.prototype._isExpanded):
(WebInspector.SidebarPaneStack.prototype._setExpanded):
(WebInspector.SidebarPaneStack.prototype._onPaneExpanded):
(WebInspector.SidebarPaneStack.prototype._collapsePane):
(WebInspector.SidebarPaneStack.prototype._togglePane):
(WebInspector.SidebarPaneStack.prototype._onTitleKeyDown):
* inspector/front-end/StylesSidebarPane.js:
(WebInspector.StylesSidebarPane.prototype._refreshUpdate):
(WebInspector.StylesSidebarPane.prototype._rebuildUpdate):
(WebInspector.StylesSidebarPane.prototype.set _createNewRule):
(WebInspector.ComputedStyleSidebarPane.prototype.prepareContent):
* inspector/front-end/WatchExpressionsSidebarPane.js:
(WebInspector.WatchExpressionsSidebarPane):
(WebInspector.WatchExpressionsSidebarPane.prototype.wasShown):
(WebInspector.WatchExpressionsSidebarPane.prototype.addExpression):
(WebInspector.WatchExpressionsSidebarPane.prototype._addButtonClicked):
* inspector/front-end/inspector.css:
(.pane-title + .pane-title, .pane:not(.visible) + .pane-title, .pane-title:first-of-type):
(.pane-title):
(.pane-title:active):
(.pane-title::before):
(.pane-title.expanded::before):
(.pane-title > select):
(.pane-title > select:hover):
(.pane-title > select:active):
(.pane-title > select.select-settings):
(.pane-title > select.select-filter):
(.pane-title > select > option, .pane-title > select > hr):
(.pane-title > .pane-title-button):
(.pane-title > .pane-title-button:hover):
(.pane-title > .pane-title-button:active, .pane-title > .pane-title-button.toggled):
(.pane-title > .pane-title-button.add):
(.pane-title > .pane-title-button.element-state):
(.pane-title > .pane-title-button.refresh):
(.pane.visible > .body):
(.pane.visible:nth-last-of-type(1)):
(.panel-enabler-view button:not(.status-bar-item), .pane-title-button, button.show-all-nodes):
(.panel-enabler-view button:active:not(.status-bar-item), .pane-title-button:active, button.show-all-nodes:active):
(body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-view button:disabled:not(.status-bar-item), body.inactive .pane-title-button, .pane-title-button:disabled, body.inactive button.show-all-nodes):

2013-02-01 Emil A Eklund <eae@chromium.org>

Remove duplicate code in RenderBoxModelObject::computedCSSPadding*
@@ -30,24 +30,24 @@

/**
* @constructor
* @extends {WebInspector.View}
* @extends {WebInspector.SidebarPaneStack}
* @param {!Array.<!WebInspector.AuditCategoryResult>} categoryResults
*/
WebInspector.AuditResultView = function(categoryResults)
{
WebInspector.View.call(this);
this.element.className = "audit-result-view";
WebInspector.SidebarPaneStack.call(this);
this.element.addStyleClass("audit-result-view");

function categorySorter(a, b) {
return (a.title || "").localeCompare(b.title || "");
}
categoryResults.sort(categorySorter);
for (var i = 0; i < categoryResults.length; ++i)
new WebInspector.AuditCategoryResultPane(categoryResults[i]).show(this.element);
this.addPane(new WebInspector.AuditCategoryResultPane(categoryResults[i]));
}

WebInspector.AuditResultView.prototype = {
__proto__: WebInspector.View.prototype
__proto__: WebInspector.SidebarPaneStack.prototype
}

/**

0 comments on commit 21719d2

Please sign in to comment.