split foreground and background api

packages/taler-wallet-webextension/src/background.dev.ts

@@ -23,7 +23,7 @@
 /**
  * Imports.
  */
-import { platform, setupPlatform } from "./platform/api.js";
+import { platform, setupPlatform } from "./platform/background.js";
 import devAPI from "./platform/dev.js";
 import { wxMain } from "./wxBackend.js";
 

packages/taler-wallet-webextension/src/background.ts

@@ -23,7 +23,7 @@
 /**
  * Imports.
  */
-import { platform, setupPlatform } from "./platform/api.js";
+import { platform, setupPlatform } from "./platform/background.js";
 import chromeAPI from "./platform/chrome.js";
 import firefoxAPI from "./platform/firefox.js";
 import { wxMain } from "./wxBackend.js";

packages/taler-wallet-webextension/src/chromeBadge.ts

@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { platform } from "./platform/api.js";
+import { platform } from "./platform/background.js";
 
 /**
  * Polyfill for requestAnimationFrame, which

packages/taler-wallet-webextension/src/context/iocContext.ts

@@ -21,7 +21,7 @@
 
 import { createContext, h, VNode } from "preact";
 import { useContext } from "preact/hooks";
-import { platform } from "../platform/api.js";
+import { platform } from "../platform/foreground.js";
 
 interface Type {
   findTalerUriInActiveTab: () => Promise<string | undefined>;

packages/taler-wallet-webextension/src/hooks/useAutoOpenPermissions.ts

@@ -18,7 +18,7 @@ import { TalerError } from "@gnu-taler/taler-wallet-core";
 import { useEffect, useState } from "preact/hooks";
 import { useBackendContext } from "../context/backend.js";
 import { ToggleHandler } from "../mui/handlers.js";
-import { platform } from "../platform/api.js";
+import { platform } from "../platform/foreground.js";
 
 export function useAutoOpenPermissions(): ToggleHandler {
   const api = useBackendContext();

packages/taler-wallet-webextension/src/hooks/useClipboardPermissions.ts

@@ -18,7 +18,7 @@ import { TalerError } from "@gnu-taler/taler-wallet-core";
 import { useEffect, useState } from "preact/hooks";
 import { useBackendContext } from "../context/backend.js";
 import { ToggleHandler } from "../mui/handlers.js";
-import { platform } from "../platform/api.js";
+import { platform } from "../platform/foreground.js";
 
 export function useClipboardPermissions(): ToggleHandler {
   const [enabled, setEnabled] = useState(false);

packages/taler-wallet-webextension/src/platform/api.ts

@@ -85,7 +85,7 @@ export interface WalletWebExVersion {
  * Compatibility helpers needed for browsers that don't implement
  * WebExtension APIs consistently.
  */
-export interface PlatformAPI {
+export interface BackgroundPlatformAPI {
   /**
    * Guarantee that the service workers don't die
    */
@@ -97,61 +97,35 @@ export interface PlatformAPI {
    */
   isFirefox(): boolean;
 
-  /**
+  registerOnInstalled(callback: () => void): void;
-   * Permission API for checking and add a listener
-   */
-  getPermissionsApi(): CrossBrowserPermissionsApi;
 
   /**
-   * Backend API
+   *
+   * Check if background process run as service worker. This is used from the
+   * wallet use different http api and crypto worker.
+   */
+  useServiceWorkerAsBackgroundProcess(): boolean;
+  /**
+   *
+   * Open a page into the wallet UI
+   * @param page
+   */
+  openWalletPage(page: string): void;
+  /**
    *
    * Register a callback to be called when the wallet is ready to start
    * @param callback
    */
   notifyWhenAppIsReady(callback: () => void): void;
 
-  /**
-   * Popup API
-   *
-   * Used when an TalerURI is found and open up from the popup UI.
-   * Closes the popup and open the URI into the wallet UI.
-   *
-   * @param talerUri
-   */
-  openWalletURIFromPopup(talerUri: string): void;
-
-  /**
-   * Backend API
-   *
-   * Open a page into the wallet UI
-   * @param page
-   */
-  openWalletPage(page: string): void;
-
-  /**
-   * Popup API
-   *
-   * Open a page into the wallet UI and closed the popup
-   * @param page
-   */
-  openWalletPageFromPopup(page: string): void;
-
-  /**
-   * Backend API
-   *
-   * When a tab has been detected to have a Taler action the background process
-   * can use this function to redirect the tab to the wallet UI
-   *
-   * @param tabId
-   * @param page
-   */
-  redirectTabToWalletPage(tabId: number, page: string): void;
-
   /**
    * Get the wallet version from manifest
    */
   getWalletWebExVersion(): WalletWebExVersion;
-
+  /**
+   * Frontend API
+   */
+  containsTalerHeaderListener(): boolean;
   /**
    * Backend API
    */
@@ -166,22 +140,75 @@ export interface PlatformAPI {
   registerTalerHeaderListener(
     onHeader: (tabId: number, url: string) => void,
   ): void;
+
   /**
-   * Frontend API
+   * Permission API for checking and add a listener
    */
-  containsTalerHeaderListener(): boolean;
+  getPermissionsApi(): CrossBrowserPermissionsApi;
   /**
-   * Backend API
+ * Used by the wallet backend to send notification about new information
-   */
+ * @param message
-  registerOnInstalled(callback: () => void): void;
+ */
+  sendMessageToAllChannels(message: MessageFromBackend): void;
 
   /**
    * Backend API
    *
-   * Check if background process run as service worker. This is used from the
+   * When a tab has been detected to have a Taler action the background process
-   * wallet use different http api and crypto worker.
+   * can use this function to redirect the tab to the wallet UI
+   *
+   * @param tabId
+   * @param page
    */
-  useServiceWorkerAsBackgroundProcess(): boolean;
+  redirectTabToWalletPage(tabId: number, page: string): void;
+  /**
+   * Use by the wallet backend to receive operations from frontend (popup & wallet)
+   * and send a response back.
+   *
+   * @param onNewMessage
+   */
+  listenToAllChannels(
+    notifyNewMessage: <Op extends WalletOperations | BackgroundOperations>(
+      message: MessageFromFrontend<Op> & { id: string },
+    ) => Promise<MessageResponse>,
+  ): void;
+}
+export interface ForegroundPlatformAPI {
+  /**
+   * FIXME: should not be needed
+   *
+   * check if the platform is firefox
+   */
+  isFirefox(): boolean;
+
+  /**
+   * Permission API for checking and add a listener
+   */
+  getPermissionsApi(): CrossBrowserPermissionsApi;
+
+  /**
+   * Popup API
+   *
+   * Used when an TalerURI is found and open up from the popup UI.
+   * Closes the popup and open the URI into the wallet UI.
+   *
+   * @param talerUri
+   */
+  openWalletURIFromPopup(talerUri: string): void;
+
+
+  /**
+   * Popup API
+   *
+   * Open a page into the wallet UI and closed the popup
+   * @param page
+   */
+  openWalletPageFromPopup(page: string): void;
+
+  /**
+   * Get the wallet version from manifest
+   */
+  getWalletWebExVersion(): WalletWebExVersion;
 
   /**
    * Popup API
@@ -222,26 +249,4 @@ export interface PlatformAPI {
     listener: (message: MessageFromBackend) => void,
   ): () => void;
 
-  /**
-   * Use by the wallet backend to receive operations from frontend (popup & wallet)
-   * and send a response back.
-   *
-   * @param onNewMessage
-   */
-  listenToAllChannels(
-    notifyNewMessage: <Op extends WalletOperations | BackgroundOperations>(
-      message: MessageFromFrontend<Op> & { id: string },
-    ) => Promise<MessageResponse>,
-  ): void;
-
-  /**
-   * Used by the wallet backend to send notification about new information
-   * @param message
-   */
-  sendMessageToAllChannels(message: MessageFromBackend): void;
-}
-
-export let platform: PlatformAPI = undefined as any;
-export function setupPlatform(impl: PlatformAPI): void {
-  platform = impl;
 }

packages/taler-wallet-webextension/src/platform/background.ts

@@ -0,0 +1,22 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { BackgroundPlatformAPI } from "./api.js";
+
+export let platform: BackgroundPlatformAPI = undefined as any;
+export function setupPlatform(impl: BackgroundPlatformAPI): void {
+  platform = impl;
+}

packages/taler-wallet-webextension/src/platform/chrome.ts

@@ -15,23 +15,19 @@
  */
 
 import {
-  classifyTalerUri,
+  classifyTalerUri, Logger,
-  CoreApiResponse,
+  TalerUriType
-  Logger,
-  TalerUriType,
 } from "@gnu-taler/taler-util";
 import { WalletOperations } from "@gnu-taler/taler-wallet-core";
 import { BackgroundOperations } from "../wxApi.js";
 import {
-  CrossBrowserPermissionsApi,
+  BackgroundPlatformAPI, CrossBrowserPermissionsApi, ForegroundPlatformAPI, MessageFromBackend,
-  MessageFromBackend,
   MessageFromFrontend,
   MessageResponse,
-  Permissions,
+  Permissions
-  PlatformAPI,
 } from "./api.js";
 
-const api: PlatformAPI = {
+const api: BackgroundPlatformAPI & ForegroundPlatformAPI = {
   isFirefox,
   findTalerUriInActiveTab,
   findTalerUriInClipboard,
@@ -310,16 +306,28 @@ function openWalletPageFromPopup(page: string): void {
   });
 }
 
-let i = 0;
 
+let nextMessageIndex = 0;
+
+/**
+ * To be used by the foreground
+ * @param message 
+ * @returns 
+ */
 async function sendMessageToBackground<
   Op extends WalletOperations | BackgroundOperations,
 >(message: MessageFromFrontend<Op>): Promise<MessageResponse> {
-  const messageWithId = { ...message, id: `id_${i++ % 1000}` };
+  const messageWithId = { ...message, id: `id_${nextMessageIndex++ % 1000}` };
 
   return new Promise<any>((resolve, reject) => {
     logger.trace("send operation to the wallet background", message);
+    let timedout = false
+    setTimeout(() => {
+      timedout = true
+      reject("timedout")
+    }, 2000);
     chrome.runtime.sendMessage(messageWithId, (backgroundResponse) => {
+      if (timedout) return false
       if (chrome.runtime.lastError) {
         reject(chrome.runtime.lastError.message);
       } else {
@@ -331,6 +339,9 @@ async function sendMessageToBackground<
   });
 }
 
+/**
+ * To be used by the foreground
+ */
 let notificationPort: chrome.runtime.Port | undefined;
 function listenToWalletBackground(listener: (m: any) => void): () => void {
   if (notificationPort === undefined) {
@@ -347,6 +358,7 @@ function listenToWalletBackground(listener: (m: any) => void): () => void {
 
 const allPorts: chrome.runtime.Port[] = [];
 
+
 function sendMessageToAllChannels(message: MessageFromBackend): void {
   for (const notif of allPorts) {
     // const message: MessageFromBackend = { type: msg.type };
@@ -566,26 +578,26 @@ function setAlertedIcon(): void {
 
 interface OffscreenCanvasRenderingContext2D
   extends CanvasState,
-    CanvasTransform,
+  CanvasTransform,
-    CanvasCompositing,
+  CanvasCompositing,
-    CanvasImageSmoothing,
+  CanvasImageSmoothing,
-    CanvasFillStrokeStyles,
+  CanvasFillStrokeStyles,
-    CanvasShadowStyles,
+  CanvasShadowStyles,
-    CanvasFilters,
+  CanvasFilters,
-    CanvasRect,
+  CanvasRect,
-    CanvasDrawPath,
+  CanvasDrawPath,
-    CanvasUserInterface,
+  CanvasUserInterface,
-    CanvasText,
+  CanvasText,
-    CanvasDrawImage,
+  CanvasDrawImage,
-    CanvasImageData,
+  CanvasImageData,
-    CanvasPathDrawingStyles,
+  CanvasPathDrawingStyles,
-    CanvasTextDrawingStyles,
+  CanvasTextDrawingStyles,
-    CanvasPath {
+  CanvasPath {
   readonly canvas: OffscreenCanvas;
 }
 declare const OffscreenCanvasRenderingContext2D: {
   prototype: OffscreenCanvasRenderingContext2D;
-  new (): OffscreenCanvasRenderingContext2D;
+  new(): OffscreenCanvasRenderingContext2D;
 };
 
 interface OffscreenCanvas extends EventTarget {
@@ -598,7 +610,7 @@ interface OffscreenCanvas extends EventTarget {
 }
 declare const OffscreenCanvas: {
   prototype: OffscreenCanvas;
-  new (width: number, height: number): OffscreenCanvas;
+  new(width: number, height: number): OffscreenCanvas;
 };
 
 function createCanvas(size: number): OffscreenCanvas {

packages/taler-wallet-webextension/src/platform/dev.ts

@@ -18,15 +18,16 @@ import { CoreApiResponse } from "@gnu-taler/taler-util";
 import { WalletOperations } from "@gnu-taler/taler-wallet-core";
 import { BackgroundOperations } from "../wxApi.js";
 import {
+  BackgroundPlatformAPI,
+  ForegroundPlatformAPI,
   MessageFromBackend,
   MessageFromFrontend,
   MessageResponse,
-  PlatformAPI,
 } from "./api.js";
 
 const frames = ["popup", "wallet"];
 
-const api: PlatformAPI = {
+const api: BackgroundPlatformAPI & ForegroundPlatformAPI = {
   isFirefox: () => false,
   keepAlive: (cb: VoidFunction) => cb(),
   findTalerUriInActiveTab: async () => undefined,

packages/taler-wallet-webextension/src/platform/firefox.ts

@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { CrossBrowserPermissionsApi, Permissions, PlatformAPI } from "./api.js";
+import { BackgroundPlatformAPI, CrossBrowserPermissionsApi, ForegroundPlatformAPI, Permissions } from "./api.js";
 import chromePlatform, {
   containsHostPermissions as chromeHostContains,
   removeHostPermissions as chromeHostRemove,
@@ -24,7 +24,7 @@ import chromePlatform, {
   requestClipboardPermissions as chromeClipRequest,
 } from "./chrome.js";
 
-const api: PlatformAPI = {
+const api: BackgroundPlatformAPI & ForegroundPlatformAPI = {
   ...chromePlatform,
   isFirefox,
   getPermissionsApi,

packages/taler-wallet-webextension/src/platform/foreground.ts

@@ -0,0 +1,22 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { ForegroundPlatformAPI } from "./api.js";
+
+export let platform: ForegroundPlatformAPI = undefined as any;
+export function setupPlatform(impl: ForegroundPlatformAPI): void {
+  platform = impl;
+}

packages/taler-wallet-webextension/src/popup/Application.tsx

@@ -35,7 +35,7 @@ import {
 } from "../context/translation.js";
 import { useTalerActionURL } from "../hooks/useTalerActionURL.js";
 import { PopupNavBarOptions, Pages, PopupNavBar } from "../NavigationBar.js";
-import { platform } from "../platform/api.js";
+import { platform } from "../platform/foreground.js";
 import { BackupPage } from "../wallet/BackupPage.js";
 import { ProviderDetailPage } from "../wallet/ProviderDetailPage.js";
 import { BalancePage } from "./BalancePage.js";

packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx

@@ -24,7 +24,7 @@ import { Fragment, h, VNode } from "preact";
 import { Title } from "../components/styled/index.js";
 import { useTranslationContext } from "../context/translation.js";
 import { Button } from "../mui/Button.js";
-import { platform } from "../platform/api.js";
+import { platform } from "../platform/foreground.js";
 
 export interface Props {
   url: string;

packages/taler-wallet-webextension/src/popupEntryPoint.dev.tsx

@@ -23,7 +23,7 @@
 import { setupI18n } from "@gnu-taler/taler-util";
 import { h, render } from "preact";
 import { strings } from "./i18n/strings.js";
-import { setupPlatform } from "./platform/api.js";
+import { setupPlatform } from "./platform/foreground.js";
 import devAPI from "./platform/dev.js";
 import { Application } from "./popup/Application.js";
 

packages/taler-wallet-webextension/src/popupEntryPoint.tsx

@@ -23,7 +23,7 @@
 import { setupI18n } from "@gnu-taler/taler-util";
 import { h, render } from "preact";
 import { strings } from "./i18n/strings.js";
-import { setupPlatform } from "./platform/api.js";
+import { setupPlatform } from "./platform/foreground.js";
 import chromeAPI from "./platform/chrome.js";
 import firefoxAPI from "./platform/firefox.js";
 import { Application } from "./popup/Application.js";

packages/taler-wallet-webextension/src/stories.test.ts

@@ -20,7 +20,7 @@
  */
 import { setupI18n } from "@gnu-taler/taler-util";
 import { parseGroupImport } from "@gnu-taler/web-util/lib/index.browser";
-import { setupPlatform } from "./platform/api.js";
+import { setupPlatform } from "./platform/foreground.js";
 import chromeAPI from "./platform/chrome.js";
 import { renderNodeOrBrowser } from "./test-utils.js";
 

packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx

@@ -16,7 +16,7 @@
 import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { platform } from "../platform/api.js";
+import { platform } from "../platform/foreground.js";
 import { InputWithLabel } from "../components/styled/index.js";
 import { useTranslationContext } from "../context/translation.js";
 import { Button } from "../mui/Button.js";

packages/taler-wallet-webextension/src/wallet/Application.tsx

@@ -52,7 +52,7 @@ import {
   WithdrawPageFromURI,
 } from "../cta/Withdraw/index.js";
 import { WalletNavBarOptions, Pages, WalletNavBar } from "../NavigationBar.js";
-import { platform } from "../platform/api.js";
+import { platform } from "../platform/foreground.js";
 import { AddBackupProviderPage } from "./AddBackupProvider/index.js";
 import { BackupPage } from "./BackupPage.js";
 import { DepositPage } from "./DepositPage/index.js";

packages/taler-wallet-webextension/src/wallet/Settings.tsx

@@ -43,7 +43,7 @@ import { useBackupDeviceName } from "../hooks/useBackupDeviceName.js";
 import { useClipboardPermissions } from "../hooks/useClipboardPermissions.js";
 import { ToggleHandler } from "../mui/handlers.js";
 import { Pages } from "../NavigationBar.js";
-import { platform } from "../platform/api.js";
+import { platform } from "../platform/foreground.js";
 
 const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
 

packages/taler-wallet-webextension/src/wallet/Welcome.tsx

@@ -28,7 +28,7 @@ import { useTranslationContext } from "../context/translation.js";
 import { useDiagnostics } from "../hooks/useDiagnostics.js";
 import { useAutoOpenPermissions } from "../hooks/useAutoOpenPermissions.js";
 import { ToggleHandler } from "../mui/handlers.js";
-import { platform } from "../platform/api.js";
+import { platform } from "../platform/foreground.js";
 
 export function WelcomePage(): VNode {
   const permissionToggle = useAutoOpenPermissions();

packages/taler-wallet-webextension/src/walletEntryPoint.dev.tsx

@@ -23,7 +23,7 @@
 import { setupI18n } from "@gnu-taler/taler-util";
 import { h, render } from "preact";
 import { strings } from "./i18n/strings.js";
-import { setupPlatform } from "./platform/api.js";
+import { setupPlatform } from "./platform/foreground.js";
 import devAPI from "./platform/dev.js";
 import { Application } from "./wallet/Application.js";
 

packages/taler-wallet-webextension/src/walletEntryPoint.tsx

@@ -23,7 +23,7 @@
 import { setupI18n } from "@gnu-taler/taler-util";
 import { h, render } from "preact";
 import { strings } from "./i18n/strings.js";
-import { setupPlatform } from "./platform/api.js";
+import { setupPlatform } from "./platform/foreground.js";
 import chromeAPI from "./platform/chrome.js";
 import firefoxAPI from "./platform/firefox.js";
 import { Application } from "./wallet/Application.js";

packages/taler-wallet-webextension/src/wxApi.ts

@@ -34,12 +34,10 @@ import {
   WalletCoreRequestType,
   WalletCoreResponseType,
 } from "@gnu-taler/taler-wallet-core";
+import { MessageFromBackend, MessageFromFrontendBackground, MessageFromFrontendWallet } from "./platform/api.js";
 import {
-  MessageFromBackend,
-  MessageFromFrontendBackground,
-  MessageFromFrontendWallet,
   platform,
-} from "./platform/api.js";
+} from "./platform/foreground.js";
 
 /**
  *

packages/taler-wallet-webextension/src/wxBackend.ts

@@ -46,11 +46,13 @@ import {
   WalletStoresV1,
 } from "@gnu-taler/taler-wallet-core";
 import { BrowserHttpLib } from "./browserHttpLib.js";
+import {
+  platform,
+} from "./platform/background.js";
 import {
   MessageFromBackend,
   MessageFromFrontend,
   MessageResponse,
-  platform,
 } from "./platform/api.js";
 import { SynchronousCryptoWorkerFactory } from "./serviceWorkerCryptoWorkerFactory.js";
 import { ServiceWorkerHttpLib } from "./serviceWorkerHttpLib.js";