Changeset 184977 in webkit


Ignore:
Timestamp:
May 28, 2015, 9:47:39 PM (10 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: Jump from a computed style to the rule it came from
​https://bugs.webkit.org/show_bug.cgi?id=120640

Patch by Devin Rousso <Devin Rousso> on 2015-05-28
Reviewed by Timothy Hatcher.

  • UserInterface/Views/CSSStyleDeclarationTextEditor.js:

(WebInspector.CSSStyleDeclarationTextEditor.prototype._createTextMarkerForPropertyIfNeeded):
If the delegate of CSSStyleDeclarationTextEditor has cssStyleDeclarationTextEditorShouldAddPropertyGoToArrows set to true, add a goToArrow to all CSS property entries.
(WebInspector.CSSStyleDeclarationTextEditor.prototype.highlightProperty.propertiesMatch):
(WebInspector.CSSStyleDeclarationTextEditor.prototype.highlightProperty.hasMatchingLonghandProperty):
(WebInspector.CSSStyleDeclarationTextEditor.prototype.highlightProperty):
Determines if a given CSS property is in the CSS style section and if so, select that CSS property, focus on the section containing that CSS property, and return true.

  • UserInterface/Views/CSSStyleDeclarationSection.js:

(WebInspector.CSSStyleDeclarationSection.prototype.highlightProperty):
Searches through the properties of the section for a given property and scrolls to it if found.

  • UserInterface/Views/CSSStyleDetailsSidebarPanel.js:

(WebInspector.CSSStyleDetailsSidebarPanel.prototype.computedStyleDetailsPanelShowProperty):
Switches to the rulesStyleDetailsPanel and scrolls to and hightlights a given property in that panel.
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._navigationItemSelected):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._switchPanels):
Moved this function out of _navigationItemSelected for better reusablity.

  • UserInterface/Views/ComputedStyleDetailsPanel.js:

(WebInspector.ComputedStyleDetailsPanel.prototype.cssStyleDeclarationTextEditorShowProperty):
Function that calls the delegate (which should be CSSStyleDetailsSidebarPanel) function computedStyleDetailsPanelShowProperty.

  • UserInterface/Views/RulesStyleDetailsPanel.js:

(WebInspector.RulesStyleDetailsPanel):
(WebInspector.RulesStyleDetailsPanel.prototype.refresh):
(WebInspector.RulesStyleDetailsPanel.prototype.scrollToSectionAndHighlightProperty):
Searches through all the sections of the RulesStyleDetailsPanel for a given CSS property.
(WebInspector.RulesStyleDetailsPanel.prototype.shown):
(WebInspector.RulesStyleDetailsPanel.prototype.hidden):
(WebInspector.RulesStyleDetailsPanel.prototype.nodeStylesRefreshed):
Added a flag to this function that will highlight and scroll to a given property (_propertyToSelectAndHighlight) if set on load.

  • UserInterface/Views/StyleDetailsPanel.js:

(WebInspector.StyleDetailsPanel.prototype.markAsNeedsRefresh):
(WebInspector.StyleDetailsPanel.prototype.nodeStylesRefreshed):
Made into protected function to allow it to be overridden.
(WebInspector.StyleDetailsPanel.prototype._nodeStylesRefreshed): Deleted.

Location:
trunk/Source/WebInspectorUI
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r184974 r184977  
     12015-05-28  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Jump from a computed style to the rule it came from
     4        https://bugs.webkit.org/show_bug.cgi?id=120640
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
     9        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createTextMarkerForPropertyIfNeeded):
     10        If the delegate of CSSStyleDeclarationTextEditor has cssStyleDeclarationTextEditorShouldAddPropertyGoToArrows set to true, add a goToArrow to all CSS property entries.
     11        (WebInspector.CSSStyleDeclarationTextEditor.prototype.highlightProperty.propertiesMatch):
     12        (WebInspector.CSSStyleDeclarationTextEditor.prototype.highlightProperty.hasMatchingLonghandProperty):
     13        (WebInspector.CSSStyleDeclarationTextEditor.prototype.highlightProperty):
     14        Determines if a given CSS property is in the CSS style section and if so, select that CSS property, focus on the section containing that CSS property, and return true.
     15        * UserInterface/Views/CSSStyleDeclarationSection.js:
     16        (WebInspector.CSSStyleDeclarationSection.prototype.highlightProperty):
     17        Searches through the properties of the section for a given property and scrolls to it if found.
     18        * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
     19        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.computedStyleDetailsPanelShowProperty):
     20        Switches to the rulesStyleDetailsPanel and scrolls to and hightlights a given property in that panel.
     21        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._navigationItemSelected):
     22        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._switchPanels):
     23        Moved this function out of _navigationItemSelected for better reusablity.
     24        * UserInterface/Views/ComputedStyleDetailsPanel.js:
     25        (WebInspector.ComputedStyleDetailsPanel.prototype.cssStyleDeclarationTextEditorShowProperty):
     26        Function that calls the delegate (which should be CSSStyleDetailsSidebarPanel) function computedStyleDetailsPanelShowProperty.
     27        * UserInterface/Views/RulesStyleDetailsPanel.js:
     28        (WebInspector.RulesStyleDetailsPanel):
     29        (WebInspector.RulesStyleDetailsPanel.prototype.refresh):
     30        (WebInspector.RulesStyleDetailsPanel.prototype.scrollToSectionAndHighlightProperty):
     31        Searches through all the sections of the RulesStyleDetailsPanel for a given CSS property.
     32        (WebInspector.RulesStyleDetailsPanel.prototype.shown):
     33        (WebInspector.RulesStyleDetailsPanel.prototype.hidden):
     34        (WebInspector.RulesStyleDetailsPanel.prototype.nodeStylesRefreshed):
     35        Added a flag to this function that will highlight and scroll to a given property (_propertyToSelectAndHighlight) if set on load.
     36        * UserInterface/Views/StyleDetailsPanel.js:
     37        (WebInspector.StyleDetailsPanel.prototype.markAsNeedsRefresh):
     38        (WebInspector.StyleDetailsPanel.prototype.nodeStylesRefreshed):
     39        Made into protected function to allow it to be overridden.
     40        (WebInspector.StyleDetailsPanel.prototype._nodeStylesRefreshed): Deleted.
     41
    1422015-05-28  Joseph Pecoraro  <pecoraro@apple.com>
    243

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

    r184819 r184977  
    261261    },
    262262
     263    highlightProperty: function(property)
     264    {
     265        if (this._propertiesTextEditor.highlightProperty(property)) {
     266            this._element.scrollIntoView();
     267            return true;
     268        }
     269
     270        return false;
     271    },
     272
    263273    updateLayout: function()
    264274    {

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

    r184000 r184977  
    182182    }
    183183
     184    highlightProperty(property)
     185    {
     186        function propertiesMatch(cssProperty)
     187        {
     188            if (cssProperty.enabled && !cssProperty.overridden) {
     189                if (cssProperty.canonicalName === property.canonicalName || hasMatchingLonghandProperty(cssProperty))
     190                    return true;
     191            }
     192
     193            return false;
     194        }
     195
     196        function hasMatchingLonghandProperty(cssProperty)
     197        {
     198            var cssProperties = cssProperty.relatedLonghandProperties;
     199
     200            if (!cssProperties.length)
     201                return false;
     202
     203            for (var property of cssProperties) {
     204                if (propertiesMatch(property))
     205                    return true;
     206            }
     207
     208            return false;
     209        }
     210
     211        for (var cssProperty of this.style.properties) {
     212            if (propertiesMatch(cssProperty)) {
     213                var selection = cssProperty.__propertyTextMarker.find();
     214                this._codeMirror.setSelection(selection.from, selection.to);
     215                this.focus();
     216
     217                return true;
     218            }
     219        }
     220
     221        return false;
     222    }
     223
    184224    // Protected
    185225
    … …  
    438478            var checkboxMarker = this._codeMirror.setUniqueBookmark(from, checkboxElement);
    439479            checkboxMarker.__propertyCheckbox = true;
     480        } else if (this._delegate.cssStyleDeclarationTextEditorShouldAddPropertyGoToArrows
     481                && !property.implicit && typeof this._delegate.cssStyleDeclarationTextEditorShowProperty === "function") {
     482
     483            var arrowElement = WebInspector.createGoToArrowButton();
     484
     485            var delegate = this._delegate;
     486            arrowElement.addEventListener("click", function() {
     487                delegate.cssStyleDeclarationTextEditorShowProperty(property);
     488            });
     489
     490            this._codeMirror.setUniqueBookmark(to, arrowElement);
    440491        }
    441492

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

    r184819 r184977  
    7171        }
    7272
    73         this._computedStyleDetailsPanel = new WebInspector.ComputedStyleDetailsPanel;
     73        this._computedStyleDetailsPanel = new WebInspector.ComputedStyleDetailsPanel(this);
    7474        this._rulesStyleDetailsPanel = new WebInspector.RulesStyleDetailsPanel;
    7575        this._metricsStyleDetailsPanel = new WebInspector.MetricsStyleDetailsPanel;
    … …  
    136136        if (this._selectedPanel)
    137137            this._selectedPanel.widthDidChange();
     138    }
     139
     140    computedStyleDetailsPanelShowProperty(property)
     141    {
     142        this._rulesStyleDetailsPanel.scrollToSectionAndHighlightProperty(property);
     143        this._switchPanels(this._rulesStyleDetailsPanel);
     144
     145        this._navigationBar.selectedNavigationItem = this._lastSelectedSectionSetting.value;
    138146    }
    139147
    … …  
    181189        }
    182190
     191        this._switchPanels(selectedPanel);
     192    }
     193
     194    _switchPanels(selectedPanel)
     195    {
    183196        console.assert(selectedPanel);
    184197
    … …  
    202215        }
    203216
    204         this._lastSelectedSectionSetting.value = selectedNavigationItem.identifier;
     217        this._lastSelectedSectionSetting.value = selectedPanel.navigationItem.identifier;
    205218    }
    206219

  • trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css

    r164543 r184977  
    3636    vertical-align: top;
    3737}
     38
     39.details-section > .content > .group > .row .CodeMirror-code pre .go-to-arrow {
     40    display: none;
     41    position: absolute;
     42    width: 12px;
     43    height: 10px;
     44    vertical-align: text-bottom;
     45}
     46
     47.details-section > .content > .group > .row .CodeMirror-code pre:hover .go-to-arrow {
     48    display: initial;
     49}

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

    r183331 r184977  
    2626WebInspector.ComputedStyleDetailsPanel = class ComputedStyleDetailsPanel extends WebInspector.StyleDetailsPanel
    2727{
    28     constructor()
     28    constructor(delegate)
    2929    {
    3030        super(WebInspector.ComputedStyleDetailsPanel.StyleClassName, "computed", WebInspector.UIString("Computed"));
     31
     32        this._delegate = delegate || null;
    3133
    3234        this._computedStyleShowAllSetting = new WebInspector.Setting("computed-style-show-all", false);
    … …  
    8991
    9092        this._resetFlowDetails();
     93       
     94        this.cssStyleDeclarationTextEditorShouldAddPropertyGoToArrows = true;
    9195    }
    9296
    … …  
    138142
    139143        this._containerRegionsFlowSection.element.classList.remove("hidden");
     144    }
     145
     146    cssStyleDeclarationTextEditorShowProperty(property)
     147    {
     148        if (typeof this._delegate.computedStyleDetailsPanelShowProperty === "function")
     149            this._delegate.computedStyleDetailsPanelShowProperty(property);
    140150    }
    141151

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

    r182055 r184977  
    3131
    3232        this._sections = [];
     33        this._propertyToSelectAndHighlight = null;
    3334    }
    3435
    … …  
    242243    }
    243244
     245    scrollToSectionAndHighlightProperty(property)
     246    {
     247        if (!this._visible) {
     248            this._propertyToSelectAndHighlight = property;
     249            return false;
     250        }
     251
     252        for (var section of this._sections) {
     253            if (section.highlightProperty(property))
     254                return true;
     255        }
     256
     257        return false;
     258    }
     259
    244260    // Protected
    245261
    246262    shown()
    247263    {
    248         WebInspector.StyleDetailsPanel.prototype.shown.call(this);
     264        super.shown();
    249265
    250266        // Associate the style and section objects so they can be reused.
    … …  
    259275    hidden()
    260276    {
    261         WebInspector.StyleDetailsPanel.prototype.hidden.call(this);
     277        super.hidden();
    262278
    263279        // Disconnect the style and section objects so they have a chance
    … …  
    273289    }
    274290
     291    nodeStylesRefreshed(event)
     292    {
     293        super.nodeStylesRefreshed(event);
     294       
     295        if (this._propertyToSelectAndHighlight) {
     296            this.scrollToSectionAndHighlightProperty(this._propertyToSelectAndHighlight);
     297            this._propertyToSelectAndHighlight = null;
     298        }
     299    }
     300
    275301    // Private
    276302

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

    r182055 r184977  
    8787        if (!this._nodeStyles || this._nodeStyles.node !== domNode) {
    8888            if (this._nodeStyles) {
    89                 this._nodeStyles.removeEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, this._nodeStylesRefreshed, this);
     89                this._nodeStyles.removeEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, this.nodeStylesRefreshed, this);
    9090                this._nodeStyles.removeEventListener(WebInspector.DOMNodeStyles.Event.NeedsRefresh, this._nodeStylesNeedsRefreshed, this);
    9191            }
    … …  
    9797                return;
    9898
    99             this._nodeStyles.addEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, this._nodeStylesRefreshed, this);
     99            this._nodeStyles.addEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, this.nodeStylesRefreshed, this);
    100100            this._nodeStyles.addEventListener(WebInspector.DOMNodeStyles.Event.NeedsRefresh, this._nodeStylesNeedsRefreshed, this);
    101101
    … …  
    110110    {
    111111        // Implemented by subclasses.
     112    }
     113
     114    // Protected
     115
     116    nodeStylesRefreshed(event)
     117    {
     118        if (this._visible)
     119            this._refreshPreservingScrollPosition(event.data.significantChange);
    112120    }
    113121
    … …  
    147155    }
    148156
    149     _nodeStylesRefreshed(event)
    150     {
    151         if (this._visible)
    152             this._refreshPreservingScrollPosition(event.data.significantChange);
    153     }
    154 
    155157    _nodeStylesNeedsRefreshed(event)
    156158    {
Note: See TracChangeset for help on using the changeset viewer.