Entry indicator update (#1134)

* Move entry current indicator rules

* Simplify rules

* Add popupCurrentIndicatorMode option

* Add option to settings page

* Expose popupCurrentIndicatorMode

* Restore asterisk current indicator

* Implement dot

* Update action button vars

* Fix tests

* Add none option

* Add triangle option

ext/bg/data/options-schema.json

@@ -109,7 +109,8 @@
                                     "useSecurePopupFrameUrl",
                                     "usePopupShadowDom",
                                     "usePopupWindow",
-                                    "maximumClipboardSearchLength"
+                                    "maximumClipboardSearchLength",
+                                    "popupCurrentIndicatorMode"
                                 ],
                                 "properties": {
                                     "enable": {
@@ -265,6 +266,11 @@
                                         "type": "integer",
                                         "default": 1000,
                                         "minimum": 0
+                                    },
+                                    "popupCurrentIndicatorMode": {
+                                        "type": "string",
+                                        "enum": ["none", "asterisk", "triangle", "bar-left", "bar-right", "dot-left", "dot-right"],
+                                        "default": "bar-left"
                                     }
                                 }
                             },

ext/bg/js/options.js

@@ -662,8 +662,10 @@ class OptionsUtil {
     _updateVersion7(options) {
         // Version 7 changes:
         //  Added general.maximumClipboardSearchLength.
+        //  Added general.popupCurrentIndicatorMode.
         for (const profile of options.profiles) {
             profile.options.general.maximumClipboardSearchLength = 1000;
+            profile.options.general.popupCurrentIndicatorMode = 'bar-left';
         }
         return options;
     }

ext/bg/settings2.html

@@ -476,6 +476,25 @@
                 <label class="toggle"><input type="checkbox" data-setting="general.debugInfo"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
             </div>
         </div></div>
+        <div class="settings-item advanced-only">
+            <div class="settings-item-inner settings-item-inner-wrappable">
+                <div class="settings-item-left">
+                    <div class="settings-item-label">Selection indicator style</div>
+                    <div class="settings-item-description">Change how the selected definition entry is visually indicated.</div>
+                </div>
+                <div class="settings-item-right">
+                    <select data-setting="general.popupCurrentIndicatorMode">
+                        <option value="none">None</option>
+                        <option value="asterisk">Asterisk</option>
+                        <option value="triangle">Triangle</option>
+                        <option value="bar-left">Vertical bar (left)</option>
+                        <option value="bar-right">Vertical bar (right)</option>
+                        <option value="dot-left">Small dot (left)</option>
+                        <option value="dot-right">Small dot (right)</option>
+                    </select>
+                </div>
+            </div>
+        </div>
         <div class="settings-item advanced-only">
             <div class="settings-item-inner">
                 <div class="settings-item-left">

ext/mixed/css/display.css

@@ -34,6 +34,8 @@
     --expression-thin-border-size: calc(1em / (var(--expression-font-size-no-units) * var(--font-size-no-units)));
 
     --action-button-size-no-units: 16;
+    --action-button-size: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units)));
+    --action-button-padding: 0.3em;
 
     --list-margin: 0.72em;
     --main-content-vertical-padding: 0em;
@@ -71,6 +73,9 @@
     --list-padding1: 1.4em;
     --list-padding2: var(--list-padding1);
 
+    --entry-current-indicator-triangle-size-no-units: 6;
+    --entry-current-indicator-triangle-size: calc(1em * (var(--entry-current-indicator-triangle-size-no-units) / var(--font-size-no-units)));
+
     --animation-duration: 0.125s;
 
     /* Colors */
@@ -463,15 +468,34 @@ button.sidebar-button.danger:hover .sidebar-button-icon {
 
 
 /* Action buttons */
+.actions {
+    display: flex;
+    flex-flow: row nowrap;
+    float: right;
+    margin: -0.25em;
+}
+.actions::after {
+    clear: both;
+    content: '';
+    display: block;
+}
 .action-button {
     display: block;
     opacity: 1;
+    border: 0;
+    margin: 0;
+    padding: var(--action-button-padding);
+    background: transparent;
+    font-size: inherit;
     transition:
         opacity var(--animation-duration) linear,
         visibility 0s linear 0s,
         filter var(--animation-duration) linear,
         -webkit-filter var(--animation-duration) linear;
 }
+button.action-button {
+    cursor: pointer;
+}
 .action-button[hidden] {
     display: block;
     visibility: hidden;
@@ -491,31 +515,10 @@ button.sidebar-button.danger:hover .sidebar-button-icon {
 .action-button:disabled:not([hidden]) {
     opacity: 0.25;
 }
-.actions {
-    display: flex;
-    float: right;
-    margin: -0.25em;
-}
-.actions::after {
-    clear: both;
-    content: '';
-    display: block;
-}
-.action-button {
-    display: inline-block;
-    border: 0;
-    margin: 0;
-    padding: 0.3em;
-    background: transparent;
-    font-size: inherit;
-}
-button.action-button {
-    cursor: pointer;
-}
 .action-button::before {
     content: "";
-    width: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units)));
+    width: var(--action-button-size);
-    height: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units)));
+    height: var(--action-button-size);
     display: block;
     background-color: transparent;
     background-repeat: no-repeat;
@@ -619,34 +622,20 @@ button.action-button {
     padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
     position: relative;
 }
-.entry>.entry-current-indicator {
-    display: block;
-    position: absolute;
-    left: calc(-1 * var(--main-content-horizontal-padding));
-    top: 0;
-    bottom: 0;
-    width: 0;
-    background-color: var(--entry-current-indicator-color);
-    visibility: hidden;
-    transition:
-        width var(--entry-current-indicator-transition-duration) linear,
-        visibility 0s linear var(--entry-current-indicator-transition-duration);
-}
-.entry.entry-current>.entry-current-indicator {
-    width: var(--entry-current-indicator-width);
-    visibility: visible;
-    transition:
-        width var(--entry-current-indicator-transition-duration) linear,
-        visibility 0s linear 0s;
-}
 .kanji-link {
     border-bottom: var(--expression-thin-border-size) dashed var(--kanji-border-color);
     color: var(--kanji-text-color);
     text-decoration: none;
     cursor: pointer;
 }
+.term-expression-text-container {
+    display: inline-block;
+}
 .term-expression-text {
     color: var(--kanji-text-color);
+    font-size: var(--expression-font-size);
+    display: inline-block;
+    position: relative;
 }
 .entry[data-expression-multi=true] .term-expression[data-frequency=popular] .term-expression-text,
 .entry[data-expression-multi=true] .term-expression[data-frequency=popular] .kanji-link {
@@ -684,13 +673,6 @@ button.action-button {
 .term-expression {
     display: inline;
 }
-.term-expression-text-container {
-    display: inline-block;
-}
-.term-expression-text {
-    display: inline;
-    font-size: var(--expression-font-size);
-}
 .term-expression-details {
     display: inline;
 }
@@ -705,6 +687,132 @@ button.action-button {
 }
 
 
+/* Entry indicator */
+.entry-current-indicator {
+    display: block;
+    position: absolute;
+    left: calc(-1 * var(--main-content-horizontal-padding));
+    top: 0;
+    bottom: 0;
+    width: 0;
+    background-color: var(--entry-current-indicator-color);
+    visibility: hidden;
+    transition:
+        width var(--entry-current-indicator-transition-duration) linear,
+        visibility 0s linear var(--entry-current-indicator-transition-duration);
+}
+.entry.entry-current .entry-current-indicator {
+    width: var(--entry-current-indicator-width);
+    visibility: visible;
+    transition:
+        width var(--entry-current-indicator-transition-duration) linear,
+        visibility 0s linear 0s;
+}
+:root[data-popup-current-indicator-mode=bar-right] .entry-current-indicator,
+:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator {
+    left: auto;
+    right: 0;
+}
+.entry-current-indicator-inner {
+    display: none;
+    pointer-events: auto;
+    width: 100%;
+    height: 0;
+    top: 0;
+    background-color: var(--entry-current-indicator-color);
+    transition:
+        height var(--entry-current-indicator-transition-duration) linear;
+}
+.entry.entry-current .entry-current-indicator-inner {
+    height: var(--entry-current-indicator-width);
+    transition:
+        height var(--entry-current-indicator-transition-duration) linear;
+}
+:root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator,
+:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator {
+    background-color: transparent;
+}
+:root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator-inner,
+:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator-inner {
+    display: block;
+    position: sticky;
+}
+:root[data-popup-current-indicator-mode=none] .entry-current-indicator,
+:root[data-popup-current-indicator-mode=asterisk] .entry-current-indicator,
+:root[data-popup-current-indicator-mode=triangle] .entry-current-indicator {
+    display: none;
+}
+
+
+/* Triangle entry indicator */
+.term-expression-current-indicator {
+    pointer-events: none;
+    position: absolute;
+    font-size: calc(1em / var(--expression-font-size-no-units));
+    left: calc(-1 * var(--main-content-horizontal-padding));
+    top: 0;
+    bottom: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+        opacity var(--entry-current-indicator-transition-duration) linear,
+        visibility 0s linear var(--entry-current-indicator-transition-duration);
+}
+.entry.entry-current .term-expression-current-indicator {
+    opacity: 1;
+    visibility: visible;
+    transition:
+        opacity var(--entry-current-indicator-transition-duration) linear,
+        visibility 0s linear 0s;
+}
+.term-expression-current-indicator::after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: var(--entry-current-indicator-triangle-size);
+    height: calc(2 * var(--entry-current-indicator-triangle-size));
+    left: calc(-1 * var(--entry-horizontal-padding));
+    top: calc(50% - var(--entry-current-indicator-triangle-size));
+    background-color: var(--entry-current-indicator-color);
+    mask-repeat: no-repeat;
+    mask-position: center center;
+    mask-mode: alpha;
+    mask-size: contain;
+    mask-image: url(/mixed/img/material-right-arrow.svg);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center center;
+    -webkit-mask-mode: alpha;
+    -webkit-mask-size: contain;
+    -webkit-mask-image: url(/mixed/img/material-right-arrow.svg);
+}
+.term-expression:not(:first-of-type) .term-expression-current-indicator,
+:root:not([data-popup-current-indicator-mode=triangle]) .term-expression-current-indicator {
+    display: none;
+}
+
+
+/* Old entry indicator */
+.entry-current-indicator-icon {
+    display: block;
+    padding: var(--action-button-padding);
+}
+.entry-current-indicator-icon[hidden],
+.entry:not(.entry-current) .entry-current-indicator-icon,
+:root:not([data-popup-current-indicator-mode=asterisk]) .entry-current-indicator-icon {
+    display: none;
+}
+.entry-current-indicator-icon::before {
+    content: "";
+    width: var(--action-button-size);
+    height: var(--action-button-size);
+    display: block;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-image: url("/mixed/img/entry-current.svg");
+}
+
+
 /* Merged term styles */
 .entry[data-expression-multi=true] .term-expression-list,
 .entry:not([data-expression-multi=true]) .term-expression-text-container {

ext/mixed/display-templates.html

@@ -2,7 +2,7 @@
 
 <!-- Term entry templates -->
 <template id="term-entry-template" data-remove-whitespace-text="true"><div class="entry" data-type="term">
-    <div class="entry-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></div>
+    <div class="entry-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"><span class="entry-current-indicator-inner"></span></div>
     <div class="entry-header1">
         <div class="entry-header2">
             <div class="entry-header3">
@@ -11,6 +11,7 @@
                     <button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="term-kanji" title="Add expression (Alt + E)"></button>
                     <button class="action-button action-add-note" hidden disabled data-icon="add-term-kana" data-mode="term-kana" title="Add reading (Alt + R)"></button>
                     <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio (Alt + P)"></button>
+                    <span class="entry-current-indicator-icon" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></span>
                 </div>
                 <div class="term-expression-list"></div>
             </div>
@@ -26,7 +27,9 @@
 </div></template>
 <template id="term-expression-template" data-remove-whitespace-text="true"><div class="term-expression">
     <div class="term-expression-text-container">
-        <span class="term-expression-text source-text"></span>
+        <span class="term-expression-text source-text">
+            <span class="term-expression-current-indicator"></span>
+        </span>
     </div>
     <div class="term-expression-details">
         <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio"></button>
@@ -55,13 +58,14 @@
 
 <!-- Kanji entry templates -->
 <template id="kanji-entry-template"><div class="entry" data-type="kanji">
-    <div class="entry-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></div>
+    <div class="entry-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"><span class="entry-current-indicator-inner"></span></div>
     <div class="entry-header1">
         <div class="entry-header2">
             <div class="entry-header3">
                 <div class="actions">
                     <button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note (Alt + V)"></button>
                     <button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="kanji" title="Add Kanji (Alt + K)"></button>
+                    <span class="entry-current-indicator-icon" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></span>
                 </div>
                 <div class="kanji-glyph source-text"></div>
             </div>

ext/mixed/js/display.js

@@ -836,6 +836,7 @@ class Display extends EventDispatcher {
         data.showPitchAccentGraph = `${options.general.showPitchAccentGraph}`;
         data.debug = `${options.general.debugInfo}`;
         data.popupDisplayMode = `${options.general.popupDisplayMode}`;
+        data.popupCurrentIndicatorMode = `${options.general.popupCurrentIndicatorMode}`;
     }
 
     _updateTheme(themeName) {

test/test-options-util.js

@@ -293,7 +293,8 @@ function createProfileOptionsUpdatedTestData1() {
             useSecurePopupFrameUrl: true,
             usePopupShadowDom: true,
             usePopupWindow: false,
-            maximumClipboardSearchLength: 1000
+            maximumClipboardSearchLength: 1000,
+            popupCurrentIndicatorMode: 'bar-left'
         },
         audio: {
             enabled: true,