Changeset 225571 in webkit


Ignore:
Timestamp:
Dec 6, 2017 12:24:40 AM (6 years ago)
Author:
webkit@devinrousso.com
Message:

Web Inspector: [PARITY] Styles Redesign: Ability to add new style rules
https://bugs.webkit.org/show_bug.cgi?id=178329
<rdar://problem/35001005>

Reviewed by Timothy Hatcher.

  • UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:

(WI.SpreadsheetRulesStyleDetailsPanel):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.refresh):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.newRuleButtonClicked):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.newRuleButtonContextMenu):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype._addNewRule):
Implement the two functions that CSSStyleDetailsSidebarPanel expects to exist in order for
the selected panel to support adding a new rule.

  • UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:

(WI.SpreadsheetCSSStyleDeclarationSection):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.layout):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.startEditingRuleSelector):
If the _selectorElement has not been created yet, set a flag and focus it once layout() has
been called (thereby ensuring that initialLayout() has been called).

Location:
trunk/Source/WebInspectorUI
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebInspectorUI/ChangeLog

    r225570 r225571  
     12017-12-06  Devin Rousso  <webkit@devinrousso.com>
     2
     3        Web Inspector: [PARITY] Styles Redesign: Ability to add new style rules
     4        https://bugs.webkit.org/show_bug.cgi?id=178329
     5        <rdar://problem/35001005>
     6
     7        Reviewed by Timothy Hatcher.
     8
     9        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
     10        (WI.SpreadsheetRulesStyleDetailsPanel):
     11        (WI.SpreadsheetRulesStyleDetailsPanel.prototype.refresh):
     12        (WI.SpreadsheetRulesStyleDetailsPanel.prototype.newRuleButtonClicked):
     13        (WI.SpreadsheetRulesStyleDetailsPanel.prototype.newRuleButtonContextMenu):
     14        (WI.SpreadsheetRulesStyleDetailsPanel.prototype._addNewRule):
     15        Implement the two functions that CSSStyleDetailsSidebarPanel expects to exist in order for
     16        the selected panel to support adding a new rule.
     17
     18        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
     19        (WI.SpreadsheetCSSStyleDeclarationSection):
     20        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.layout):
     21        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.startEditingRuleSelector):
     22        If the _selectorElement has not been created yet, set a flag and focus it once layout() has
     23        been called (thereby ensuring that initialLayout() has been called).
     24
    1252017-12-05  Devin Rousso  <webkit@devinrousso.com>
    226
  • trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js

    r225569 r225571  
    4040        this._mediaElements = [];
    4141        this._filterText = null;
     42        this._shouldFocusSelectorElement = false;
    4243        this._wasFocused = false;
    4344    }
     
    113114        this._renderOrigin();
    114115        this._renderSelector();
     116
     117        if (this._shouldFocusSelectorElement)
     118            this.startEditingRuleSelector();
    115119    }
    116120
    117121    startEditingRuleSelector()
    118122    {
     123        if (!this._selectorElement) {
     124            this._shouldFocusSelectorElement = true;
     125            return;
     126        }
     127
    119128        this._selectorElement.focus();
     129        this._shouldFocusSelectorElement = false;
    120130    }
    121131
  • trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js

    r225569 r225571  
    3737        this._inheritedHeaderMap = new Map;
    3838        this._sections = [];
    39         this._inspectorSection = null;
    40         this._isInspectorSectionPendingFocus = false;
     39        this._newRuleSelector = null;
    4140        this._ruleMediaAndInherticanceList = [];
    4241        this._propertyToSelectAndHighlight = null;
     
    117116            section.addEventListener(WI.SpreadsheetCSSStyleDeclarationSection.Event.FilterApplied, this._handleSectionFilterApplied, this);
    118117
    119             if (this._isInspectorSectionPendingFocus && style.isInspectorRule())
    120                 this._inspectorSection = section;
     118            if (this._newRuleSelector === style.selectorText && !style.hasProperties())
     119                section.startEditingRuleSelector();
    121120
    122121            this.addSubview(section);
     
    127126        }
    128127
     128        this._newRuleSelector = null;
     129
    129130        this.element.append(this._emptyFilterResultsElement);
    130131
     
    155156            this.scrollToSectionAndHighlightProperty(this._propertyToSelectAndHighlight);
    156157            this._propertyToSelectAndHighlight = null;
     158        }
     159    }
     160
     161    newRuleButtonClicked()
     162    {
     163        if (this.nodeStyles.node.isInUserAgentShadowTree())
     164            return;
     165
     166        this._addNewRule();
     167    }
     168
     169    newRuleButtonContextMenu(event)
     170    {
     171        if (this.nodeStyles.node.isInUserAgentShadowTree())
     172            return;
     173
     174        let styleSheets = WI.cssStyleManager.styleSheets.filter(styleSheet => styleSheet.hasInfo() && !styleSheet.isInlineStyleTag() && !styleSheet.isInlineStyleAttributeStyleSheet());
     175        if (!styleSheets.length)
     176            return;
     177
     178        let contextMenu = WI.ContextMenu.createFromEvent(event);
     179
     180        const handler = null;
     181        const disabled = true;
     182        contextMenu.appendItem(WI.UIString("Available Style Sheets"), handler, disabled);
     183
     184        let [inspectorStyleSheets, regularStyleSheets] = styleSheets.partition(styleSheet => styleSheet.isInspectorStyleSheet());
     185        console.assert(inspectorStyleSheets.length <= 1, "There should never be more than one inspector style sheet");
     186
     187        contextMenu.appendItem(WI.UIString("Inspector Style Sheet"), () => {
     188            this._addNewRule(inspectorStyleSheets.length ? inspectorStyleSheets[0].id : null);
     189        });
     190
     191        for (let styleSheet of regularStyleSheets) {
     192            contextMenu.appendItem(styleSheet.displayName, () => {
     193                this._addNewRule(styleSheet.id);
     194            });
    157195        }
    158196    }
     
    221259        }
    222260    }
     261
     262    // Private
     263
     264    _addNewRule(stylesheetId)
     265    {
     266        const justSelector = true;
     267        this._newRuleSelector = this.nodeStyles.node.appropriateSelectorFor(justSelector);
     268
     269        const text = "";
     270        this.nodeStyles.addRule(this._newRuleSelector, text, stylesheetId);
     271    }
    223272};
    224273
Note: See TracChangeset for help on using the changeset viewer.