diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css index 49c450672..98057e8ac 100644 --- 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 index c58b84730..3dffa9682 100644 --- 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 index 13f850451..5f1398e1c 100644 --- a/src/popup-fenix.html +++ b/src/popup-fenix.html @@ -12,7 +12,7 @@