2011-07-05 Pavel Feldman <pfeldman@google.com>
authorpfeldman@chromium.org <pfeldman@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 5 Jul 2011 15:35:19 +0000 (15:35 +0000)
committerpfeldman@chromium.org <pfeldman@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 5 Jul 2011 15:35:19 +0000 (15:35 +0000)
        Web Inspector: add "element state" setting to the styles section title.
        https://bugs.webkit.org/show_bug.cgi?id=63932

        Reviewed by Yury Semikhatsky.

        * English.lproj/localizedStrings.js:
        * WebCore.gypi:
        * inspector/front-end/Images/paneElementStateButtons.png: Added.
        * inspector/front-end/StylesSidebarPane.js:
        (WebInspector.StylesSidebarPane.muteEventListener):
        (WebInspector.StylesSidebarPane):
        (WebInspector.StylesSidebarPane.prototype.update):
        (WebInspector.StylesSidebarPane.prototype._rebuildUpdate):
        (WebInspector.StylesSidebarPane.prototype._rebuildSectionsForStyleRules):
        (WebInspector.StylesSidebarPane.prototype.addBlankSection):
        (WebInspector.StylesSidebarPane.prototype.registerShortcuts):
        (WebInspector.StylesSidebarPane.prototype._toggleElementStatePane):
        (WebInspector.StylesSidebarPane.prototype._createElementStatePane.clickListener):
        (WebInspector.StylesSidebarPane.prototype._createElementStatePane.createCheckbox):
        (WebInspector.StylesSidebarPane.prototype._createElementStatePane):
        * inspector/front-end/WebKit.qrc:
        * inspector/front-end/inspector.css:
        (.pane > .title > .pane-title-button:active, .pane > .title > .pane-title-button.toggled):
        (.pane > .title > .pane-title-button.element-state):
        (.styles-element-state-pane):
        (.styles-element-state-pane.expanded):
        (.styles-element-state-pane > table):
        (.styles-element-state-pane input):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@90397 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/English.lproj/localizedStrings.js
Source/WebCore/WebCore.gypi
Source/WebCore/inspector/front-end/Images/paneElementStateButtons.png [new file with mode: 0644]
Source/WebCore/inspector/front-end/StylesSidebarPane.js
Source/WebCore/inspector/front-end/WebKit.qrc
Source/WebCore/inspector/front-end/inspector.css

index 3abf0d3..2d884d6 100644 (file)
@@ -1,3 +1,34 @@
+2011-07-05  Pavel Feldman  <pfeldman@google.com>
+
+        Web Inspector: add "element state" setting to the styles section title.
+        https://bugs.webkit.org/show_bug.cgi?id=63932
+
+        Reviewed by Yury Semikhatsky.
+
+        * English.lproj/localizedStrings.js:
+        * WebCore.gypi:
+        * inspector/front-end/Images/paneElementStateButtons.png: Added.
+        * inspector/front-end/StylesSidebarPane.js:
+        (WebInspector.StylesSidebarPane.muteEventListener):
+        (WebInspector.StylesSidebarPane):
+        (WebInspector.StylesSidebarPane.prototype.update):
+        (WebInspector.StylesSidebarPane.prototype._rebuildUpdate):
+        (WebInspector.StylesSidebarPane.prototype._rebuildSectionsForStyleRules):
+        (WebInspector.StylesSidebarPane.prototype.addBlankSection):
+        (WebInspector.StylesSidebarPane.prototype.registerShortcuts):
+        (WebInspector.StylesSidebarPane.prototype._toggleElementStatePane):
+        (WebInspector.StylesSidebarPane.prototype._createElementStatePane.clickListener):
+        (WebInspector.StylesSidebarPane.prototype._createElementStatePane.createCheckbox):
+        (WebInspector.StylesSidebarPane.prototype._createElementStatePane):
+        * inspector/front-end/WebKit.qrc:
+        * inspector/front-end/inspector.css:
+        (.pane > .title > .pane-title-button:active, .pane > .title > .pane-title-button.toggled):
+        (.pane > .title > .pane-title-button.element-state):
+        (.styles-element-state-pane):
+        (.styles-element-state-pane.expanded):
+        (.styles-element-state-pane > table):
+        (.styles-element-state-pane input):
+
 2011-06-22  Pavel Podivilov  <podivilov@chromium.org>
 
         Reviewed by Yury Semikhatsky.
index 0d64bc4..8b2c791 100644 (file)
Binary files a/Source/WebCore/English.lproj/localizedStrings.js and b/Source/WebCore/English.lproj/localizedStrings.js differ
index 28920ec..9da8151 100644 (file)
             'inspector/front-end/Images/paneAddButtons.png',
             'inspector/front-end/Images/paneBottomGrow.png',
             'inspector/front-end/Images/paneBottomGrowActive.png',
+            'inspector/front-end/Images/paneElementStateButtons.png',
             'inspector/front-end/Images/paneFilterButtons.png',
             'inspector/front-end/Images/paneGrowHandleLine.png',
             'inspector/front-end/Images/paneRefreshButtons.png',
diff --git a/Source/WebCore/inspector/front-end/Images/paneElementStateButtons.png b/Source/WebCore/inspector/front-end/Images/paneElementStateButtons.png
new file mode 100644 (file)
index 0000000..1c22a3c
Binary files /dev/null and b/Source/WebCore/inspector/front-end/Images/paneElementStateButtons.png differ
index cbb7232..e83dab0 100644 (file)
@@ -55,13 +55,20 @@ WebInspector.StylesSidebarPane = function(computedStylePane)
     this.settingsSelectElement.appendChild(option);
 
     // Prevent section from collapsing.
-    this.settingsSelectElement.addEventListener("click", function(event) { event.stopPropagation() }, false);
+    var muteEventListener = function(event) { event.stopPropagation(); event.preventDefault(); };
 
+    this.settingsSelectElement.addEventListener("click", muteEventListener, true);
     this.settingsSelectElement.addEventListener("change", this._changeSetting.bind(this), false);
     this._updateColorFormatFilter();
 
     this.titleElement.appendChild(this.settingsSelectElement);
 
+    this._elementStateButton = document.createElement("button");
+    this._elementStateButton.className = "pane-title-button element-state";
+    this._elementStateButton.title = WebInspector.UIString("Toggle Element State");
+    this._elementStateButton.addEventListener("click", this._toggleElementStatePane.bind(this), false);
+    this.titleElement.appendChild(this._elementStateButton);
+
     var addButton = document.createElement("button");
     addButton.className = "pane-title-button add";
     addButton.title = WebInspector.UIString("New Style Rule");
@@ -71,6 +78,11 @@ WebInspector.StylesSidebarPane = function(computedStylePane)
     this._computedStylePane = computedStylePane;
     this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
     WebInspector.settings.colorFormat.addChangeListener(this._colorFormatSettingChanged.bind(this));
+
+    this._createElementStatePane();
+    this.bodyElement.appendChild(this._elementStatePane);
+    this._sectionsContainer = document.createElement("div");
+    this.bodyElement.appendChild(this._sectionsContainer);
 }
 
 WebInspector.StylesSidebarPane.ColorFormat = {
@@ -220,7 +232,7 @@ WebInspector.StylesSidebarPane.prototype = {
             node = this.node;
 
         if (!node) {
-            this.bodyElement.removeChildren();
+            this._sectionsContainer.removeChildren();
             this._computedStylePane.bodyElement.removeChildren();
             this.sections = {};
             if (callback)
@@ -247,7 +259,7 @@ WebInspector.StylesSidebarPane.prototype = {
         if (refresh)
             WebInspector.cssModel.getComputedStyleAsync(node.id, computedStyleCallback.bind(this));
         else
-            WebInspector.cssModel.getStylesAsync(node.id, undefined, stylesCallback.bind(this));
+            WebInspector.cssModel.getStylesAsync(node.id, this._forcedPseudoClasses, stylesCallback.bind(this));
     },
 
     _refreshUpdate: function(node, computedStyle, editedSection)
@@ -265,7 +277,7 @@ WebInspector.StylesSidebarPane.prototype = {
 
     _rebuildUpdate: function(node, styles)
     {
-        this.bodyElement.removeChildren();
+        this._sectionsContainer.removeChildren();
         this._computedStylePane.bodyElement.removeChildren();
 
         var styleRules = this._rebuildStyleRules(node, styles);
@@ -506,7 +518,7 @@ WebInspector.StylesSidebarPane.prototype = {
                         separatorElement.textContent = WebInspector.UIString("Pseudo element");
                 } else
                     separatorElement.textContent = styleRule.text;
-                this.bodyElement.insertBefore(separatorElement, anchorElement);
+                this._sectionsContainer.insertBefore(separatorElement, anchorElement);
                 lastWasSeparator = true;
                 continue;
             }
@@ -528,7 +540,7 @@ WebInspector.StylesSidebarPane.prototype = {
                 this._computedStylePane.bodyElement.appendChild(section.element);
                 lastWasSeparator = true;
             } else {
-                this.bodyElement.insertBefore(section.element, anchorElement);
+                this._sectionsContainer.insertBefore(section.element, anchorElement);
                 lastWasSeparator = false;
             }
             sections.push(section);
@@ -596,7 +608,7 @@ WebInspector.StylesSidebarPane.prototype = {
         blankSection.pane = this;
 
         var elementStyleSection = this.sections[0][1];
-        this.bodyElement.insertBefore(blankSection.element, elementStyleSection.element.nextSibling);
+        this._sectionsContainer.insertBefore(blankSection.element, elementStyleSection.element.nextSibling);
 
         this.sections[0].splice(2, 0, blankSection);
 
@@ -650,6 +662,74 @@ WebInspector.StylesSidebarPane.prototype = {
             shortcut.shortcutToString(shortcut.Keys.PageDown, shortcut.Modifiers.Alt)
         ];
         section.addRelatedKeys(keys, WebInspector.UIString("Increment/decrement by %f", 0.1));
+    },
+
+    _toggleElementStatePane: function(event)
+    {
+        event.stopPropagation();
+        if (!this._elementStateButton.hasStyleClass("toggled")) {
+            this.expand();
+            this._elementStateButton.addStyleClass("toggled");
+            this._elementStatePane.addStyleClass("expanded");
+        } else {
+            this._elementStateButton.removeStyleClass("toggled");
+            this._elementStatePane.removeStyleClass("expanded");
+            // Clear flags on hide.
+            if (this._forcedPseudoClasses) {
+                for (var i = 0; i < this._elementStatePane.inputs.length; ++i)
+                    this._elementStatePane.inputs[i].checked = false;
+                delete this._forcedPseudoClasses;
+                this.update(WebInspector.panels.elements.focusedDOMNode, null, true);
+            }
+        }
+    },
+
+    _createElementStatePane: function()
+    {
+        this._elementStatePane = document.createElement("div");
+        this._elementStatePane.className = "styles-element-state-pane source-code";
+        var table = document.createElement("table");
+
+        var inputs = [];
+        this._elementStatePane.inputs = inputs;
+
+        function clickListener(event)
+        {
+            var pseudoClasses = [];
+            for (var i = 0; i < inputs.length; ++i) {
+                if (inputs[i].checked)
+                    pseudoClasses.push(inputs[i].state);
+            }
+            this._forcedPseudoClasses = pseudoClasses.length ? pseudoClasses : undefined;
+            this.update(WebInspector.panels.elements.focusedDOMNode, null, true);
+        }
+
+        function createCheckbox(state)
+        {
+            var td = document.createElement("td");
+            var label = document.createElement("label");
+            var input = document.createElement("input");
+            input.type = "checkbox";
+            input.state = state;
+            input.addEventListener("click", clickListener.bind(this), false);
+            inputs.push(input);
+            label.appendChild(input);
+            label.appendChild(document.createTextNode(":" + state));
+            td.appendChild(label);
+            return td;
+        }
+
+        var tr = document.createElement("tr");
+        tr.appendChild(createCheckbox.call(this, "active"));
+        tr.appendChild(createCheckbox.call(this, "hover"));
+        table.appendChild(tr);
+
+        tr = document.createElement("tr");
+        tr.appendChild(createCheckbox.call(this, "focus"));
+        tr.appendChild(createCheckbox.call(this, "visited"));
+        table.appendChild(tr);
+
+        this._elementStatePane.appendChild(table);
     }
 }
 
@@ -662,7 +742,7 @@ WebInspector.ComputedStyleSidebarPane = function()
     this.titleElement.appendChild(showInheritedCheckbox.element);
 
     if (WebInspector.settings.showInheritedComputedStyleProperties.get()) {
-        this.bodyElement.addStyleClass("show-inherited");
+        this._sectionsContainer.addStyleClass("show-inherited");
         showInheritedCheckbox.checked = true;
     }
 
@@ -670,9 +750,9 @@ WebInspector.ComputedStyleSidebarPane = function()
     {
         WebInspector.settings.showInheritedComputedStyleProperties.set(showInheritedCheckbox.checked);
         if (WebInspector.settings.showInheritedComputedStyleProperties.get())
-            this.bodyElement.addStyleClass("show-inherited");
+            this._sectionsContainer.addStyleClass("show-inherited");
         else
-            this.bodyElement.removeStyleClass("show-inherited");
+            this._sectionsContainer.removeStyleClass("show-inherited");
     }
 
     showInheritedCheckbox.addEventListener(showInheritedToggleFunction.bind(this));
index eef1180..d8fc441 100644 (file)
     <file>Images/paneAddButtons.png</file>
     <file>Images/paneBottomGrow.png</file>
     <file>Images/paneBottomGrowActive.png</file>
+    <file>Images/paneElementStateButtons.png</file>
     <file>Images/paneGrowHandleLine.png</file>
     <file>Images/paneRefreshButtons.png</file>
     <file>Images/paneSettingsButtons.png</file>
index 15cd5ed..794c85f 100644 (file)
@@ -1798,7 +1798,7 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
     background-position: -23px 0px;
 }
 
-.pane > .title > .pane-title-button:active {
+.pane > .title > .pane-title-button:active, .pane > .title > .pane-title-button.toggled {
     background-position: -46px 0px;
 }
 
@@ -1806,6 +1806,10 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
     background-image: url(Images/paneAddButtons.png);
 }
 
+.pane > .title > .pane-title-button.element-state {
+    background-image: url(Images/paneElementStateButtons.png);
+}
+
 .pane > .title > .pane-title-button.refresh {
     background-image: url(Images/paneRefreshButtons.png);
 }
@@ -4546,6 +4550,28 @@ a.worker-item {
     opacity: 0.5;
 }
 
+.styles-element-state-pane {
+    background-color: rgb(240, 240, 240);
+    overflow: hidden;
+    margin-top: -38px;
+    -webkit-transition: margin-top 0.1s ease-in-out;
+    padding-left: 2px;
+}
+
+.styles-element-state-pane.expanded {
+    border-bottom: 1px solid rgb(189, 189, 189);
+    margin-top: 0;
+}
+
+.styles-element-state-pane > table {
+    width: 100%;
+    border-spacing: 0;
+}
+
+.styles-element-state-pane input {
+    margin: 2px;
+    vertical-align: -2px;
+}
 
 .body .styles-section .properties .inherited {
     display: none;