Native messaging

.github/deploy-tag.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+cd extension
+mv manifest.json{,.bak}
+< manifest.json.bak \
+sed -r 's/"version": ".+"/"version": "'$(echo "$GITHUB_REF_NAME" | sed -r 's/^(.+\/)?v(.+)$/\2/')'"/' \
+| sed 's/"version_name": ".+"/"version_name": "'"$GITHUB_SHA"'"/' \
+> manifest.json

.github/deploy-wasm.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+WASM_BASE=$1/bergamot-translator-worker
+WASM_BIN=$WASM_BASE.wasm
+WASM_JS=$WASM_BASE.js
+
+{
+	echo -e "function loadEmscriptenGlueCode(Module) {\n"
+	sed -r 's/^(.+)$/    \1/g' < $WASM_JS | sed -e 's/[[:space:]]*$//'
+	echo -n -e "\n\n  return { addOnPreMain, Module };\n}"
+} > extension/controller/translation/bergamot-translator-worker.js
+
+mv $WASM_BIN extension/controller/translation/bergamot-translator-worker.wasm

.github/workflows/publish_artifact.yml

@@ -1,26 +1,158 @@
-name: Publish release on tag
+name: Build release
+
 on:
   push:
+    branches:
+      - main
     tags:
       - "v*.*.*"
+  pull_request:
+    branches:
+      - main
+
+env:
+  emsdk_version: 2.0.9 # For use in emscripten build
+  ccache_basedir: ${{ github.workspace }}
+  ccache_dir: "${{ github.workspace }}/.ccache"
+  ccache_compilercheck: content
+  ccache_compress: 'true'
+  ccache_compresslevel: 9
+  ccache_maxsize: 200M
+  ccache_cmake: -DCMAKE_CXX_COMPILER_LAUNCHER=ccache -DCMAKE_C_COMPILER_LAUNCHER=ccache
 
 jobs:
-  build:
+  build-wasm:
+    name: "emscripten"
     runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          submodules: recursive
+      - name: Set ccache environment for emcc
+        run: |
+          # We are hardcoding this to mtime instead of env pickup. Rest use content.
+          echo "CCACHE_COMPILER_CHECK=mtime" >> $GITHUB_ENV
+          echo "CCACHE_BASEDIR=${{ env.ccache_basedir }}" >> $GITHUB_ENV
+          echo "CCACHE_COMPRESS=${{ env.ccache_compress }}" >> $GITHUB_ENV
+          echo "CCACHE_COMPRESSLEVEL=${{ env.ccache_compresslevel }}" >> $GITHUB_ENV
+          echo "CCACHE_DIR=${{ env.ccache_dir }}" >> $GITHUB_ENV
+          echo "CCACHE_MAXSIZE=${{ env.ccache_maxsize }}" >> $GITHUB_ENV
+          # https://emscripten.org/docs/compiling/Building-Projects.html#using-a-compiler-wrapper
+          echo "EM_COMPILER_WRAPPER=ccache" >> $GITHUB_ENV
+      - name: Generate ccache_vars for ccache based on machine
+        shell: bash
+        id: ccache_vars
+        run: |-
+          echo "::set-output name=hash::$(echo ${{ env.ccache_compilercheck }})"
+          echo "::set-output name=timestamp::$(date '+%Y-%m-%dT%H.%M.%S')"
+      # This need to be run before setup, so ccache build caching doesn't complain.
+      - name: Obtain emsdk sources
+        run: |
+            git clone --depth 1 https://github.com/emscripten-core/emsdk.git
+      - name: Cache-op for build-cache through ccache
+        uses: actions/cache@v2
+        with:
+          path: |
+             ${{ env.ccache_dir }}
+             ${{ github.workspace }}/emsdk/ccache/git-emscripten_64bit/
+          key: ccache-${{ github.job }}-${{ env.emsdk_version }}-${{ steps.ccache_vars.outputs.hash }}-${{ github.ref }}-${{ steps.ccache_vars.outputs.timestamp }}
+          restore-keys: |-
+            ccache-${{ github.job }}-${{ env.emsdk_version }}-${{ steps.ccache_vars.outputs.hash }}-${{ github.ref }}
+            ccache-${{ github.job }}-${{ env.emsdk_version }}-${{ steps.ccache_vars.outputs.hash }}
+            ccache-${{ github.job }}-${{ env.emsdk_version }}
+      - name: Setup Emscripten toolchain
+        run: |
+            (cd emsdk && ./emsdk install ${{ env.emsdk_version }} ccache-git-emscripten-64bit)
+            (cd emsdk && ./emsdk activate ${{ env.emsdk_version }} ccache-git-emscripten-64bit)
+            # mtime of this file is checked by ccache, we set it to avoid cache misses.
+            touch -m -d '1 Jan 2021 12:00' emsdk/.emscripten
+            # These needs to be done in the activated shell.
+            eval $(./emsdk/emsdk construct_env \
+                | sed 's/export PATH=\(.*\);/echo \1 >> $GITHUB_PATH;/' \
+                | sed 's/export \(.*\);/echo \1 >> $GITHUB_ENV;/' );
+            # This looks more permanent than version pinned, so keeping temporarily to avoid failures.
+            echo "${{ github.workspace }}/emsdk/ccache/git-emscripten_64bit/bin" >> $GITHUB_PATH
+      - name: Verify Emscripten setup
+        run: |
+            emcc --version
+            emcmake cmake --version
+            emmake make --version
+      - name: ccache prolog
+        run: |-
+          ccache -s # Print current cache stats
+          ccache -z # Zero cache entry
+      # WORMHOLE=off
+      - name: "Configure builds for WORMHOLE=off"
+        working-directory: bergamot-translator
+        run: |
+          mkdir -p build-wasm-without-wormhole
+          cd build-wasm-without-wormhole
+          emcmake cmake -DCOMPILE_WASM=on -DWORMHOLE=off ..
+      - name: "Compile with WORMHOLE=off"
+        working-directory: bergamot-translator/build-wasm-without-wormhole
+        run: |
+          emmake make -j2
+      - name: ccache epilog
+        run: |
+          ccache -s # Print current cache stats
+      - name: Import GEMM library from a separate wasm module
+        working-directory: bergamot-translator/build-wasm-without-wormhole
+        run: bash ../wasm/patch-artifacts-import-gemm-module.sh
+      - name: Upload wasm artifact
+        uses: actions/upload-artifact@v2
+        with:
+          name: wasm-artefacts
+          if-no-files-found: error
+          path: |
+              # Without wormhole
+              ${{github.workspace}}/bergamot-translator/build-wasm-without-wormhole/bergamot-translator-worker.js
+              ${{github.workspace}}/bergamot-translator/build-wasm-without-wormhole/bergamot-translator-worker.wasm
+
+  build-extension:
+    runs-on: ubuntu-latest
+    needs:
+      - build-wasm
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
           node-version: '17.x'
+      - name: Download wasm build
+        uses: actions/download-artifact@v2
+      - name: Import wasm build
+        run: bash .github/deploy-wasm.sh wasm-artefacts
+      - name: Write version number
+        if: startsWith(github.ref, 'refs/tags/v')
+        run: bash .github/deploy-tag.sh
       - name: Install dependencies
         run: npm install
       - name: Run linter
         run: npm run lint:js
+        continue-on-error: true
       - name: Build
-        run: npm run build        
+        run: npm run build
+      - name: Update GitHub prerelease
+        uses: marvinpinto/action-automatic-releases@latest
+        with:
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          automatic_release_tag: development-latest
+          prerelease: true
+          title: "Latest Development Build"
+          files: |
+            ./web-ext-artifacts/bergamot_translations.xpi
+      - name: Sign
+        if: startsWith(github.ref, 'refs/tags/v')
+        env:
+          WEB_EXT_API_KEY: ${{ secrets.WEB_EXT_API_KEY }}
+          WEB_EXT_API_SECRET: ${{ secrets.WEB_EXT_API_SECRET }}
+        run: |
+          npm run sign
+          mv web-ext-artifacts/experimental_bergamot_translations-*.xpi web-ext-artifacts/bergamot_translations-signed.xpi
       - name: Create Release
         id: create_release
+        if: startsWith(github.ref, 'refs/tags/v')
         uses: actions/create-release@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -29,13 +161,13 @@ jobs:
           release_name: Release ${{ github.ref }}
           draft: false
           prerelease: true
-      - name: Upload Release Asset
-        id: upload-release-asset 
+      - name: Upload extension
+        if: startsWith(github.ref, 'refs/tags/v')
         uses: actions/upload-release-asset@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           upload_url: ${{ steps.create_release.outputs.upload_url }} # This pulls from the CREATE RELEASE step above, referencing it's ID to get its outputs object, which include a `upload_url`. See this blog post for more info: https://jasonet.co/posts/new-features-of-github-actions/#passing-data-to-future-steps 
-          asset_path: ./web-ext-artifacts/firefox_translations.xpi
-          asset_name: firefox_translations.xpi
+          asset_path: ./web-ext-artifacts/bergamot_translations-signed.xpi
+          asset_name: bergamot_translations.xpi
           asset_content_type: application/zip

.gitignore

@@ -1,2 +1,4 @@
 node_modules
-web-ext-artifacts
+web-ext-artifacts
+extension/controller/translation/bergamot-translator-worker.wasm
+extension/controller/translation/bergamot-translator-worker.js

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "bergamot-translator"]
+	path = bergamot-translator
+	url = https://github.com/browsermt/bergamot-translator.git

ARCHITECTURE.md

@@ -0,0 +1,127 @@
+# Components
+
+## content-script
+Entrypoint: contentScript.js
+
+Responsibilities:
+- Text sample extraction
+- In-page translation processing
+
+## page-action popup
+Entrypoint: static/popup.html
+
+Responsibilities:
+- UI to trigger translation
+- UI to update on translation progress
+
+Notes:
+- Does not have state, popup will reset every time it closes or loses focus.
+
+## background-script
+Entrypoint: controller/backgroundScript.js
+
+Responsibilities:
+- Maintaining the translation state per tab
+- Maintain one instance of the translation engine and manage its queues
+- Manage downloading & loading of translation models on demand
+- Language detection on given samples
+
+Tab state:
+```
+{
+	id: Number, // tab id
+	from: String, // BCP47
+	to: String, // BCP47
+	models: [
+		{
+			from: String, // BCP47
+			to: String // BCP47
+		}
+	], // All available from->to pairs, sorted by relevance
+	frames: {
+		[Number]: Port
+	}
+}
+```
+
+# States
+This is a list of all possible states a page (or the mediator) can be in.
+
+Todo: Not covered is a way to return to the untranslated page. Might be tricky to implement if we're doing swapping DOM nodes and all that magic. For now I'll assume the user can just reload the page to get the untranslated page back.
+
+## PAGE_LOADING
+Page is still in a loading state. Initial state.
+
+Next state:
+- content-script will sample some text from the page once it has loaded and switch states to PAGE_LOADED.
+
+## PAGE_LOADED
+Page is loaded.
+
+Actions:
+- content-script will connect with background-script
+- content-script will send sample to background-script
+
+Next state:
+- background-script will switch to TRANSLATION_AVAILABLE or TRANSLATION_NOT_AVAILABLE based on the languages detected in the sample and available translation models.
+
+## TRANSLATION_AVAILABLE
+Language detector detected the language
+
+Fields: {
+	from: String, // BCP47, detected from language
+	to: String, // BCP47, navigator target language)
+	models: [
+		{
+			from: String, // BCP47
+			to: String // BCP47
+		}
+	] // All available from->to pairs, sorted by relevance
+}
+
+Actions:
+- background-script tells page action icon to show
+
+Next state:
+- page-action popup can be opened to select language and trigger translation, which will switch to TRANSLATION_IN_PROGRESS
+
+## TRANSLATION_NOT_AVAILABLE
+There is no translation model available to translate this page from the detected language to the navigator's language.
+
+Next state:
+- None
+
+## TRANSLATION_IN_PROGRESS
+
+Action:
+- popup will show progress bar based on chunks-queued and chunks-total. unless chunks-queued is 0, then it will show "done" or something?
+- content-script will start submitting chunks of HTML or text to background-script for translation
+
+Next state:
+- background-script will switch to TRANSLATION_IN_PROGRESS (but with updated fields) while it is handling translation requests
+- background-script can switch to TRANSLATION_ERROR when an an (irrecoverable) error occurs during translation
+
+## Not used: TRANSLATION_ERROR
+
+## Not used: TRANSLATION_FINISHED
+
+# TranslationHelper & Co
+
+Translations are done by Marian, wrapped in bergamot-translator, which is compiled to WASM. bergamot-translator exposes a `BlockingService` which you can give a bunch of sentences and a translation model, and it will start crunching.
+
+Couple of things to take into account:
+
+- BlockingService blocks while crunching, so it needs to be put in a WebWorker to not block up the current thread.
+- BlockingService needs a bunch of text to translate to reach peak performance. If you give it too little chunks, it will run slow.
+- It does not do threads (in WASM at least, yet?)
+
+TranslationHelper puts those limitations in a nice interface:
+
+- It provides a simple `translate()` method that you give some text, a source and target language, and it will give you a promise of a translation back.
+- It has the option to cancel and prioritize translation requests. You can use these features to optimise for latency like TranslateLocally does!
+- It does the grouping of translation requests for you
+- It handles downloading translation model data, initialisation, etc. You just need to worry about calling `translate()` and waiting a bit.
+- It can use multiple TranslationWorkers in parallel (threads!)
+
+TranslationWorker provides an interface for TranslationHelper to work with the bergamot-translator WASM binary through a message passing interface. It translates the weird emscripten pointer types in native JavaScript types that can be shared through message passing, and takes care of loading and initialisation of the bergamot-translator-native types.
+