Changeset 194717 in webkit


Ignore:
Timestamp:
Jan 7, 2016 1:27:48 PM (8 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: Make creating new rules in the Styles sidebar simpler
​https://bugs.webkit.org/show_bug.cgi?id=152726

Patch by Devin Rousso <Devin Rousso> on 2016-01-07
Reviewed by Timothy Hatcher.

When creating a new rules of any kind, first look to see if it already exists in
another rule that has no properties. If found, focus/select it instead of creating
a new rule. Otherwise, create the new rule like normal.

Also changed the way in which previously-focused sections/tree-items are saved
to rely upon the selector of the new rule and whether the section for that rule
is empty and an inspector rule.

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Models/CSSStyleDeclaration.js:

(WebInspector.CSSStyleDeclaration.prototype.isInspectorRule):
Returns true if the style is an inspector rule.

(WebInspector.CSSStyleDeclaration.prototype.hasProperties):
Returns true if the style has CSS properties.

  • UserInterface/Models/DOMNodeStyles.js:

(WebInspector.DOMNodeStyles.prototype.rulesForSelector.ruleHasSelector):
(WebInspector.DOMNodeStyles.prototype.rulesForSelector):
Returns a list of CSSRule that match the given selector and are not
in media queries.

  • UserInterface/Views/BoxModelDetailsSectionRow.js:

(WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics):

  • UserInterface/Views/CSSStyleDeclarationSection.js:

(WebInspector.CSSStyleDeclarationSection.prototype._handleContextMenuEvent):

  • UserInterface/Views/CSSStyleDeclarationTextEditor.js:

(WebInspector.CSSStyleDeclarationTextEditor.prototype.commentAllProperties):

  • UserInterface/Views/RulesStyleDetailsPanel.js:

(WebInspector.RulesStyleDetailsPanel.prototype.refresh.appendStyleSection):
(WebInspector.RulesStyleDetailsPanel.prototype.refresh.cssStyleDeclarationSectionEditorFocused):
Now saves the newly focused section as the previously-focused section.

(WebInspector.RulesStyleDetailsPanel.prototype.cssStyleDeclarationSectionFocusNewInspectorRuleWithSelector):
Renamed from cssStyleDeclarationSectionFocusNextNewInspectorRule. Now needs
a selector argument.

(WebInspector.RulesStyleDetailsPanel.prototype.newRuleButtonClicked):
(WebInspector.RulesStyleDetailsPanel.prototype.sectionForStyle):
Returns the first section that has a style with matching selector.

(WebInspector.RulesStyleDetailsPanel.prototype.focusEmptySectionWithStyle):
Finds the section corresponding to the given style and, if empty, focuses it.

(WebInspector.RulesStyleDetailsPanel.prototype.nodeStylesRefreshed):
No longer clears the previously-focused section.

  • UserInterface/Views/VisualStyleSelectorSection.js:

(WebInspector.VisualStyleSelectorSection):
(WebInspector.VisualStyleSelectorSection.prototype.update.createSelectorItem):
(WebInspector.VisualStyleSelectorSection.prototype.update):
(WebInspector.VisualStyleSelectorSection.prototype.treeItemForStyle):
Returns the first tree item that has a style with matching selector.

(WebInspector.VisualStyleSelectorSection.prototype.selectEmptyStyleTreeItem):
Finds the tree item corresponding to the given style and, if empty, selects it.

(WebInspector.VisualStyleSelectorSection.prototype._addNewRule):

  • UserInterface/Views/VisualStyleSelectorTreeItem.js:

(WebInspector.VisualStyleSelectorTreeItem):
Now requires a delegate object.

(WebInspector.VisualStyleSelectorTreeItem.prototype._handleContextMenuEvent):

Location:
trunk/Source/WebInspectorUI
Files:
10 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r194704 r194717  
     12016-01-07  Devin Rousso  <dcrousso+webkit@gmail.com>
     2
     3        Web Inspector: Make creating new rules in the Styles sidebar simpler
     4        https://bugs.webkit.org/show_bug.cgi?id=152726
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        When creating a new rules of any kind, first look to see if it already exists in
     9        another rule that has no properties. If found, focus/select it instead of creating
     10        a new rule. Otherwise, create the new rule like normal.
     11
     12        Also changed the way in which previously-focused sections/tree-items are saved
     13        to rely upon the selector of the new rule and whether the section for that rule
     14        is empty and an inspector rule.
     15
     16        * Localizations/en.lproj/localizedStrings.js:
     17
     18        * UserInterface/Models/CSSStyleDeclaration.js:
     19        (WebInspector.CSSStyleDeclaration.prototype.isInspectorRule):
     20        Returns true if the style is an inspector rule.
     21
     22        (WebInspector.CSSStyleDeclaration.prototype.hasProperties):
     23        Returns true if the style has CSS properties.
     24
     25        * UserInterface/Models/DOMNodeStyles.js:
     26        (WebInspector.DOMNodeStyles.prototype.rulesForSelector.ruleHasSelector):
     27        (WebInspector.DOMNodeStyles.prototype.rulesForSelector):
     28        Returns a list of CSSRule that match the given selector and are not
     29        in media queries.
     30
     31        * UserInterface/Views/BoxModelDetailsSectionRow.js:
     32        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics):
     33
     34        * UserInterface/Views/CSSStyleDeclarationSection.js:
     35        (WebInspector.CSSStyleDeclarationSection.prototype._handleContextMenuEvent):
     36
     37        * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
     38        (WebInspector.CSSStyleDeclarationTextEditor.prototype.commentAllProperties):
     39
     40        * UserInterface/Views/RulesStyleDetailsPanel.js:
     41        (WebInspector.RulesStyleDetailsPanel.prototype.refresh.appendStyleSection):
     42        (WebInspector.RulesStyleDetailsPanel.prototype.refresh.cssStyleDeclarationSectionEditorFocused):
     43        Now saves the newly focused section as the previously-focused section.
     44
     45        (WebInspector.RulesStyleDetailsPanel.prototype.cssStyleDeclarationSectionFocusNewInspectorRuleWithSelector):
     46        Renamed from cssStyleDeclarationSectionFocusNextNewInspectorRule. Now needs
     47        a selector argument.
     48
     49        (WebInspector.RulesStyleDetailsPanel.prototype.newRuleButtonClicked):
     50        (WebInspector.RulesStyleDetailsPanel.prototype.sectionForStyle):
     51        Returns the first section that has a style with matching selector.
     52
     53        (WebInspector.RulesStyleDetailsPanel.prototype.focusEmptySectionWithStyle):
     54        Finds the section corresponding to the given style and, if empty, focuses it.
     55
     56        (WebInspector.RulesStyleDetailsPanel.prototype.nodeStylesRefreshed):
     57        No longer clears the previously-focused section.
     58
     59        * UserInterface/Views/VisualStyleSelectorSection.js:
     60        (WebInspector.VisualStyleSelectorSection):
     61        (WebInspector.VisualStyleSelectorSection.prototype.update.createSelectorItem):
     62        (WebInspector.VisualStyleSelectorSection.prototype.update):
     63        (WebInspector.VisualStyleSelectorSection.prototype.treeItemForStyle):
     64        Returns the first tree item that has a style with matching selector.
     65
     66        (WebInspector.VisualStyleSelectorSection.prototype.selectEmptyStyleTreeItem):
     67        Finds the tree item corresponding to the given style and, if empty, selects it.
     68
     69        (WebInspector.VisualStyleSelectorSection.prototype._addNewRule):
     70
     71        * UserInterface/Views/VisualStyleSelectorTreeItem.js:
     72        (WebInspector.VisualStyleSelectorTreeItem):
     73        Now requires a delegate object.
     74
     75        (WebInspector.VisualStyleSelectorTreeItem.prototype._handleContextMenuEvent):
     76
    1772016-01-06  Joseph Pecoraro  <pecoraro@apple.com>
    278

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

    r194686 r194717  
    300300localizedStrings["Float and Clear"] = "Float and Clear";
    301301localizedStrings["Flows"] = "Flows";
     302localizedStrings["Focus %s Rule"] = "Focus %s Rule";
    302303localizedStrings["Focused"] = "Focused";
    303304localizedStrings["Font"] = "Font";
    … …  
    552553localizedStrings["Secure"] = "Secure";
    553554localizedStrings["Security Issue"] = "Security Issue";
     555localizedStrings["Select %s Rule"] = "Select %s Rule";
    554556localizedStrings["Selected"] = "Selected";
    555557localizedStrings["Selected Element"] = "Selected Element";

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

    r190528 r194717  
    333333    }
    334334
     335    isInspectorRule()
     336    {
     337        return this._ownerRule && this._ownerRule.type === WebInspector.CSSStyleSheet.Type.Inspector;
     338    }
     339
     340    hasProperties()
     341    {
     342        return !!this._properties.length;
     343    }
     344
    335345    // Protected
    336346

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

    r194547 r194717  
    269269    }
    270270
     271    rulesForSelector(selector)
     272    {
     273        selector = selector || this._node.appropriateSelectorFor(true);
     274
     275        function ruleHasSelector(rule) {
     276            return !rule.mediaList.length && rule.selectorText === selector;
     277        }
     278
     279        let rules = this._matchedRules.filter(ruleHasSelector);
     280
     281        for (let id in this._pseudoElements)
     282            rules = rules.concat(this._pseudoElements[id].matchedRules.filter(ruleHasSelector));
     283
     284        return rules;
     285    }
     286
    271287    get matchedRules()
    272288    {

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

    r188138 r194717  
    194194        var boxes = ["content", "padding", "border", "margin", "position"];
    195195
    196         if (!style.properties.length) {
     196        if (!style.hasProperties()) {
    197197            this.showEmptyMessage();
    198198            return;

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

    r194547 r194717  
    445445
    446446        contextMenu.appendItem(WebInspector.UIString("Duplicate Selector"), () => {
    447             if (this._delegate && typeof this._delegate.cssStyleDeclarationSectionFocusNextNewInspectorRule === "function")
    448                 this._delegate.cssStyleDeclarationSectionFocusNextNewInspectorRule();
     447            if (this._delegate && typeof this._delegate.focusEmptySectionWithStyle === "function") {
     448                let existingRules = this._style.nodeStyles.rulesForSelector(this._currentSelectorText);
     449                for (let rule of existingRules) {
     450                    if (this._delegate.focusEmptySectionWithStyle(rule.style))
     451                        return;
     452                }
     453            }
     454
     455            if (this._delegate && typeof this._delegate.cssStyleDeclarationSectionFocusNewInspectorRuleWithSelector === "function")
     456                this._delegate.cssStyleDeclarationSectionFocusNewInspectorRuleWithSelector(this._currentSelectorText);
    449457
    450458            this._style.nodeStyles.addRule(this._currentSelectorText);
    … …  
    465473                    this._style.node.setPseudoClassEnabled(pseudoClass, true);
    466474
    467                     if (this._delegate && typeof this._delegate.cssStyleDeclarationSectionFocusNextNewInspectorRule === "function")
    468                         this._delegate.cssStyleDeclarationSectionFocusNextNewInspectorRule();
    469 
    470                     if (this._style.ownerRule) {
    471                         let pseudoSelectors = this._style.ownerRule.selectors.map((selector) => selector.text + pseudoClassSelector);
    472                         this._style.nodeStyles.addRule(pseudoSelectors.join(","));
    473                     } else
    474                         this._style.nodeStyles.addRule(this._currentSelectorText + pseudoClassSelector);
     475                    let selector;
     476                    if (this._style.ownerRule)
     477                        selector = this._style.ownerRule.selectors.map((selector) => selector.text + pseudoClassSelector).join(", ");
     478                    else
     479                        selector = this._currentSelectorText + pseudoClassSelector;
     480
     481                    if (this._delegate && typeof this._delegate.cssStyleDeclarationSectionFocusNewInspectorRuleWithSelector === "function")
     482                        this._delegate.cssStyleDeclarationSectionFocusNewInspectorRuleWithSelector(selector);
     483
     484                    this._style.nodeStyles.addRule(selector);
    475485                });
    476486            }
    … …  
    481491            const styleText = "content: \"\";";
    482492
    483             contextMenu.appendItem(WebInspector.UIString("Create %s Rule").format(pseudoElementSelector), () => {
    484                 if (this._delegate && typeof this._delegate.cssStyleDeclarationSectionFocusNextNewInspectorRule === "function")
    485                     this._delegate.cssStyleDeclarationSectionFocusNextNewInspectorRule();
    486 
    487                 if (this._style.ownerRule) {
    488                     let pseudoSelectors = this._style.ownerRule.selectors.map((selector) => selector.text + pseudoElementSelector);
    489                     this._style.nodeStyles.addRule(pseudoSelectors.join(","), styleText);
    490                 } else
    491                     this._style.nodeStyles.addRule(this._currentSelectorText + pseudoElementSelector, styleText);
     493            let existingSection = null;
     494            if (this._delegate && typeof this._delegate.sectionForStyle === "function") {
     495                let existingRules = this._style.nodeStyles.rulesForSelector(this._currentSelectorText + pseudoElementSelector);
     496                if (existingRules.length) {
     497                    // There shouldn't really ever be more than one pseudo-element rule
     498                    // that is not in a media query. As such, just focus the first rule
     499                    // on the assumption that it is the only one necessary.
     500                    existingSection = this._delegate.sectionForStyle(existingRules[0].style);
     501                }
     502            }
     503
     504            let title = existingSection ? WebInspector.UIString("Focus %s Rule") : WebInspector.UIString("Create %s Rule");
     505            contextMenu.appendItem(title.format(pseudoElementSelector), () => {
     506                if (existingSection) {
     507                    existingSection.focus();
     508                    return;
     509                }
     510
     511                let selector;
     512                if (this._style.ownerRule)
     513                    selector = this._style.ownerRule.selectors.map((selector) => selector.text + pseudoElementSelector).join(", ");
     514                else
     515                    selector = this._currentSelectorText + pseudoElementSelector;
     516
     517                if (this._delegate && typeof this._delegate.cssStyleDeclarationSectionFocusNewInspectorRuleWithSelector === "function")
     518                    this._delegate.cssStyleDeclarationSectionFocusNewInspectorRuleWithSelector(selector);
     519
     520                this._style.nodeStyles.addRule(selector, styleText);
    492521            });
    493522        }

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

    r194568 r194717  
    339339    commentAllProperties()
    340340    {
    341         if (!this._style.properties.length)
     341        if (!this._style.hasProperties())
    342342            return false;
    343343

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

    r192784 r194717  
    154154                section.refresh();
    155155
    156             if (this._focusNextNewInspectorRule && style.ownerRule && style.ownerRule.type === WebInspector.CSSStyleSheet.Type.Inspector) {
     156            if (style.isInspectorRule() && this._newInspectorRuleSelector === style.selectorText && !style.hasProperties()) {
    157157                this._previousFocusedSection = section;
    158                 delete this._focusNextNewInspectorRule;
     158                this._newInspectorRuleSelector = null;
    159159            }
    160160
    … …  
    312312    }
    313313
    314     cssStyleDeclarationSectionEditorFocused(ignoredSection)
    315     {
    316         for (var section of this._sections) {
    317             if (section !== ignoredSection)
     314    cssStyleDeclarationSectionEditorFocused(focusedSection)
     315    {
     316        for (let section of this._sections) {
     317            if (section !== focusedSection)
    318318                section.clearSelection();
    319319        }
     320        this._previousFocusedSection = focusedSection;
    320321    }
    321322
    … …  
    378379    }
    379380
    380     cssStyleDeclarationSectionFocusNextNewInspectorRule()
    381     {
    382         this._focusNextNewInspectorRule = true;
     381    cssStyleDeclarationSectionFocusNewInspectorRuleWithSelector(selector)
     382    {
     383        this._newInspectorRuleSelector = selector;
    383384    }
    384385
    … …  
    388389            return;
    389390
    390         this._focusNextNewInspectorRule = true;
    391         this.nodeStyles.addRule();
     391        for (let existingRule of this.nodeStyles.rulesForSelector()) {
     392            if (this.focusEmptySectionWithStyle(existingRule.style))
     393                return;
     394        }
     395
     396        this._newInspectorRuleSelector = this.nodeStyles.node.appropriateSelectorFor(true);
     397        this.nodeStyles.addRule(this._newInspectorRuleSelector);
     398    }
     399
     400    sectionForStyle(style)
     401    {
     402        if (style.__rulesSection)
     403            return style.__rulesSection;
     404
     405        for (let section of this._sections) {
     406            if (section.style === style)
     407                return section;
     408        }
     409        return null;
     410    }
     411
     412    focusEmptySectionWithStyle(style)
     413    {
     414        if (style.hasProperties())
     415            return false;
     416
     417        let section = this.sectionForStyle(style);
     418        if (!section)
     419            return false;
     420
     421        section.focus();
     422        return true;
    392423    }
    393424
    … …  
    432463        }
    433464
    434         if (this._previousFocusedSection && this._visible) {
     465        if (this._previousFocusedSection && this._visible)
    435466            this._previousFocusedSection.focus();
    436             this._previousFocusedSection = null;
    437         }
    438467    }
    439468

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

    r194644 r194717  
    5858        this._selectors.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._selectorChanged, this);
    5959
    60         this._focusNextNewInspectorRule = false;
     60        this._newInspectorRuleSelector = null;
    6161
    6262        let addGlyphElement = useSVGSymbol("Images/Plus13.svg", "visual-style-selector-section-add-rule", WebInspector.UIString("Click to add a new rule."));
    … …  
    9797
    9898        function createSelectorItem(style, title, subtitle) {
    99             let selector = new WebInspector.VisualStyleSelectorTreeItem(style, title, subtitle);
     99            let selector = new WebInspector.VisualStyleSelectorTreeItem(this, style, title, subtitle);
    100100            selector.addEventListener(WebInspector.VisualStyleSelectorTreeItem.Event.StyleTextReset, this._styleTextReset, this);
    101101            selector.addEventListener(WebInspector.VisualStyleSelectorTreeItem.Event.CheckboxChanged, this._treeElementCheckboxToggled, this);
    102102            this._selectors.appendChild(selector);
    103103
    104             if (this._focusNextNewInspectorRule && style.ownerRule && style.ownerRule.type === WebInspector.CSSStyleSheet.Type.Inspector) {
     104            if (style.isInspectorRule() && this._newInspectorRuleSelector === style.selectorText && !style.hasProperties()) {
    105105                selector.select(true);
    106106                selector.element.scrollIntoView();
    107107                this._nodeStyles[WebInspector.VisualStyleSelectorSection.LastSelectedRuleSymbol] = style;
    108                 this._focusNextNewInspectorRule = false;
     108                this._newInspectorRuleSelector = null;
    109109                return;
    110110            }
    … …  
    202202        }
    203203
    204         this._focusNextNewInspectorRule = false;
     204        this._newInspectorRuleSelector = null;
    205205    }
    206206
    … …  
    211211
    212212        return this._selectors.selectedTreeElement.representedObject;
     213    }
     214
     215    treeItemForStyle(style)
     216    {
     217        for (let item of this._selectors.children) {
     218            if (item.representedObject === style)
     219                return item;
     220        }
     221        return null;
     222    }
     223
     224    selectEmptyStyleTreeItem(style)
     225    {
     226        if (style.hasProperties())
     227            return false;
     228
     229        let treeItem = this.treeItemForStyle(style);
     230        if (!treeItem)
     231            return false;
     232
     233        treeItem.select(true, true);
     234        return true;
    213235    }
    214236
    … …  
    243265    _addNewRule(event)
    244266    {
    245         if (!this._nodeStyles)
    246             return;
    247 
    248         this._nodeStyles.addRule();
    249         this._focusNextNewInspectorRule = true;
     267        if (!this._nodeStyles || this._nodeStyles.node.isInShadowTree())
     268            return;
     269
     270        let selector = this.currentStyle().selectorText;
     271        let existingRules = this._nodeStyles.rulesForSelector(selector);
     272        for (let rule of existingRules) {
     273            if (this.selectEmptyStyleTreeItem(rule.style))
     274                return;
     275        }
     276
     277        this._newInspectorRuleSelector = selector;
     278        this._nodeStyles.addRule(selector);
    250279    }
    251280

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

    r194547 r194717  
    2626WebInspector.VisualStyleSelectorTreeItem = class VisualStyleSelectorTreeItem extends WebInspector.GeneralTreeElement
    2727{
    28     constructor(style, title, subtitle)
     28    constructor(delegate, style, title, subtitle)
    2929    {
    3030        let iconClassName;
    … …  
    5858        super(["visual-style-selector-item", iconClassName], title, subtitle, style);
    5959
     60        this._delegate = delegate;
     61
    6062        this._iconClassName = iconClassName;
    6163        this._lastValue = title;
    … …  
    142144        });
    143145
    144         contextMenu.appendItem(WebInspector.UIString("Reset"), () => {
    145             this.representedObject.resetText();
    146             this.dispatchEventToListeners(WebInspector.VisualStyleSelectorTreeItem.Event.StyleTextReset);
    147         });
     146        if (this.representedObject.modified) {
     147            contextMenu.appendItem(WebInspector.UIString("Reset"), () => {
     148                this.representedObject.resetText();
     149                this.dispatchEventToListeners(WebInspector.VisualStyleSelectorTreeItem.Event.StyleTextReset);
     150            });
     151        }
    148152
    149153        if (!this.representedObject.ownerRule)
    … …  
    170174                contextMenu.appendItem(WebInspector.UIString("Add %s Rule").format(pseudoClassSelector), () => {
    171175                    this.representedObject.node.setPseudoClassEnabled(pseudoClass, true);
    172 
    173                     if (this.representedObject.ownerRule) {
    174                         let pseudoSelectors = this.representedObject.ownerRule.selectors.map((selector) => selector.text + pseudoClassSelector);
    175                         this.representedObject.nodeStyles.addRule(pseudoSelectors.join(","));
    176                     } else
    177                         this.representedObject.nodeStyles.addRule(this._currentSelectorText + pseudoClassSelector);
     176                    let pseudoSelectors = this.representedObject.ownerRule.selectors.map((selector) => selector.text + pseudoClassSelector);
     177                    this.representedObject.nodeStyles.addRule(pseudoSelectors.join(", "));
    178178                });
    179179            }
    … …  
    184184            const styleText = "content: \"\";";
    185185
    186             contextMenu.appendItem(WebInspector.UIString("Create %s Rule").format(pseudoElementSelector), () => {
    187                 if (this.representedObject.ownerRule) {
    188                     let pseudoSelectors = this.representedObject.ownerRule.selectors.map((selector) => selector.text + pseudoElementSelector);
    189                     this.representedObject.nodeStyles.addRule(pseudoSelectors.join(","), styleText);
    190                 } else
    191                     this.representedObject.nodeStyles.addRule(this._currentSelectorText + pseudoElementSelector, styleText);
     186            let existingTreeItem = null;
     187            if (this._delegate && typeof this._delegate.treeItemForStyle === "function") {
     188                let selectorText = this.representedObject.ownerRule.selectorText;
     189                let existingRules = this.representedObject.nodeStyles.rulesForSelector(selectorText + pseudoElementSelector);
     190                if (existingRules.length) {
     191                    // There shouldn't really ever be more than one pseudo-element rule
     192                    // that is not in a media query. As such, just focus the first rule
     193                    // on the assumption that it is the only one necessary.
     194                    existingTreeItem = this._delegate.treeItemForStyle(existingRules[0].style);
     195                }
     196            }
     197
     198            let title = existingTreeItem ? WebInspector.UIString("Select %s Rule") : WebInspector.UIString("Create %s Rule");
     199            contextMenu.appendItem(title.format(pseudoElementSelector), () => {
     200                if (existingTreeItem) {
     201                    existingTreeItem.select(true, true);
     202                    return;
     203                }
     204
     205                let pseudoSelectors = this.representedObject.ownerRule.selectors.map((selector) => selector.text + pseudoElementSelector);
     206                this.representedObject.nodeStyles.addRule(pseudoSelectors.join(", "), styleText);
    192207            });
    193208        }
Note: See TracChangeset for help on using the changeset viewer.