diff --git a/platform/firefox/vapi-background.js b/platform/firefox/vapi-background.js index 8a61666b1..24b38ef7e 100644 --- a/platform/firefox/vapi-background.js +++ b/platform/firefox/vapi-background.js @@ -1517,7 +1517,10 @@ vAPI.toolbarButton.init = function() { // Anonymous elements need some time to be reachable setTimeout(this.updateBadgeStyle, 250); }.bind(this.CUIEvents); + + // https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/CustomizableUI.jsm#Listeners this.CUIEvents.onCustomizeEnd = updateBadge; + this.CUIEvents.onWidgetAdded = updateBadge; this.CUIEvents.onWidgetUnderflow = updateBadge; this.CUIEvents.updateBadgeStyle = function() { @@ -1633,6 +1636,18 @@ vAPI.toolbarButton.onBeforeCreated = function(doc) { return; } + // https://github.com/gorhill/uBlock/issues/83 + // Add `portrait` class if width is constrained. + try { + var CustomizableUI = Cu.import('resource:///modules/CustomizableUI.jsm', null).CustomizableUI; + iframe.contentDocument.body.classList.toggle( + 'portrait', + CustomizableUI.getWidget(vAPI.toolbarButton.id).areaType === CustomizableUI.TYPE_MENU_PANEL + ); + } catch (ex) { + /* noop */ + } + new win.MutationObserver(delayedResize).observe(win.document.body, { attributes: true, characterData: true, diff --git a/src/css/popup.css b/src/css/popup.css index 32c2b5267..58ea0f9e0 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -7,6 +7,14 @@ body { padding: 0; white-space: nowrap; } +/** + https://github.com/gorhill/uBlock/issues/83 + .portrait = portrait mode = width is constrained = optimize layout accordingly. + */ +body.portrait { + width: 100%; + } + h2 { background-color: #eee; border: 0; @@ -53,11 +61,15 @@ body[dir="rtl"] #panes { body, #panes { text-align: right; /* this helps the popup render better at "intermediate" widths */ } + #panes > div { display: inline-block; position: relative; vertical-align: top; } +body.portrait #panes > div { + display: block; + } body[dir="ltr"] #panes > div { direction: ltr; } @@ -69,12 +81,22 @@ body[dir="rtl"] #panes > div { overflow-x: hidden; width: 320px; } +/** + Scroll bar to the left. + */ body[dir="ltr"] #panes > div:nth-of-type(2) { - direction: rtl; /* scroll bar to the left */ + direction: rtl; margin-right: 1px; } -body[dir="rtl"] #panes > div:nth-of-type(2) { - direction: ltr; /* scroll bar to the right */ +/** + Scroll bar to the right. + Firefox bug: when popup is rendered inside hamburger menu panel, Firefox is + unable to render the scroll bar to the left. + Maybe ? + */ +body[dir="rtl"] #panes > div:nth-of-type(2), +body.portrait[dir="ltr"] #panes > div:nth-of-type(2) { + direction: ltr; margin-left: 1px; } #panes:not(.dfEnabled) > div:nth-of-type(2) { @@ -319,7 +341,9 @@ body.dirty #refresh:hover { display: inline-block; } -/* Small coloured label at the left of a row */ +/** + Small coloured label at the left of a row + */ #firewallContainer > div.allowed > span:nth-of-type(1):before, #firewallContainer > div.blocked > span:nth-of-type(1):before, #firewallContainer.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before, @@ -333,8 +357,9 @@ body.dirty #refresh:hover { position: absolute; width: 7px; } -/* Source for color-blind color scheme from https://github.com/WyohKnott: - https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219 +/** + Source for color-blind color scheme from https://github.com/WyohKnott: + https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219 */ #firewallContainer > div.allowed > span:nth-of-type(1):before, #firewallContainer.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before { diff --git a/src/js/popup.js b/src/js/popup.js index ba281d022..408031c50 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -62,7 +62,7 @@ if ( dfPaneVisibleStored ) { /******************************************************************************/ -var popupData; +var popupData = {}; var dfPaneBuilt = false; var reIP = /^\d+(?:\.\d+){1,3}$/; var reSrcHostnameFromRule = /^d[abn]:([^ ]+) ([^ ]+) ([^ ]+)/;