Improved support for layers panel with adding styles selector support

src/extensions/default/InlineColorEditor/ColorEditor.js

@@ -32,7 +32,7 @@ define(function (require, exports, module) {
         tinycolor          = brackets.getModule("thirdparty/tinycolor");
 
     /** Mustache template that forms the bare DOM structure of the UI */
-    var ColorEditorTemplate = require("text!ColorEditorTemplate.html");
+    var ColorEditorTemplate = require("text!./ColorEditorTemplate.html");
 
     /**
      * @const @type {number}
@@ -131,9 +131,10 @@ define(function (require, exports, module) {
 
         this._redoColor = null;
         this._isUpperCase = PreferencesManager.get("uppercaseColors");
-        PreferencesManager.on("change", "uppercaseColors", function () {
+        this._handleUppercaseColorsChange = function () {
             this._isUpperCase = PreferencesManager.get("uppercaseColors");
-        }.bind(this));
+        }.bind(this);
+        PreferencesManager.on("change", "uppercaseColors", this._handleUppercaseColorsChange);
 
         this.$colorValue = this.$element.find(".color-value");
         this.$buttonList = this.$element.find("ul.button-bar");
@@ -270,7 +271,7 @@ define(function (require, exports, module) {
      * Remove any preference listeners before destroying the editor.
      */
     ColorEditor.prototype.destroy = function () {
-        PreferencesManager.off("change", "uppercaseColors");
+        PreferencesManager.off("change", "uppercaseColors", this._handleUppercaseColorsChange);
     };
 
     /**

src/nls/root/strings.js

@@ -828,6 +828,30 @@ define({
     "LIVE_PREVIEW_LAYERS_SCRIPT_GENERATED": "Generated by script, not in the source file",
     "LIVE_PREVIEW_LAYERS_TAG_TOOLTIP": "Show Tag Name Tooltip",
     "LIVE_PREVIEW_LAYERS_INSERT_ELEMENT": "Insert Element",
+    "LIVE_PREVIEW_LAYERS_CHANGE_COLOR": "Change color",
+    "LIVE_PREVIEW_LAYERS_COPY_DECLARATION": "Copy property",
+    "LIVE_PREVIEW_LAYERS_COPY_RULE": "Copy selector and properties",
+    "LIVE_PREVIEW_LAYERS_PASTE_HINT": "Paste properties or a CSS rule here",
+    "LIVE_PREVIEW_LAYERS_PASTE_INVALID": "Paste CSS properties or one complete selector at a time.",
+    "LIVE_PREVIEW_LAYERS_PASTE_FAILED": "Couldn’t paste these properties. Try again.",
+    "LIVE_PREVIEW_LAYERS_PASTED": "Properties pasted into {0}",
+    "LIVE_PREVIEW_LAYERS_COPY_FAILED": "Couldn’t copy these styles. Try again.",
+    "LIVE_PREVIEW_LAYERS_ADD_STYLE": "Add style",
+    "LIVE_PREVIEW_LAYERS_STYLE_KIND": "Style type",
+    "LIVE_PREVIEW_LAYERS_STYLE_CLASS": "Class",
+    "LIVE_PREVIEW_LAYERS_STYLE_NAME": "Name",
+    "LIVE_PREVIEW_LAYERS_STYLE_NAME_HINT": "e.g. card",
+    "LIVE_PREVIEW_LAYERS_STYLE_FILE": "Save in",
+    "LIVE_PREVIEW_LAYERS_STYLE_IN_PAGE": "This page",
+    "LIVE_PREVIEW_LAYERS_STYLE_NEW_FILE": "New stylesheet…",
+    "LIVE_PREVIEW_LAYERS_STYLE_FILENAME": "Filename",
+    "LIVE_PREVIEW_LAYERS_STYLE_HELP": "The class or ID is applied to this element. New stylesheets are created beside this page and linked automatically.",
+    "LIVE_PREVIEW_LAYERS_STYLE_INVALID_NAME": "Use a name starting with a letter or underscore, followed by letters, numbers, hyphens or underscores.",
+    "LIVE_PREVIEW_LAYERS_STYLE_INVALID_FILE": "Enter a filename ending in .css, without folders.",
+    "LIVE_PREVIEW_LAYERS_STYLE_DUPLICATE_ID": "Another element already uses this ID. Choose a different name.",
+    "LIVE_PREVIEW_LAYERS_STYLE_FAILED": "Couldn’t add the style.",
+    "LIVE_PREVIEW_LAYERS_SAVE_TARGET": "Styles bar changes are saved here",
+    "LIVE_PREVIEW_LAYERS_INSERT_POSITION": "Placement",
     "LIVE_PREVIEW_LAYERS_INSERT_INTO_PAGE": "Add to the page",
     "LIVE_PREVIEW_LAYERS_INSERT_LOADING": "Loading elements…",
     "LIVE_PREVIEW_LAYERS_INSERT_UNAVAILABLE": "The live preview did not answer. Try again in a moment.",
@@ -836,7 +860,7 @@ define({
     "LIVE_PREVIEW_LAYERS_EMPTY_PAGE_PROPERTIES": "The page is empty. Add an element to see its properties.",
     "LIVE_PREVIEW_LAYERS_EMPTY_PAGE_STYLES": "The page is empty. Add an element to see its styles.",
     "LIVE_PREVIEW_LAYERS_SHOW_SELECTED": "Show the selected element",
-    "LIVE_PREVIEW_LAYERS_SCRUB_HINT": "Drag to adjust, double-click to edit",
+    "LIVE_PREVIEW_LAYERS_SCRUB_HINT": "Drag to adjust. Scroll or use arrow keys while editing. Shift: larger steps, Alt: smaller steps",
     "LIVE_PREVIEW_LAYERS_PROPERTY_PLACEHOLDER": "property",
     "LIVE_PREVIEW_LAYERS_VALUE_PLACEHOLDER": "value",