✅ Fix pageAction tests

pulse-browser · Apr 12, 2024 · 4d46a4a · 4d46a4a
1 parent 2abe83e
commit 4d46a4a
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 28 deletions.
diff --git a/apps/content/src/browser/components/PageAction.svelte b/apps/content/src/browser/components/PageAction.svelte
@@ -12,9 +12,15 @@
 
   /** @type {import('resource://app/modules/EPageActions.sys.mjs').PageActionImpl} */
   export let pageAction
+  /** @type {number} */
+  export let browserViewId
 
   const view = PageActionApi.setup(pageAction)
   const icons = PageActionApi.getIcons(view)
+  const extensionId = pageAction.extensionId
+    .replace('@', '')
+    .replace('}', '')
+    .replace('{', '')
   const trigger = view.trigger
   const panel = view.panel
 
@@ -45,7 +51,11 @@
   })
 </script>
 
-<UrlBoxButton bind:button={$trigger} on:click={PageActionApi.handleClick(view)}>
+<UrlBoxButton
+  bind:button={$trigger}
+  on:click={PageActionApi.handleClick(view)}
+  id={`page-action-icon__${extensionId}--${browserViewId}`}
+>
   {#if $icons}
     <img src={getIconUrlForPreferredSize($icons, 16)} />
   {:else}
@@ -54,7 +64,11 @@
 </UrlBoxButton>
 
 {#if pageAction.popupUrl}
-  <xul:panel bind:this={$panel} class="popup"></xul:panel>
+  <xul:panel
+    bind:this={$panel}
+    class="popup"
+    id={`page-action-panel__${extensionId}--${browserViewId}`}
+  ></xul:panel>
 {/if}
 
 <style>

diff --git a/apps/content/src/browser/components/UrlBox.svelte b/apps/content/src/browser/components/UrlBox.svelte
@@ -162,7 +162,9 @@
   />
 
   {#each $pageActions as [_, pageAction]}
-    <PageAction {pageAction} />
+    {#if $uri && pageAction.shouldShow($uri.asciiSpec, view.browserId || 0)}
+      <PageAction {pageAction} browserViewId={view.windowBrowserId} />
+    {/if}
   {/each}
 
   <div

diff --git a/apps/content/src/browser/components/UrlBoxButton.svelte b/apps/content/src/browser/components/UrlBoxButton.svelte
@@ -4,11 +4,13 @@
 
 <script>
   export let disabled = false
+  /** @type {string | undefined} */
+  export let id = undefined
   /** @type {HTMLButtonElement | undefined} */
   export let button = undefined
 </script>
 
-<button on:click bind:this={button} {disabled}>
+<button on:click bind:this={button} {disabled} {id}>
   <slot />
 </button>
 

diff --git a/apps/content/src/browser/components/pageAction.js b/apps/content/src/browser/components/pageAction.js
@@ -66,12 +66,13 @@ export function handleClick(view) {
       },
     })
 
-    await buildPanelBrowser(view)
     // Panel may not exist if there is no popupUrl
     const panel = view.panel()
     if (view.panel()) {
       panel.openPopup(view.trigger(), 'bottomright topright')
     }
+
+    await buildPanelBrowser(view)
   }
 }
 

diff --git a/apps/extensions/lib/parent/ext-pageAction.js b/apps/extensions/lib/parent/ext-pageAction.js
@@ -15,6 +15,7 @@ this.pageAction = class extends ExtensionAPIPersistent {
     const options = extension.manifest.page_action
 
     this.pageAction = new lazy.EPageActions.PageAction({
+      extensionId: extension.id,
       tooltip: options.default_title,
       popupUrl: options.default_popup,
       showMatches: options.show_matches,

diff --git a/apps/modules/lib/EPageActions.sys.mjs b/apps/modules/lib/EPageActions.sys.mjs
@@ -1,7 +1,6 @@
 /* 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/. */
-
 /// @ts-check
 /// <reference types="@browser/link" />
 import mitt from 'resource://app/modules/mitt.sys.mjs'
@@ -15,6 +14,7 @@ export class PageAction {
   /** @type {import('resource://app/modules/EPageActions.sys.mjs').PageActionImpl['events']} */
   events = mitt()
 
+  extensionId
   tooltip
   popupUrl
   showMatches
@@ -31,6 +31,7 @@ export class PageAction {
    * @param {import('resource://app/modules/EPageActions.sys.mjs').PageActionOptions<string[]>} data
    */
   constructor(data) {
+    this.extensionId = data.extensionId
     this.tooltip = data.tooltip
     this.popupUrl = data.popupUrl
     this.showMatches = new MatchPatternSet(data.showMatches || [])

diff --git a/apps/tests/integrations/extensions/pageAction.mjs b/apps/tests/integrations/extensions/pageAction.mjs
@@ -27,19 +27,6 @@ await TestManager.withBrowser('http://example.com/', async (window) => {
             show_matches: ['<all_urls>'],
           },
         },
-        async background() {
-          const { browser } = this
-
-          browser.test.assertTrue(true, 'True is true')
-          browser.test.assertEq(1, 1, 'EQ')
-          browser.test.log('log')
-          browser.test.sendMessage('msg')
-          browser.test.succeed('succeed')
-
-          browser.test.onMessage.addListener((msg) =>
-            setTimeout(() => browser.test.sendMessage(`${msg}:done`), 100),
-          )
-        },
         files: {
           'flask-line.svg': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.9994 2V4H14.9994V7.24291C14.9994 8.40051 15.2506 9.54432 15.7357 10.5954L20.017 19.8714C20.3641 20.6236 20.0358 21.5148 19.2836 21.8619C19.0865 21.9529 18.8721 22 18.655 22H5.34375C4.51532 22 3.84375 21.3284 3.84375 20.5C3.84375 20.2829 3.89085 20.0685 3.98181 19.8714L8.26306 10.5954C8.74816 9.54432 8.99939 8.40051 8.99939 7.24291V4H7.99939V2H15.9994ZM13.3873 10.0012H10.6115C10.5072 10.3644 10.3823 10.7221 10.2371 11.0724L10.079 11.4335L6.12439 20H17.8734L13.9198 11.4335C13.7054 10.9691 13.5276 10.4902 13.3873 10.0012ZM10.9994 7.24291C10.9994 7.49626 10.9898 7.7491 10.9706 8.00087H13.0282C13.0189 7.87982 13.0119 7.75852 13.0072 7.63704L12.9994 7.24291V4H10.9994V7.24291Z"></path></svg>`,
           'pageaction.html': `
@@ -60,11 +47,9 @@ await TestManager.withBrowser('http://example.com/', async (window) => {
     )
 
     await extension.startup()
+    await new Promise((res) => setTimeout(res, 100))
 
-    extension.sendMsg('test')
-    await extension.awaitMsg('test:done')
-
-    const pageActionId = `page-action-icon--${extension.extension.id}`
+    const pageActionId = `page-action-icon__${extension.extension.id}--0`
       .replace('@', '')
       .replace('}', '')
       .replace('{', '')
@@ -74,10 +59,11 @@ await TestManager.withBrowser('http://example.com/', async (window) => {
     await test.test('Page Action - Panel', async (test) => {
       pageActionButton?.click()
 
-      const pageActionPanelId = `page-action-panel--${extension.extension.id}`
-        .replace('@', '')
-        .replace('}', '')
-        .replace('{', '')
+      const pageActionPanelId =
+        `page-action-panel__${extension.extension.id}--0`
+          .replace('@', '')
+          .replace('}', '')
+          .replace('{', '')
       const pageActionPanel = window.document.getElementById(pageActionPanelId)
       test.truthy(pageActionPanel, 'The panel has opened')
 

diff --git a/libs/link/types/modules/EPageActions.d.ts b/libs/link/types/modules/EPageActions.d.ts
@@ -28,6 +28,8 @@ declare module 'resource://app/modules/EPageActions.sys.mjs' {
    *       power users, we might want to implement `pinned`
    */
   export interface PageActionOptions<PS = MatchPatternSet> {
+    extensionId?: string
+
     /**
      * The tooltip displayed when the user hovers over the action button.
      *

diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
     "lint": "eslint .",
     "format": "pnpm lint && pnpm script:license-check --fix && prettier . --write --plugin prettier-plugin-svelte",
     "data": "concurrently -c auto pnpm:data:*",
-    "data:tld": "wget https://data.iana.org/TLD/tlds-alpha-by-domain.txt -O ./apps/content/src/browser/data/tld.txt"
+    "data:tld": "wget https://data.iana.org/TLD/tlds-alpha-by-domain.txt -O ./apps/content/src/browser/data/tld.txt",
+    "test": "pnpm script:unit-test"
   },
   "keywords": [],
   "author": "",