Changeset 194728 in webkit


Ignore:
Timestamp:
Jan 7, 2016 2:36:51 PM (8 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: Add border-image properties to Visual sidebar
​https://bugs.webkit.org/show_bug.cgi?id=152755

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

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Main.html:

Switched the order of VisualStyleURLInput and VisualStyleUnitSlider
to be ordered alphabetically.

  • UserInterface/Views/VisualStyleBackgroundPicker.js:

(WebInspector.VisualStyleBackgroundPicker.prototype._keywordSelectMouseDown):

  • UserInterface/Views/VisualStyleDetailsPanel.css:

(.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content > .group + .group > .row:first-child):
(.sidebar > .panel.details.css-style .visual > .details-section.background .details-section.border .visual-style-property-container.keyword-checkbox.border-image-slice):
Since the checkbox is so small, give it less room.

  • UserInterface/Views/VisualStyleDetailsPanel.js:

(WebInspector.VisualStyleDetailsPanel.prototype._populateBorderSection.generateBorderImagePropertyEditors):
The three properties "border-image-width", "border-image-outset", and
"border-image-slice" all have the same syntax, so one function to generate
the layout for all three is much simpler.

(WebInspector.VisualStyleDetailsPanel.prototype._populateBorderSection):
Added the border image properties to a seperate group under Background > Border.

  • UserInterface/Views/VisualStyleKeywordPicker.js:

(WebInspector.VisualStyleKeywordPicker.prototype._keywordSelectMouseDown):

  • UserInterface/Views/VisualStyleNumberInputBox.js:

(WebInspector.VisualStyleNumberInputBox):
(WebInspector.VisualStyleNumberInputBox.prototype.set units):
Reordered logic to allow a value of ""/null to set the units to the "Number"
value if it is allowed for that editor.

(WebInspector.VisualStyleNumberInputBox.prototype.get synthesizedValue):
Instead of relying upon whether the editor has any units, just check to see if
the selected units are "Number" and, if not, add them to the value.

(WebInspector.VisualStyleNumberInputBox.prototype._unitsElementTextContent):

  • UserInterface/Views/VisualStylePropertyCombiner.js:

(WebInspector.VisualStylePropertyCombiner):
Now has another argument that, when true, assumes the combiner has at least 4
numerical values and is of the form (can have units):

property-name: value1 [value2 [value3 [value4 [...]]]];

(WebInspector.VisualStylePropertyCombiner.prototype.get synthesizedValue):
(WebInspector.VisualStylePropertyCombiner.prototype.updateValuesFromText.updateEditor):
(WebInspector.VisualStylePropertyCombiner.prototype.updateValuesFromText.updateCompatibleEditor):
(WebInspector.VisualStylePropertyCombiner.prototype.updateValuesFromText):
If the new argument is true, assigns the existing values in the following way:

  • If there is 1 value, assign it to all of the editors.
  • If there are 2 values, assign the 1st one to editors 1 and 3 and the 2nd one

to editors 2 and 4.

  • If there are 3 values, assign the 1st one to editor 1, the 2nd one to editors

2 and 4, and the 3rd one to editor 3.

  • If there are 4 or more values, assign them normally.
  • UserInterface/Views/VisualStylePropertyEditor.js:

(WebInspector.VisualStylePropertyEditor.prototype.valueIsSupportedKeyword):
(WebInspector.VisualStylePropertyEditor.prototype._valueIsSupportedAdvancedKeyword):
Removed call to this.value to prevent recursion from VisualStyleNumberInputBox.

(WebInspector.VisualStylePropertyEditor.prototype.valueIsSupportedUnit):
(WebInspector.VisualStylePropertyEditor.prototype._valueIsSupportedAdvancedUnit):
Removed call to this.units to prevent recursion from VisualStyleNumberInputBox.

Location:
trunk/Source/WebInspectorUI
Files:
10 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r194723 r194728  
     12016-01-07  Devin Rousso  <dcrousso+webkit@gmail.com>
     2
     3        Web Inspector: Add border-image properties to Visual sidebar
     4        https://bugs.webkit.org/show_bug.cgi?id=152755
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        * Localizations/en.lproj/localizedStrings.js:
     9        * UserInterface/Main.html:
     10        Switched the order of VisualStyleURLInput and VisualStyleUnitSlider
     11        to be ordered alphabetically.
     12
     13        * UserInterface/Views/VisualStyleBackgroundPicker.js:
     14        (WebInspector.VisualStyleBackgroundPicker.prototype._keywordSelectMouseDown):
     15
     16        * UserInterface/Views/VisualStyleDetailsPanel.css:
     17        (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content > .group + .group > .row:first-child):
     18        (.sidebar > .panel.details.css-style .visual > .details-section.background .details-section.border .visual-style-property-container.keyword-checkbox.border-image-slice):
     19        Since the checkbox is so small, give it less room.
     20
     21        * UserInterface/Views/VisualStyleDetailsPanel.js:
     22        (WebInspector.VisualStyleDetailsPanel.prototype._populateBorderSection.generateBorderImagePropertyEditors):
     23        The three properties "border-image-width", "border-image-outset", and
     24        "border-image-slice" all have the same syntax, so one function to generate
     25        the layout for all three is much simpler.
     26
     27        (WebInspector.VisualStyleDetailsPanel.prototype._populateBorderSection):
     28        Added the border image properties to a seperate group under Background > Border.
     29
     30        * UserInterface/Views/VisualStyleKeywordPicker.js:
     31        (WebInspector.VisualStyleKeywordPicker.prototype._keywordSelectMouseDown):
     32
     33        * UserInterface/Views/VisualStyleNumberInputBox.js:
     34        (WebInspector.VisualStyleNumberInputBox):
     35        (WebInspector.VisualStyleNumberInputBox.prototype.set units):
     36        Reordered logic to allow a value of ""/null to set the units to the "Number"
     37        value if it is allowed for that editor.
     38
     39        (WebInspector.VisualStyleNumberInputBox.prototype.get synthesizedValue):
     40        Instead of relying upon whether the editor has any units, just check to see if
     41        the selected units are "Number" and, if not, add them to the value.
     42
     43        (WebInspector.VisualStyleNumberInputBox.prototype._unitsElementTextContent):
     44
     45        * UserInterface/Views/VisualStylePropertyCombiner.js:
     46        (WebInspector.VisualStylePropertyCombiner):
     47        Now has another argument that, when true, assumes the combiner has at least 4
     48        numerical values and is of the form (can have units):
     49            property-name: value1 [value2 [value3 [value4 [...]]]];
     50
     51        (WebInspector.VisualStylePropertyCombiner.prototype.get synthesizedValue):
     52        (WebInspector.VisualStylePropertyCombiner.prototype.updateValuesFromText.updateEditor):
     53        (WebInspector.VisualStylePropertyCombiner.prototype.updateValuesFromText.updateCompatibleEditor):
     54        (WebInspector.VisualStylePropertyCombiner.prototype.updateValuesFromText):
     55        If the new argument is true, assigns the existing values in the following way:
     56         - If there is 1 value, assign it to all of the editors.
     57         - If there are 2 values, assign the 1st one to editors 1 and 3 and the 2nd one
     58            to editors 2 and 4.
     59         - If there are 3 values, assign the 1st one to editor 1, the 2nd one to editors
     60            2 and 4, and the 3rd one to editor 3.
     61         - If there are 4 or more values, assign them normally.
     62
     63        * UserInterface/Views/VisualStylePropertyEditor.js:
     64        (WebInspector.VisualStylePropertyEditor.prototype.valueIsSupportedKeyword):
     65        (WebInspector.VisualStylePropertyEditor.prototype._valueIsSupportedAdvancedKeyword):
     66        Removed call to this.value to prevent recursion from VisualStyleNumberInputBox.
     67
     68        (WebInspector.VisualStylePropertyEditor.prototype.valueIsSupportedUnit):
     69        (WebInspector.VisualStylePropertyEditor.prototype._valueIsSupportedAdvancedUnit):
     70        Removed call to this.units to prevent recursion from VisualStyleNumberInputBox.
     71
    1722016-01-07  Devin Rousso  <dcrousso+webkit@gmail.com>
    273

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

    r194717 r194728  
    288288localizedStrings["Family"] = "Family";
    289289localizedStrings["Filename"] = "Filename";
     290localizedStrings["Fill"] = "Fill";
    290291localizedStrings["Fill Mode"] = "Fill Mode";
    291292localizedStrings["Filter %s"] = "Filter %s";
    … …  
    468469localizedStrings["Outline"] = "Outline";
    469470localizedStrings["Output: "] = "Output: ";
     471localizedStrings["Outset"] = "Outset";
    470472localizedStrings["Over 1 ms"] = "Over 1 ms";
    471473localizedStrings["Over 15 ms"] = "Over 15 ms";
    … …  
    587589localizedStrings["Size"] = "Size";
    588590localizedStrings["Sizing"] = "Sizing";
     591localizedStrings["Slice"] = "Slice";
    589592localizedStrings["Small Icons"] = "Small Icons";
    590593localizedStrings["Socket"] = "Socket";

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r194673 r194728  
    602602    <script src="Views/VisualStyleTabbedPropertiesRow.js"></script>
    603603    <script src="Views/VisualStyleTimingEditor.js"></script>
     604    <script src="Views/VisualStyleURLInput.js"></script>
    604605    <script src="Views/VisualStyleUnitSlider.js"></script>
    605     <script src="Views/VisualStyleURLInput.js"></script>
    606606
    607607    <script src="Controllers/Annotator.js"></script>

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

    r194573 r194728  
    207207        if (event.altKey)
    208208            this._addAdvancedValues();
    209         else if (!this._valueIsSupportedAdvancedKeyword())
     209        else if (!this._valueIsSupportedAdvancedKeyword(this.value))
    210210            this._removeAdvancedValues();
    211211    }

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

    r191693 r194728  
    6565}
    6666
     67.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content > .group + .group > .row:first-child {
     68    padding-top: 7px;
     69    border-top: none;
     70}
     71
    6772.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row:last-child {
    6873    padding-bottom: 3px;
    … …  
    98103}
    99104
     105.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row + .row.visual-style-tabbed-properties-row,
    100106.sidebar > .panel.details.css-style .visual > .details-section.background .details-section.background-style .visual-style-property-container.comma-separated-keyword-editor.background {
    101107    margin-top: 3px;
    102108}
     109
     110.sidebar > .panel.details.css-style .visual > .details-section.background .details-section.border .visual-style-property-container.keyword-checkbox.border-image-slice {
     111    flex: 1;
     112}

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

    r194673 r194728  
    963963        this._addMetricsMouseListeners(group.properties.borderRightWidth, highlightMode);
    964964
     965        let borderGroup = new WebInspector.DetailsSectionGroup([borderTabController, borderAllGroup, borderTopGroup, borderRightGroup, borderBottomGroup, borderLeftGroup]);
     966
     967        let borderImageSourceRow = new WebInspector.DetailsSectionRow;
     968
     969        properties.borderImageSource = new WebInspector.VisualStyleURLInput("border-image-source", WebInspector.UIString("Image"), this._keywords.defaults.concat(["None"]));
     970
     971        borderImageSourceRow.element.appendChild(properties.borderImageSource.element);
     972
     973        let borderImageRepeatRow = new WebInspector.DetailsSectionRow;
     974
     975        let borderImageSliceFill = new WebInspector.VisualStyleKeywordCheckbox("border-image-slice", WebInspector.UIString("Fill"), "Fill");
     976        borderImageSliceFill.optionalProperty = true;
     977        properties.borderImageRepeat = new WebInspector.VisualStyleKeywordPicker("border-image-repeat", WebInspector.UIString("Repeat"), this._keywords.defaults.concat(["Stretch", "Repeat", "Round", "Space"]));
     978
     979        borderImageRepeatRow.element.appendChild(borderImageSliceFill.element);
     980        borderImageRepeatRow.element.appendChild(properties.borderImageRepeat.element);
     981
     982        function generateBorderImagePropertyEditors(propertyName, keywords, units) {
     983            let vertical = new WebInspector.DetailsSectionRow;
     984
     985            let top = new WebInspector.VisualStyleNumberInputBox(propertyName, WebInspector.UIString("Top"), keywords, units);
     986            top.masterProperty = true;
     987            let bottom = new WebInspector.VisualStyleNumberInputBox(propertyName, WebInspector.UIString("Bottom"), keywords, units);
     988            bottom.masterProperty = true;
     989
     990            vertical.element.appendChild(top.element);
     991            vertical.element.appendChild(bottom.element);
     992
     993            let horizontal = new WebInspector.DetailsSectionRow;
     994
     995            let left = new WebInspector.VisualStyleNumberInputBox(propertyName, WebInspector.UIString("Left"), keywords, units);
     996            left.masterProperty = true;
     997            let right = new WebInspector.VisualStyleNumberInputBox(propertyName, WebInspector.UIString("Right"), keywords, units);
     998            right.masterProperty = true;
     999
     1000            horizontal.element.appendChild(left.element);
     1001            horizontal.element.appendChild(right.element);
     1002
     1003            return {group: new WebInspector.DetailsSectionGroup([vertical, horizontal]), properties: [top, bottom, left, right]};
     1004        }
     1005
     1006        let nonKeywordUnits = [WebInspector.UIString("Number")];
     1007
     1008        let borderImageUnits = this._units.defaults;
     1009        borderImageUnits.basic = nonKeywordUnits.concat(borderImageUnits.basic);
     1010        let borderImageWidth = generateBorderImagePropertyEditors("border-image-width", this._keywords.boxModel, borderImageUnits);
     1011        properties.borderImageWidth = new WebInspector.VisualStylePropertyCombiner("border-image-width", borderImageWidth.properties, true);
     1012
     1013        let borderOutsetUnits = this._units.defaultsSansPercent;
     1014        borderOutsetUnits.basic = nonKeywordUnits.concat(borderOutsetUnits.basic);
     1015        let borderImageOutset = generateBorderImagePropertyEditors("border-image-outset", this._keywords.defaults, borderOutsetUnits);
     1016        properties.borderImageOutset = new WebInspector.VisualStylePropertyCombiner("border-image-outset", borderImageOutset.properties, true);
     1017
     1018        let borderImageSlice = generateBorderImagePropertyEditors("border-image-slice", this._keywords.defaults, ["%"].concat(nonKeywordUnits));
     1019        borderImageSlice.properties.push(borderImageSliceFill);
     1020        properties.borderImageSlice = new WebInspector.VisualStylePropertyCombiner("border-image-slice", borderImageSlice.properties, true);
     1021
     1022        let borderImagePropertiesTabController = new WebInspector.VisualStyleTabbedPropertiesRow({
     1023            "width": {title: WebInspector.UIString("Width"), element: borderImageWidth.group.element, properties: [properties.borderImageWidth]},
     1024            "outset": {title: WebInspector.UIString("Outset"), element: borderImageOutset.group.element, properties: [properties.borderImageOutset]},
     1025            "slice": {title: WebInspector.UIString("Slice"), element: borderImageSlice.group.element, properties: [properties.borderImageSlice]}
     1026        });
     1027
     1028        let borderImageGroup = new WebInspector.DetailsSectionGroup([borderImageSourceRow, borderImageRepeatRow, borderImagePropertiesTabController, borderImageWidth.group, borderImageOutset.group, borderImageSlice.group]);
     1029
    9651030        group.autocompleteCompatibleProperties = [properties.borderColor, properties.borderTopColor, properties.borderBottomColor, properties.borderLeftColor, properties.borderRightColor];
    9661031
    967         let borderGroup = new WebInspector.DetailsSectionGroup([borderTabController, borderAllGroup, borderTopGroup, borderRightGroup, borderBottomGroup, borderLeftGroup]);
    968         this._populateSection(group, [borderGroup]);
     1032        this._populateSection(group, [borderGroup, borderImageGroup]);
    9691033    }
    9701034

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

    r191493 r194728  
    130130        if (event.altKey)
    131131            this._addAdvancedValues();
    132         else if (!this._valueIsSupportedAdvancedKeyword())
     132        else if (!this._valueIsSupportedAdvancedKeyword(this.value))
    133133            this._removeAdvancedValues();
    134134    }

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

    r189845 r194728  
    2828    constructor(propertyNames, text, possibleValues, possibleUnits, allowNegativeValues, layoutReversed)
    2929    {
    30         super(propertyNames, text, possibleValues, possibleUnits || [WebInspector.UIString("Number")], "number-input-box", layoutReversed);
    31 
    32         this._hasUnits = !!possibleUnits;
     30        let unitlessNumberUnit = WebInspector.UIString("Number");
     31
     32        super(propertyNames, text, possibleValues, possibleUnits || [unitlessNumberUnit], "number-input-box", layoutReversed);
     33
     34        this._unitlessNumberUnit = unitlessNumberUnit;
     35
     36        this._hasUnits = this._possibleUnits.basic.some((unit) => unit !== unitlessNumberUnit);
    3337        this._allowNegativeValues = !!allowNegativeValues || false;
    3438
    … …  
    9094        this._valueNumberInputElement.value = null;
    9195        this._valueNumberInputElement.setAttribute("placeholder", 0);
    92         if (this._hasUnits && this.valueIsSupportedUnit("px"))
    93             this._unitsElementTextContent = this._keywordSelectElement.value = "px";
     96        if (this._hasUnits)
     97            this._unitsElementTextContent = this._keywordSelectElement.value = this.valueIsSupportedUnit("px") ? "px" : this._possibleUnits.basic[0];
    9498    }
    9599
    … …  
    160164    set units(unit)
    161165    {
    162         if (this._unchangedOptionElement.selected)
    163             return;
    164 
    165         if (!unit || unit === this.units)
    166             return;
    167 
    168         if (!this.valueIsSupportedUnit(unit))
     166        if (this._unchangedOptionElement.selected || unit === this.units)
     167            return;
     168
     169        if (!unit && !this._possibleUnits.basic.includes(this._unitlessNumberUnit) && !this.valueIsSupportedUnit(unit))
    169170            return;
    170171
    … …  
    173174
    174175        this._setNumberInputIsEditable(true);
    175         this._keywordSelectElement.value = unit;
     176        this._keywordSelectElement.value = unit || this._unitlessNumberUnit;
    176177        this._unitsElementTextContent = unit;
    177178    }
    … …  
    204205
    205206        let keyword = this._keywordSelectElement.value;
    206         return this.valueIsSupportedUnit(keyword) ? value + (this._hasUnits ? keyword : "") : keyword;
     207        return this.valueIsSupportedUnit(keyword) ? value + (keyword === this._unitlessNumberUnit ? "" : keyword) : keyword;
    207208    }
    208209
    … …  
    229230            return;
    230231
    231         this._unitsElement.textContent = text;
     232        this._unitsElement.textContent = text === this._unitlessNumberUnit ? "" : text;
    232233        this._markUnitsContainerIfInputHasValue();
    233234    }
    … …  
    324325        if (event.altKey)
    325326            this._addAdvancedUnits();
    326         else if (!this._valueIsSupportedAdvancedUnit())
     327        else if (!this._valueIsSupportedAdvancedUnit(this._keywordSelectElement.value))
    327328            this._removeAdvancedUnits();
    328329    }

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

    r191493 r194728  
    2626WebInspector.VisualStylePropertyCombiner = class VisualStylePropertyCombiner extends WebInspector.Object
    2727{
    28     constructor(propertyName, propertyEditors)
     28    constructor(propertyName, propertyEditors, spreadNumberValues)
    2929    {
    3030        super();
    … …  
    3434        this._propertyMissing = false;
    3535        this._propertyEditors = propertyEditors || [];
     36        this._spreadNumberValues = !!spreadNumberValues && this._propertyEditors.length >= 4;
    3637
    3738        for (let editor of this._propertyEditors) {
    … …  
    6162                continue;
    6263
    63             if (editor.masterProperty && editor.valueIsSupportedKeyword()) {
     64            if (editor.masterProperty && editor.valueIsSupportedKeyword(editor.value)) {
    6465                this._markEditors(editor, true);
    6566                return editorValue;
    … …  
    118119            editor[WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol] = false;
    119120
     121        function updateEditor(editor, value) {
     122            let updatedValues = editor.getValuesFromText(value || "", propertyMissing);
     123            if (!updatedValues)
     124                return;
     125
     126            editor.updateEditorValues(updatedValues);
     127            editor[WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol] = true;
     128        }
     129
     130        if (this._spreadNumberValues) {
     131            let numberValues = styleText.match(/\d+[\w%]*/g);
     132            let count = numberValues && numberValues.length;
     133            if (count === 1) {
     134                for (let editor of this._propertyEditors)
     135                    updateEditor(editor, numberValues[0]);
     136            } else if (count === 2) {
     137                for (let i = 0; i < count; ++i) {
     138                    updateEditor(this._propertyEditors[i], numberValues[i]);
     139                    updateEditor(this._propertyEditors[i + 2], numberValues[i]);
     140                }
     141            } else if (count === 3) {
     142                updateEditor(this._propertyEditors[0], numberValues[0]);
     143                updateEditor(this._propertyEditors[1], numberValues[1]);
     144                updateEditor(this._propertyEditors[2], numberValues[2]);
     145                updateEditor(this._propertyEditors[3], numberValues[1]);
     146            }
     147        }
     148
    120149        function updateCompatibleEditor(value) {
    121150            for (let editor of this._propertyEditors) {
    … …  
    126155                    continue;
    127156
    128                 let updatedValues = editor.getValuesFromText(value || "", propertyMissing);
    129                 if (updatedValues)
    130                     editor.updateEditorValues(updatedValues);
    131                 editor[WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol] = true;
    132 
     157                updateEditor(editor, value);
    133158                if (value)
    134159                    return;

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

    r191493 r194728  
    380380            return false;
    381381
    382         value = value || this.value;
    383382        if (Object.keys(this._possibleValues.basic).includes(value))
    384383            return true;
    … …  
    392391            return false;
    393392
    394         unit = unit || this.units;
    395393        if (this._possibleUnits.basic.includes(unit))
    396394            return true;
    … …  
    420418    _valueIsSupportedAdvancedKeyword(value)
    421419    {
    422         return this._possibleValues.advanced && Object.keys(this._possibleValues.advanced).includes(value || this.value);
     420        return this._possibleValues.advanced && Object.keys(this._possibleValues.advanced).includes(value);
    423421    }
    424422
    425423    _valueIsSupportedAdvancedUnit(unit)
    426424    {
    427         return this._possibleUnits.advanced && this._possibleUnits.advanced.includes(unit || this.units);
     425        return this._possibleUnits.advanced && this._possibleUnits.advanced.includes(unit);
    428426    }
    429427
Note: See TracChangeset for help on using the changeset viewer.