Changeset 259929 in webkit

Timestamp:

Apr 11, 2020 8:14:34 AM (4 years ago)

Author:

Devin Rousso

Message:

Web Inspector: CSS: variables should have a go-to arrow to quickly jump to the definition
​https://bugs.webkit.org/show_bug.cgi?id=195775
<rdar://problem/48905785>

Reviewed by Timothy Hatcher.

Often when debugging/editing styles that use CSS variables, the desired workflow is to
modify the variable itself, not that specific usage. This is especially helpful when editing
colors saved in CSS variables.

Add an always visible go-to arrow immediately after the variable (e.g. --XYZ (->)) that
will jump to the declaration of the variable elsewhere in the style cascade.

• UserInterface/Views/SpreadsheetStyleProperty.js:

(WI.SpreadsheetStyleProperty.prototype._addVariableTokens):

• UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:

(.spreadsheet-style-declaration-editor .property .select-variable-property): Added.

• UserInterface/Base/Setting.js:
• UserInterface/Views/SettingsTabContentView.js:

(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):

• Localizations/en.lproj/localizedStrings.js:

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• Localizations/en.lproj/localizedStrings.js (modified) (3 diffs)
• UserInterface/Base/Setting.js (modified) (1 diff)
• UserInterface/Views/SettingsTabContentView.js (modified) (2 diffs)
• UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (modified) (1 diff)
• UserInterface/Views/SpreadsheetStyleProperty.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2020-04-11  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: CSS: variables should have a go-to arrow to quickly jump to the definition
+        https://bugs.webkit.org/show_bug.cgi?id=195775
+        <rdar://problem/48905785>
+
+        Reviewed by Timothy Hatcher.
+
+        Often when debugging/editing styles that use CSS variables, the desired workflow is to
+        modify the variable itself, not that specific usage. This is especially helpful when editing
+        colors saved in CSS variables.
+
+        Add an always visible go-to arrow immediately after the variable (e.g. `--XYZ (->)`) that
+        will jump to the declaration of the variable elsewhere in the style cascade.
+
+        * UserInterface/Views/SpreadsheetStyleProperty.js:
+        (WI.SpreadsheetStyleProperty.prototype._addVariableTokens):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+        (.spreadsheet-style-declaration-editor .property .select-variable-property): Added.
+
+        * UserInterface/Base/Setting.js:
+        * UserInterface/Views/SettingsTabContentView.js:
+        (WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
+
+        * Localizations/en.lproj/localizedStrings.js:
+
 2020-04-09  Devin Rousso  <drousso@apple.com>
 

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

@@ -619 +619 @@
 localizedStrings["Global Search From Selection @ Settings"] = "%s from selection";
 localizedStrings["Global Variables"] = "Global Variables";
+localizedStrings["Go to variable"] = "Go to variable";
 localizedStrings["Grammar"] = "Grammar";
 /* Name of Graphics Tab */
@@ -1123 +1124 @@
 localizedStrings["Show Console tab"] = "Show Console tab";
 localizedStrings["Show Elements"] = "Show Elements";
-localizedStrings["Show Jump to Effective Property Button"] = "Show Jump to Effective Property Button";
 localizedStrings["Show Path"] = "Show Path";
 localizedStrings["Show Remaining (%d)"] = "Show Remaining (%d)";
@@ -1132 +1132 @@
 localizedStrings["Show full certificate"] = "Show full certificate";
 localizedStrings["Show hidden tabs"] = "Show hidden tabs";
+localizedStrings["Show jump to effective property button"] = "Show jump to effective property button";
+localizedStrings["Show jump to variable declaration button"] = "Show jump to variable declaration button";
 localizedStrings["Show only for selected node"] = "Show only for selected node";
 localizedStrings["Show page rulers and node border lines"] = "Show page rulers and node border lines";

trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js

@@ -221 +221 @@
     experimentalEnablePreviewFeatures: new WI.Setting("experimental-enable-preview-features", true),
     experimentalEnableStylesJumpToEffective: new WI.Setting("experimental-styles-jump-to-effective", false),
+    experimentalEnableStyelsJumpToVariableDeclaration: new WI.Setting("experimental-styles-jump-to-variable-declaration", false),
 
     // Protocol

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

@@ -370 +370 @@
     _createExperimentalSettingsView()
     {
+        let canShowPreviewFeatures = WI.canShowPreviewFeatures();
+        let hasCSSDomain = InspectorBackend.hasDomain("CSS");
+        if (!canShowPreviewFeatures && !hasCSSDomain)
+            return;
+
         let experimentalSettingsView = new WI.SettingsView("experimental", WI.UIString("Experimental"));
 
         let initialValues = new Map;
 
-        if (WI.canShowPreviewFeatures()) {
+        if (canShowPreviewFeatures) {
             experimentalSettingsView.addSetting(WI.UIString("Staging:"), WI.settings.experimentalEnablePreviewFeatures, WI.UIString("Enable Preview Features"));
             experimentalSettingsView.addSeparator();
         }
 
-        if (InspectorBackend.hasDomain("CSS")) {
+        if (hasCSSDomain) {
             let stylesGroup = experimentalSettingsView.addGroup(WI.UIString("Styles:"));
-            stylesGroup.addSetting(WI.settings.experimentalEnableStylesJumpToEffective, WI.UIString("Show Jump to Effective Property Button"));
+            stylesGroup.addSetting(WI.settings.experimentalEnableStylesJumpToEffective, WI.UIString("Show jump to effective property button"));
+            stylesGroup.addSetting(WI.settings.experimentalEnableStyelsJumpToVariableDeclaration, WI.UIString("Show jump to variable declaration button"));
+
             experimentalSettingsView.addSeparator();
         }
@@ -403 +410 @@
         listenForChange(WI.settings.experimentalEnablePreviewFeatures);
 
-        if (InspectorBackend.hasDomain("CSS"))
+        if (hasCSSDomain) {
             listenForChange(WI.settings.experimentalEnableStylesJumpToEffective);
+            listenForChange(WI.settings.experimentalEnableStyelsJumpToVariableDeclaration);
+        }
 
         this._createReferenceLink(experimentalSettingsView);

trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css

@@ -195 +195 @@
 }
 
+.spreadsheet-style-declaration-editor .property .select-variable-property {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    -webkit-margin-start: 2px;
+    vertical-align: -1px;
+    cursor: pointer;
+}
+
 .spreadsheet-style-declaration-editor .property .select-effective-property {
     display: none;

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

@@ -784 +784 @@
                 let variableNameIndex = rawTokens.findIndex((token) => token.value.startsWith("--") && /\bvariable-2\b/.test(token.type));
                 if (variableNameIndex !== -1) {
-                    let contents = [];
+                    let contents = rawTokens.slice(0, variableNameIndex + 1);
+
+                    if (WI.settings.experimentalEnableStyelsJumpToVariableDeclaration.value && this._property.ownerStyle.type !== WI.CSSStyleDeclaration.Type.Computed && this._delegate && this._delegate.spreadsheetStylePropertySelectByProperty) {
+                        const dontCreateIfMissing = true;
+                        let effectiveVariableProperty = this._property.ownerStyle.nodeStyles.effectivePropertyForName(rawTokens[variableNameIndex].value, dontCreateIfMissing);
+                        if (effectiveVariableProperty) {
+                            let arrowElement = WI.createGoToArrowButton();
+                            arrowElement.classList.add("select-variable-property");
+                            arrowElement.title = WI.UIString("Go to variable");
+                            arrowElement.addEventListener("click", (event) => {
+                                event.stop();
+                                this._delegate.spreadsheetStylePropertySelectByProperty(effectiveVariableProperty);
+                            });
+                            contents.push(arrowElement);
+                        }
+                    }
+
                     let fallbackStartIndex = rawTokens.findIndex((value, i) => i > variableNameIndex + 1 && /\bm-css\b/.test(value.type));
                     if (fallbackStartIndex !== -1) {
-                        contents.pushAll(rawTokens.slice(0, fallbackStartIndex));
+                        contents.pushAll(rawTokens.slice(variableNameIndex + 1, fallbackStartIndex));
                         contents.pushAll(this._replaceSpecialTokens(rawTokens.slice(fallbackStartIndex, i)));
                     } else
-                        contents.pushAll(rawTokens.slice(0, i));
+                        contents.pushAll(rawTokens.slice(variableNameIndex + 1, i));
                     contents.push(token);