Add UI for 'editor.matchHighlight' option

_locales/en/messages.json

@@ -108,6 +108,22 @@
     "message": "Theme",
     "description": "Label for the style editor's CSS theme."
   },
+  "cm_matchHighlight": {
+    "message": "Highlight",
+    "description": "Label for the drop-down list controlling the automatic highlighting of current word/selection occurrences in the style editor."
+  },
+  "cm_matchHighlightToken": {
+    "message": "Token under cursor",
+    "description": "Style editor's 'highglight' drop-down list option: highlight the occurrences of of the word/token under cursor even if nothing is selected"
+  },
+  "cm_matchHighlightSelection": {
+    "message": "Selection only",
+    "description": "Style editor's 'highglight' drop-down list option: highlight the occurrences of currently selected text"
+  },
+  "genericDisabledLabel": {
+    "message": "Disabled",
+    "description": "Used in various lists/options to indicate that something is disabled"
+  },
   "confirmNo": {
     "message": "No",
     "description": "'No' button in a confirm dialog"

edit.html

@@ -192,11 +192,15 @@
 			.CodeMirror-search-hint {
 				color: #888;
 			}
-			.cm-matchhighlight-approved .cm-matchhighlight,
-			.CodeMirror-selection-highlight-scrollbar {
+			body[data-highlight-selection-matches="token"] .cm-matchhighlight-approved .cm-matchhighlight,
+			body[data-highlight-selection-matches="token"] .CodeMirror-selection-highlight-scrollbar {
 				animation: fadein-match-highlighter 1s cubic-bezier(.97,.01,.42,.98);
 				animation-fill-mode: both;
 			}
+			body[data-highlight-selection-matches="selection"] .cm-matchhighlight-approved .cm-matchhighlight,
+			body[data-highlight-selection-matches="selection"] .CodeMirror-selection-highlight-scrollbar {
+				background-color: rgba(1, 151, 193, 0.1);
+			}
 			@-webkit-keyframes highlight {
 				from {
 					background-color: #ff9;
@@ -693,6 +697,14 @@
 					<label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
 					<select data-option="theme" id="editor.theme"></select>
 				</div>
+				<div class="option aligned">
+					<label id="highlight-label" for="editor.matchHighlight" i18n-text="cm_matchHighlight"></label>
+					<select data-option="highlightSelectionMatches" id="editor.matchHighlight">
+						<option i18n-text="cm_matchHighlightToken" value="token">
+						<option i18n-text="cm_matchHighlightSelection" value="selection">
+						<option i18n-text="genericDisabledLabel" value="">
+					</select>
+				</div>
 			</section>
 			<section id="lint"><h2 i18n-text="issues">: <span id="issue-count"></span><svg id="lint-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2><div></div></section>
 		</div>

edit.js

@@ -304,6 +304,16 @@ function acmeEventListener(event) {
 				}, 100);
 			})();
 			return;
+		case "highlightSelectionMatches":
+			switch (value) {
+				case 'token':
+				case 'selection':
+					document.body.dataset[option] = value;
+					value = {showToken: value == 'token' && /[#.\-\w]/, annotateScrollbar: true};
+					break;
+				default:
+					value = null;
+			}
 	}
 	CodeMirror.setOption(option, value);
 }

storage.js

@@ -557,6 +557,9 @@ prefs = prefs || new function Prefs() {
     },
     'editor.lintDelay': 500,        // lint gutter marker update delay, ms
     'editor.lintReportDelay': 4500, // lint report update delay, ms
+    'editor.matchHighlight': 'token', // token = token/word under cursor even if nothing is selected
+                                      // selection = only when something is selected
+                                      // '' (empty string) = disabled
 
     'badgeDisabled': '#8B0000',     // badge background color when disabled
     'badgeNormal': '#006666',       // badge background color