Preventing form defaults. Fixes #294 .

2018-11-20 09:30:07 +00:00
40 changed files with 1101 additions and 1995 deletions
--- a/.travis.yml
+++ b/.travis.yml
@@ -4,4 +4,4 @@ node_js:
 - 10
 - 8
 cache: npm
-script: npm run build
+script: npm run build || npm run build # scss ts definitions need to be generated before an actual build
--- a/README.md
+++ b/README.md
@@ -22,6 +22,9 @@ npm install
 npm run build
 ```

+You'll get an error on first build because of [a stupid bug we haven't fixed
+yet](https://github.com/GoogleChromeLabs/squoosh/issues/251).
+
 You can run the development server with:

 ```sh
--- a/_redirects.ejs
+++ b/_redirects.ejs
@@ -1,2 +0,0 @@
-/index.html / 301
-/* /index.html 301
--- a/codecs/imagequant/package.json
+++ b/codecs/imagequant/package.json
@@ -8,6 +8,6 @@
    "libimagequant": "ImageOptim/libimagequant#2.12.1"
  },
  "devDependencies": {
-    "napa": "3.0.0"
+    "napa": "^3.0.0"
  }
 }
--- a/codecs/mozjpeg_enc/package.json
+++ b/codecs/mozjpeg_enc/package.json
@@ -8,6 +8,6 @@
    "mozjpeg": "mozilla/mozjpeg#v3.3.1"
  },
  "devDependencies": {
-    "napa": "3.0.0"
+    "napa": "^3.0.0"
  }
 }
--- a/codecs/optipng/README.md
+++ b/codecs/optipng/README.md
@@ -1,6 +1,6 @@
 # OptiPNG

- Source: <http://optipng.sourceforge.net/>
+- Source: <https://sourceforge.net/project/optipng>
 - Version: v0.7.7

 ## Dependencies
--- a/codecs/optipng/package.json
+++ b/codecs/optipng/package.json
@@ -16,7 +16,7 @@
    "zlib": "emscripten-ports/zlib"
  },
  "dependencies": {
-    "napa": "3.0.0",
+    "napa": "^3.0.0",
    "tar-dependency": "0.0.3"
  }
 }
--- a/codecs/rotate/package-lock.json
+++ b/codecs/rotate/package-lock.json
@@ -1,124 +0,0 @@
-{
-  "name": "rotate",
-  "requires": true,
-  "lockfileVersion": 1,
-  "dependencies": {
-    "@protobufjs/utf8": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
-      "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=",
-      "dev": true
-    },
-    "assemblyscript": {
-      "version": "github:AssemblyScript/assemblyscript#54b02c287c4d42092e4b01cc5d11bce1a53e9fb2",
-      "from": "github:AssemblyScript/assemblyscript",
-      "dev": true,
-      "requires": {
-        "@protobufjs/utf8": "^1.1.0",
-        "binaryen": "63.0.0-nightly.20190107",
-        "glob": "^7.1.3",
-        "long": "^4.0.0"
-      }
-    },
-    "balanced-match": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
-    },
-    "binaryen": {
-      "version": "63.0.0-nightly.20190107",
-      "resolved": "https://registry.npmjs.org/binaryen/-/binaryen-63.0.0-nightly.20190107.tgz",
-      "integrity": "sha512-vck6ZESU9q6DeEK9v/Fk2O8d2jBsSrNlia8jpmdLZv5eqmNWpkNli+QMRa9Ezfb4wi3c+NVMuxT3Ck0g9GYe8A==",
-      "dev": true
-    },
-    "brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "requires": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
-    },
-    "fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
-    },
-    "glob": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
-      "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
-      "dev": true,
-      "requires": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      }
-    },
-    "inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
-      "requires": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-      "dev": true
-    },
-    "long": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
-      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==",
-      "dev": true
-    },
-    "minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
-      "requires": {
-        "brace-expansion": "^1.1.7"
-      }
-    },
-    "once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
-      "requires": {
-        "wrappy": "1"
-      }
-    },
-    "path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
-    },
-    "wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
-    }
-  }
-}
--- a/codecs/rotate/package.json
+++ b/codecs/rotate/package.json
@@ -1,9 +0,0 @@
-{
-  "name": "rotate",
-  "scripts": {
-    "build": "mv rotate.{as,ts} && asc rotate.ts -b rotate.wasm --validate -O3 --importMemory && mv rotate.{ts,as}"
-  },
-  "devDependencies": {
-    "assemblyscript": "github:AssemblyScript/assemblyscript"
-  }
-}
--- a/codecs/rotate/rotate.as
+++ b/codecs/rotate/rotate.as
@@ -1,64 +0,0 @@
-export function rotate(inputWidth: i32, inputHeight: i32, rotate: i32): void {
-  const bpp = 4;
-  let offset = inputWidth * inputHeight * bpp;
-  let i = 0;
-
-  // In the straight-copy case, d1 is x, d2 is y.
-  // x starts at 0 and increases.
-  // y starts at 0 and increases.
-  let d1Start = 0;
-  let d1Limit = inputWidth;
-  let d1Advance = 1;
-  let d1Multiplier = 1;
-  let d2Start = 0;
-  let d2Limit = inputHeight;
-  let d2Advance = 1;
-  let d2Multiplier = inputWidth;
-
-  if (rotate === 90) {
-    // d1 is y, d2 is x.
-    // y starts at its max value and decreases.
-    // x starts at 0 and increases.
-    d1Start = inputHeight - 1;
-    d1Limit = inputHeight;
-    d1Advance = -1;
-    d1Multiplier = inputWidth;
-    d2Start = 0;
-    d2Limit = inputWidth;
-    d2Advance = 1;
-    d2Multiplier = 1;
-  } else if (rotate === 180) {
-    // d1 is x, d2 is y.
-    // x starts at its max and decreases.
-    // y starts at its max and decreases.
-    d1Start = inputWidth - 1;
-    d1Limit = inputWidth;
-    d1Advance = -1;
-    d1Multiplier = 1;
-    d2Start = inputHeight - 1;
-    d2Limit = inputHeight;
-    d2Advance = -1;
-    d2Multiplier = inputWidth;
-  } else if (rotate === 270) {
-    // d1 is y, d2 is x.
-    // y starts at 0 and increases.
-    // x starts at its max and decreases.
-    d1Start = 0;
-    d1Limit = inputHeight;
-    d1Advance = 1;
-    d1Multiplier = inputWidth;
-    d2Start = inputWidth - 1;
-    d2Limit = inputWidth;
-    d2Advance = -1;
-    d2Multiplier = 1;
-  }
-
-  for (let d2 = d2Start; d2 >= 0 && d2 < d2Limit; d2 += d2Advance) {
-    let d2offset = d2 * d2Multiplier;
-    for (let d1 = d1Start; d1 >= 0 && d1 < d1Limit; d1 += d1Advance) {
-      let start = ((d1 * d1Multiplier) + d2offset);
-      store<u32>(offset + i * 4, load<u32>(start * 4));
-      i += 1;
-    }
-  }
-}
--- a/codecs/rotate/rotate.wasm
+++ b/codecs/rotate/rotate.wasm
--- a/codecs/rotate/tsconfig.json
+++ b/codecs/rotate/tsconfig.json
@@ -1,6 +0,0 @@
-{
-  "extends": "./node_modules/assemblyscript/std/assembly.json",
-  "include": [
-    "./**/*.ts"
-  ]
-}
--- a/codecs/webp_dec/package.json
+++ b/codecs/webp_dec/package.json
@@ -8,6 +8,6 @@
    "libwebp": "webmproject/libwebp#v1.0.0"
  },
  "devDependencies": {
-    "napa": "3.0.0"
+    "napa": "^3.0.0"
  }
 }
--- a/codecs/webp_enc/package.json
+++ b/codecs/webp_enc/package.json
@@ -8,6 +8,6 @@
    "libwebp": "webmproject/libwebp#v1.0.0"
  },
  "devDependencies": {
-    "napa": "3.0.0"
+    "napa": "^3.0.0"
  }
 }
--- a/codecs/webp_enc/webp_enc.cpp
+++ b/codecs/webp_enc/webp_enc.cpp
@@ -26,8 +26,7 @@ val encode(std::string img, int width, int height, WebPConfig config) {
    throw std::runtime_error("Unexpected error");
  }

-  // Only use use_argb if we really need it, as it's slower.
-  pic.use_argb = config.lossless || config.use_sharp_yuv || config.preprocessing > 0;
+  pic.use_argb = !!config.lossless;
  pic.width = width;
  pic.height = height;
  pic.writer = WebPMemoryWrite;
--- a/codecs/webp_enc/webp_enc.js
+++ b/codecs/webp_enc/webp_enc.js
--- a/codecs/webp_enc/webp_enc.wasm
+++ b/codecs/webp_enc/webp_enc.wasm
--- a/config/add-css-types.js
+++ b/config/add-css-types.js
@@ -1,74 +0,0 @@
-const DtsCreator = require('typed-css-modules');
-const chokidar = require('chokidar');
-const util = require('util');
-const sass = require('node-sass');
-
-const sassRender = util.promisify(sass.render);
-
-async function sassToCss(path) {
-  const result = await sassRender({ file: path });
-  return result.css;
-}
-
-/**
- * @typedef {Object} Opts
- * @property {boolean} watch Watch for changes
- */
-/**
- * Create typing files for CSS & SCSS.
- *
- * @param {string[]} rootPaths Paths to search within
- * @param {Opts} [opts={}] Options.
- */
-function addCssTypes(rootPaths, opts = {}) {
-  return new Promise((resolve) => {
-    const { watch = false } = opts;
-
-    const paths = [];
-    const preReadyPromises = [];
-    let ready = false;
-
-    for (const rootPath of rootPaths) {
-      // Look for scss & css in each path.
-      paths.push(rootPath + '/**/*.scss');
-      paths.push(rootPath + '/**/*.css');
-    }
-
-    // For simplicity, the watcher is used even if we're not watching.
-    // If we're not watching, we stop the watcher after the initial files are found.
-    const watcher = chokidar.watch(paths, {
-      // Avoid processing already-processed files.
-      ignored: '*.d.*',
-      // Without this, travis and netlify builds never complete. I'm not sure why, but it might be
-      // related to https://github.com/paulmillr/chokidar/pull/758
-      persistent: watch,
-    });
-
-    function change(path) {
-      const promise = (async function() {
-        const creator = new DtsCreator({ camelCase: true });
-        const result = path.endsWith('.scss') ?
-          await creator.create(path, await sassToCss(path)) :
-          await creator.create(path);
-
-        await result.writeFile();
-      })();
-
-      if (!ready) preReadyPromises.push(promise);
-    }
-
-    watcher.on('change', change);
-    watcher.on('add', change);
-
-    // 'ready' is when events have been fired for file discovery.
-    watcher.on('ready', () => {
-      ready = true;
-      // Wait for the current set of processing to finish.
-      Promise.all(preReadyPromises).then(resolve);
-      // And if we're not watching, close the watcher.
-      if (!watch) watcher.close();
-    });
-  })
-}
-
-module.exports = addCssTypes;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "private": true,
  "name": "squoosh",
-  "version": "1.3.1",
+  "version": "1.0.2",
  "license": "apache-2.0",
  "scripts": {
    "start": "webpack-dev-server --host 0.0.0.0 --hot",
@@ -15,55 +15,55 @@
    }
  },
  "devDependencies": {
-    "@types/node": "10.12.18",
-    "@types/pretty-bytes": "5.1.0",
-    "@types/webassembly-js-api": "0.0.2",
-    "@webcomponents/custom-elements": "1.2.1",
-    "@webpack-cli/serve": "0.1.3",
-    "assets-webpack-plugin": "3.9.7",
-    "chokidar": "2.0.4",
-    "classnames": "2.2.6",
-    "clean-webpack-plugin": "1.0.1",
-    "comlink": "3.1.1",
-    "copy-webpack-plugin": "4.6.0",
-    "critters-webpack-plugin": "2.2.0",
-    "css-loader": "1.0.1",
-    "ejs": "2.6.1",
-    "exports-loader": "0.7.0",
-    "file-drop-element": "0.0.9",
-    "file-loader": "3.0.1",
-    "html-webpack-plugin": "3.2.0",
-    "husky": "1.3.1",
-    "idb-keyval": "3.1.0",
-    "linkstate": "1.1.1",
-    "loader-utils": "1.2.0",
-    "mini-css-extract-plugin": "0.5.0",
-    "minimatch": "3.0.4",
-    "node-sass": "4.11.0",
-    "optimize-css-assets-webpack-plugin": "5.0.1",
-    "pointer-tracker": "2.0.3",
-    "preact": "8.4.2",
-    "prerender-loader": "1.2.0",
-    "pretty-bytes": "5.1.0",
-    "progress-bar-webpack-plugin": "1.12.0",
-    "raw-loader": "1.0.0",
-    "sass-loader": "7.1.0",
-    "script-ext-html-webpack-plugin": "2.1.3",
-    "source-map-loader": "0.2.4",
-    "style-loader": "0.23.1",
-    "terser-webpack-plugin": "1.2.1",
-    "ts-loader": "5.3.3",
-    "tslint": "5.12.1",
-    "tslint-config-airbnb": "5.11.1",
-    "tslint-config-semistandard": "7.0.0",
-    "tslint-react": "3.6.0",
-    "typed-css-modules": "0.3.7",
-    "typescript": "3.2.4",
-    "url-loader": "1.1.2",
-    "webpack": "4.28.0",
-    "webpack-bundle-analyzer": "3.0.3",
-    "webpack-cli": "3.2.1",
-    "webpack-dev-server": "3.1.14",
-    "worker-plugin": "3.0.0"
+    "@types/node": "^10.12.6",
+    "@types/pretty-bytes": "^5.1.0",
+    "@types/webassembly-js-api": "0.0.1",
+    "@webcomponents/custom-elements": "^1.2.1",
+    "@webpack-cli/serve": "^0.1.2",
+    "assets-webpack-plugin": "^3.9.7",
+    "classnames": "^2.2.6",
+    "clean-webpack-plugin": "^1.0.0",
+    "comlink": "^3.0.3",
+    "copy-webpack-plugin": "^4.6.0",
+    "critters-webpack-plugin": "^2.0.1",
+    "css-loader": "^1.0.1",
+    "ejs": "^2.6.1",
+    "exports-loader": "^0.7.0",
+    "file-drop-element": "^0.0.9",
+    "file-loader": "^2.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "husky": "^1.1.4",
+    "idb-keyval": "^3.1.0",
+    "if-env": "^1.0.4",
+    "linkstate": "^1.1.1",
+    "loader-utils": "^1.1.0",
+    "mini-css-extract-plugin": "^0.4.4",
+    "minimatch": "^3.0.4",
+    "node-sass": "^4.9.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "pointer-tracker": "^2.0.3",
+    "preact": "^8.3.1",
+    "prerender-loader": "^1.2.0",
+    "pretty-bytes": "^5.1.0",
+    "progress-bar-webpack-plugin": "^1.11.0",
+    "raw-loader": "^0.5.1",
+    "sass-loader": "^7.1.0",
+    "script-ext-html-webpack-plugin": "^2.1.3",
+    "source-map-loader": "^0.2.4",
+    "style-loader": "^0.23.1",
+    "terser-webpack-plugin": "^1.1.0",
+    "ts-loader": "^5.3.0",
+    "tslint": "^5.11.0",
+    "tslint-config-airbnb": "^5.11.0",
+    "tslint-config-semistandard": "^7.0.0",
+    "tslint-react": "^3.6.0",
+    "typescript": "^3.1.6",
+    "typings-for-css-modules-loader": "^1.7.0",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.25.1",
+    "webpack-bundle-analyzer": "^3.0.3",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10",
+    "worker-plugin": "^1.1.1"
  }
 }
--- a/renovate.json
+++ b/renovate.json
@@ -1,5 +0,0 @@
-{
-  "extends": [
-    "config:base"
-  ]
-}
--- a/src/codecs/input-processors.ts
+++ b/src/codecs/input-processors.ts
@@ -1,9 +0,0 @@
-import { defaultOptions as rotateDefaultOptions } from './rotate/processor-meta';
-
-export interface InputProcessorState {
-  rotate: import('./rotate/processor-meta').RotateOptions;
-}
-
-export const defaultInputProcessorState: InputProcessorState = {
-  rotate: rotateDefaultOptions,
-};
--- a/src/codecs/processor-worker/index.ts
+++ b/src/codecs/processor-worker/index.ts
@@ -1,52 +1,43 @@
 import { expose } from 'comlink';
+import { EncodeOptions as MozJPEGEncoderOptions } from './mozjpeg/encoder-meta';
+import { QuantizeOptions } from './imagequant/processor-meta';
+import { EncodeOptions as OptiPNGEncoderOptions } from './optipng/encoder-meta';
+import { EncodeOptions as WebPEncoderOptions } from './webp/encoder-meta';

 async function mozjpegEncode(
-  data: ImageData, options: import('../mozjpeg/encoder-meta').EncodeOptions,
+  data: ImageData, options: MozJPEGEncoderOptions,
 ): Promise<ArrayBuffer> {
  const { encode } = await import(
    /* webpackChunkName: "process-mozjpeg-enc" */
-    '../mozjpeg/encoder',
+    './mozjpeg/encoder',
  );
  return encode(data, options);
 }

-async function quantize(
-  data: ImageData, opts: import('../imagequant/processor-meta').QuantizeOptions,
-): Promise<ImageData> {
+async function quantize(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
  const { process } = await import(
    /* webpackChunkName: "process-imagequant" */
-    '../imagequant/processor',
+    './imagequant/processor',
  );
  return process(data, opts);
 }

-async function rotate(
-  data: ImageData, opts: import('../rotate/processor-meta').RotateOptions,
-): Promise<ImageData> {
-  const { rotate } = await import(
-    /* webpackChunkName: "process-rotate" */
-    '../rotate/processor',
-  );
-
-  return rotate(data, opts);
-}
-
 async function optiPngEncode(
-  data: BufferSource, options: import('../optipng/encoder-meta').EncodeOptions,
+  data: BufferSource, options: OptiPNGEncoderOptions,
 ): Promise<ArrayBuffer> {
  const { compress } = await import(
    /* webpackChunkName: "process-optipng" */
-    '../optipng/encoder',
+    './optipng/encoder',
  );
  return compress(data, options);
 }

 async function webpEncode(
-  data: ImageData, options: import('../webp/encoder-meta').EncodeOptions,
+  data: ImageData, options: WebPEncoderOptions,
 ): Promise<ArrayBuffer> {
  const { encode } = await import(
    /* webpackChunkName: "process-webp-enc" */
-    '../webp/encoder',
+    './webp/encoder',
  );
  return encode(data, options);
 }
@@ -54,12 +45,12 @@ async function webpEncode(
 async function webpDecode(data: ArrayBuffer): Promise<ImageData> {
  const { decode } = await import(
    /* webpackChunkName: "process-webp-dec" */
-    '../webp/decoder',
+    './webp/decoder',
  );
  return decode(data);
 }

-const exports = { mozjpegEncode, quantize, rotate, optiPngEncode, webpEncode, webpDecode };
+const exports = { mozjpegEncode, quantize, optiPngEncode, webpEncode, webpDecode };
 export type ProcessorWorkerApi = typeof exports;

 expose(exports, self);
--- a/src/codecs/processor-worker/tsconfig.json
+++ b/src/codecs/processor-worker/tsconfig.json
@@ -1,18 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "strict": true,
-    "target": "esnext",
-    "module": "esnext",
-    "lib": [
-      "webworker",
-      "esnext"
-    ],
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "noUnusedLocals": true,
-    "sourceMap": true,
-    "allowJs": false,
-    "baseUrl": "."
-  }
-}
--- a/src/codecs/processor.ts
+++ b/src/codecs/processor.ts
@@ -1,5 +1,6 @@
 import { proxy } from 'comlink';
 import { QuantizeOptions } from './imagequant/processor-meta';
+import { ProcessorWorkerApi } from './processor-worker';
 import { canvasEncode, blobToArrayBuffer } from '../lib/util';
 import { EncodeOptions as MozJPEGEncoderOptions } from './mozjpeg/encoder-meta';
 import { EncodeOptions as OptiPNGEncoderOptions } from './optipng/encoder-meta';
@@ -17,10 +18,8 @@ import * as browserTIFF from './browser-tiff/encoder';
 import * as browserJP2 from './browser-jp2/encoder';
 import * as browserPDF from './browser-pdf/encoder';

-type ProcessorWorkerApi = import('./processor-worker').ProcessorWorkerApi;
-
 /** How long the worker should be idle before terminating. */
-const workerTimeout = 10000;
+const workerTimeout = 1000;

 interface ProcessingJobOptions {
  needsWorker?: boolean;
@@ -63,7 +62,7 @@ export default class Processor {
          // @ts-ignore - Typescript doesn't know about the 2nd param to new Worker, and the
          // definition can't be overwritten.
          this._worker = new Worker(
-            './processor-worker',
+            './processor-worker.ts',
            { name: 'processor-worker', type: 'module' },
          ) as Worker;
          // Need to do some TypeScript trickery to make the type match.
@@ -118,18 +117,12 @@ export default class Processor {
  }

  // Off main thread jobs:
+
  @Processor._processingJob({ needsWorker: true })
  imageQuant(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
    return this._workerApi!.quantize(data, opts);
  }

-  @Processor._processingJob({ needsWorker: true })
-  rotate(
-    data: ImageData, opts: import('./rotate/processor-meta').RotateOptions,
-  ): Promise<ImageData> {
-    return this._workerApi!.rotate(data, opts);
-  }
-
  @Processor._processingJob({ needsWorker: true })
  mozjpegEncode(
    data: ImageData, opts: MozJPEGEncoderOptions,
--- a/src/codecs/resize/options.tsx
+++ b/src/codecs/resize/options.tsx
@@ -135,7 +135,7 @@ export default class ResizerOptions extends Component<Props, State> {
                onChange={this.onChange}
              >
                <option value="stretch">Stretch</option>
-                <option value="contain">Contain</option>
+                <option value="cover">Cover</option>
              </Select>
            </label>
          }
--- a/src/codecs/resize/processor-meta.ts
+++ b/src/codecs/resize/processor-meta.ts
@@ -4,7 +4,7 @@ export interface ResizeOptions {
  width: number;
  height: number;
  method: 'vector' | BitmapResizeMethods;
-  fitMethod: 'stretch' | 'contain';
+  fitMethod: 'stretch' | 'cover';
 }

 export interface BitmapResizeOptions extends ResizeOptions {
--- a/src/codecs/resize/processor.ts
+++ b/src/codecs/resize/processor.ts
@@ -1,7 +1,7 @@
 import { nativeResize, NativeResizeMethod, drawableToImageData } from '../../lib/util';
 import { BitmapResizeOptions, VectorResizeOptions } from './processor-meta';

-function getContainOffsets(sw: number, sh: number, dw: number, dh: number) {
+function getCoverOffsets(sw: number, sh: number, dw: number, dh: number) {
  const currentAspect = sw / sh;
  const endAspect = dw / dh;

@@ -22,8 +22,8 @@ export function resize(data: ImageData, opts: BitmapResizeOptions): ImageData {
  let sw = data.width;
  let sh = data.height;

-  if (opts.fitMethod === 'contain') {
-    ({ sx, sy, sw, sh } = getContainOffsets(sw, sh, opts.width, opts.height));
+  if (opts.fitMethod === 'cover') {
+    ({ sx, sy, sw, sh } = getCoverOffsets(sw, sh, opts.width, opts.height));
  }

  return nativeResize(
@@ -38,8 +38,8 @@ export function vectorResize(data: HTMLImageElement, opts: VectorResizeOptions):
  let sw = data.width;
  let sh = data.height;

-  if (opts.fitMethod === 'contain') {
-    ({ sx, sy, sw, sh } = getContainOffsets(sw, sh, opts.width, opts.height));
+  if (opts.fitMethod === 'cover') {
+    ({ sx, sy, sw, sh } = getCoverOffsets(sw, sh, opts.width, opts.height));
  }

  return drawableToImageData(data, {
--- a/src/codecs/rotate/processor-meta.ts
+++ b/src/codecs/rotate/processor-meta.ts
@@ -1,12 +0,0 @@
-export interface RotateOptions {
-  rotate: 0 | 90 | 180 | 270;
-}
-
-export const defaultOptions: RotateOptions = { rotate: 0 };
-
-export interface RotateModuleInstance {
-  exports: {
-    memory: WebAssembly.Memory;
-    rotate(width: number, height: number, rotate: 0 | 90 | 180 | 270): void;
-  };
-}
--- a/src/codecs/rotate/processor.ts
+++ b/src/codecs/rotate/processor.ts
@@ -1,30 +0,0 @@
-import wasmUrl from '../../../codecs/rotate/rotate.wasm';
-import { RotateOptions, RotateModuleInstance } from './processor-meta';
-
-export async function rotate(
-  data: ImageData,
-  opts: RotateOptions,
-): Promise<ImageData> {
-  const flipDimensions = opts.rotate % 180 !== 0;
-  // Number of wasm memory pages (á 64KiB) needed to store the image twice.
-  const bytesPerImage = data.width * data.height * 4;
-  const numPagesNeeded = Math.ceil(bytesPerImage * 2 / (64 * 1024));
-  const { instance } = (await (WebAssembly as any).instantiateStreaming(
-    fetch(wasmUrl),
-    {
-      env: {
-        memory: new WebAssembly.Memory({ initial: numPagesNeeded }),
-      },
-    },
-  )) as { instance: RotateModuleInstance };
-
-  const view = new Uint8ClampedArray(instance.exports.memory.buffer);
-  view.set(data.data);
-
-  instance.exports.rotate(data.width, data.height, opts.rotate);
-  return new ImageData(
-    view.slice(bytesPerImage, bytesPerImage * 2),
-    flipDimensions ? data.height : data.width,
-    flipDimensions ? data.width : data.height,
-  );
-}
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -9,7 +9,8 @@ import '../../lib/SnackBar';
 import Intro from '../intro';
 import '../custom-els/LoadingSpinner';

-const ROUTE_EDITOR = '/editor';
+// This is imported for TypeScript only. It isn't used.
+import Compress from '../compress';

 const compressPromise = import(
  /* webpackChunkName: "main-app" */
@@ -20,21 +21,21 @@ const offlinerPromise = import(
  '../../lib/offliner',
 );

-function back() {
-  window.history.back();
+export interface SourceImage {
+  file: File | Fileish;
+  data: ImageData;
+  vectorImage?: HTMLImageElement;
 }

 interface Props {}

 interface State {
  file?: File | Fileish;
-  isEditorOpen: Boolean;
-  Compress?: typeof import('../compress').default;
+  Compress?: typeof Compress;
 }

 export default class App extends Component<Props, State> {
  state: State = {
-    isEditorOpen: false,
    file: undefined,
    Compress: undefined,
  };
@@ -56,33 +57,22 @@ export default class App extends Component<Props, State> {
    if (process.env.NODE_ENV === 'development') {
      this.setState(window.STATE);
      const oldCDU = this.componentDidUpdate;
-      this.componentDidUpdate = (props, state, prev) => {
-        if (oldCDU) oldCDU.call(this, props, state, prev);
+      this.componentDidUpdate = (props, state) => {
+        if (oldCDU) oldCDU.call(this, props, state);
        window.STATE = this.state;
      };
    }
-
-    // Since iOS 10, Apple tries to prevent disabling pinch-zoom. This is great in theory, but
-    // really breaks things on Squoosh, as you can easily end up zooming the UI when you mean to
-    // zoom the image. Once you've done this, it's really difficult to undo. Anyway, this seems to
-    // prevent it.
-    document.body.addEventListener('gesturestart', (event) => {
-      event.preventDefault();
-    });
-
-    window.addEventListener('popstate', this.onPopState);
  }

  @bind
-  private onFileDrop({ file }: FileDropEvent) {
+  private onFileDrop(event: FileDropEvent) {
+    const { file } = event;
    if (!file) return;
-    this.openEditor();
    this.setState({ file });
  }

  @bind
  private onIntroPickFile(file: File | Fileish) {
-    this.openEditor();
    this.setState({ file });
  }

@@ -93,25 +83,18 @@ export default class App extends Component<Props, State> {
  }

  @bind
-  private onPopState() {
-    this.setState({ isEditorOpen: location.pathname === ROUTE_EDITOR });
+  private onBack() {
+    this.setState({ file: undefined });
  }

-  @bind
-  private openEditor() {
-    if (this.state.isEditorOpen) return;
-    history.pushState(null, '', ROUTE_EDITOR);
-    this.setState({ isEditorOpen: true });
-  }
-
-  render({}: Props, { file, isEditorOpen, Compress }: State) {
+  render({}: Props, { file, Compress }: State) {
    return (
      <div id="app" class={style.app}>
        <file-drop accept="image/*" onfiledrop={this.onFileDrop} class={style.drop}>
-          {!isEditorOpen
+          {(!file)
            ? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
            : (Compress)
-              ? <Compress file={file!} showSnack={this.showSnack} onBack={back} />
+              ? <Compress file={file} showSnack={this.showSnack} onBack={this.onBack} />
              : <loading-spinner class={style.appLoader}/>
          }
          <snack-bar ref={linkRef(this, 'snackbar')} />
--- a/src/components/Options/index.tsx
+++ b/src/components/Options/index.tsx
@@ -35,14 +35,12 @@ import {
 import { QuantizeOptions } from '../../codecs/imagequant/processor-meta';
 import { ResizeOptions } from '../../codecs/resize/processor-meta';
 import { PreprocessorState } from '../../codecs/preprocessors';
-import { SourceImage } from '../compress';
+import { SourceImage } from '../App';
 import Checkbox from '../checkbox';
 import Expander from '../expander';
 import Select from '../select';

-const encoderOptionsComponentMap: {
-  [x: string]: (new (...args: any[]) => Component<any, any>) | undefined;
-} = {
+const encoderOptionsComponentMap = {
  [identity.type]: undefined,
  [optiPNG.type]: OptiPNGEncoderOptions,
  [mozJPEG.type]: MozJpegEncoderOptions,
@@ -83,7 +81,7 @@ export default class Options extends Component<Props, State> {
  }

  @bind
-  private onEncoderTypeChange(event: Event) {
+  onEncoderTypeChange(event: Event) {
    const el = event.currentTarget as HTMLSelectElement;

    // The select element only has values matching encoder types,
@@ -93,7 +91,7 @@ export default class Options extends Component<Props, State> {
  }

  @bind
-  private onPreprocessorEnabledChange(event: Event) {
+  onPreprocessorEnabledChange(event: Event) {
    const el = event.currentTarget as HTMLInputElement;
    const preprocessor = el.name.split('.')[0] as keyof PreprocessorState;

@@ -103,14 +101,14 @@ export default class Options extends Component<Props, State> {
  }

  @bind
-  private onQuantizerOptionsChange(opts: QuantizeOptions) {
+  onQuantizerOptionsChange(opts: QuantizeOptions) {
    this.props.onPreprocessorOptionsChange(
      cleanMerge(this.props.preprocessorState, 'quantizer', opts),
    );
  }

  @bind
-  private onResizeOptionsChange(opts: ResizeOptions) {
+  onResizeOptionsChange(opts: ResizeOptions) {
    this.props.onPreprocessorOptionsChange(
      cleanMerge(this.props.preprocessorState, 'resize', opts),
    );
@@ -146,7 +144,7 @@ export default class Options extends Component<Props, State> {
                {preprocessorState.resize.enabled ?
                  <ResizeOptionsComponent
                    isVector={Boolean(source && source.vectorImage)}
-                    aspect={source ? source.processed.width / source.processed.height : 1}
+                    aspect={source ? (source.data.width / source.data.height) : 1}
                    options={preprocessorState.resize}
                    onChange={this.onResizeOptionsChange}
                  />
--- a/src/components/Options/style.scss
+++ b/src/components/Options/style.scss
@@ -43,7 +43,6 @@ $horizontalPadding: 15px;

 .text-field {
  background: #fff;
-  color: #000;
  font: inherit;
  border: none;
  padding: 2px 0 2px 10px;
--- a/src/components/Output/index.tsx
+++ b/src/components/Output/index.tsx
@@ -5,29 +5,17 @@ import './custom-els/TwoUp';
 import * as style from './style.scss';
 import { bind, linkRef } from '../../lib/initial-util';
 import { shallowEqual, drawDataToCanvas } from '../../lib/util';
-import {
-    ToggleBackgroundIcon,
-    AddIcon,
-    RemoveIcon,
-    BackIcon,
-    ToggleBackgroundActiveIcon,
-    RotateIcon,
-} from '../../lib/icons';
+import { ToggleIcon, AddIcon, RemoveIcon, BackIcon } from '../../lib/icons';
 import { twoUpHandle } from './custom-els/TwoUp/styles.css';
-import { InputProcessorState } from '../../codecs/input-processors';
-import { cleanSet } from '../../lib/clean-modify';
-import { SourceImage } from '../compress';

 interface Props {
-  source?: SourceImage;
-  inputProcessorState?: InputProcessorState;
+  originalImage?: ImageData;
  mobileView: boolean;
  leftCompressed?: ImageData;
  rightCompressed?: ImageData;
  leftImgContain: boolean;
  rightImgContain: boolean;
  onBack: () => void;
-  onInputProcessorChange: (newState: InputProcessorState) => void;
 }

 interface State {
@@ -82,38 +70,6 @@ export default class Output extends Component<Props, State> {
    const prevRightDraw = this.rightDrawable(prevProps);
    const leftDraw = this.leftDrawable();
    const rightDraw = this.rightDrawable();
-    const sourceFileChanged =
-      // Has the value become (un)defined?
-      (!!this.props.source !== !!prevProps.source) ||
-      // Or has the file changed?
-      (this.props.source && prevProps.source && this.props.source.file !== prevProps.source.file);
-
-    const oldSourceData = prevProps.source && prevProps.source.processed;
-    const newSourceData = this.props.source && this.props.source.processed;
-    const pinchZoom = this.pinchZoomLeft!;
-
-    if (sourceFileChanged) {
-      // New image? Reset the pinch-zoom.
-      pinchZoom.setTransform({
-        allowChangeEvent: true,
-        x: 0,
-        y: 0,
-        scale: 1,
-      });
-    } else if (oldSourceData && newSourceData && oldSourceData !== newSourceData) {
-      // Since the pinch zoom transform origin is the top-left of the content, we need to flip
-      // things around a bit when the content size changes, so the new content appears as if it were
-      // central to the previous content.
-      const scaleChange = 1 - pinchZoom.scale;
-      const oldXScaleOffset = oldSourceData.width / 2 * scaleChange;
-      const oldYScaleOffset = oldSourceData.height / 2 * scaleChange;
-
-      pinchZoom.setTransform({
-        allowChangeEvent: true,
-        x: pinchZoom.x - oldXScaleOffset + oldYScaleOffset,
-        y: pinchZoom.y - oldYScaleOffset + oldXScaleOffset,
-      });
-    }

    if (leftDraw && leftDraw !== prevLeftDraw && this.canvasLeft) {
      drawDataToCanvas(this.canvasLeft, leftDraw);
@@ -121,6 +77,16 @@ export default class Output extends Component<Props, State> {
    if (rightDraw && rightDraw !== prevRightDraw && this.canvasRight) {
      drawDataToCanvas(this.canvasRight, rightDraw);
    }
+
+    if (this.props.originalImage !== prevProps.originalImage && this.pinchZoomLeft) {
+      // New image? Reset the pinch-zoom.
+      this.pinchZoomLeft.setTransform({
+        allowChangeEvent: true,
+        x: 0,
+        y: 0,
+        scale: 1,
+      });
+    }
  }

  shouldComponentUpdate(nextProps: Props, nextState: State) {
@@ -128,11 +94,11 @@ export default class Output extends Component<Props, State> {
  }

  private leftDrawable(props: Props = this.props): ImageData | undefined {
-    return props.leftCompressed || (props.source && props.source.processed);
+    return props.leftCompressed || props.originalImage;
  }

  private rightDrawable(props: Props = this.props): ImageData | undefined {
-    return props.rightCompressed || (props.source && props.source.processed);
+    return props.rightCompressed || props.originalImage;
  }

  @bind
@@ -156,20 +122,6 @@ export default class Output extends Component<Props, State> {
    this.pinchZoomLeft.scaleTo(this.state.scale / 1.25, scaleToOpts);
  }

-  @bind
-  private onRotateClick() {
-    const { inputProcessorState } = this.props;
-    if (!inputProcessorState) return;
-
-    const newState = cleanSet(
-      inputProcessorState,
-      'rotate.rotate',
-      (inputProcessorState.rotate.rotate + 90) % 360,
-    );
-
-    this.props.onInputProcessorChange(newState);
-  }
-
  @bind
  private onScaleValueFocus() {
    this.setState({ editingScale: true }, () => {
@@ -249,13 +201,11 @@ export default class Output extends Component<Props, State> {
  }

  render(
-    { mobileView, leftImgContain, rightImgContain, source, onBack }: Props,
+    { mobileView, leftImgContain, rightImgContain, originalImage, onBack }: Props,
    { scale, editingScale, altBackground }: State,
  ) {
    const leftDraw = this.leftDrawable();
    const rightDraw = this.rightDrawable();
-    // To keep position stable, the output is put in a square using the longest dimension.
-    const originalImage = source && source.processed;

    return (
      <div class={`${style.output} ${altBackground ? style.altBackground : ''}`}>
@@ -277,7 +227,7 @@ export default class Output extends Component<Props, State> {
            ref={linkRef(this, 'pinchZoomLeft')}
          >
            <canvas
-              class={style.pinchTarget}
+              class={style.outputCanvas}
              ref={linkRef(this, 'canvasLeft')}
              width={leftDraw && leftDraw.width}
              height={leftDraw && leftDraw.height}
@@ -290,7 +240,7 @@ export default class Output extends Component<Props, State> {
          </pinch-zoom>
          <pinch-zoom class={style.pinchZoom} ref={linkRef(this, 'pinchZoomRight')}>
            <canvas
-              class={style.pinchTarget}
+              class={style.outputCanvas}
              ref={linkRef(this, 'canvasRight')}
              width={rightDraw && rightDraw.width}
              height={rightDraw && rightDraw.height}
@@ -336,21 +286,10 @@ export default class Output extends Component<Props, State> {
              <AddIcon />
            </button>
          </div>
-          <div class={style.buttonsNoWrap}>
-            <button class={style.button} onClick={this.onRotateClick} title="Rotate image">
-              <RotateIcon />
+          <button class={style.button} onClick={this.toggleBackground}>
+            <ToggleIcon />
+            Toggle Background
          </button>
-            <button
-              class={`${style.button} ${altBackground ? style.active : ''}`}
-              onClick={this.toggleBackground}
-              title="Change canvas color"
-            >
-              {altBackground
-                ? <ToggleBackgroundActiveIcon />
-                : <ToggleBackgroundIcon />
-              }
-            </button>
-          </div>
        </div>
      </div>
    );
--- a/src/components/Output/style.scss
+++ b/src/components/Output/style.scss
@@ -31,15 +31,6 @@
  align-items: center;
 }

-.pinch-target {
-  // This fixes a severe painting bug in Chrome.
-  // We should try to remove this once the issue is fixed.
-  // https://bugs.chromium.org/p/chromium/issues/detail?id=870222#c10
-  will-change: auto;
-  // Prevent the image becoming misshapen due to default flexbox layout.
-  flex-shrink: 0;
-}
-
 .controls {
  position: absolute;
  display: flex;
@@ -64,7 +55,6 @@
    left: 320px;
    right: 320px;
    bottom: 0;
-    flex-wrap: wrap-reverse;
  }
 }

@@ -97,7 +87,6 @@
  white-space: nowrap;
  height: 36px;
  padding: 0 8px;
-  cursor: pointer;

  @media (min-width: 600px) {
    height: 48px;
@@ -112,20 +101,15 @@
 }

 .button {
+  text-transform: uppercase;
  color: var(--button-fg);
+  cursor: pointer;
+  text-indent: 6px;
+  font-size: 110%;

  &:hover {
    background-color: #eee;
  }
-
-  &.active {
-    background: #34B9EB;
-    color: #fff;
-
-    &:hover {
-      background: #32a3ce;
-    }
-  }
 }

 .zoom {
@@ -149,18 +133,17 @@
  border-bottom: 1px dashed #999;
 }

+.output-canvas {
+  flex-shrink: 0;
+  // This fixes a severe painting bug in Chrome.
+  // We should try to remove this once the issue is fixed.
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=870222#c10
+  will-change: auto;
+}
+
 .back {
  position: absolute;
  top: 0;
  left: 0;
  padding: 9px;
 }
-
-.buttons-no-wrap {
-  display: flex;
-  pointer-events: none;
-
-  & > * {
-    pointer-events: auto;
-  }
-}
--- a/src/components/compress/index.tsx
+++ b/src/components/compress/index.tsx
@@ -35,29 +35,21 @@ import { VectorResizeOptions, BitmapResizeOptions } from '../../codecs/resize/pr
 import './custom-els/MultiPanel';
 import Results from '../results';
 import { ExpandIcon, CopyAcrossIconProps } from '../../lib/icons';
-import SnackBarElement from '../../lib/SnackBar';
-import { InputProcessorState, defaultInputProcessorState } from '../../codecs/input-processors';
+import SnackBarElement from 'src/lib/SnackBar';

 export interface SourceImage {
  file: File | Fileish;
-  decoded: ImageData;
-  processed: ImageData;
+  data: ImageData;
  vectorImage?: HTMLImageElement;
-  inputProcessorState: InputProcessorState;
 }

-interface SideSettings {
-  preprocessorState: PreprocessorState;
-  encoderState: EncoderState;
-}
-
-interface Side {
+interface EncodedImage {
  preprocessed?: ImageData;
  file?: Fileish;
  downloadUrl?: string;
  data?: ImageData;
-  latestSettings: SideSettings;
-  encodedSettings?: SideSettings;
+  preprocessorState: PreprocessorState;
+  encoderState: EncoderState;
  loading: boolean;
  /** Counter of the latest bmp currently encoding */
  loadingCounter: number;
@@ -73,7 +65,7 @@ interface Props {

 interface State {
  source?: SourceImage;
-  sides: [Side, Side];
+  images: [EncodedImage, EncodedImage];
  /** Source image load */
  loading: boolean;
  loadingCounter: number;
@@ -85,27 +77,12 @@ interface UpdateImageOptions {
  skipPreprocessing?: boolean;
 }

-async function processInput(
-  data: ImageData,
-  inputProcessData: InputProcessorState,
-  processor: Processor,
-) {
-  let processedData = data;
-
-  if (inputProcessData.rotate.rotate !== 0) {
-    processedData = await processor.rotate(processedData, inputProcessData.rotate);
-  }
-
-  return processedData;
-}
-
 async function preprocessImage(
  source: SourceImage,
  preprocessData: PreprocessorState,
  processor: Processor,
 ): Promise<ImageData> {
-  let result = source.processed;
-
+  let result = source.data;
  if (preprocessData.resize.enabled) {
    if (preprocessData.resize.method === 'vector' && source.vectorImage) {
      result = processor.vectorResize(
@@ -154,26 +131,6 @@ async function compressImage(
  );
 }

-function stateForNewSourceData(state: State, newSource: SourceImage): State {
-  let newState = { ...state };
-
-  for (const i of [0, 1]) {
-    // Ditch previous encodings
-    const downloadUrl = state.sides[i].downloadUrl;
-    if (downloadUrl) URL.revokeObjectURL(downloadUrl);
-
-    newState = cleanMerge(state, `sides.${i}`, {
-      preprocessed: undefined,
-      file: undefined,
-      downloadUrl: undefined,
-      data: undefined,
-      encodedSettings: undefined,
-    });
-  }
-
-  return newState;
-}
-
 async function processSvg(blob: Blob): Promise<HTMLImageElement> {
  // Firefox throws if you try to draw an SVG to canvas that doesn't have width/height.
  // In Chrome it loads, but drawImage behaves weirdly.
@@ -205,8 +162,6 @@ const resultTitles = ['Top', 'Bottom'];
 const buttonPositions =
  ['download-left', 'download-right'] as ('download-left' | 'download-right')[];

-const originalDocumentTitle = document.title;
-
 export default class Compress extends Component<Props, State> {
  widthQuery = window.matchMedia('(max-width: 599px)');

@@ -214,21 +169,17 @@ export default class Compress extends Component<Props, State> {
    source: undefined,
    loading: false,
    loadingCounter: 0,
-    sides: [
+    images: [
      {
-        latestSettings: {
        preprocessorState: defaultPreprocessorState,
        encoderState: { type: identity.type, options: identity.defaultOptions },
-        },
        loadingCounter: 0,
        loadedCounter: 0,
        loading: false,
      },
      {
-        latestSettings: {
        preprocessorState: defaultPreprocessorState,
        encoderState: { type: mozJPEG.type, options: mozJPEG.defaultOptions },
-        },
        loadingCounter: 0,
        loadedCounter: 0,
        loading: false,
@@ -240,8 +191,6 @@ export default class Compress extends Component<Props, State> {
  private readonly encodeCache = new ResultCache();
  private readonly leftProcessor = new Processor();
  private readonly rightProcessor = new Processor();
-  // For debouncing calls to updateImage for each side.
-  private readonly updateImageTimeoutIds: [number?, number?] = [undefined, undefined];

  constructor(props: Props) {
    super(props);
@@ -258,7 +207,7 @@ export default class Compress extends Component<Props, State> {

  private onEncoderTypeChange(index: 0 | 1, newType: EncoderType): void {
    this.setState({
-      sides: cleanSet(this.state.sides, `${index}.latestSettings.encoderState`, {
+      images: cleanSet(this.state.images, `${index}.encoderState`, {
        type: newType,
        options: encoderMap[newType].defaultOptions,
      }),
@@ -267,50 +216,39 @@ export default class Compress extends Component<Props, State> {

  private onPreprocessorOptionsChange(index: 0 | 1, options: PreprocessorState): void {
    this.setState({
-      sides: cleanSet(this.state.sides, `${index}.latestSettings.preprocessorState`, options),
+      images: cleanSet(this.state.images, `${index}.preprocessorState`, options),
    });
  }

  private onEncoderOptionsChange(index: 0 | 1, options: EncoderOptions): void {
    this.setState({
-      sides: cleanSet(this.state.sides, `${index}.latestSettings.encoderState.options`, options),
+      images: cleanSet(this.state.images, `${index}.encoderState.options`, options),
    });
  }

-  private updateDocumentTitle(filename: string = ''): void {
-    document.title = filename ? `${filename} - ${originalDocumentTitle}` : originalDocumentTitle;
-  }
-
  componentWillReceiveProps(nextProps: Props): void {
    if (nextProps.file !== this.props.file) {
      this.updateFile(nextProps.file);
    }
  }

-  componentWillUnmount(): void {
-    this.updateDocumentTitle();
-  }
-
  componentDidUpdate(prevProps: Props, prevState: State): void {
-    const { source, sides } = this.state;
+    const { source, images } = this.state;

-    const sourceDataChanged =
-      // Has the source object become set/unset?
-      !!source !== !!prevState.source ||
-      // Or has the processed data changed?
-      (source && prevState.source && source.processed !== prevState.source.processed);
-
-    for (const [i, side] of sides.entries()) {
-      const prevSettings = prevState.sides[i].latestSettings;
-      const encoderChanged = side.latestSettings.encoderState !== prevSettings.encoderState;
-      const preprocessorChanged =
-        side.latestSettings.preprocessorState !== prevSettings.preprocessorState;
+    for (const [i, image] of images.entries()) {
+      const prevImage = prevState.images[i];
+      const sourceChanged = source !== prevState.source;
+      const encoderChanged = image.encoderState !== prevImage.encoderState;
+      const preprocessorChanged = image.preprocessorState !== prevImage.preprocessorState;

      // The image only needs updated if the encoder/preprocessor settings have changed, or the
      // source has changed.
-      if (sourceDataChanged || encoderChanged || preprocessorChanged) {
-        this.queueUpdateImage(i, {
-          skipPreprocessing: !sourceDataChanged && !preprocessorChanged,
+      if (sourceChanged || encoderChanged || preprocessorChanged) {
+        if (prevImage.downloadUrl) URL.revokeObjectURL(prevImage.downloadUrl);
+        this.updateImage(i, {
+          skipPreprocessing: !sourceChanged && !preprocessorChanged,
+        }).catch((err) => {
+          console.error(err);
        });
      }
    }
@@ -318,15 +256,10 @@ export default class Compress extends Component<Props, State> {

  private async onCopyToOtherClick(index: 0 | 1) {
    const otherIndex = (index + 1) % 2;
-    const oldSettings = this.state.sides[otherIndex];
-    const newSettings = { ...this.state.sides[index] };
-
-    // Create a new object URL for the new settings. This avoids both sides sharing a URL, which
-    // means it can be safely revoked without impacting the other side.
-    if (newSettings.file) newSettings.downloadUrl = URL.createObjectURL(newSettings.file);
+    const oldSettings = this.state.images[otherIndex];

    this.setState({
-      sides: cleanSet(this.state.sides, otherIndex, newSettings),
+      images: cleanSet(this.state.images, otherIndex, this.state.images[index]),
    });

    const result = await this.props.showSnack('Settings copied across', {
@@ -337,67 +270,13 @@ export default class Compress extends Component<Props, State> {
    if (result !== 'undo') return;

    this.setState({
-      sides: cleanSet(this.state.sides, otherIndex, oldSettings),
+      images: cleanSet(this.state.images, otherIndex, oldSettings),
    });
  }

-  @bind
-  private async onInputProcessorChange(options: InputProcessorState): Promise<void> {
-    const source = this.state.source;
-    if (!source) return;
-
-    const oldRotate = source.inputProcessorState.rotate.rotate;
-    const newRotate = options.rotate.rotate;
-    const orientationChanged = oldRotate % 180 !== newRotate % 180;
-    const loadingCounter = this.state.loadingCounter + 1;
-    // Either processor is good enough here.
-    const processor = this.leftProcessor;
-
-    this.setState({
-      loadingCounter, loading: true,
-      source: cleanSet(source, 'inputProcessorState', options),
-    });
-
-    // Abort any current encode jobs, as they're redundant now.
-    this.leftProcessor.abortCurrent();
-    this.rightProcessor.abortCurrent();
-
-    try {
-      const processed = await processInput(source.decoded, options, processor);
-
-      // Another file has been opened/processed before this one processed.
-      if (this.state.loadingCounter !== loadingCounter) return;
-
-      let newState = { ...this.state, loading: false };
-      newState = cleanSet(newState, 'source.processed', processed);
-      newState = stateForNewSourceData(newState, newState.source!);
-
-      if (orientationChanged) {
-        // If orientation has changed, we should flip the resize values.
-        for (const i of [0, 1]) {
-          const resizeSettings = newState.sides[i].latestSettings.preprocessorState.resize;
-          newState = cleanMerge(newState, `sides.${i}.latestSettings.preprocessorState.resize`, {
-            width: resizeSettings.height,
-            height: resizeSettings.width,
-          });
-        }
-      }
-      this.setState(newState);
-    } catch (err) {
-      if (err.name === 'AbortError') return;
-      console.error(err);
-      // Another file has been opened/processed before this one processed.
-      if (this.state.loadingCounter !== loadingCounter) return;
-      this.props.showSnack('Processing error');
-      this.setState({ loading: false });
-    }
-  }
-
  @bind
  private async updateFile(file: File | Fileish) {
    const loadingCounter = this.state.loadingCounter + 1;
-    // Either processor is good enough here.
-    const processor = this.leftProcessor;

    this.setState({ loadingCounter, loading: true });

@@ -406,7 +285,7 @@ export default class Compress extends Component<Props, State> {
    this.rightProcessor.abortCurrent();

    try {
-      let decoded: ImageData;
+      let data: ImageData;
      let vectorImage: HTMLImageElement | undefined;

      // Special-case SVG. We need to avoid createImageBitmap because of
@@ -414,96 +293,73 @@ export default class Compress extends Component<Props, State> {
      // Also, we cache the HTMLImageElement so we can perform vector resizing later.
      if (file.type.startsWith('image/svg+xml')) {
        vectorImage = await processSvg(file);
-        decoded = drawableToImageData(vectorImage);
+        data = drawableToImageData(vectorImage);
      } else {
        // Either processor is good enough here.
-        decoded = await decodeImage(file, processor);
+        data = await decodeImage(file, this.leftProcessor);
      }

-      const processed = await processInput(decoded, defaultInputProcessorState, processor);
-
-      // Another file has been opened/processed before this one processed.
+      // Another file has been opened before this one processed.
      if (this.state.loadingCounter !== loadingCounter) return;

      let newState: State = {
        ...this.state,
-        source: {
-          decoded, file, vectorImage, processed,
-          inputProcessorState: defaultInputProcessorState,
-        },
+        source: { data, file, vectorImage },
        loading: false,
      };

-      newState = stateForNewSourceData(newState, newState.source!);
-
      for (const i of [0, 1]) {
+        // Ditch previous encodings
+        const downloadUrl = this.state.images[i].downloadUrl;
+        if (downloadUrl) URL.revokeObjectURL(downloadUrl!);
+
+        newState = cleanMerge(newState, `images.${i}`, {
+          preprocessed: undefined,
+          file: undefined,
+          downloadUrl: undefined,
+          data: undefined,
+        });
+
        // Default resize values come from the image:
-        newState = cleanMerge(newState, `sides.${i}.latestSettings.preprocessorState.resize`, {
-          width: processed.width,
-          height: processed.height,
+        newState = cleanMerge(newState, `images.${i}.preprocessorState.resize`, {
+          width: data.width,
+          height: data.height,
          method: vectorImage ? 'vector' : 'browser-high',
        });
      }

-      this.updateDocumentTitle(file.name);
      this.setState(newState);
    } catch (err) {
      if (err.name === 'AbortError') return;
      console.error(err);
-      // Another file has been opened/processed before this one processed.
+      // Another file has been opened before this one processed.
      if (this.state.loadingCounter !== loadingCounter) return;
      this.props.showSnack('Invalid image');
      this.setState({ loading: false });
    }
  }

-  /**
-   * Debounce the heavy lifting of updateImage.
-   * Otherwise, the thrashing causes jank, and sometimes crashes iOS Safari.
-   */
-  private queueUpdateImage(index: number, options: UpdateImageOptions = {}): void {
-    // Call updateImage after this delay, unless queueUpdateImage is called again, in which case the
-    // timeout is reset.
-    const delay = 100;
-
-    clearTimeout(this.updateImageTimeoutIds[index]);
-
-    this.updateImageTimeoutIds[index] = self.setTimeout(
-      () => {
-        this.updateImage(index, options).catch((err) => {
-          console.error(err);
-        });
-      },
-      delay,
-    );
-  }
-
  private async updateImage(index: number, options: UpdateImageOptions = {}): Promise<void> {
-    const {
-      skipPreprocessing = false,
-    } = options;
+    const { skipPreprocessing = false } = options;
    const { source } = this.state;
    if (!source) return;

    // Each time we trigger an async encode, the counter changes.
-    const loadingCounter = this.state.sides[index].loadingCounter + 1;
+    const loadingCounter = this.state.images[index].loadingCounter + 1;

-    let sides = cleanMerge(this.state.sides, index, {
+    let images = cleanMerge(this.state.images, index, {
      loadingCounter,
      loading: true,
    });

-    this.setState({ sides });
+    this.setState({ images });

-    const side = sides[index];
-    const settings = side.latestSettings;
+    const image = images[index];

    let file: File | Fileish | undefined;
    let preprocessed: ImageData | undefined;
    let data: ImageData | undefined;
-    const cacheResult = this.encodeCache.match(
-      source.processed, settings.preprocessorState, settings.encoderState,
-    );
+    const cacheResult = this.encodeCache.match(source, image.preprocessorState, image.encoderState);
    const processor = (index === 0) ? this.leftProcessor : this.rightProcessor;

    // Abort anything the processor is currently doing.
@@ -516,113 +372,96 @@ export default class Compress extends Component<Props, State> {
    } else {
      try {
        // Special case for identity
-        if (settings.encoderState.type === identity.type) {
-          file = source.file;
-          data = source.processed;
+        if (image.encoderState.type === identity.type) {
+          ({ file, data } = source);
        } else {
-          preprocessed = (skipPreprocessing && side.preprocessed)
-            ? side.preprocessed
-            : await preprocessImage(source, settings.preprocessorState, processor);
+          preprocessed = (skipPreprocessing && image.preprocessed)
+            ? image.preprocessed
+            : await preprocessImage(source, image.preprocessorState, processor);

-          file = await compressImage(
-            preprocessed, settings.encoderState, source.file.name, processor,
-          );
+          file = await compressImage(preprocessed, image.encoderState, source.file.name, processor);
          data = await decodeImage(file, processor);

          this.encodeCache.add({
+            source,
            data,
            preprocessed,
            file,
-            sourceData: source.processed,
-            encoderState: settings.encoderState,
-            preprocessorState: settings.preprocessorState,
+            encoderState: image.encoderState,
+            preprocessorState: image.preprocessorState,
          });
        }
      } catch (err) {
        if (err.name === 'AbortError') return;
-        this.props.showSnack(`Processing error (type=${settings.encoderState.type}): ${err}`);
+        this.props.showSnack(`Processing error (type=${image.encoderState.type}): ${err}`);
        throw err;
      }
    }

-    const latestData = this.state.sides[index];
+    const latestImage = this.state.images[index];
    // If a later encode has landed before this one, return.
-    if (loadingCounter < latestData.loadedCounter) {
+    if (loadingCounter < latestImage.loadedCounter) {
      return;
    }

-    if (latestData.downloadUrl) URL.revokeObjectURL(latestData.downloadUrl);
-
-    sides = cleanMerge(this.state.sides, index, {
+    images = cleanMerge(this.state.images, index, {
      file,
      data,
      preprocessed,
      downloadUrl: URL.createObjectURL(file),
-      loading: sides[index].loadingCounter !== loadingCounter,
+      loading: images[index].loadingCounter !== loadingCounter,
      loadedCounter: loadingCounter,
-      encodedSettings: settings,
    });

-    this.setState({ sides });
+    this.setState({ images });
  }

-  render({ onBack }: Props, { loading, sides, source, mobileView }: State) {
-    const [leftSide, rightSide] = sides;
-    const [leftImageData, rightImageData] = sides.map(i => i.data);
+  render({ onBack }: Props, { loading, images, source, mobileView }: State) {
+    const [leftImage, rightImage] = images;
+    const [leftImageData, rightImageData] = images.map(i => i.data);

-    const options = sides.map((side, index) => (
+    const options = images.map((image, index) => (
      <Options
        source={source}
        mobileView={mobileView}
-        preprocessorState={side.latestSettings.preprocessorState}
-        encoderState={side.latestSettings.encoderState}
-        onEncoderTypeChange={this.onEncoderTypeChange.bind(this, index as 0|1)}
-        onEncoderOptionsChange={this.onEncoderOptionsChange.bind(this, index as 0|1)}
-        onPreprocessorOptionsChange={this.onPreprocessorOptionsChange.bind(this, index as 0|1)}
+        preprocessorState={image.preprocessorState}
+        encoderState={image.encoderState}
+        onEncoderTypeChange={this.onEncoderTypeChange.bind(this, index)}
+        onEncoderOptionsChange={this.onEncoderOptionsChange.bind(this, index)}
+        onPreprocessorOptionsChange={this.onPreprocessorOptionsChange.bind(this, index)}
      />
    ));

    const copyDirections =
      (mobileView ? ['down', 'up'] : ['right', 'left']) as CopyAcrossIconProps['copyDirection'][];

-    const results = sides.map((side, index) => (
+    const results = images.map((image, index) => (
      <Results
-        downloadUrl={side.downloadUrl}
-        imageFile={side.file}
+        downloadUrl={image.downloadUrl}
+        imageFile={image.file}
        source={source}
-        loading={loading || side.loading}
+        loading={loading || image.loading}
        copyDirection={copyDirections[index]}
-        onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index as 0|1)}
+        onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index)}
        buttonPosition={mobileView ? 'stack-right' : buttonPositions[index]}
      >
        {!mobileView ? null : [
          <ExpandIcon class={style.expandIcon} key="expand-icon"/>,
-          `${resultTitles[index]} (${encoderMap[side.latestSettings.encoderState.type].label})`,
+          `${resultTitles[index]} (${encoderMap[image.encoderState.type].label})`,
        ]}
      </Results>
    ));

-    // For rendering, we ideally want the settings that were used to create the data, not the latest
-    // settings.
-    const leftDisplaySettings = leftSide.encodedSettings || leftSide.latestSettings;
-    const rightDisplaySettings = rightSide.encodedSettings || rightSide.latestSettings;
-    const leftImgContain = leftDisplaySettings.preprocessorState.resize.enabled &&
-      leftDisplaySettings.preprocessorState.resize.fitMethod === 'contain';
-    const rightImgContain = rightDisplaySettings.preprocessorState.resize.enabled &&
-      rightDisplaySettings.preprocessorState.resize.fitMethod === 'contain';
-
    return (
      <div class={style.compress}>
        <Output
-          source={source}
+          originalImage={source && source.data}
          mobileView={mobileView}
          leftCompressed={leftImageData}
          rightCompressed={rightImageData}
-          leftImgContain={leftImgContain}
-          rightImgContain={rightImgContain}
+          leftImgContain={leftImage.preprocessorState.resize.fitMethod === 'cover'}
+          rightImgContain={rightImage.preprocessorState.resize.fitMethod === 'cover'}
          onBack={onBack}
-          inputProcessorState={source && source.inputProcessorState}
-          onInputProcessorChange={this.onInputProcessorChange}
        />
        {mobileView
          ? (
--- a/src/components/compress/result-cache.ts
+++ b/src/components/compress/result-cache.ts
@@ -1,6 +1,7 @@
 import { EncoderState } from '../../codecs/encoders';
 import { Fileish } from '../../lib/initial-util';
 import { shallowEqual } from '../../lib/util';
+import { SourceImage } from '.';
 import { PreprocessorState } from '../../codecs/preprocessors';

 import * as identity from '../../codecs/identity/encoder-meta';
@@ -14,7 +15,7 @@ interface CacheResult {
 interface CacheEntry extends CacheResult {
  preprocessorState: PreprocessorState;
  encoderState: EncoderState;
-  sourceData: ImageData;
+  source: SourceImage;
 }

 const SIZE = 5;
@@ -31,13 +32,13 @@ export default class ResultCache {
  }

  match(
-    sourceData: ImageData,
+    source: SourceImage,
    preprocessorState: PreprocessorState,
    encoderState: EncoderState,
  ): CacheResult | undefined {
    const matchingIndex = this._entries.findIndex((entry) => {
      // Check for quick exits:
-      if (entry.sourceData !== sourceData) return false;
+      if (entry.source !== source) return false;
      if (entry.encoderState.type !== encoderState.type) return false;

      // Check that each set of options in the preprocessor are the same
--- a/src/lib/icons.tsx
+++ b/src/lib/icons.tsx
@@ -12,21 +12,9 @@ export const DownloadIcon = (props: JSX.HTMLAttributes) => (
  </Icon>
 );

-export const ToggleBackgroundIcon = (props: JSX.HTMLAttributes) => (
+export const ToggleIcon = (props: JSX.HTMLAttributes) => (
  <Icon {...props}>
-    <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.9 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z"/>
-  </Icon>
-);
-
-export const ToggleBackgroundActiveIcon = (props: JSX.HTMLAttributes) => (
-  <Icon {...props}>
-    <path d="M9 7H7v2h2V7zm0 4H7v2h2v-2zm0-8a2 2 0 0 0-2 2h2V3zm4 12h-2v2h2v-2zm6-12v2h2a2 2 0 0 0-2-2zm-6 0h-2v2h2V3zM9 17v-2H7c0 1.1.9 2 2 2zm10-4h2v-2h-2v2zm0-4h2V7h-2v2zm0 8a2 2 0 0 0 2-2h-2v2zM5 7H3v12c0 1.1.9 2 2 2h12v-2H5V7zm10-2h2V3h-2v2zm0 12h2v-2h-2v2z"/>
-  </Icon>
-);
-
-export const RotateIcon = (props: JSX.HTMLAttributes) => (
-  <Icon {...props}>
-    <path d="M15.6 5.5L11 1v3a8 8 0 0 0 0 16v-2a6 6 0 0 1 0-12v4l4.5-4.5zm4.3 5.5a8 8 0 0 0-1.6-3.9L17 8.5c.5.8.9 1.6 1 2.5h2zM13 17.9v2a8 8 0 0 0 3.9-1.6L15.5 17c-.8.5-1.6.9-2.5 1zm3.9-2.4l1.4 1.4A8 8 0 0 0 20 13h-2c-.1.9-.5 1.7-1 2.5z"/>
+    <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z" />
  </Icon>
 );

--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,8 +13,5 @@
    "allowJs": false,
    "baseUrl": "."
  },
-  "exclude": [
-    "src/sw/**/*",
-    "src/codecs/processor-worker/**/*"
-  ]
+  "exclude": ["src/sw/**/*"]
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -15,7 +15,6 @@ const WorkerPlugin = require('worker-plugin');
 const AutoSWPlugin = require('./config/auto-sw-plugin');
 const CrittersPlugin = require('critters-webpack-plugin');
 const AssetTemplatePlugin = require('./config/asset-template-plugin');
-const addCssTypes = require('./config/add-css-types');

 function readJson (filename) {
  return JSON.parse(fs.readFileSync(filename));
@@ -23,7 +22,7 @@ function readJson (filename) {

 const VERSION = readJson('./package.json').version;

-module.exports = async function (_, env) {
+module.exports = function (_, env) {
  const isProd = env.mode === 'production';
  const nodeModules = path.join(__dirname, 'node_modules');
  const componentStyleDirs = [
@@ -33,8 +32,6 @@ module.exports = async function (_, env) {
    path.join(__dirname, 'src/lib'),
  ];

-  await addCssTypes(componentStyleDirs, { watch: !isProd });
-
  return {
    mode: isProd ? 'production' : 'development',
    entry: {
@@ -112,7 +109,9 @@ module.exports = async function (_, env) {
            // In production, CSS is extracted to files on disk. In development, it's inlined into JS:
            isProd ? MiniCssExtractPlugin.loader : 'style-loader',
            {
-              loader: 'css-loader',
+              // This is a fork of css-loader that auto-generates .d.ts files for CSS module imports.
+              // The result is a definition file with the exported String classname mappings.
+              loader: 'typings-for-css-modules-loader',
              options: {
                modules: true,
                localIdentName: isProd ? '[hash:base64:5]' : '[local]__[hash:base64:5]',
@@ -170,11 +169,7 @@ module.exports = async function (_, env) {
      ]
    },
    plugins: [
-      new webpack.IgnorePlugin(
-        /(fs|crypto|path)/,
-        new RegExp(`${path.sep}codecs${path.sep}`)
-      ),
-
+      new webpack.IgnorePlugin(/(fs|crypto|path)/, /\/codecs\//),
      // Pretty progressbar showing build progress:
      new ProgressBarPlugin({
        format: '\u001b[90m\u001b[44mBuild\u001b[49m\u001b[39m [:bar] \u001b[32m\u001b[1m:percent\u001b[22m\u001b[39m (:elapseds) \u001b[2m:msg\u001b[22m\r',
@@ -251,11 +246,6 @@ module.exports = async function (_, env) {
        filename: '_headers',
      }),

-      isProd && new AssetTemplatePlugin({
-        template: path.join(__dirname, '_redirects.ejs'),
-        filename: '_redirects',
-      }),
-
      new ScriptExtHtmlPlugin({
        inline: ['first']
      }),