Changeset 90397 in webkit


Ignore:
Timestamp:
Jul 5, 2011 8:35:19 AM (13 years ago)
Author:
pfeldman@chromium.org
Message:

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):
Location:
trunk/Source/WebCore
Files:
1 added
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r90395 r90397  
     12011-07-05  Pavel Feldman  <pfeldman@google.com>
     2
     3        Web Inspector: add "element state" setting to the styles section title.
     4        https://bugs.webkit.org/show_bug.cgi?id=63932
     5
     6        Reviewed by Yury Semikhatsky.
     7
     8        * English.lproj/localizedStrings.js:
     9        * WebCore.gypi:
     10        * inspector/front-end/Images/paneElementStateButtons.png: Added.
     11        * inspector/front-end/StylesSidebarPane.js:
     12        (WebInspector.StylesSidebarPane.muteEventListener):
     13        (WebInspector.StylesSidebarPane):
     14        (WebInspector.StylesSidebarPane.prototype.update):
     15        (WebInspector.StylesSidebarPane.prototype._rebuildUpdate):
     16        (WebInspector.StylesSidebarPane.prototype._rebuildSectionsForStyleRules):
     17        (WebInspector.StylesSidebarPane.prototype.addBlankSection):
     18        (WebInspector.StylesSidebarPane.prototype.registerShortcuts):
     19        (WebInspector.StylesSidebarPane.prototype._toggleElementStatePane):
     20        (WebInspector.StylesSidebarPane.prototype._createElementStatePane.clickListener):
     21        (WebInspector.StylesSidebarPane.prototype._createElementStatePane.createCheckbox):
     22        (WebInspector.StylesSidebarPane.prototype._createElementStatePane):
     23        * inspector/front-end/WebKit.qrc:
     24        * inspector/front-end/inspector.css:
     25        (.pane > .title > .pane-title-button:active, .pane > .title > .pane-title-button.toggled):
     26        (.pane > .title > .pane-title-button.element-state):
     27        (.styles-element-state-pane):
     28        (.styles-element-state-pane.expanded):
     29        (.styles-element-state-pane > table):
     30        (.styles-element-state-pane input):
     31
    1322011-06-22  Pavel Podivilov  <podivilov@chromium.org>
    233

  • trunk/Source/WebCore/WebCore.gypi

    r90365 r90397  
    64256425            'inspector/front-end/Images/paneBottomGrow.png',
    64266426            'inspector/front-end/Images/paneBottomGrowActive.png',
     6427            'inspector/front-end/Images/paneElementStateButtons.png',
    64276428            'inspector/front-end/Images/paneFilterButtons.png',
    64286429            'inspector/front-end/Images/paneGrowHandleLine.png',

  • trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js

    r90387 r90397  
    5656
    5757    // Prevent section from collapsing.
    58     this.settingsSelectElement.addEventListener("click", function(event) { event.stopPropagation() }, false);
    59 
     58    var muteEventListener = function(event) { event.stopPropagation(); event.preventDefault(); };
     59
     60    this.settingsSelectElement.addEventListener("click", muteEventListener, true);
    6061    this.settingsSelectElement.addEventListener("change", this._changeSetting.bind(this), false);
    6162    this._updateColorFormatFilter();
    6263
    6364    this.titleElement.appendChild(this.settingsSelectElement);
     65
     66    this._elementStateButton = document.createElement("button");
     67    this._elementStateButton.className = "pane-title-button element-state";
     68    this._elementStateButton.title = WebInspector.UIString("Toggle Element State");
     69    this._elementStateButton.addEventListener("click", this._toggleElementStatePane.bind(this), false);
     70    this.titleElement.appendChild(this._elementStateButton);
    6471
    6572    var addButton = document.createElement("button");
    … …  
    7279    this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
    7380    WebInspector.settings.colorFormat.addChangeListener(this._colorFormatSettingChanged.bind(this));
     81
     82    this._createElementStatePane();
     83    this.bodyElement.appendChild(this._elementStatePane);
     84    this._sectionsContainer = document.createElement("div");
     85    this.bodyElement.appendChild(this._sectionsContainer);
    7486}
    7587
    … …  
    221233
    222234        if (!node) {
    223             this.bodyElement.removeChildren();
     235            this._sectionsContainer.removeChildren();
    224236            this._computedStylePane.bodyElement.removeChildren();
    225237            this.sections = {};
    … …  
    248260            WebInspector.cssModel.getComputedStyleAsync(node.id, computedStyleCallback.bind(this));
    249261        else
    250             WebInspector.cssModel.getStylesAsync(node.id, undefined, stylesCallback.bind(this));
     262            WebInspector.cssModel.getStylesAsync(node.id, this._forcedPseudoClasses, stylesCallback.bind(this));
    251263    },
    252264
    … …  
    266278    _rebuildUpdate: function(node, styles)
    267279    {
    268         this.bodyElement.removeChildren();
     280        this._sectionsContainer.removeChildren();
    269281        this._computedStylePane.bodyElement.removeChildren();
    270282
    … …  
    507519                } else
    508520                    separatorElement.textContent = styleRule.text;
    509                 this.bodyElement.insertBefore(separatorElement, anchorElement);
     521                this._sectionsContainer.insertBefore(separatorElement, anchorElement);
    510522                lastWasSeparator = true;
    511523                continue;
    … …  
    529541                lastWasSeparator = true;
    530542            } else {
    531                 this.bodyElement.insertBefore(section.element, anchorElement);
     543                this._sectionsContainer.insertBefore(section.element, anchorElement);
    532544                lastWasSeparator = false;
    533545            }
    … …  
    597609
    598610        var elementStyleSection = this.sections[0][1];
    599         this.bodyElement.insertBefore(blankSection.element, elementStyleSection.element.nextSibling);
     611        this._sectionsContainer.insertBefore(blankSection.element, elementStyleSection.element.nextSibling);
    600612
    601613        this.sections[0].splice(2, 0, blankSection);
    … …  
    651663        ];
    652664        section.addRelatedKeys(keys, WebInspector.UIString("Increment/decrement by %f", 0.1));
     665    },
     666
     667    _toggleElementStatePane: function(event)
     668    {
     669        event.stopPropagation();
     670        if (!this._elementStateButton.hasStyleClass("toggled")) {
     671            this.expand();
     672            this._elementStateButton.addStyleClass("toggled");
     673            this._elementStatePane.addStyleClass("expanded");
     674        } else {
     675            this._elementStateButton.removeStyleClass("toggled");
     676            this._elementStatePane.removeStyleClass("expanded");
     677            // Clear flags on hide.
     678            if (this._forcedPseudoClasses) {
     679                for (var i = 0; i < this._elementStatePane.inputs.length; ++i)
     680                    this._elementStatePane.inputs[i].checked = false;
     681                delete this._forcedPseudoClasses;
     682                this.update(WebInspector.panels.elements.focusedDOMNode, null, true);
     683            }
     684        }
     685    },
     686
     687    _createElementStatePane: function()
     688    {
     689        this._elementStatePane = document.createElement("div");
     690        this._elementStatePane.className = "styles-element-state-pane source-code";
     691        var table = document.createElement("table");
     692
     693        var inputs = [];
     694        this._elementStatePane.inputs = inputs;
     695
     696        function clickListener(event)
     697        {
     698            var pseudoClasses = [];
     699            for (var i = 0; i < inputs.length; ++i) {
     700                if (inputs[i].checked)
     701                    pseudoClasses.push(inputs[i].state);
     702            }
     703            this._forcedPseudoClasses = pseudoClasses.length ? pseudoClasses : undefined;
     704            this.update(WebInspector.panels.elements.focusedDOMNode, null, true);
     705        }
     706
     707        function createCheckbox(state)
     708        {
     709            var td = document.createElement("td");
     710            var label = document.createElement("label");
     711            var input = document.createElement("input");
     712            input.type = "checkbox";
     713            input.state = state;
     714            input.addEventListener("click", clickListener.bind(this), false);
     715            inputs.push(input);
     716            label.appendChild(input);
     717            label.appendChild(document.createTextNode(":" + state));
     718            td.appendChild(label);
     719            return td;
     720        }
     721
     722        var tr = document.createElement("tr");
     723        tr.appendChild(createCheckbox.call(this, "active"));
     724        tr.appendChild(createCheckbox.call(this, "hover"));
     725        table.appendChild(tr);
     726
     727        tr = document.createElement("tr");
     728        tr.appendChild(createCheckbox.call(this, "focus"));
     729        tr.appendChild(createCheckbox.call(this, "visited"));
     730        table.appendChild(tr);
     731
     732        this._elementStatePane.appendChild(table);
    653733    }
    654734}
    … …  
    663743
    664744    if (WebInspector.settings.showInheritedComputedStyleProperties.get()) {
    665         this.bodyElement.addStyleClass("show-inherited");
     745        this._sectionsContainer.addStyleClass("show-inherited");
    666746        showInheritedCheckbox.checked = true;
    667747    }
    … …  
    671751        WebInspector.settings.showInheritedComputedStyleProperties.set(showInheritedCheckbox.checked);
    672752        if (WebInspector.settings.showInheritedComputedStyleProperties.get())
    673             this.bodyElement.addStyleClass("show-inherited");
     753            this._sectionsContainer.addStyleClass("show-inherited");
    674754        else
    675             this.bodyElement.removeStyleClass("show-inherited");
     755            this._sectionsContainer.removeStyleClass("show-inherited");
    676756    }
    677757

  • trunk/Source/WebCore/inspector/front-end/WebKit.qrc

    r90365 r90397  
    185185    <file>Images/paneBottomGrow.png</file>
    186186    <file>Images/paneBottomGrowActive.png</file>
     187    <file>Images/paneElementStateButtons.png</file>
    187188    <file>Images/paneGrowHandleLine.png</file>
    188189    <file>Images/paneRefreshButtons.png</file>

  • trunk/Source/WebCore/inspector/front-end/inspector.css

    r90387 r90397  
    17991799}
    18001800
    1801 .pane > .title > .pane-title-button:active {
     1801.pane > .title > .pane-title-button:active, .pane > .title > .pane-title-button.toggled {
    18021802    background-position: -46px 0px;
    18031803}
    … …  
    18051805.pane > .title > .pane-title-button.add {
    18061806    background-image: url(Images/paneAddButtons.png);
     1807}
     1808
     1809.pane > .title > .pane-title-button.element-state {
     1810    background-image: url(Images/paneElementStateButtons.png);
    18071811}
    18081812
    … …  
    45474551}
    45484552
     4553.styles-element-state-pane {
     4554    background-color: rgb(240, 240, 240);
     4555    overflow: hidden;
     4556    margin-top: -38px;
     4557    -webkit-transition: margin-top 0.1s ease-in-out;
     4558    padding-left: 2px;
     4559}
     4560
     4561.styles-element-state-pane.expanded {
     4562    border-bottom: 1px solid rgb(189, 189, 189);
     4563    margin-top: 0;
     4564}
     4565
     4566.styles-element-state-pane > table {
     4567    width: 100%;
     4568    border-spacing: 0;
     4569}
     4570
     4571.styles-element-state-pane input {
     4572    margin: 2px;
     4573    vertical-align: -2px;
     4574}
    45494575
    45504576.body .styles-section .properties .inherited {
Note: See TracChangeset for help on using the changeset viewer.