Changeset 188226 in webkit


Ignore:
Timestamp:
Aug 10, 2015 1:49:47 PM (9 years ago)
Author:
Devin Rousso
Message:

Web Inspector: Add VisualStyleSelectorSection
​https://bugs.webkit.org/show_bug.cgi?id=147572

Reviewed by Brian Burg.

Adds a section to the new Visual style sidebar panel that contains the list of
styles for the currently selected node.

  • UserInterface/Models/CSSRule.js:

(WebInspector.CSSRule.prototype.get mediaText):
Returns a string containing the list of media queries.

  • UserInterface/Models/CSSStyleDeclaration.js:

(WebInspector.CSSStyleDeclaration):
(WebInspector.CSSStyleDeclaration.prototype.set text):
(WebInspector.CSSStyleDeclaration.prototype.get modified):
(WebInspector.CSSStyleDeclaration.prototype.resetText):
(WebInspector.CSSStyleDeclaration.prototype.generateCSSRuleString):
Generates a formatted string of the style text.

  • UserInterface/Views/CSSStyleDeclarationSection.js:

(WebInspector.CSSStyleDeclarationSection.prototype._handleContextMenuEvent):
(WebInspector.CSSStyleDeclarationSection.prototype._generateCSSRuleString): Deleted.

  • UserInterface/Views/VisualStyleSelectorSection.css: Added.

(.details-section.visual-style-selector-section > .header):
(.details-section.visual-style-selector-section:not(.collapsed) > .header):
(@media (-webkit-min-device-pixel-ratio: 2)):
(.details-section.visual-style-selector-section > .header > .current-selector):
(.visual-style-selector-section.details-section:not(.collapsed) > .header > .current-selector):
(.details-section.visual-style-selector-section > .header > .current-selector > .icon):
(.details-section.visual-style-selector-section > .header > .current-selector > span):
(.details-section.visual-style-selector-section > .header > .controls):
(.details-section.visual-style-selector-section.collapsed > .header > .controls):
(.details-section.visual-style-selector-section > .header > .controls > .visual-style-selector-section-add-rule):
(.details-section.visual-style-selector-section > .content > .selectors):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .visual-style-selector-item:nth-child(odd)):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > .icon):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > :matches(.disclosure-button, .icon)):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > .titles > .title):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider ~ .visual-style-selector-item:nth-child(even)):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider ~ .visual-style-selector-item:nth-child(odd)):

  • UserInterface/Views/VisualStyleSelectorSection.js: Added.

(WebInspector.VisualStyleSelectorSection):
(WebInspector.VisualStyleSelectorSection.prototype.update.createSelectorItem):
(WebInspector.VisualStyleSelectorSection.prototype.update.uniqueOrderedRules):
(WebInspector.VisualStyleSelectorSection.prototype.update.insertAllMatchingPseudoRules):
(WebInspector.VisualStyleSelectorSection.prototype.update):
(WebInspector.VisualStyleSelectorSection.prototype.currentStyle):
(WebInspector.VisualStyleSelectorSection.prototype._selectorChanged):
(WebInspector.VisualStyleSelectorSection.prototype._styleTextReset):
(WebInspector.VisualStyleSelectorSection.prototype._addNewRule):
(WebInspector.VisualStyleSelectorSection.prototype._treeElementCheckboxToggled):
(WebInspector.VisualStyleSelectorSection.prototype._handleMouseOver):
(WebInspector.VisualStyleSelectorSection.prototype._handleMouseOut):

  • UserInterface/Views/VisualStyleSelectorTreeItem.css:

(.item.visual-style-selector-item):
(.item.visual-style-selector-item.selected):
(.item.visual-style-selector-item > .disclosure-button):
(.item.visual-style-selector-item > input[type="checkbox"]):
(.item.visual-style-selector-item > .icon):
(.item.visual-style-selector-item.modified > .icon):
(.item.visual-style-selector-item.selector-invalid > .icon):
(.item.visual-style-selector-item.selector-invalid > .titles > .title):
(.item.visual-style-selector-item.selector-invalid > .titles > .title::before):
(.item.visual-style-selector-item > .titles):
(.item.visual-style-selector-item:not(.dom-element-icon) > .titles > .title):
(.item.visual-style-selector-item:not(.dom-element-icon).editable > .titles > .title):
(.item.visual-style-selector-item:not(.dom-element-icon).editable > .titles > .title:focus):
(.item.visual-style-selector-item > .titles > .subtitle::before):
(.item.visual-style-selector-item > .titles > .subtitle):

  • UserInterface/Views/VisualStyleSelectorTreeItem.js:

(WebInspector.VisualStyleSelectorTreeItem):
(WebInspector.VisualStyleSelectorTreeItem.prototype.get iconClassName):
(WebInspector.VisualStyleSelectorTreeItem.prototype.get selectorText):
(WebInspector.VisualStyleSelectorTreeItem.prototype.onattach):
(WebInspector.VisualStyleSelectorTreeItem.prototype.ondeselect):
(WebInspector.VisualStyleSelectorTreeItem.prototype._highlightNodesWithSelector):
(WebInspector.VisualStyleSelectorTreeItem.prototype._hideDOMNodeHighlight):
(WebInspector.VisualStyleSelectorTreeItem.prototype._handleContextMenuEvent):
(WebInspector.VisualStyleSelectorTreeItem.prototype._handleCheckboxChanged):
(WebInspector.VisualStyleSelectorTreeItem.prototype._updateCheckboxTitle):
(WebInspector.VisualStyleSelectorTreeItem.prototype._handleMainTitleMouseDown):
(WebInspector.VisualStyleSelectorTreeItem.prototype._handleMainTitleKeyDown):
(WebInspector.VisualStyleSelectorTreeItem.prototype._commitSelector):
(WebInspector.VisualStyleSelectorTreeItem.prototype._styleTextModified):
(WebInspector.VisualStyleSelectorTreeItem.prototype._selectorChanged):

Location:
trunk/Source/WebInspectorUI
Files:
4 added
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r188221 r188226  
     12015-08-10  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Add VisualStyleSelectorSection
     4        https://bugs.webkit.org/show_bug.cgi?id=147572
     5
     6        Reviewed by Brian Burg.
     7
     8        Adds a section to the new Visual style sidebar panel that contains the list of
     9        styles for the currently selected node.
     10
     11        * UserInterface/Models/CSSRule.js:
     12        (WebInspector.CSSRule.prototype.get mediaText):
     13        Returns a string containing the list of media queries.
     14
     15        * UserInterface/Models/CSSStyleDeclaration.js:
     16        (WebInspector.CSSStyleDeclaration):
     17        (WebInspector.CSSStyleDeclaration.prototype.set text):
     18        (WebInspector.CSSStyleDeclaration.prototype.get modified):
     19        (WebInspector.CSSStyleDeclaration.prototype.resetText):
     20        (WebInspector.CSSStyleDeclaration.prototype.generateCSSRuleString):
     21        Generates a formatted string of the style text.
     22
     23        * UserInterface/Views/CSSStyleDeclarationSection.js:
     24        (WebInspector.CSSStyleDeclarationSection.prototype._handleContextMenuEvent):
     25        (WebInspector.CSSStyleDeclarationSection.prototype._generateCSSRuleString): Deleted.
     26
     27        * UserInterface/Views/VisualStyleSelectorSection.css: Added.
     28        (.details-section.visual-style-selector-section > .header):
     29        (.details-section.visual-style-selector-section:not(.collapsed) > .header):
     30        (@media (-webkit-min-device-pixel-ratio: 2)):
     31        (.details-section.visual-style-selector-section > .header > .current-selector):
     32        (.visual-style-selector-section.details-section:not(.collapsed) > .header > .current-selector):
     33        (.details-section.visual-style-selector-section > .header > .current-selector > .icon):
     34        (.details-section.visual-style-selector-section > .header > .current-selector > span):
     35        (.details-section.visual-style-selector-section > .header > .controls):
     36        (.details-section.visual-style-selector-section.collapsed > .header > .controls):
     37        (.details-section.visual-style-selector-section > .header > .controls > .visual-style-selector-section-add-rule):
     38        (.details-section.visual-style-selector-section > .content > .selectors):
     39        (.details-section.visual-style-selector-section > .content > .selectors > .selector-list):
     40        (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .visual-style-selector-item:nth-child(odd)):
     41        (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider):
     42        (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > .icon):
     43        (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > :matches(.disclosure-button, .icon)):
     44        (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > .titles > .title):
     45        (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider ~ .visual-style-selector-item:nth-child(even)):
     46        (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider ~ .visual-style-selector-item:nth-child(odd)):
     47
     48        * UserInterface/Views/VisualStyleSelectorSection.js: Added.
     49        (WebInspector.VisualStyleSelectorSection):
     50        (WebInspector.VisualStyleSelectorSection.prototype.update.createSelectorItem):
     51        (WebInspector.VisualStyleSelectorSection.prototype.update.uniqueOrderedRules):
     52        (WebInspector.VisualStyleSelectorSection.prototype.update.insertAllMatchingPseudoRules):
     53        (WebInspector.VisualStyleSelectorSection.prototype.update):
     54        (WebInspector.VisualStyleSelectorSection.prototype.currentStyle):
     55        (WebInspector.VisualStyleSelectorSection.prototype._selectorChanged):
     56        (WebInspector.VisualStyleSelectorSection.prototype._styleTextReset):
     57        (WebInspector.VisualStyleSelectorSection.prototype._addNewRule):
     58        (WebInspector.VisualStyleSelectorSection.prototype._treeElementCheckboxToggled):
     59        (WebInspector.VisualStyleSelectorSection.prototype._handleMouseOver):
     60        (WebInspector.VisualStyleSelectorSection.prototype._handleMouseOut):
     61
     62        * UserInterface/Views/VisualStyleSelectorTreeItem.css:
     63        (.item.visual-style-selector-item):
     64        (.item.visual-style-selector-item.selected):
     65        (.item.visual-style-selector-item > .disclosure-button):
     66        (.item.visual-style-selector-item > input[type="checkbox"]):
     67        (.item.visual-style-selector-item > .icon):
     68        (.item.visual-style-selector-item.modified > .icon):
     69        (.item.visual-style-selector-item.selector-invalid > .icon):
     70        (.item.visual-style-selector-item.selector-invalid > .titles > .title):
     71        (.item.visual-style-selector-item.selector-invalid > .titles > .title::before):
     72        (.item.visual-style-selector-item > .titles):
     73        (.item.visual-style-selector-item:not(.dom-element-icon) > .titles > .title):
     74        (.item.visual-style-selector-item:not(.dom-element-icon).editable > .titles > .title):
     75        (.item.visual-style-selector-item:not(.dom-element-icon).editable > .titles > .title:focus):
     76        (.item.visual-style-selector-item > .titles > .subtitle::before):
     77        (.item.visual-style-selector-item > .titles > .subtitle):
     78
     79        * UserInterface/Views/VisualStyleSelectorTreeItem.js:
     80        (WebInspector.VisualStyleSelectorTreeItem):
     81        (WebInspector.VisualStyleSelectorTreeItem.prototype.get iconClassName):
     82        (WebInspector.VisualStyleSelectorTreeItem.prototype.get selectorText):
     83        (WebInspector.VisualStyleSelectorTreeItem.prototype.onattach):
     84        (WebInspector.VisualStyleSelectorTreeItem.prototype.ondeselect):
     85        (WebInspector.VisualStyleSelectorTreeItem.prototype._highlightNodesWithSelector):
     86        (WebInspector.VisualStyleSelectorTreeItem.prototype._hideDOMNodeHighlight):
     87        (WebInspector.VisualStyleSelectorTreeItem.prototype._handleContextMenuEvent):
     88        (WebInspector.VisualStyleSelectorTreeItem.prototype._handleCheckboxChanged):
     89        (WebInspector.VisualStyleSelectorTreeItem.prototype._updateCheckboxTitle):
     90        (WebInspector.VisualStyleSelectorTreeItem.prototype._handleMainTitleMouseDown):
     91        (WebInspector.VisualStyleSelectorTreeItem.prototype._handleMainTitleKeyDown):
     92        (WebInspector.VisualStyleSelectorTreeItem.prototype._commitSelector):
     93        (WebInspector.VisualStyleSelectorTreeItem.prototype._styleTextModified):
     94        (WebInspector.VisualStyleSelectorTreeItem.prototype._selectorChanged):
     95
    1962015-08-10  Joseph Pecoraro  <pecoraro@apple.com>
    297

  • trunk/Source/WebInspectorUI/UserInterface/Models/CSSRule.js

    r187500 r188226  
    178178    }
    179179
     180    get mediaText()
     181    {
     182        if (!this._mediaList.length)
     183            return;
     184
     185        let mediaText = "";
     186        for (let media of this._mediaList)
     187            mediaText += media.text;
     188
     189        return mediaText;
     190    }
     191
    180192    isEqualTo(rule)
    181193    {

  • trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js

    r182113 r188226  
    4444        this._propertyNameMap = {};
    4545
     46        this._initialText = text;
     47        this._hasModifiedInitialText = false;
     48
    4649        this.update(text, properties, styleSheetTextRange, true);
    4750    }
    … …  
    184187            return;
    185188
     189        var modified = text !== this._initialText;
     190        if (modified !== this._hasModifiedInitialText) {
     191            this._hasModifiedInitialText = modified;
     192            this.dispatchEventToListeners(WebInspector.CSSStyleDeclaration.Event.InitialTextModified);
     193        }
     194
    186195        this._nodeStyles.changeStyleText(this, text);
     196    }
     197
     198    resetText()
     199    {
     200        this.text = this._initialText;
     201    }
     202
     203    get modified()
     204    {
     205        return this._hasModifiedInitialText;
    187206    }
    188207
    … …  
    261280    }
    262281
     282    generateCSSRuleString()
     283    {
     284        if (!this._ownerRule)
     285            return;
     286
     287        let styleText = "";
     288        let mediaQueriesCount = 0;
     289        let mediaList = this._ownerRule.mediaList;
     290        if (mediaList.length) {
     291            mediaQueriesCount = mediaList.length;
     292
     293            for (let i = mediaQueriesCount - 1; i >= 0; --i)
     294                styleText += "    ".repeat(mediaQueriesCount - i - 1) + "@media " + mediaList[i].text + " {\n";
     295        }
     296
     297        styleText += "    ".repeat(mediaQueriesCount) + this._ownerRule.selectorText + " {\n";
     298
     299        for (let property of this._properties) {
     300            if (property.anonymous)
     301                continue;
     302
     303            styleText += "    ".repeat(mediaQueriesCount + 1) + property.text.trim();
     304
     305            if (!styleText.endsWith(";"))
     306                styleText += ";";
     307
     308            styleText += "\n";
     309        }
     310
     311        for (let i = mediaQueriesCount; i > 0; --i)
     312            styleText += "    ".repeat(i) + "}\n";
     313
     314        styleText += "}";
     315
     316        return styleText;
     317    }
     318
    263319    // Protected
    264320
    … …  
    270326
    271327WebInspector.CSSStyleDeclaration.Event = {
    272     PropertiesChanged: "css-style-declaration-properties-changed"
     328    PropertiesChanged: "css-style-declaration-properties-changed",
     329    InitialTextModified: "css-style-declaration-initial-text-modified"
    273330};
    274331

  • trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js

    r187968 r188226  
    450450
    451451        contextMenu.appendItem(WebInspector.UIString("Copy Rule"), function() {
    452             InspectorFrontendHost.copyText(this._generateCSSRuleString());
     452            InspectorFrontendHost.copyText(this._style.generateCSSRuleString());
    453453        }.bind(this));
    454454
    455455        contextMenu.show();
    456     }
    457 
    458     _generateCSSRuleString()
    459     {
    460         var numMediaQueries = 0;
    461         var styleText = "";
    462 
    463         if (this._style.ownerRule) {
    464             var mediaList = this._style.ownerRule.mediaList;
    465             if (mediaList.length) {
    466                 numMediaQueries = mediaList.length;
    467 
    468                 for (var i = numMediaQueries - 1; i >= 0; --i)
    469                     styleText += "    ".repeat(numMediaQueries - i - 1) + "@media " + mediaList[i].text + " {\n";
    470             }
    471 
    472             styleText += "    ".repeat(numMediaQueries) + this._style.ownerRule.selectorText;
    473         } else
    474             styleText += this._selectorElement.textContent;
    475 
    476         styleText += " {\n";
    477 
    478         for (var property of this._style.visibleProperties) {
    479             styleText += "    ".repeat(numMediaQueries + 1) + property.text.trim();
    480 
    481             if (!styleText.endsWith(";"))
    482                 styleText += ";";
    483 
    484             styleText += "\n";
    485         }
    486 
    487         for (var i = numMediaQueries; i > 0; --i)
    488             styleText += "    ".repeat(i) + "}\n";
    489 
    490         styleText += "}";
    491 
    492         return styleText;
    493456    }
    494457
Note: See TracChangeset for help on using the changeset viewer.