Improve frequency display (#1438)

* Add frequencyDisplayMode option

* Update tests

* Add setting

* Update frequency display styles

* Improve wrapping

8 files changed, 228 insertions, 71 deletions

diff --git a/ext/css/display.css b/ext/css/display.css
index 053e457c..148200b2 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -683,7 +683,6 @@ button.action-button[data-icon=source-term]::before {
     border: none;
     border-right: none;
     font-size: 1em;
-    vertical-align: middle;
     margin: calc(1em / var(--font-size-no-units)) 0.375em calc(1em / var(--font-size-no-units)) 0;
 }
 .tag-label {
@@ -702,9 +701,14 @@ button.action-button[data-icon=source-term]::before {
     font-weight: var(--tag-font-weight);
 }
 .tag-body {
-    display: block;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
     position: relative;
     padding: 0 0.375em 0 0.375em;
+    border-radius: var(--tag-border-radius);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
 }
 .tag-body::before {
     content: '';
@@ -715,10 +719,10 @@ button.action-button[data-icon=source-term]::before {
     bottom: 0;
     right: 0;
     border-radius: var(--tag-border-radius);
-    border: var(--tag-border-size) var(--tag-border-style) var(--tag-color);
-    border-left: none;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    border: var(--tag-border-size) var(--tag-border-style) var(--tag-color);
+    border-left: none;
     pointer-events: none;
 }
 .tag-body-content {
@@ -1069,37 +1073,16 @@ button.action-button[data-icon=source-term]::before {
 
 
 /* Frequencies */
-.frequency-group-list {
-    margin: 0;
-    padding: 0 0 0 var(--list-padding1);
-    list-style-type: decimal;
-}
-.frequency-group-list[data-count='0'],
-.frequency-group-list[data-count='1'] {
-    padding-left: 0;
-    list-style-type: none;
-}
-.frequency-list {
-    margin: 0;
-    padding: 0 0 0 var(--list-padding2);
-    list-style-type: circle;
-}
-.frequency-list[data-count='0'],
-.frequency-list[data-count='1'] {
-    padding-left: 0;
-    list-style-type: none;
+.frequency-group-item {
+    display: inline;
 }
-.frequency-group-item::marker,
-.frequency-item::marker {
-    color: var(--text-color-light3);
+.frequency-item {
+    display: inline;
 }
 .frequency-disambiguation {
     color: var(--text-color-light3);
     padding-right: 0.25em;
 }
-.frequency-separator::before {
-    content: '';
-}
 .frequency-disambiguation-separator::before {
     content: ':';
 }
@@ -1113,6 +1096,11 @@ button.action-button[data-icon=source-term]::before {
     display: inline;
     font-size: 1em;
 }
+.frequency-body::after {
+    white-space: pre-wrap;
+    display: inline;
+    color: var(--text-color-light3);
+}
 .entry[data-unique-expression-count='1'] .frequency-item[data-has-reading=false] .frequency-disambiguation,
 .entry[data-unique-reading-count='1'][data-unique-expression-count='1'] .frequency-disambiguation,
 .frequency-item[data-reading-is-same=true] .frequency-disambiguation-separator,
@@ -1125,33 +1113,155 @@ button.action-button[data-icon=source-term]::before {
 .entry[data-unique-reading-count='1'] .frequency-disambiguation-reading {
     display: none;
 }
-:root[data-glossary-layout-mode=compact] .frequency-group-list,
-:root[data-glossary-layout-mode=compact] .frequency-list,
-.frequency-list[data-count='1'] {
+:root[data-frequency-display-mode=tags] .frequency-group-tag,
+:root[data-frequency-display-mode=split-tags] .frequency-group-tag {
+    margin: 0;
     display: inline;
-    list-style: none;
-    padding-left: 0;
 }
-:root[data-glossary-layout-mode=compact] .frequency-group-item {
-    display: inline-block;
-    margin-right: 1em;
+:root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-label,
+:root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-label {
+    display: none;
 }
-:root[data-glossary-layout-mode=compact] .entry-body-section[data-section-type=frequencies] {
-    margin-right: -1em;
+:root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-body,
+:root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-body {
+    display: inline;
+    padding: 0;
 }
-:root[data-glossary-layout-mode=compact] .frequency-item,
-.frequency-list[data-count='1'] .frequency-item {
+:root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-body::before,
+:root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-body::before {
+    display: none;
+}
+:root[data-frequency-display-mode=tags] .frequency-list,
+:root[data-frequency-display-mode=split-tags] .frequency-list {
+    display: inline;
+}
+:root[data-frequency-display-mode=list] .frequency-tag,
+:root[data-frequency-display-mode=inline-list] .frequency-tag,
+:root[data-frequency-display-mode=tags-grouped] .frequency-tag,
+:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag {
+    margin: 0;
+    display: inline;
+}
+:root[data-frequency-display-mode=list] .frequency-tag>.tag-label,
+:root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-label,
+:root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-label,
+:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-label {
+    display: none;
+}
+:root[data-frequency-display-mode=list] .frequency-tag>.tag-body,
+:root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-body,
+:root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-body,
+:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-body {
+    display: inline;
+    padding: 0;
+}
+:root[data-frequency-display-mode=list] .frequency-tag>.tag-body::before,
+:root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-body::before,
+:root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-body::before,
+:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-body::before {
+    display: none;
+}
+:root[data-frequency-display-mode=list] .frequency-body,
+:root[data-frequency-display-mode=inline-list] .frequency-body,
+:root[data-frequency-display-mode=tags-grouped] .frequency-body,
+:root[data-frequency-display-mode=split-tags-grouped] .frequency-body {
     display: inline-block;
 }
-:root[data-glossary-layout-mode=compact] .frequency-item:not(:first-child)::before,
-.frequency-list[data-count='1'] .frequency-item:not(:first-child)::before {
-    white-space: pre-wrap;
+:root[data-frequency-display-mode=inline-list] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after,
+:root[data-frequency-display-mode=tags-grouped] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after,
+:root[data-frequency-display-mode=split-tags-grouped] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after {
     content: var(--compact-list-separator);
-    display: inline;
+}
+:root[data-frequency-display-mode=list] .frequency-group-tag>.tag-body::before,
+:root[data-frequency-display-mode=inline-list] .frequency-group-tag>.tag-body::before {
+    display: none;
+}
+:root[data-frequency-display-mode=list] .frequency-group-tag.tag.tag-has-body>.tag-label,
+:root[data-frequency-display-mode=inline-list] .frequency-group-tag.tag.tag-has-body>.tag-label {
+    border-radius: var(--tag-border-radius);
+}
+:root[data-frequency-display-mode=tags] .frequency-tag>.tag-body::before {
+    display: none;
+}
+:root[data-frequency-display-mode=tags] .frequency-tag>.tag-body {
+    background-color: var(--tag-color);
+    padding-left: 0;
+}
+:root[data-frequency-display-mode=tags] .frequency-body {
+    font-size: var(--tag-font-size);
+    font-weight: var(--tag-font-weight);
+    color: var(--tag-text-color);
+}
+:root[data-frequency-display-mode=tags] .frequency-tag>.tag-label>.tag-label-content::after {
+    content: ':';
+}
+:root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-body::before {
+    display: none;
+}
+:root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-body {
+    background-color: var(--tag-color);
+    padding-left: 0;
+}
+:root[data-frequency-display-mode=tags-grouped] .frequency-list {
+    font-size: var(--tag-font-size);
+    font-weight: var(--tag-font-weight);
+    color: var(--tag-text-color);
+}
+:root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-label>.tag-label-content::after {
+    content: ':';
+}
+:root[data-frequency-display-mode=tags] .frequency-disambiguation,
+:root[data-frequency-display-mode=tags-grouped] .frequency-disambiguation,
+:root[data-frequency-display-mode=tags] .frequency-body::after,
+:root[data-frequency-display-mode=tags-grouped] .frequency-body::after {
+    color: inherit;
+    font-weight: normal;
+    opacity: 0.75;
+}
+:root[data-frequency-display-mode=list] .frequency-group-list {
+    list-style-type: decimal;
+    padding: 0 0 0 var(--list-padding1);
+}
+:root[data-frequency-display-mode=list] .frequency-group-item {
+    display: list-item;
+}
+:root[data-frequency-display-mode=list] .frequency-group-item::marker {
+    color: var(--text-color-light3);
+}
+:root[data-frequency-display-mode=list] .frequency-group-tag {
+    display: block;
+}
+:root[data-frequency-display-mode=list] .frequency-group-tag>.tag-label {
+    display: inline-flex;
+}
+:root[data-frequency-display-mode=list] .frequency-list {
+    list-style-type: circle;
+    padding: 0 0 0 var(--list-padding2);
+}
+:root[data-frequency-display-mode=list] .frequency-item {
+    display: list-item;
+}
+:root[data-frequency-display-mode=list] .frequency-item::marker {
     color: var(--text-color-light3);
 }
-:root[data-glossary-layout-mode=compact] .frequency-tag-list,
-.frequency-group-item[data-count='1'] .frequency-tag-list {
+:root[data-frequency-display-mode=list] .frequency-group-list[data-count='1'] {
+    list-style-type: none;
+    padding-left: 0;
+}
+:root[data-frequency-display-mode=list] .frequency-group-list[data-count='1']>.frequency-group-item {
+    display: inline;
+}
+:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1']>.frequency-group-tag>.tag-body {
+    display: inline-flex;
+}
+:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1']>.frequency-group-tag>.tag-body>.frequency-body {
+    display: inline;
+}
+:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1'] .frequency-list {
+    list-style-type: none;
+    padding-left: 0;
+}
+:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1'] .frequency-item {
     display: inline;
 }
 
diff --git a/ext/data/schemas/options-schema.json b/ext/data/schemas/options-schema.json
index f4f5d0ca..6d6c8536 100644
--- a/ext/data/schemas/options-schema.json
+++ b/ext/data/schemas/options-schema.json
@@ -271,6 +271,11 @@
                                         "type": "string",
                                         "enum": ["left", "right", "top", "bottom"],
                                         "default": "top"
+                                    },
+                                    "frequencyDisplayMode": {
+                                        "type": "string",
+                                        "enum": ["tags", "tags-grouped", "split-tags", "split-tags-grouped", "inline-list", "list"],
+                                        "default": "split-tags-grouped"
                                     }
                                 }
                             },
diff --git a/ext/display-templates.html b/ext/display-templates.html
index bb89ceaa..d188cfd6 100644
--- a/ext/display-templates.html
+++ b/ext/display-templates.html
@@ -23,7 +23,7 @@
     </div>
     <div class="entry-body">
         <div class="entry-body-section" data-section-type="frequencies">
-            <ol class="entry-body-section-content frequency-group-list"></ol>
+            <div class="entry-body-section-content frequency-group-list"></div>
         </div>
         <div class="entry-body-section" data-section-type="pitch-accents">
             <ol class="entry-body-section-content term-pitch-accent-group-list"></ol>
@@ -52,19 +52,25 @@
 <template id="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator"> </span></template>
 
 <!-- Frequency templates -->
-<template id="frequency-group-item-template"><li class="frequency-group-item"><div class="frequency-tag-list tag-list"></div><ul class="frequency-list"></ul></li></template>
-<template id="term-frequency-item-template" data-remove-whitespace-text="true"><li class="frequency-item" data-frequency-type="term">
-    <ruby class="frequency-disambiguation">
-        <span class="frequency-disambiguation-expression"></span>
-        <span class="frequency-disambiguation-separator"></span>
-        <rt class="frequency-disambiguation-reading"></rt>
-    </ruby>
-    <span class="frequency-separator"></span>
-    <span class="frequency-value"></span>
-</li></template>
-<template id="kanji-frequency-item-template" data-remove-whitespace-text="true"><li class="frequency-item" data-frequency-type="kanji">
-    <span class="frequency-value"></span>
-</li></template>
+<template id="frequency-group-item-template"><span class="frequency-group-item"><span class="tag tag-has-body frequency-group-tag" data-category="frequency"><span class="tag-label"><span class="tag-label-content"></span></span><span class="tag-body"><span class="tag-body-content frequency-list"></span></span></span></span></template>
+<template id="term-frequency-item-template" data-remove-whitespace-text="true"><span class="frequency-item"><span class="tag tag-has-body frequency-tag" data-category="frequency" data-frequency-type="term">
+    <span class="tag-label"><span class="tag-label-content"></span></span>
+    <span class="tag-body"><span class="tag-body-content frequency-body">
+        <ruby class="frequency-disambiguation">
+            <span class="frequency-disambiguation-expression"></span>
+            <span class="frequency-disambiguation-separator"></span>
+            <rt class="frequency-disambiguation-reading"></rt>
+        </ruby>
+        <span class="frequency-separator"></span>
+        <span class="frequency-value"></span>
+    </span></span>
+</span></span></template>
+<template id="kanji-frequency-item-template" data-remove-whitespace-text="true"><span class="frequency-item"><span class="tag tag-has-body frequency-tag" data-category="frequency" data-frequency-type="kanji">
+    <span class="tag-label"><span class="tag-label-content"></span></span>
+    <span class="tag-body"><span class="tag-body-content frequency-body">
+        <span class="frequency-value"></span>
+    </span></span>
+</span></span></template>
 
 <!-- Pitch accent templates -->
 <template id="term-pitch-accent-static-template"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;" focusable="false">
@@ -100,7 +106,7 @@
     <div class="tags tag-list"></div>
     <div class="entry-body">
         <div class="entry-body-section" data-section-type="frequencies">
-            <ol class="entry-body-section-content frequency-group-list"></ol>
+            <div class="entry-body-section-content frequency-group-list"></div>
         </div>
     </div>
     <table class="kanji-glyph-data"><tbody>
diff --git a/ext/js/data/options-util.js b/ext/js/data/options-util.js
index 1105dfed..d7f09135 100644
--- a/ext/js/data/options-util.js
+++ b/ext/js/data/options-util.js
@@ -457,7 +457,8 @@ class OptionsUtil {
             {async: false, update: this._updateVersion5.bind(this)},
             {async: true,  update: this._updateVersion6.bind(this)},
             {async: false, update: this._updateVersion7.bind(this)},
-            {async: true,  update: this._updateVersion8.bind(this)}
+            {async: true,  update: this._updateVersion8.bind(this)},
+            {async: false, update: this._updateVersion9.bind(this)}
         ];
     }
 
@@ -736,4 +737,13 @@ class OptionsUtil {
         }
         return options;
     }
+
+    _updateVersion9(options) {
+        // Version 9 changes:
+        //  Added general.frequencyDisplayMode.
+        for (const profile of options.profiles) {
+            profile.options.general.frequencyDisplayMode = 'split-tags-grouped';
+        }
+        return options;
+    }
 }
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 9b451995..da1b053a 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -581,16 +581,21 @@ class DisplayGenerator {
 
     _createFrequencyGroup(details, kanji) {
         const {dictionary, frequencyData} = details;
+
         const node = this._templates.instantiate('frequency-group-item');
+        const body = node.querySelector('.tag-body-content');
 
-        const tagList = node.querySelector('.frequency-tag-list');
-        const tag = this._createTag({notes: '', name: dictionary, category: 'frequency'});
-        tagList.appendChild(tag);
+        this._setTextContent(node.querySelector('.tag-label-content'), dictionary);
+        node.dataset.details = dictionary;
 
-        const frequencyListContainer = node.querySelector('.frequency-list');
-        const createItem = (kanji ? this._createKanjiFrequency.bind(this) : this._createTermFrequency.bind(this));
-        this._appendMultiple(frequencyListContainer, createItem, frequencyData, dictionary);
+        for (let i = 0, ii = frequencyData.length; i < ii; ++i) {
+            const item = frequencyData[i];
+            const itemNode = (kanji ? this._createKanjiFrequency(item, dictionary) : this._createTermFrequency(item, dictionary));
+            itemNode.dataset.index = `${i}`;
+            body.appendChild(itemNode);
+        }
 
+        body.dataset.count = `${frequencyData.length}`;
         node.dataset.count = `${frequencyData.length}`;
 
         return node;
@@ -600,6 +605,8 @@ class DisplayGenerator {
         const {expression, reading, frequencies} = details;
         const node = this._templates.instantiate('term-frequency-item');
 
+        this._setTextContent(node.querySelector('.tag-label-content'), dictionary);
+
         const frequency = frequencies.join(', ');
 
         this._setTextContent(node.querySelector('.frequency-disambiguation-expression'), expression, 'ja');
@@ -622,6 +629,7 @@ class DisplayGenerator {
 
         const frequency = frequencies.join(', ');
 
+        this._setTextContent(node.querySelector('.tag-label-content'), dictionary);
         this._setTextContent(node.querySelector('.frequency-value'), frequency, 'ja');
 
         node.dataset.character = character;
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index 30a8e294..be402ec3 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -812,6 +812,7 @@ class Display extends EventDispatcher {
         data.ankiEnabled = `${options.anki.enable}`;
         data.glossaryLayoutMode = `${options.general.glossaryLayoutMode}`;
         data.compactTags = `${options.general.compactTags}`;
+        data.frequencyDisplayMode = `${options.general.frequencyDisplayMode}`;
         data.enableSearchTags = `${options.scanning.enableSearchTags}`;
         data.showPitchAccentDownstepNotation = `${options.general.showPitchAccentDownstepNotation}`;
         data.showPitchAccentPositionNotation = `${options.general.showPitchAccentPositionNotation}`;
diff --git a/ext/settings.html b/ext/settings.html
index 54ee7d6d..62117c3c 100644
--- a/ext/settings.html
+++ b/ext/settings.html
@@ -677,6 +677,22 @@
                 <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">
+            <div class="settings-item-left">
+                <div class="settings-item-label">Frequency display style</div>
+                <div class="settings-item-description">Change how frequency information is presented.</div>
+            </div>
+            <div class="settings-item-right">
+                <select data-setting="general.frequencyDisplayMode">
+                    <option value="tags">Tags</option>
+                    <option value="tags-grouped">Tags, grouped content</option>
+                    <option value="split-tags">Split tags</option>
+                    <option value="split-tags-grouped">Split tags, grouped content</option>
+                    <option value="inline-list">Inline list</option>
+                    <option value="list">List</option>
+                </select>
+            </div>
+        </div></div>
         <div class="settings-item advanced-only">
             <div class="settings-item-inner settings-item-inner-wrappable">
                 <div class="settings-item-left">
diff --git a/test/test-options-util.js b/test/test-options-util.js
index 20b1f3f4..cfb5bd95 100644
--- a/test/test-options-util.js
+++ b/test/test-options-util.js
@@ -294,7 +294,8 @@ function createProfileOptionsUpdatedTestData1() {
             usePopupWindow: false,
             popupCurrentIndicatorMode: 'triangle',
             popupActionBarVisibility: 'auto',
-            popupActionBarLocation: 'top'
+            popupActionBarLocation: 'top',
+            frequencyDisplayMode: 'split-tags-grouped'
         },
         audio: {
             enabled: true,
@@ -559,7 +560,7 @@ function createOptionsUpdatedTestData1() {
             }
         ],
         profileCurrent: 0,
-        version: 8,
+        version: 9,
         global: {
             database: {
                 prefixWildcardsSupported: false