Changeset 196266 in webkit


Ignore:
Timestamp:
Feb 8, 2016 11:49:52 AM (8 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: Long values for comma separated CSS properties overflow the Visual sidebar area
https://bugs.webkit.org/show_bug.cgi?id=153890
<rdar://problem/24510216>

Patch by Devin Rousso <Devin Rousso> on 2016-02-08
Reviewed by Timothy Hatcher.

For especially long values in comma-separated CSS properties (such as
background-image), the text will not be clipped as expected due to the
way in which the width is calculated for the element (the value, inside
the title element, is the only child with a specified width other than
100%). This overflowing causes the width of the section containing that
property to expand, pushing content outside of the inspector window. To
remedy this, a specified width is set on the relevant properties based
on the width of the sidebar to ensure proper text clipping.

  • UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.css:

(.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item.visual-style-font-family-list-item > .visual-style-comma-separated-keyword-item-editor):
(.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles):
(.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles > .subtitle):
(.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container): Deleted.
(.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list): Deleted.
(.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item): Deleted.

  • UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js:

(WebInspector.VisualStyleCommaSeparatedKeywordEditor.prototype.set specifiedWidth):
Calculates the necessary subtractions from the given width value based on
the margins and size of sibling elements.

  • UserInterface/Views/VisualStyleDetailsPanel.js:

(WebInspector.VisualStyleDetailsPanel.prototype._updateProperties):
(WebInspector.VisualStyleDetailsPanel.prototype._populateFontSection):
(WebInspector.VisualStyleDetailsPanel.prototype._populateBackgroundStyleSection):
(WebInspector.VisualStyleDetailsPanel.prototype._populateBoxShadowSection):
(WebInspector.VisualStyleDetailsPanel.prototype._populateTransitionSection):
Added another list to each group which, if set, will pass the current
sidebar width to all contained property editors.

  • UserInterface/Views/VisualStylePropertyEditor.js:

(WebInspector.VisualStylePropertyEditor.prototype.update):
Somewhat unrelated (r196146), but added another check to ensure that the
CSS property exists before checking to see if it has an invalid value.

Location:
trunk/Source/WebInspectorUI
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebInspectorUI/ChangeLog

    r196255 r196266  
     12016-02-08  Devin Rousso  <dcrousso+webkit@gmail.com>
     2
     3        Web Inspector: Long values for comma separated CSS properties overflow the Visual sidebar area
     4        https://bugs.webkit.org/show_bug.cgi?id=153890
     5        <rdar://problem/24510216>
     6
     7        Reviewed by Timothy Hatcher.
     8
     9        For especially long values in comma-separated CSS properties (such as
     10        background-image), the text will not be clipped as expected due to the
     11        way in which the width is calculated for the element (the value, inside
     12        the title element, is the only child with a specified width other than
     13        100%). This overflowing causes the width of the section containing that
     14        property to expand, pushing content outside of the inspector window. To
     15        remedy this, a specified width is set on the relevant properties based
     16        on the width of the sidebar to ensure proper text clipping.
     17
     18        * UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.css:
     19        (.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item.visual-style-font-family-list-item > .visual-style-comma-separated-keyword-item-editor):
     20        (.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles):
     21        (.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles > .subtitle):
     22        (.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container): Deleted.
     23        (.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list): Deleted.
     24        (.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item): Deleted.
     25
     26        * UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js:
     27        (WebInspector.VisualStyleCommaSeparatedKeywordEditor.prototype.set specifiedWidth):
     28        Calculates the necessary subtractions from the given width value based on
     29        the margins and size of sibling elements.
     30
     31        * UserInterface/Views/VisualStyleDetailsPanel.js:
     32        (WebInspector.VisualStyleDetailsPanel.prototype._updateProperties):
     33        (WebInspector.VisualStyleDetailsPanel.prototype._populateFontSection):
     34        (WebInspector.VisualStyleDetailsPanel.prototype._populateBackgroundStyleSection):
     35        (WebInspector.VisualStyleDetailsPanel.prototype._populateBoxShadowSection):
     36        (WebInspector.VisualStyleDetailsPanel.prototype._populateTransitionSection):
     37        Added another list to each group which, if set, will pass the current
     38        sidebar width to all contained property editors.
     39
     40        * UserInterface/Views/VisualStylePropertyEditor.js:
     41        (WebInspector.VisualStylePropertyEditor.prototype.update):
     42        Somewhat unrelated (r196146), but added another check to ensure that the
     43        CSS property exists before checking to see if it has an invalid value.
     44
    1452016-02-08  Matt Baker  <mattbaker@apple.com>
    246
  • trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.css

    r195706 r196266  
    3131    border: 1px solid hsl(0, 0%, 83%);
    3232    overflow: auto;
    33     font-size: 11px;
    3433}
    3534
     
    3736    min-height: 51px;
    3837    max-height: 94px;
    39     margin: 0;
    40     padding: 0;
    4138    background-color: hsl(0, 0%, 95%);
    42     overflow: auto;
    43     outline: none;
    44     list-style-type: none;
    4539}
    4640
    4741.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item {
    4842    position: relative;
    49     width: 100%;
    5043    height: 17px;
    51     line-height: 17px;
    52     overflow: hidden;
    5344}
    5445
     
    7667    bottom: 0;
    7768    left: 5px;
    78     margin: 0;
    7969    padding: 0;
    8070    line-height: 17px;
     71    font-family: inherit;
     72    font-size: inherit;
     73    color: white;
    8174    border: none;
    8275    background-color: transparent;
    83     font-family: inherit;
    84     color: white;
    8576    z-index: 1;
    8677}
     
    9081}
    9182
     83.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles {
     84    top: 1px;
     85    line-height: 15px;
     86}
     87
    9288.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles > .subtitle {
    9389    font-size: 9px;
    9490    color: hsl(0, 0%, 83%);
     91}
     92
     93.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles > .subtitle {
     94    content: none;
    9595}
    9696
  • trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js

    r194539 r196266  
    126126    }
    127127
     128    set specifiedWidth(value)
     129    {
     130        if (this._titleElement) {
     131            // 55px width and 4px margin on left and right for title element,
     132            // plus the 11px margin right on the content element
     133            value -= 74;
     134        } else {
     135            // 11px margin on left and right of the content element
     136            value -= 22;
     137        }
     138
     139        this.contentElement.style.width = Math.max(value, 0) + "px";
     140    }
     141
    128142    // Private
    129143
  • trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js

    r195819 r196266  
    206206        this._sectionModified(group);
    207207
    208         let autocompleteCompatibleProperties = group.autocompleteCompatibleProperties;
    209         if (!autocompleteCompatibleProperties || !autocompleteCompatibleProperties.length)
    210             return;
    211 
    212         for (let editor of autocompleteCompatibleProperties)
    213             this._updateAutocompleteCompatiblePropertyEditor(editor, forceStyleUpdate);
     208        if (group.autocompleteCompatibleProperties) {
     209            for (let editor of group.autocompleteCompatibleProperties)
     210                this._updateAutocompleteCompatiblePropertyEditor(editor, forceStyleUpdate);
     211        }
     212
     213        if (group.specifiedWidthProperties) {
     214            let width = this.element.realOffsetWidth;
     215            for (let editor of group.specifiedWidthProperties)
     216                editor.specifiedWidth = width;
     217        }
    214218    }
    215219
     
    714718
    715719        group.autocompleteCompatibleProperties = [properties.fontFamily];
     720        group.specifiedWidthProperties = [properties.fontFamily];
    716721
    717722        let fontGroup = new WebInspector.DetailsSectionGroup([fontFamilyRow, fontSizeRow, fontStyleRow]);
     
    903908
    904909        group.autocompleteCompatibleProperties = [properties.backgroundColor];
     910        group.specifiedWidthProperties = [properties.background];
    905911
    906912        let backgroundStyleGroup = new WebInspector.DetailsSectionGroup([backgroundStyleRow, backgroundClipRow, backgroundSizeRow, backgroundRow, backgroundImageRow, backgroundPositionRow, backgroundRepeatRow]);
     
    11951201
    11961202        group.autocompleteCompatibleProperties = [boxShadowColor];
     1203        group.specifiedWidthProperties = [properties.boxShadow];
    11971204
    11981205        let boxShadow = new WebInspector.DetailsSectionGroup([boxShadowRow, boxShadowHRow, boxShadowVRow, boxShadowBlurRow, boxShadowColorRow]);
     
    12741281
    12751282        group.autocompleteCompatibleProperties = [transitionProperty];
     1283        group.specifiedWidthProperties = [properties.transition];
    12761284
    12771285        let transitionGroup = new WebInspector.DetailsSectionGroup([transitionRow, transitionPropertyRow, transitionDurationRow]);
  • trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js

    r196207 r196266  
    291291                this._representedProperty = property;
    292292
    293             if (!propertyMissing && !property.valid) {
     293            if (!propertyMissing && property && !property.valid) {
    294294                this._warningElement.classList.add("invalid-value");
    295295                this._warningElement.title = WebInspector.UIString("The value “%s” is not supported for this property.").format(propertyText);
Note: See TracChangeset for help on using the changeset viewer.