Title: [213187] trunk/Source/WebInspectorUI
Revision
213187
Author
commit-qu...@webkit.org
Date
2017-02-28 15:33:55 -0800 (Tue, 28 Feb 2017)

Log 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 <dcrousso+web...@gmail.com> 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.

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (213186 => 213187)


--- trunk/Source/WebInspectorUI/ChangeLog	2017-02-28 23:28:11 UTC (rev 213186)
+++ trunk/Source/WebInspectorUI/ChangeLog	2017-02-28 23:33:55 UTC (rev 213187)
@@ -1,3 +1,16 @@
+2017-02-28  Devin Rousso  <dcrousso+web...@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+web...@gmail.com>
 
         Web Inspector: RTL: add support for Color Picker

Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (213186 => 213187)


--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js	2017-02-28 23:28:11 UTC (rev 213186)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js	2017-02-28 23:33:55 UTC (rev 213187)
@@ -773,6 +773,7 @@
 localizedStrings["The value “%s” is not supported for this property."] = "The value “%s” is not supported for this property.";
 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.";
 localizedStrings["The “webkit” prefix is not necessary.\nClick to insert a duplicate without the prefix."] = "The “webkit” prefix is not necessary.\nClick to insert a duplicate without the prefix.";

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js (213186 => 213187)


--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js	2017-02-28 23:28:11 UTC (rev 213186)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js	2017-02-28 23:33:55 UTC (rev 213187)
@@ -900,8 +900,22 @@
             createCodeMirrorVariableTextMarkers(this._codeMirror, range, (marker, variable, variableString) => {
                 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();
                 let swatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Variable, trimmedValue, this._codeMirror.getOption("readOnly"));
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to