Changeset 213187 in webkit

Timestamp:

Feb 28, 2017 3:33:55 PM (7 years ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: CSS variable uses that are unresolved should have an error or warning icon
​https://bugs.webkit.org/show_bug.cgi?id=168352

Patch by Devin Rousso <Devin Rousso> on 2017-02-28
Reviewed by Brian Burg.

• Localizations/en.lproj/localizedStrings.js:

• UserInterface/Views/CSSStyleDeclarationTextEditor.js:

(WebInspector.CSSStyleDeclarationTextEditor.prototype._createInlineSwatches.update):
Insert a warning icon if the variable is not found in the computed style.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• Localizations/en.lproj/localizedStrings.js (modified) (1 diff)
• UserInterface/Views/CSSStyleDeclarationTextEditor.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2017-02-28  Devin Rousso  <dcrousso+webkit@gmail.com>
+
+        Web Inspector: CSS variable uses that are unresolved should have an error or warning icon
+        https://bugs.webkit.org/show_bug.cgi?id=168352
+
+        Reviewed by Brian Burg.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+        * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createInlineSwatches.update):
+        Insert a warning icon if the variable is not found in the computed style.
+
 2017-02-25  Devin Rousso  <dcrousso+webkit@gmail.com>
 

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

@@ -774 +774 @@
 localizedStrings["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.";
 localizedStrings["The value “%s” needs units.\nClick to add “px” to the value."] = "The value “%s” needs units.\nClick to add “px” to the value.";
+localizedStrings["The variable “%s” does not exist.\nClick to delete and open autocomplete."] = "The variable “%s” does not exist.\nClick to delete and open autocomplete.";
 localizedStrings["The “%s”\ntable is empty."] = "The “%s”\ntable is empty.";
 localizedStrings["The “webkit” prefix is needed for this property.\nClick to insert a duplicate with the prefix."] = "The “webkit” prefix is needed for this property.\nClick to insert a duplicate with the prefix.";

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

@@ -901 +901 @@
                 const dontCreateIfMissing = true;
                 let variableProperty = this._style.nodeStyles.computedStyle.propertyForName(variableString, dontCreateIfMissing);
-                if (!variableProperty)
+                if (!variableProperty) {
+                    let from = {line: marker.range.startLine, ch: marker.range.startColumn};
+                    let to = {line: marker.range.endLine, ch: marker.range.endColumn};
+                    this._codeMirror.markText(from, to, {className: "invalid"});
+
+                    let invalidMarker = document.createElement("button");
+                    invalidMarker.classList.add("invalid-warning-marker", "clickable");
+                    invalidMarker.title = WebInspector.UIString("The variable “%s” does not exist.\nClick to delete and open autocomplete.").format(variableString);
+                    invalidMarker.addEventListener("click", (event) => {
+                        this._codeMirror.replaceRange("", from, to);
+                        this._codeMirror.setCursor(from);
+                        this._completionController.completeAtCurrentPositionIfNeeded(true);
+                    });
+                    this._codeMirror.setBookmark(from, invalidMarker);
                     return;
+                }
 
                 let trimmedValue = variableProperty.value.trim();