chore: add edit button to color swatch

Author: abose

src/extensions/default/QuickView/colorGradientProvider.js

@@ -288,9 +288,13 @@ define(function (require, exports, module) {
                 //          (used by unit tests) to match so normalize the css for both
                 let tooltip = gradientMatch.match ? "" : Strings.TOOLTIP_CLICK_TO_EDIT_COLOR;
                 previewCSS = normalizeGradientExpressionForQuickview(ensureHexFormat(previewCSS));
-                let preview = $(`<div id='quick-view-color-swatch' data-for-test='${previewCSS}' class='color-swatch'
-                        style='background: ${previewCSS}' title="${tooltip}">
-                        </div>`);
+                let preview = $(`<div title="${tooltip}">
+                    <div id='quick-view-color-swatch' data-for-test='${previewCSS}' class='color-swatch'
+                        style='background: ${previewCSS}'>
+                    </div>
+                    <i class="fa fa-edit" style="color: ${previewCSS}; margin-top:5px;"></i>
+                    <span style="color: ${previewCSS}; margin-top:5px;">${Strings.EDIT}</span>
+                </div>`);
                 preview.click(function () {
                     if(gradientMatch.match) {
                         return;

src/nls/root/strings.js

@@ -853,6 +853,7 @@ define({
     "COLOR_EDITOR_0X_BUTTON_TIP": "Hex (0x) Format",
     "COLOR_EDITOR_USED_COLOR_TIP_SINGULAR": "{0} (Used {1} time)",
     "COLOR_EDITOR_USED_COLOR_TIP_PLURAL": "{0} (Used {1} times)",
+    "EDIT": "Edit",
 
     // extensions/default/JavaScriptCodeHints
     "CMD_JUMPTO_DEFINITION": "Jump to Definition",