Skip to content

Commit

Permalink
Add advanced setting to force popup panel orientation
Browse files Browse the repository at this point in the history
Related discussion:
uBlockOrigin/uBlock-issues#2419 (reply in thread)

Name: `popupPanelOrientation`

Supported values:
- `unset` (default): uBO decides whichever mode is best
- `landscape`: force popup panel to landscape mode
- `portrait`: force popup panel to portrait mode
  • Loading branch information
gorhill committed Mar 11, 2024
1 parent 46ea551 commit 0d77ccd
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 20 deletions.
3 changes: 2 additions & 1 deletion src/js/background.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,9 @@ const hiddenSettingsDefault = {
modifyWebextFlavor: 'unset',
popupFontSize: 'unset',
popupPanelDisabledSections: 0,
popupPanelLockedSections: 0,
popupPanelHeightMode: 0,
popupPanelLockedSections: 0,
popupPanelOrientation: 'unset',
requestJournalProcessPeriod: 1000,
requestStatsDisabled: false,
selfieDelayInSeconds: 53,
Expand Down
1 change: 1 addition & 0 deletions src/js/messaging.js
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,7 @@ const popupDataFromTabId = function(tabId, tabTitle) {
popupPanelDisabledSections: µbhs.popupPanelDisabledSections,
popupPanelLockedSections: µbhs.popupPanelLockedSections,
popupPanelHeightMode: µbhs.popupPanelHeightMode,
popupPanelOrientation: µbhs.popupPanelOrientation,
tabId,
tabTitle,
tooltipsDisabled: µbus.tooltipsDisabled,
Expand Down
46 changes: 27 additions & 19 deletions src/js/popup-fenix.js
Original file line number Diff line number Diff line change
Expand Up @@ -802,7 +802,7 @@ let renderOnce = function() {
dom.attr('#firewall [title][data-src]', 'title', null);
}

// This must be done the firewall is populated
// This must be done when the firewall is populated
if ( popupData.popupPanelHeightMode === 1 ) {
dom.cl.add(dom.body, 'vMin');
}
Expand Down Expand Up @@ -1462,6 +1462,31 @@ const getPopupData = async function(tabId, first = false) {
}
};

const setOrientation = async ( ) => {
if ( dom.cl.has(dom.root, 'mobile') ) {
dom.cl.remove(dom.root, 'desktop');
dom.cl.add(dom.root, 'portrait');
return;
}
if ( selfURL.searchParams.get('portrait') !== null ) {
dom.cl.add(dom.root, 'portrait');
return;
}
if ( popupData.popupPanelOrientation === 'landscape' ) { return; }
if ( popupData.popupPanelOrientation === 'portrait' ) {
dom.cl.add(dom.root, 'portrait');
return;
}
if ( dom.cl.has(dom.root, 'desktop') === false ) { return; }
await nextFrames(8);
const main = qs$('#main');
const firewall = qs$('#firewall');
const minWidth = (main.offsetWidth + firewall.offsetWidth) / 1.1;
if ( window.innerWidth < minWidth ) {
dom.cl.add(dom.root, 'portrait');
}
};

// The purpose of the following code is to reset to a vertical layout
// should the viewport not be enough wide to accommodate the horizontal
// layout.
Expand All @@ -1474,24 +1499,7 @@ const getPopupData = async function(tabId, first = false) {
// Use a tolerance proportional to the sum of the width of the panes
// when testing against viewport width.
const checkViewport = async function() {
if (
dom.cl.has(dom.root, 'mobile') ||
selfURL.searchParams.get('portrait')
) {
dom.cl.add(dom.root, 'portrait');
dom.cl.remove(dom.root, 'desktop');
} else if ( dom.cl.has(dom.root, 'desktop') ) {
await nextFrames(8);
const main = qs$('#main');
const firewall = qs$('#firewall');
const minWidth = (main.offsetWidth + firewall.offsetWidth) / 1.1;
if (
selfURL.searchParams.get('portrait') ||
window.innerWidth < minWidth
) {
dom.cl.add(dom.root, 'portrait');
}
}
await setOrientation();
if ( dom.cl.has(dom.root, 'portrait') ) {
const panes = qs$('#panes');
const sticky = qs$('#sticky');
Expand Down

0 comments on commit 0d77ccd

Please sign in to comment.