Fix mozilla#256: Change popup width in overflow menu

With CustomizableUI.jsm (via the experimental `browser.customizableUI` API added in mozilla#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

@@ -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%;
 }
 

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} />

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;
+        },
       },
     };
   }

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."
+          }
+        ]
+      }
     ]
   }
 ]