Changeset 196146 in webkit


Ignore:
Timestamp:
Feb 4, 2016 1:51:26 PM (8 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: Show error icons if invalid values already exist for properties in the Visual sidebar
​https://bugs.webkit.org/show_bug.cgi?id=153702
<rdar://problem/24424025>

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

When CSS properties have invalid values, instead of displaying the computed
value for that property in the Visual sidebar, show an error icon with the
the invalid value.

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Views/VisualStyleNumberInputBox.css:

(.visual-style-property-container > .visual-style-property-value-container > .number-input-container > .number-input-value):
(.visual-style-property-container > .visual-style-property-value-container > .visual-style-special-property-placeholder[hidden] ~ .number-input-container > .number-input-value):
By default, do not allow any pointer events to interact with the input element.
Instead, only allow interaction when the placeholder element is hidden to ensure
that the user cannot add a value when the computed value is displayed.

  • UserInterface/Views/VisualStyleNumberInputBox.js:

(WebInspector.VisualStyleNumberInputBox.prototype.set specialPropertyPlaceholderElementText):
Reset the selected keyword to "Unchanged" since this is either a warning
message or the computed value.

  • UserInterface/Views/VisualStylePropertyEditor.css:

(.visual-style-property-container > .visual-style-property-editor-warning.missing-dependency):
(.visual-style-property-container > .visual-style-property-editor-warning.invalid-value):
(.visual-style-property-container > .visual-style-property-editor-warning):

  • UserInterface/Views/VisualStylePropertyEditor.js:

(WebInspector.VisualStylePropertyEditor):
Replaced document.createElement with [element].createChild for simplicity.

(WebInspector.VisualStylePropertyEditor.prototype.update):
Before assigning the value of the property to the editor, check to see if
the property is valid. If not, display an Error icon and message stating
that the current value is invalid.

(WebInspector.VisualStylePropertyEditor.prototype.updateEditorValues):
(WebInspector.VisualStylePropertyEditor.prototype.set specialPropertyPlaceholderElementText):
Unhides the special placeholder element with the given text as its content.

(WebInspector.VisualStylePropertyEditor.prototype._valueDidChange):
(WebInspector.VisualStylePropertyEditor.prototype._checkDependencies):
(WebInspector.VisualStylePropertyEditor.prototype.addDependency):

Location:
trunk/Source/WebInspectorUI
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r196098 r196146  
     12016-02-04  Devin Rousso  <dcrousso+webkit@gmail.com>
     2
     3        Web Inspector: Show error icons if invalid values already exist for properties in the Visual sidebar
     4        https://bugs.webkit.org/show_bug.cgi?id=153702
     5        <rdar://problem/24424025>
     6
     7        Reviewed by Timothy Hatcher.
     8
     9        When CSS properties have invalid values, instead of displaying the computed
     10        value for that property in the Visual sidebar, show an error icon with the
     11        the invalid value.
     12
     13        * Localizations/en.lproj/localizedStrings.js:
     14
     15        * UserInterface/Views/VisualStyleNumberInputBox.css:
     16        (.visual-style-property-container > .visual-style-property-value-container > .number-input-container > .number-input-value):
     17        (.visual-style-property-container > .visual-style-property-value-container > .visual-style-special-property-placeholder[hidden] ~ .number-input-container > .number-input-value):
     18        By default, do not allow any pointer events to interact with the input element.
     19        Instead, only allow interaction when the placeholder element is hidden to ensure
     20        that the user cannot add a value when the computed value is displayed.
     21
     22        * UserInterface/Views/VisualStyleNumberInputBox.js:
     23        (WebInspector.VisualStyleNumberInputBox.prototype.set specialPropertyPlaceholderElementText):
     24        Reset the selected keyword to "Unchanged" since this is either a warning
     25        message or the computed value.
     26
     27        * UserInterface/Views/VisualStylePropertyEditor.css:
     28        (.visual-style-property-container > .visual-style-property-editor-warning.missing-dependency):
     29        (.visual-style-property-container > .visual-style-property-editor-warning.invalid-value):
     30        (.visual-style-property-container > .visual-style-property-editor-warning):
     31
     32        * UserInterface/Views/VisualStylePropertyEditor.js:
     33        (WebInspector.VisualStylePropertyEditor):
     34        Replaced document.createElement with [element].createChild for simplicity.
     35
     36        (WebInspector.VisualStylePropertyEditor.prototype.update):
     37        Before assigning the value of the property to the editor, check to see if
     38        the property is valid. If not, display an Error icon and message stating
     39        that the current value is invalid.
     40
     41        (WebInspector.VisualStylePropertyEditor.prototype.updateEditorValues):
     42        (WebInspector.VisualStylePropertyEditor.prototype.set specialPropertyPlaceholderElementText):
     43        Unhides the special placeholder element with the given text as its content.
     44
     45        (WebInspector.VisualStylePropertyEditor.prototype._valueDidChange):
     46        (WebInspector.VisualStylePropertyEditor.prototype._checkDependencies):
     47        (WebInspector.VisualStylePropertyEditor.prototype.addDependency):
     48
    1492016-02-03  Joseph Pecoraro  <pecoraro@apple.com>
    250

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

    r195999 r196146  
    653653localizedStrings["The property '%s' is not supported."] = "The property '%s' is not supported.";
    654654localizedStrings["The selector '%s' is invalid.\nClick to revert to the previous selector."] = "The selector '%s' is invalid.\nClick to revert to the previous selector.";
     655localizedStrings["The value '%s' is not supported for this property."] = "The value '%s' is not supported for this property.";
    655656localizedStrings["The value '%s' is not supported for this property.\nClick to delete and open autocomplete."] = "The value '%s' is not supported for this property.\nClick to delete and open autocomplete.";
    656657localizedStrings["The value '%s' needs units.\nClick to add 'px' to the value."] = "The value '%s' needs units.\nClick to add 'px' to the value.";

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

    r188628 r196146  
    6767    border: none;
    6868    outline: none;
     69    pointer-events: none;
     70}
     71
     72.visual-style-property-container > .visual-style-property-value-container > .visual-style-special-property-placeholder[hidden] ~ .number-input-container > .number-input-value {
    6973    pointer-events: all;
    7074}

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

    r194875 r196146  
    212212    // Protected
    213213
     214    set specialPropertyPlaceholderElementText(text)
     215    {
     216        this._unchangedOptionElement.selected = true;
     217
     218        // FIXME: <https://webkit.org/b/147064> Getter and setter on super are called with wrong "this" object
     219        WebInspector.VisualStylePropertyEditor.prototype.__lookupSetter__("specialPropertyPlaceholderElementText").call(this, text);
     220    }
     221
    214222    parseValue(text)
    215223    {

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

    r194876 r196146  
    5656    height: 10px;
    5757    margin-right: 4px;
    58     content: "";
    59     background-image: url(../Images/Warning.svg);
    6058}
    6159
    … …  
    6765.visual-style-property-container > .visual-style-property-editor-warning.missing-dependency {
    6866    display: block;
     67    content: url(../Images/Warning.svg);
     68}
     69
     70.visual-style-property-container > .visual-style-property-editor-warning.invalid-value {
     71    display: block;
     72    content: url(../Images/Error.svg);
    6973}
    7074

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

    r194737 r196146  
    7070
    7171        if (label && label.length) {
    72             let titleContainer = document.createElement("div");
    73             titleContainer.classList.add("visual-style-property-title");
    74 
    75             this._titleElement = document.createElement("span");
    76             this._titleElement.appendChild(document.createTextNode(label));
     72            let titleContainer = this._element.createChild("div", "visual-style-property-title");
     73
     74            this._titleElement = titleContainer.createChild("span");
     75            this._titleElement.append(label);
    7776            this._titleElement.addEventListener("mouseover", this._titleElementMouseOver.bind(this));
    7877            this._titleElement.addEventListener("mouseout", this._titleElementMouseOut.bind(this));
    7978            this._titleElement.addEventListener("click", this._titleElementClick.bind(this));
    80             titleContainer.appendChild(this._titleElement);
    81 
    82             this._element.appendChild(titleContainer);
    8379
    8480            this._boundTitleElementPrepareForClick = this._titleElementPrepareForClick.bind(this);
    8581        }
    8682
    87         this._contentElement = document.createElement("div");
    88         this._contentElement.classList.add("visual-style-property-value-container");
    89 
    90         this._specialPropertyPlaceholderElement = document.createElement("span");
    91         this._specialPropertyPlaceholderElement.classList.add("visual-style-special-property-placeholder");
     83        this._contentElement = this._element.createChild("div", "visual-style-property-value-container");
     84
     85        this._specialPropertyPlaceholderElement = this._contentElement.createChild("span", "visual-style-special-property-placeholder");
    9286        this._specialPropertyPlaceholderElement.hidden = true;
    93         this._contentElement.appendChild(this._specialPropertyPlaceholderElement);
    94 
    95         this._element.appendChild(this._contentElement);
     87
     88        this._warningElement = this._element.createChild("div", "visual-style-property-editor-warning");
    9689
    9790        this._updatedValues = {};
    … …  
    297290                this._representedProperty = property;
    298291
     292            if (!propertyMissing && !property.valid) {
     293                this._warningElement.classList.add("invalid-value");
     294                this._warningElement.title = WebInspector.UIString("The value '%s' is not supported for this property.").format(propertyText);
     295                this.specialPropertyPlaceholderElementText = propertyText;
     296                return;
     297            }
     298
    299299            let newValues = this.getValuesFromText(propertyText, propertyMissing);
    300300            if (this._updatedValues.placeholder && this._updatedValues.placeholder !== newValues.placeholder)
    … …  
    306306            if (propertyValuesConflict) {
    307307                this._updatedValues.conflictingValues = true;
    308                 this._specialPropertyPlaceholderElement.textContent = WebInspector.UIString("(multiple)");
     308                this.specialPropertyPlaceholderElementText = WebInspector.UIString("(multiple)");
    309309                break;
    310310            }
    … …  
    326326        this.disabled = false;
    327327
     328        this._warningElement.classList.remove("invalid-value");
    328329        this._checkDependencies();
    329330    }
    … …  
    410411        for (let property of propertyNames)
    411412            this._dependencies.set(property, propertyValues);
    412 
    413         if (!this._warningElement) {
    414             this._warningElement = this._element.appendChild(document.createElement("div"));
    415             this._warningElement.classList.add("visual-style-property-editor-warning");
    416         }
    417413    }
    418414
    … …  
    427423    {
    428424        return this._specialPropertyPlaceholderElement;
     425    }
     426
     427    set specialPropertyPlaceholderElementText(text)
     428    {
     429        if (!text || !text.length)
     430            return;
     431
     432        this._specialPropertyPlaceholderElement.hidden = false;
     433        this._specialPropertyPlaceholderElement.textContent = text;
    429434    }
    430435
    … …  
    496501
    497502        this._checkDependencies();
     503        this._warningElement.classList.remove("invalid-value");
    498504
    499505        this.dispatchEventToListeners(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange);
    … …  
    526532    {
    527533        if (!this._dependencies.size || !this._style || !this.synthesizedValue) {
    528             if (this._warningElement)
    529                 this._warningElement.classList.remove("missing-dependency");
    530 
     534            this._warningElement.classList.remove("missing-dependency");
    531535            return;
    532536        }
Note: See TracChangeset for help on using the changeset viewer.