Merge pull request #271 from biancadanforth/256-overflow-width

Fix #256: Change popup width in overflow menu

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

@@ -1,13 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-/* global ChromeUtils ExtensionAPI ExtensionCommon */
+/* global ChromeUtils ExtensionAPI */
 
 this.customizableUI = class extends ExtensionAPI {
   getAPI(context) {
-    ChromeUtils.import('resource://gre/modules/ExtensionCommon.jsm');
+    const {CustomizableUI} = ChromeUtils.import('resource:///modules/CustomizableUI.jsm');
+    const {ExtensionCommon} = ChromeUtils.import('resource://gre/modules/ExtensionCommon.jsm');
     const {EventManager} = ExtensionCommon;
-    const {CustomizableUI} = ChromeUtils.import('resource:///modules/CustomizableUI.jsm', {});
+    const {Services} = ChromeUtils.import('resource://gre/modules/Services.jsm');
     return {
       customizableUI: {
         onWidgetRemoved: new EventManager(
@@ -25,6 +26,15 @@ this.customizableUI = class extends ExtensionAPI {
             };
           },
         ).api(),
+        async isWidgetInOverflow(widgetId) {
+          const {area} = CustomizableUI.getPlacementOfWidget(widgetId);
+          const browserWindow = Services.wm.getMostRecentWindow('navigator:browser');
+          // First check is for the non-fixed overflow menu (e.g. widget moved by resizing window)
+          // Second is for fixed overflow menu (e.g. widget moved by (un)pinning button to overflow)
+          return (
+            CustomizableUI.getWidget(widgetId).forWindow(browserWindow).overflowed
+            || area === 'widget-overflow-fixed-list');
+        },
       },
     };
   }

src/experiment_apis/customizableUI/schema.json

@@ -5,7 +5,7 @@
       {
         "name": "onWidgetRemoved",
         "type": "function",
-        "description": "Fired when a widget is removed from the browser chrome",
+        "description": "Fired when a widget is removed from the browser chrome.",
         "parameters": [
           {
             "name": "widgetId",
@@ -14,6 +14,21 @@
           }
         ]
       }
+    ],
+    "functions": [
+      {
+        "name": "isWidgetInOverflow",
+        "type": "function",
+        "description": "Determine whether or not a widget is in the overflow menu.",
+        "async": true,
+        "parameters": [
+          {
+            "name": "widgetId",
+            "type": "string",
+            "description": "The id of the widget to check."
+          }
+        ]
+      }
     ]
   }
 ]