Ensure state of more/less in panel reflect locked/disabled sections

Related issue: - uBlockOrigin/uBlock-issues#1059
gorhill · Nov 20, 2022 · eb70933 · eb70933
1 parent 9ab8de4
commit eb70933
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 20 deletions.
diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css
@@ -252,11 +252,8 @@ body.mobile.no-tooltips .toolRibbon .tool {
     border-inline-start: 1px solid var(--surface-1);
     text-align: end;
     }
-body[data-more="a b c d e f"] #moreButton {
-    pointer-events: none;
-    visibility: hidden;
-    }
-body[data-more=""] #lessButton {
+#moreButton.disabled,
+#lessButton.disabled {
     pointer-events: none;
     visibility: hidden;
     }
@@ -596,27 +593,27 @@ body.godMode #actionSelector > #dynaAllow {
 :root body[data-ui~="+logger"] [href="logger-ui.html#_"] {
     display: flex;
     }
-body:not([data-more~="a"]) [data-more="a"],
-body:not([data-more~="b"]) [data-more="b"],
-body:not([data-more~="c"]) [data-more="c"],
-body:not([data-more~="d"]) [data-more="d"],
-body:not([data-more~="f"]) [data-more="f"] {
+body:not([data-more*="a"]) [data-more="a"],
+body:not([data-more*="b"]) [data-more="b"],
+body:not([data-more*="c"]) [data-more="c"],
+body:not([data-more*="d"]) [data-more="d"],
+body:not([data-more*="f"]) [data-more="f"] {
     height: 0;
     margin-bottom: 0 !important;
     margin-top: 0 !important;
     overflow-y: hidden;
     visibility: hidden;
     }
-body[data-more~="d"] hr[data-more="a"] {
+body[data-more*="d"] hr[data-more="a"] {
     display: none;
     }
-body[data-more~="c"] hr[data-more="f"] {
+body[data-more*="c"] hr[data-more="f"] {
     display: none;
     }
-body[data-more~="c"]:not([data-more~="f"]) hr[data-more="g"] {
+body[data-more*="c"]:not([data-more*="f"]) hr[data-more="g"] {
     display: none;
     }
-body:not([data-more~="e"]) [data-more="e"] {
+body:not([data-more*="e"]) [data-more="e"] {
     display: none;
     }
 

diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js
@@ -39,7 +39,7 @@ vAPI.localStorage.getItemAsync('popupFontSize').then(value => {
 //   pane visibility to its last known state. By default the pane is hidden.
 vAPI.localStorage.getItemAsync('popupPanelSections').then(bits => {
     if ( typeof bits !== 'number' ) { return; }
-    sectionBitsToAttribute(bits);
+    setSections(bits);
 });
 
 /******************************************************************************/
@@ -700,7 +700,7 @@ let renderOnce = function() {
 
     dom.text('#version', popupData.appVersion);
 
-    sectionBitsToAttribute(computedSections());
+    setSections(computedSections());
 
     if ( popupData.uiPopupConfig !== undefined ) {
         dom.attr(dom.body, 'data-ui', popupData.uiPopupConfig);
@@ -910,7 +910,7 @@ const sectionBitsFromAttribute = function() {
     const attr = document.body.dataset.more;
     if ( attr === '' ) { return 0; }
     let bits = 0;
-    for ( const c of attr.split(' ') ) {
+    for ( const c of attr ) {
         bits |= 1 << (c.charCodeAt(0) - 97);
     }
     return bits;
@@ -923,7 +923,18 @@ const sectionBitsToAttribute = function(bits) {
         if ( (bits & bit) === 0 ) { continue; }
         attr.push(String.fromCharCode(97 + i));
     }
-    document.body.dataset.more = attr.join(' ');
+    return attr.join('');
+};
+
+const setSections = function(bits) {
+    const value = sectionBitsToAttribute(bits);
+    const min = sectionBitsToAttribute(popupData.popupPanelLockedSections);
+    const max = sectionBitsToAttribute(
+        (1 << maxNumberOfSections) - 1 & ~popupData.popupPanelDisabledSections
+    );
+    document.body.dataset.more = value;
+    dom.cl.toggle('#lessButton', 'disabled', value === min);
+    dom.cl.toggle('#moreButton', 'disabled', value === max);
 };
 
 const toggleSections = function(more) {
@@ -943,7 +954,7 @@ const toggleSections = function(more) {
     }
     if ( newBits === currentBits ) { return; }
 
-    sectionBitsToAttribute(newBits);
+    setSections(newBits);
 
     popupData.popupPanelSections = newBits;
     messaging.send('popupPanel', {

diff --git a/src/popup-fenix.html b/src/popup-fenix.html
@@ -12,7 +12,7 @@
 <title data-i18n="extName"></title>
 </head>
 
-<body class="loading" data-more="a b c d">
+<body class="loading" data-more="abcd">
 <div id="panes">
     <div id="main">
         <div id="sticky">