From 6be903e2ad0a0596bce467c359ca6665854a5baf Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 29 Mar 2017 05:26:06 +0300
Subject: [PATCH] Add UI for 'editor.matchHighlight' option

---
 _locales/en/messages.json | 16 ++++++++++++++++
 edit.html                 | 16 ++++++++++++++--
 edit.js                   | 10 ++++++++++
 storage.js                |  3 +++
 4 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index bade24a8..9b462ee4 100644
--- a/_locales/en/messages.json
+++ b/_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"
diff --git a/edit.html b/edit.html
index 46d9b347..7b986ee7 100644
--- a/edit.html
+++ b/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>
diff --git a/edit.js b/edit.js
index 98627761..32bb7716 100644
--- a/edit.js
+++ b/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);
 }
diff --git a/storage.js b/storage.js
index d07db27e..9ff2ed9e 100644
--- a/storage.js
+++ b/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