Dictionary controller updates (#941)

* Rename action

* Store more state information

* Conditional checks for details toggle links

* Add support for hiding/showing details via menu

1 files changed, 30 insertions, 6 deletions

diff --git a/ext/bg/js/settings/dictionary-controller.js b/ext/bg/js/settings/dictionary-controller.js
index abe26e77..f6c9e9f6 100644
--- a/ext/bg/js/settings/dictionary-controller.js
+++ b/ext/bg/js/settings/dictionary-controller.js
@@ -29,6 +29,8 @@ class DictionaryEntry {
         this._dictionaryInfo = dictionaryInfo;
         this._eventListeners = new EventListenerCollection();
         this._detailsContainer = null;
+        this._hasDetails = false;
+        this._hasCounts = false;
     }
 
     get node() {
@@ -58,13 +60,14 @@ class DictionaryEntry {
         const wildcardSupportedCheckbox = node.querySelector('.dictionary-prefix-wildcard-searches-supported');
 
         const hasDetails = this._setupDetails(detailsTable);
+        this._hasDetails = hasDetails;
 
         titleNode.textContent = title;
         versionNode.textContent = `rev.${revision}`;
         wildcardSupportedCheckbox.checked = !!prefixWildcardsSupported;
 
         outdatedContainer.hidden = (version >= 3);
-        detailsToggleLink.hidden = !hasDetails;
+        if (detailsToggleLink !== null) { detailsToggleLink.hidden = !hasDetails; }
 
         enabledCheckbox.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'enabled']);
         allowSecondarySearchesCheckbox.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'allowSecondarySearches']);
@@ -74,9 +77,10 @@ class DictionaryEntry {
             this._eventListeners.addEventListener(deleteButton, 'click', this._onDeleteButtonClicked.bind(this), false);
         }
         if (menuButton !== null) {
+            this._eventListeners.addEventListener(menuButton, 'menuOpened', this._onMenuOpened.bind(this), false);
             this._eventListeners.addEventListener(menuButton, 'menuClosed', this._onMenuClosed.bind(this), false);
         }
-        if (this._detailsContainer !== null) {
+        if (detailsToggleLink !== null && this._detailsContainer !== null) {
             this._eventListeners.addEventListener(detailsToggleLink, 'click', this._onDetailsToggleLinkClicked.bind(this), false);
         }
         this._eventListeners.addEventListener(priorityInput, 'settingChanged', this._onPriorityChanged.bind(this), false);
@@ -94,9 +98,7 @@ class DictionaryEntry {
         const node = this._node.querySelector('.dictionary-counts');
         node.textContent = JSON.stringify({info: this._dictionaryInfo, counts}, null, 4);
         node.hidden = false;
-
-        const show = this._node.querySelector('.dictionary-details-toggle-link');
-        if (show !== null) { show.hidden = false; }
+        this._hasCounts = true;
     }
 
     // Private
@@ -106,12 +108,34 @@ class DictionaryEntry {
         this._delete();
     }
 
+    _onMenuOpened(e) {
+        const {detail: {menu}} = e;
+        const showDetails = menu.querySelector('.popup-menu-item[data-menu-action="showDetails"]');
+        const hideDetails = menu.querySelector('.popup-menu-item[data-menu-action="hideDetails"]');
+        const hasDetails = (this._detailsContainer !== null && (this._hasDetails || this._hasCounts));
+        const detailsVisible = (hasDetails && !this._detailsContainer.hidden);
+        if (showDetails !== null) {
+            showDetails.hidden = detailsVisible;
+            showDetails.disabled = !hasDetails;
+        }
+        if (hideDetails !== null) {
+            hideDetails.hidden = !detailsVisible;
+            hideDetails.disabled = !hasDetails;
+        }
+    }
+
     _onMenuClosed(e) {
         const {detail: {action}} = e;
         switch (action) {
-            case 'remove':
+            case 'delete':
                 this._delete();
                 break;
+            case 'showDetails':
+                if (this._detailsContainer !== null) { this._detailsContainer.hidden = false; }
+                break;
+            case 'hideDetails':
+                if (this._detailsContainer !== null) { this._detailsContainer.hidden = true; }
+                break;
         }
     }