From 8004754c2919922e53fc4024e19d2e908ed22157 Mon Sep 17 00:00:00 2001
From: gorhill <rhill@raymondhill.net>
Date: Fri, 24 Apr 2015 10:55:11 -0400
Subject: [PATCH] this fixes #83

---
 platform/firefox/vapi-background.js | 15 ++++++++++++
 src/css/popup.css                   | 37 ++++++++++++++++++++++++-----
 src/js/popup.js                     |  2 +-
 3 files changed, 47 insertions(+), 7 deletions(-)

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 <https://bugzilla.mozilla.org/show_bug.cgi?id=1139306>?
+ */
+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]:([^ ]+) ([^ ]+) ([^ ]+)/;