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