feat: browser action list positioning (#115)

* feat: browser action list positioning

* readme updated

* alignment property change

* revise docs

---------

Co-authored-by: Samuel Maddock <[email protected]>

Author: haydncomley

packages/electron-chrome-extensions/README.md

@@ -215,6 +215,7 @@ To enable the element on a webpage, you must define a preload script which injec
 - `partition` string (optional) - The `Electron.Session` partition which extensions are loaded in. Defaults to the session in which `<browser-action-list>` lives.
 - `tab` string (optional) - The tab's `Electron.WebContents` ID to use for displaying
   the relevant browser action state. Defaults to the active tab of the current browser window.
+- `alignment` string (optional) - How the popup window should be aligned relative to the extension action. Defaults to `bottom left`. Use any assortment of `top`, `bottom`, `left`, and `right`.
 
 #### Browser action example
 
@@ -246,6 +247,10 @@ Add the `<browser-action-list>` element with attributes appropriate for your app
 
 <!-- Show actions for custom session and a specific tab of current window. -->
 <browser-action-list partition="persist:custom" tab="1"></browser-action-list>
+
+<!-- If extensions are displayed in the bottom left of your browser UI, then
+     you can align the popup to the top right of the extension action. -->
+<browser-action-list alignment="top right"></browser-action-list>
 ```
 
 ##### Custom CSS

packages/electron-chrome-extensions/src/browser-action.ts

@@ -19,6 +19,7 @@ export const injectBrowserAction = () => {
     extensionId: string
     tabId: number
     anchorRect: { x: number; y: number; width: number; height: number }
+    alignment?: string
   }
 
   const __browserAction__ = {
@@ -115,8 +116,16 @@ export const injectBrowserAction = () => {
         }
       }
 
+      get alignment(): string {
+        return this.getAttribute('alignment') || ''
+      }
+
+      set alignment(alignment: string) {
+        this.setAttribute('alignment', alignment)
+      }
+
       static get observedAttributes() {
-        return ['id', 'tab', 'partition']
+        return ['id', 'tab', 'partition', 'alignment']
       }
 
       constructor() {
@@ -156,6 +165,7 @@ export const injectBrowserAction = () => {
           eventType: event.type,
           extensionId: this.id,
           tabId: this.tab,
+          alignment: this.alignment,
           anchorRect: {
             x: rect.left,
             y: rect.top,
@@ -280,8 +290,16 @@ export const injectBrowserAction = () => {
         }
       }
 
+      get alignment(): string {
+        return this.getAttribute('alignment') || ''
+      }
+
+      set alignment(alignment: string) {
+        this.setAttribute('alignment', alignment)
+      }
+
       static get observedAttributes() {
-        return ['tab', 'partition']
+        return ['tab', 'partition', 'alignment']
       }
 
       constructor() {
@@ -413,12 +431,14 @@ export const injectBrowserAction = () => {
             }) as BrowserActionElement
             node.id = action.id
             node.className = 'action'
+            ;(node as any).alignment = this.alignment
             ;(node as any).part = 'action'
             browserActionNode = node
             this.shadowRoot?.appendChild(browserActionNode)
           }
 
           if (this.partition) browserActionNode.partition = this.partition
+          if (this.alignment) browserActionNode.alignment = this.alignment
           browserActionNode.tab = tabId
         }
 

packages/electron-chrome-extensions/src/browser/api/browser-action.ts

@@ -35,6 +35,7 @@ interface ActivateDetails {
   extensionId: string
   tabId: number
   anchorRect: { x: number; y: number; width: number; height: number }
+  alignment?: string
 }
 
 const getBrowserActionDefaults = (extension: Electron.Extension): ExtensionAction | undefined => {
@@ -391,7 +392,7 @@ export class BrowserActionAPI {
   }
 
   private activateClick(details: ActivateDetails) {
-    const { extensionId, tabId, anchorRect } = details
+    const { extensionId, tabId, anchorRect, alignment } = details
 
     if (this.popup) {
       const toggleExtension = !this.popup.isDestroyed() && this.popup.extensionId === extensionId
@@ -423,6 +424,7 @@ export class BrowserActionAPI {
         parent: win,
         url: popupUrl,
         anchorRect,
+        alignment,
       })
 
       d(`opened popup: ${popupUrl}`)

packages/electron-chrome-extensions/src/browser/popup.ts

@@ -17,6 +17,7 @@ interface PopupViewOptions {
   parent: Electron.BaseWindow
   url: string
   anchorRect: PopupAnchorRect
+  alignment?: string
 }
 
 const supportsPreferredSize = () => {
@@ -41,6 +42,7 @@ export class PopupView {
   private anchorRect: PopupAnchorRect
   private destroyed: boolean = false
   private hidden: boolean = true
+  private alignment?: string
 
   /** Preferred size changes are only received in Electron v12+ */
   private usingPreferredSize = supportsPreferredSize()
@@ -51,6 +53,7 @@ export class PopupView {
     this.parent = opts.parent
     this.extensionId = opts.extensionId
     this.anchorRect = opts.anchorRect
+    this.alignment = opts.alignment
 
     this.browserWindow = new BrowserWindow({
       show: false,
@@ -201,10 +204,14 @@ export class PopupView {
     const winBounds = this.parent.getBounds()
     const viewBounds = this.browserWindow.getBounds()
 
-    // TODO: support more orientations than just top-right
     let x = winBounds.x + this.anchorRect.x + this.anchorRect.width - viewBounds.width
     let y = winBounds.y + this.anchorRect.y + this.anchorRect.height + PopupView.POSITION_PADDING
 
+    // If aligned to a differently then we need to offset the popup position
+    if (this.alignment?.includes('right')) x = winBounds.x + this.anchorRect.x
+    if (this.alignment?.includes('top'))
+      y = winBounds.y - viewBounds.height + this.anchorRect.y - PopupView.POSITION_PADDING
+
     // Convert to ints
     x = Math.floor(x)
     y = Math.floor(y)

packages/shell/browser/ui/webui.html

@@ -244,7 +244,7 @@
         <div class="address-bar">
           <input id="addressurl" spellcheck="false" />
         </div>
-        <browser-action-list id="actions"></browser-action-list>
+        <browser-action-list id="actions" alignment="bottom left"></browser-action-list>
       </div>
     </div>
   </div>