From a719bbaf9d1206b51f97212519892728ca1b9b0a Mon Sep 17 00:00:00 2001
From: Bianca Danforth <biancadanforth@gmail.com>
Date: Thu, 15 Nov 2018 11:38:45 -0800
Subject: [PATCH] Fix #256: Change popup width in overflow menu

With CustomizableUI.jsm (via the experimental `browser.customizableUI` API added in #157), it is possible to detect when the browserAction toolbar button is and is not in the Overflow menu.

Because the overflow menu width varies by OS (for example, it is 377px wide on my Mac 10.13 and 425px wide on a Linux 14.04), this patch will detect whether or not the toolbar button is in the Overflow menu and adjust the width accordingly.

This fix has the added benefit of allowing us to constrain the non-Overflow menu popup width (which is hopefully the vast majority use case) to the UX spec of 320px where previously we had set it to a max-width of 400px to try to accomodate Overflow menu issues.
---
 src/browser_action/index.css                   |  6 ++++--
 src/browser_action/index.jsx                   |  6 ++++++
 src/experiment_apis/customizableUI/api.js      |  5 +++++
 src/experiment_apis/customizableUI/schema.json | 15 +++++++++++++++
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/browser_action/index.css b/src/browser_action/index.css
index 7a58ec9..c281d34 100644
--- a/src/browser_action/index.css
+++ b/src/browser_action/index.css
@@ -21,8 +21,10 @@ body {
 }
 
 #browser-action-app {
-  min-width: 320px;
-  max-width: 400px; /* Overflow menu popup width exceeds 320px and cannot be changed */
+  width: 320px;
+}
+
+#browser-action-app.overflow {
   width: 100%;
 }
 
diff --git a/src/browser_action/index.jsx b/src/browser_action/index.jsx
index 57dc807..6253e29 100644
--- a/src/browser_action/index.jsx
+++ b/src/browser_action/index.jsx
@@ -20,6 +20,12 @@ if (extractedProductJSON) {
   appProps.extractedProduct = JSON.parse(extractedProductJSON);
 }
 
+(async function checkOverflow() {
+  if (await browser.customizableUI.isWidgetInOverflow('shopping-testpilot_mozilla_org-browser-action')) {
+    document.getElementById('browser-action-app').classList.add('overflow');
+  }
+}());
+
 ReactDOM.render(
   <Provider store={store}>
     <BrowserActionApp {...appProps} />
diff --git a/src/experiment_apis/customizableUI/api.js b/src/experiment_apis/customizableUI/api.js
index 1af7a8b..50f6159 100644
--- a/src/experiment_apis/customizableUI/api.js
+++ b/src/experiment_apis/customizableUI/api.js
@@ -5,6 +5,7 @@
 
 this.customizableUI = class extends ExtensionAPI {
   getAPI(context) {
+    const {Services} = ChromeUtils.import('resource://gre/modules/Services.jsm');
     ChromeUtils.import('resource://gre/modules/ExtensionCommon.jsm');
     const {EventManager} = ExtensionCommon;
     const {CustomizableUI} = ChromeUtils.import('resource:///modules/CustomizableUI.jsm', {});
@@ -25,6 +26,10 @@ this.customizableUI = class extends ExtensionAPI {
             };
           },
         ).api(),
+        async isWidgetInOverflow(widgetId) {
+          const browserWindow = Services.wm.getMostRecentWindow('navigator:browser');
+          return CustomizableUI.getWidget(widgetId).forWindow(browserWindow).overflowed;
+        },
       },
     };
   }
diff --git a/src/experiment_apis/customizableUI/schema.json b/src/experiment_apis/customizableUI/schema.json
index d177a40..6179b04 100644
--- a/src/experiment_apis/customizableUI/schema.json
+++ b/src/experiment_apis/customizableUI/schema.json
@@ -14,6 +14,21 @@
           }
         ]
       }
+    ],
+    "functions": [
+      {
+        "name": "isWidgetInOverflow",
+        "type": "function",
+        "description": "Returns a boolean for whether or not the provided widget in the provided window is in the overflow menu or not.",
+        "async": true,
+        "parameters": [
+          {
+            "name": "widgetId",
+            "type": "string",
+            "description": "The id of the widget to check."
+          }
+        ]
+      }
     ]
   }
 ]