Merge branch 'dev' into fix_hml

.clang-format

@@ -0,0 +1,2 @@
+BasedOnStyle: Chromium
+ColumnLimit: 100

.travis.yml

@@ -2,3 +2,6 @@ language: node_js
 cache: npm
 script: npm run build
 after_success: npm run sizereport
+os:
+  - linux
+  - windows

README.md

@@ -10,6 +10,7 @@ Google Analytics is used to record the following:
 * [Basic visit data](https://support.google.com/analytics/answer/6004245?ref_topic=2919631).
 * Before and after image size once an image is downloaded. These values are rounded to the nearest
   kilobyte.
+* If install is available, when Squoosh is installed, and what method was used to install Squoosh.
 
 Image compression is handled locally; no additional data is sent to the server.
 

codecs/imagequant/build.sh

@@ -2,6 +2,7 @@
 
 set -e
 
+export EM_CACHE="${PWD}/node_modules/.em_cache"
 export OPTIMIZE="-Os -flto --llvm-lto 1"
 export LDFLAGS="${OPTIMIZE}"
 export CFLAGS="${OPTIMIZE}"
@@ -29,7 +30,6 @@ echo "============================================="
     -I node_modules/libimagequant \
     -o ./imagequant.js \
     --std=c++11 \
-    -x c++ \
     imagequant.cpp \
     node_modules/libimagequant/libimagequant.a
 )

codecs/imagequant/imagequant.cpp

@@ -1,36 +1,37 @@
-#include "emscripten/bind.h"
+#include <emscripten/bind.h>
-#include "emscripten/val.h"
+#include <emscripten/val.h>
-#include <stdlib.h>
 #include <inttypes.h>
 #include <limits.h>
 #include <math.h>
+#include <stdlib.h>
 
 #include "libimagequant.h"
 
 using namespace emscripten;
 
 int version() {
-  return (((LIQ_VERSION/10000) % 100) << 16) |
+  return (((LIQ_VERSION / 10000) % 100) << 16) | (((LIQ_VERSION / 100) % 100) << 8) |
-         (((LIQ_VERSION/100  ) % 100) << 8) |
+         (((LIQ_VERSION / 1) % 100) << 0);
-         (((LIQ_VERSION/1    ) % 100) << 0);
 }
 
 class RawImage {
-public:
+ public:
   val buffer;
   int width;
   int height;
 
-  RawImage(val b, int w, int h)
+  RawImage(val b, int w, int h) : buffer(b), width(w), height(h) {}
-    : buffer(b), width(w), height(h) {}
 };
 
-
+liq_attr* attr;
-liq_attr *attr;
+liq_image* image;
-liq_image *image;
+liq_result* res;
-liq_result *res;
 uint8_t* result;
-RawImage quantize(std::string rawimage, int image_width, int image_height, int num_colors, float dithering) {
+RawImage quantize(std::string rawimage,
+                  int image_width,
+                  int image_height,
+                  int num_colors,
+                  float dithering) {
   const uint8_t* image_buffer = (uint8_t*)rawimage.c_str();
   int size = image_width * image_height;
   attr = liq_attr_create();
@@ -38,12 +39,12 @@ RawImage quantize(std::string rawimage, int image_width, int image_height, int n
   liq_set_max_colors(attr, num_colors);
   liq_image_quantize(image, attr, &res);
   liq_set_dithering_level(res, dithering);
-  uint8_t* image8bit = (uint8_t*) malloc(size);
+  uint8_t* image8bit = (uint8_t*)malloc(size);
-  result = (uint8_t*) malloc(size * 4);
+  result = (uint8_t*)malloc(size * 4);
   liq_write_remapped_image(res, image, image8bit, size);
-  const liq_palette *pal = liq_get_palette(res);
+  const liq_palette* pal = liq_get_palette(res);
   // Turn palletted image back into an RGBA image
-  for(int i = 0; i < size; i++) {
+  for (int i = 0; i < size; i++) {
     result[i * 4 + 0] = pal->entries[image8bit[i]].r;
     result[i * 4 + 1] = pal->entries[image8bit[i]].g;
     result[i * 4 + 2] = pal->entries[image8bit[i]].b;
@@ -53,43 +54,41 @@ RawImage quantize(std::string rawimage, int image_width, int image_height, int n
   liq_result_destroy(res);
   liq_image_destroy(image);
   liq_attr_destroy(attr);
-  return {
+  return {val(typed_memory_view(image_width * image_height * 4, result)), image_width,
-    val(typed_memory_view(image_width*image_height*4, result)),
+          image_height};
-    image_width,
-    image_height
-  };
 }
 
 const liq_color zx_colors[] = {
-  {.r = 0, .g = 0, .b = 0, .a = 255},       // regular black
+    {.r = 0, .g = 0, .b = 0, .a = 255},        // regular black
-  {.r = 0, .g = 0, .b = 215, .a = 255},     // regular blue
+    {.r = 0, .g = 0, .b = 215, .a = 255},      // regular blue
-  {.r = 215, .g = 0, .b = 0, .a = 255},     // regular red
+    {.r = 215, .g = 0, .b = 0, .a = 255},      // regular red
-  {.r = 215, .g = 0, .b = 215, .a = 255},   // regular magenta
+    {.r = 215, .g = 0, .b = 215, .a = 255},    // regular magenta
-  {.r = 0, .g = 215, .b = 0, .a = 255},     // regular green
+    {.r = 0, .g = 215, .b = 0, .a = 255},      // regular green
-  {.r = 0, .g = 215, .b = 215, .a = 255},   // regular cyan
+    {.r = 0, .g = 215, .b = 215, .a = 255},    // regular cyan
-  {.r = 215, .g = 215, .b = 0, .a = 255},   // regular yellow
+    {.r = 215, .g = 215, .b = 0, .a = 255},    // regular yellow
-  {.r = 215, .g = 215, .b = 215, .a = 255}, // regular white
+    {.r = 215, .g = 215, .b = 215, .a = 255},  // regular white
-  {.r = 0, .g = 0, .b = 255, .a = 255},     // bright blue
+    {.r = 0, .g = 0, .b = 255, .a = 255},      // bright blue
-  {.r = 255, .g = 0, .b = 0, .a = 255},     // bright red
+    {.r = 255, .g = 0, .b = 0, .a = 255},      // bright red
-  {.r = 255, .g = 0, .b = 255, .a = 255},   // bright magenta
+    {.r = 255, .g = 0, .b = 255, .a = 255},    // bright magenta
-  {.r = 0, .g = 255, .b = 0, .a = 255},     // bright green
+    {.r = 0, .g = 255, .b = 0, .a = 255},      // bright green
-  {.r = 0, .g = 255, .b = 255, .a = 255},   // bright cyan
+    {.r = 0, .g = 255, .b = 255, .a = 255},    // bright cyan
-  {.r = 255, .g = 255, .b = 0, .a = 255},   // bright yellow
+    {.r = 255, .g = 255, .b = 0, .a = 255},    // bright yellow
-  {.r = 255, .g = 255, .b = 255, .a = 255}  // bright white
+    {.r = 255, .g = 255, .b = 255, .a = 255}   // bright white
 };
 
 uint8_t block[8 * 8 * 4];
 
 /**
- * The ZX has one bit per pixel, but can assign two colours to an 8x8 block. The two colours must
+ * The ZX has one bit per pixel, but can assign two colours to an 8x8 block. The
- * both be 'regular' or 'bright'. Black exists as both regular and bright.
+ * two colours must both be 'regular' or 'bright'. Black exists as both regular
+ * and bright.
  */
 RawImage zx_quantize(std::string rawimage, int image_width, int image_height, float dithering) {
-  const uint8_t* image_buffer = (uint8_t*) rawimage.c_str();
+  const uint8_t* image_buffer = (uint8_t*)rawimage.c_str();
   int size = image_width * image_height;
   int bytes_per_pixel = 4;
-  result = (uint8_t*) malloc(size * bytes_per_pixel);
+  result = (uint8_t*)malloc(size * bytes_per_pixel);
-  uint8_t* image8bit = (uint8_t*) malloc(8 * 8);
+  uint8_t* image8bit = (uint8_t*)malloc(8 * 8);
 
   // For each 8x8 grid
   for (int block_start_y = 0; block_start_y < image_height; block_start_y += 8) {
@@ -99,7 +98,8 @@ RawImage zx_quantize(std::string rawimage, int image_width, int image_height, fl
       int block_width = 8;
       int block_height = 8;
 
-      // If the block hangs off the right/bottom of the image dimensions, make it smaller to fit.
+      // If the block hangs off the right/bottom of the image dimensions, make
+      // it smaller to fit.
       if (block_start_y + block_height > image_height) {
         block_height = image_height - block_start_y;
       }
@@ -125,12 +125,11 @@ RawImage zx_quantize(std::string rawimage, int image_width, int image_height, fl
           for (int color_index = 0; color_index < 15; color_index++) {
             liq_color color = zx_colors[color_index];
 
-            // Using Euclidean distance. LibQuant has better methods, but it requires conversion to
+            // Using Euclidean distance. LibQuant has better methods, but it
-            // LAB, so I don't think it's worth it.
+            // requires conversion to LAB, so I don't think it's worth it.
-            int distance =
+            int distance = pow(color.r - image_buffer[pixel_start + 0], 2) +
-              pow(color.r - image_buffer[pixel_start + 0], 2) +
+                           pow(color.g - image_buffer[pixel_start + 1], 2) +
-              pow(color.g - image_buffer[pixel_start + 1], 2) +
+                           pow(color.b - image_buffer[pixel_start + 2], 2);
-              pow(color.b - image_buffer[pixel_start + 2], 2);
 
             if (distance < smallest_distance) {
               winning_index = color_index;
@@ -151,7 +150,8 @@ RawImage zx_quantize(std::string rawimage, int image_width, int image_height, fl
 
       for (int color_index = 0; color_index < 15; color_index++) {
         if (color_popularity[color_index] > highest_popularity) {
-          // Store this as the most popular pixel, and demote the current values:
+          // Store this as the most popular pixel, and demote the current
+          // values:
           third_color_index = second_color_index;
           third_highest_popularity = second_highest_popularity;
           second_color_index = first_color_index;
@@ -169,8 +169,8 @@ RawImage zx_quantize(std::string rawimage, int image_width, int image_height, fl
         }
       }
 
-      // ZX images can't mix bright and regular colours, except black which appears in both.
+      // ZX images can't mix bright and regular colours, except black which
-      // Resolve any conflict:
+      // appears in both. Resolve any conflict:
       while (1) {
         // If either colour is black, there's no conflict to resolve.
         if (first_color_index != 0 && second_color_index != 0) {
@@ -183,12 +183,13 @@ RawImage zx_quantize(std::string rawimage, int image_width, int image_height, fl
           }
         }
 
-        // If, during conflict resolving, we now have two of the same colour (because we initially
+        // If, during conflict resolving, we now have two of the same colour
-        // selected the bright & regular version of the same colour), retry again with the third
+        // (because we initially selected the bright & regular version of the
-        // most popular colour.
+        // same colour), retry again with the third most popular colour.
         if (first_color_index == second_color_index) {
           second_color_index = third_color_index;
-        } else break;
+        } else
+          break;
       }
 
       // Quantize
@@ -200,13 +201,15 @@ RawImage zx_quantize(std::string rawimage, int image_width, int image_height, fl
       liq_image_quantize(image, attr, &res);
       liq_set_dithering_level(res, dithering);
       liq_write_remapped_image(res, image, image8bit, size);
-      const liq_palette *pal = liq_get_palette(res);
+      const liq_palette* pal = liq_get_palette(res);
 
-      // Turn palletted image back into an RGBA image, and write it into the full size result image.
+      // Turn palletted image back into an RGBA image, and write it into the
-      for(int y = 0; y < block_height; y++) {
+      // full size result image.
-        for(int x = 0; x < block_width; x++) {
+      for (int y = 0; y < block_height; y++) {
+        for (int x = 0; x < block_width; x++) {
           int image8BitPos = y * block_width + x;
-          int resultStartPos = ((block_start_y + y) * bytes_per_pixel * image_width) + ((block_start_x + x) * bytes_per_pixel);
+          int resultStartPos = ((block_start_y + y) * bytes_per_pixel * image_width) +
+                               ((block_start_x + x) * bytes_per_pixel);
           result[resultStartPos + 0] = pal->entries[image8bit[image8BitPos]].r;
           result[resultStartPos + 1] = pal->entries[image8bit[image8BitPos]].g;
           result[resultStartPos + 2] = pal->entries[image8bit[image8BitPos]].b;
@@ -221,11 +224,8 @@ RawImage zx_quantize(std::string rawimage, int image_width, int image_height, fl
   }
 
   free(image8bit);
-  return {
+  return {val(typed_memory_view(image_width * image_height * 4, result)), image_width,
-    val(typed_memory_view(image_width*image_height*4, result)),
+          image_height};
-    image_width,
-    image_height
-  };
 }
 
 void free_result() {
@@ -234,9 +234,9 @@ void free_result() {
 
 EMSCRIPTEN_BINDINGS(my_module) {
   class_<RawImage>("RawImage")
-    .property("buffer", &RawImage::buffer)
+      .property("buffer", &RawImage::buffer)
-    .property("width", &RawImage::width)
+      .property("width", &RawImage::width)
-    .property("height", &RawImage::height);
+      .property("height", &RawImage::height);
 
   function("quantize", &quantize);
   function("zx_quantize", &zx_quantize);

codecs/mozjpeg_enc/build.sh

@@ -2,6 +2,7 @@
 
 set -e
 
+export EM_CACHE="${PWD}/node_modules/.em_cache"
 export OPTIMIZE="-Os -flto --llvm-lto 1"
 export LDFLAGS="${OPTIMIZE}"
 export CFLAGS="${OPTIMIZE}"
@@ -15,9 +16,9 @@ echo "Compiling mozjpeg"
 echo "============================================="
 (
   cd node_modules/mozjpeg
-  autoreconf -fiv
+  autoreconf -iv
-  emconfigure ./configure --without-simd
+  emconfigure ./configure -C --without-simd
-  emmake make libjpeg.la -j`nproc`
+  emmake make libjpeg.la rdswitch.o -j`nproc`
 )
 echo "============================================="
 echo "Compiling mozjpeg done"
@@ -31,18 +32,15 @@ echo "============================================="
     --bind \
     ${OPTIMIZE} \
     --closure 1 \
-    -s WASM=1 \
     -s ALLOW_MEMORY_GROWTH=1 \
     -s MODULARIZE=1 \
     -s 'EXPORT_NAME="mozjpeg_enc"' \
     -I node_modules/mozjpeg \
     -o ./mozjpeg_enc.js \
-    -Wno-deprecated-register \
+    -std=c++11 \
-    -Wno-writable-strings \
-    node_modules/mozjpeg/rdswitch.c \
-    -x c++ -std=c++11 \
     mozjpeg_enc.cpp \
-    node_modules/mozjpeg/.libs/libjpeg.a
+    node_modules/mozjpeg/.libs/libjpeg.a \
+    node_modules/mozjpeg/rdswitch.o
 )
 echo "============================================="
 echo "Compiling wasm bindings done"

codecs/mozjpeg_enc/mozjpeg_enc.cpp

@@ -1,18 +1,22 @@
 #include <emscripten/bind.h>
 #include <emscripten/val.h>
-#include <stdlib.h>
 #include <inttypes.h>
-#include <stdio.h>
 #include <setjmp.h>
+#include <stdio.h>
+#include <stdlib.h>
 #include <string.h>
 #include "config.h"
 #include "jpeglib.h"
+
+extern "C" {
 #include "cdjpeg.h"
+}
 
 using namespace emscripten;
 
-// MozJPEG doesn’t expose a numeric version, so I have to do some fun C macro hackery to turn it
+// MozJPEG doesn’t expose a numeric version, so I have to do some fun C macro
-// into a string. More details here: https://gcc.gnu.org/onlinedocs/cpp/Stringizing.html
+// hackery to turn it into a string. More details here:
+// https://gcc.gnu.org/onlinedocs/cpp/Stringizing.html
 #define xstr(s) str(s)
 #define str(s) #s
 
@@ -39,8 +43,8 @@ int version() {
   char buffer[] = xstr(MOZJPEG_VERSION);
   int version = 0;
   int last_index = 0;
-  for(int i = 0; i < strlen(buffer); i++) {
+  for (int i = 0; i < strlen(buffer); i++) {
-    if(buffer[i] == '.') {
+    if (buffer[i] == '.') {
       buffer[i] = '\0';
       version = version << 8 | atoi(&buffer[last_index]);
       buffer[i] = '.';
@@ -55,13 +59,12 @@ uint8_t* last_result;
 struct jpeg_compress_struct cinfo;
 
 val encode(std::string image_in, int image_width, int image_height, MozJpegOptions opts) {
-  uint8_t* image_buffer = (uint8_t*) image_in.c_str();
+  uint8_t* image_buffer = (uint8_t*)image_in.c_str();
 
   // The code below is basically the `write_JPEG_file` function from
   // https://github.com/mozilla/mozjpeg/blob/master/example.c
   // I just write to memory instead of a file.
 
-
   /* This struct contains the JPEG compression parameters and pointers to
    * working space (which is allocated as needed by the JPEG library).
    * It is possible to have several such structures, representing multiple
@@ -78,8 +81,8 @@ val encode(std::string image_in, int image_width, int image_height, MozJpegOptio
    */
   struct jpeg_error_mgr jerr;
   /* More stuff */
-  JSAMPROW row_pointer[1];      /* pointer to JSAMPLE row[s] */
+  JSAMPROW row_pointer[1]; /* pointer to JSAMPLE row[s] */
-  int row_stride;               /* physical row width in image buffer */
+  int row_stride;          /* physical row width in image buffer */
   uint8_t* output;
   unsigned long size;
 
@@ -113,17 +116,17 @@ val encode(std::string image_in, int image_width, int image_height, MozJpegOptio
   /* First we supply a description of the input image.
    * Four fields of the cinfo struct must be filled in:
    */
-  cinfo.image_width = image_width;      /* image width and height, in pixels */
+  cinfo.image_width = image_width; /* image width and height, in pixels */
   cinfo.image_height = image_height;
-  cinfo.input_components = 4;           /* # of color components per pixel */
+  cinfo.input_components = 4;          /* # of color components per pixel */
-  cinfo.in_color_space = JCS_EXT_RGBA;  /* colorspace of input image */
+  cinfo.in_color_space = JCS_EXT_RGBA; /* colorspace of input image */
   /* Now use the library's routine to set default compression parameters.
    * (You must set at least cinfo.in_color_space before calling this,
    * since the defaults depend on the source color space.)
    */
   jpeg_set_defaults(&cinfo);
 
-  jpeg_set_colorspace(&cinfo, (J_COLOR_SPACE) opts.color_space);
+  jpeg_set_colorspace(&cinfo, (J_COLOR_SPACE)opts.color_space);
 
   if (opts.quant_table != -1) {
     jpeg_c_set_int_param(&cinfo, JINT_BASE_QUANT_TBL_IDX, opts.quant_table);
@@ -143,17 +146,17 @@ val encode(std::string image_in, int image_width, int image_height, MozJpegOptio
   jpeg_c_set_bool_param(&cinfo, JBOOLEAN_TRELLIS_Q_OPT, opts.trellis_opt_table);
   jpeg_c_set_int_param(&cinfo, JINT_TRELLIS_NUM_LOOPS, opts.trellis_loops);
 
-  // A little hacky to build a string for this, but it means we can use set_quality_ratings which
+  // A little hacky to build a string for this, but it means we can use
-  // does some useful heuristic stuff.
+  // set_quality_ratings which does some useful heuristic stuff.
   std::string quality_str = std::to_string(opts.quality);
 
   if (opts.separate_chroma_quality && opts.color_space == JCS_YCbCr) {
     quality_str += "," + std::to_string(opts.chroma_quality);
   }
 
-  char const *pqual = quality_str.c_str();
+  char const* pqual = quality_str.c_str();
 
-  set_quality_ratings(&cinfo, (char*) pqual, opts.baseline);
+  set_quality_ratings(&cinfo, (char*)pqual, opts.baseline);
 
   if (!opts.auto_subsample && opts.color_space == JCS_YCbCr) {
     cinfo.comp_info[0].h_samp_factor = opts.chroma_subsample;
@@ -188,8 +191,8 @@ val encode(std::string image_in, int image_width, int image_height, MozJpegOptio
      * Here the array is only one element long, but you could pass
      * more than one scanline at a time if that's more convenient.
      */
-    row_pointer[0] = & image_buffer[cinfo.next_scanline * row_stride];
+    row_pointer[0] = &image_buffer[cinfo.next_scanline * row_stride];
-    (void) jpeg_write_scanlines(&cinfo, row_pointer, 1);
+    (void)jpeg_write_scanlines(&cinfo, row_pointer, 1);
   }
 
   /* Step 6: Finish compression */
@@ -210,23 +213,22 @@ void free_result() {
 
 EMSCRIPTEN_BINDINGS(my_module) {
   value_object<MozJpegOptions>("MozJpegOptions")
-    .field("quality", &MozJpegOptions::quality)
+      .field("quality", &MozJpegOptions::quality)
-    .field("baseline", &MozJpegOptions::baseline)
+      .field("baseline", &MozJpegOptions::baseline)
-    .field("arithmetic", &MozJpegOptions::arithmetic)
+      .field("arithmetic", &MozJpegOptions::arithmetic)
-    .field("progressive", &MozJpegOptions::progressive)
+      .field("progressive", &MozJpegOptions::progressive)
-    .field("optimize_coding", &MozJpegOptions::optimize_coding)
+      .field("optimize_coding", &MozJpegOptions::optimize_coding)
-    .field("smoothing", &MozJpegOptions::smoothing)
+      .field("smoothing", &MozJpegOptions::smoothing)
-    .field("color_space", &MozJpegOptions::color_space)
+      .field("color_space", &MozJpegOptions::color_space)
-    .field("quant_table", &MozJpegOptions::quant_table)
+      .field("quant_table", &MozJpegOptions::quant_table)
-    .field("trellis_multipass", &MozJpegOptions::trellis_multipass)
+      .field("trellis_multipass", &MozJpegOptions::trellis_multipass)
-    .field("trellis_opt_zero", &MozJpegOptions::trellis_opt_zero)
+      .field("trellis_opt_zero", &MozJpegOptions::trellis_opt_zero)
-    .field("trellis_opt_table", &MozJpegOptions::trellis_opt_table)
+      .field("trellis_opt_table", &MozJpegOptions::trellis_opt_table)
-    .field("trellis_loops", &MozJpegOptions::trellis_loops)
+      .field("trellis_loops", &MozJpegOptions::trellis_loops)
-    .field("chroma_subsample", &MozJpegOptions::chroma_subsample)
+      .field("chroma_subsample", &MozJpegOptions::chroma_subsample)
-    .field("auto_subsample", &MozJpegOptions::auto_subsample)
+      .field("auto_subsample", &MozJpegOptions::auto_subsample)
-    .field("separate_chroma_quality", &MozJpegOptions::separate_chroma_quality)
+      .field("separate_chroma_quality", &MozJpegOptions::separate_chroma_quality)
-    .field("chroma_quality", &MozJpegOptions::chroma_quality)
+      .field("chroma_quality", &MozJpegOptions::chroma_quality);
-    ;
 
   function("version", &version);
   function("encode", &encode);

codecs/webp/build.sh

@@ -2,6 +2,7 @@
 
 set -e
 
+export EM_CACHE="${PWD}/node_modules/.em_cache"
 export OPTIMIZE="-Os -flto --llvm-lto 1"
 export LDFLAGS="${OPTIMIZE}"
 export CFLAGS="${OPTIMIZE}"
@@ -14,10 +15,8 @@ echo "Compiling libwebp"
 echo "============================================="
 test -n "$SKIP_LIBWEBP" || (
   cd node_modules/libwebp
-  autoreconf -fiv
+  autoreconf -iv
-  rm -rf build || true
+  emconfigure ./configure -C \
-  mkdir -p build && cd build
-  emconfigure ../configure \
     --disable-libwebpdemux \
     --disable-wic \
     --disable-gif \
@@ -44,12 +43,23 @@ echo "============================================="
     -s ALLOW_MEMORY_GROWTH=1 \
     -s MODULARIZE=1 \
     -s 'EXPORT_NAME="webp_dec"' \
-    --std=c++11 \
     -I node_modules/libwebp \
-    -o ./webp_dec.js \
+    -o dec/webp_dec.js \
-    -x c++ \
+    dec/webp_dec.cpp \
-    webp_dec.cpp \
+    node_modules/libwebp/src/.libs/libwebp.a
-    node_modules/libwebp/build/src/.libs/libwebp.a
+)
+(
+  emcc \
+    ${OPTIMIZE} \
+    --closure 1 \
+    --bind \
+    -s ALLOW_MEMORY_GROWTH=1 \
+    -s MODULARIZE=1 \
+    -s 'EXPORT_NAME="webp_enc"' \
+    -I node_modules/libwebp \
+    -o enc/webp_enc.js \
+    enc/webp_enc.cpp \
+    node_modules/libwebp/src/.libs/libwebp.a
 )
 echo "============================================="
 echo "Compiling wasm bindings done"

codecs/webp/dec/example.html

@@ -10,7 +10,7 @@
 
   Module.onRuntimeInitialized = async _ => {
     console.log('Version:', Module.version().toString(16));
-    const image = await loadFile('../example.webp');
+    const image = await loadFile('../../example.webp');
     const result = Module.decode(image);
     const imageData = new ImageData(new Uint8ClampedArray(result.buffer), result.width, result.height);
     Module.free_result();

codecs/webp/dec/webp_dec.cpp

@@ -1,8 +1,8 @@
+#include <string>
 #include "emscripten/bind.h"
 #include "emscripten/val.h"
 #include "src/webp/decode.h"
 #include "src/webp/demux.h"
-#include <string>
 
 using namespace emscripten;
 
@@ -11,24 +11,19 @@ int version() {
 }
 
 class RawImage {
-public:
+ public:
   val buffer;
   int width;
   int height;
 
-  RawImage(val b, int w, int h)
+  RawImage(val b, int w, int h) : buffer(b), width(w), height(h) {}
-    : buffer(b), width(w), height(h) {}
 };
 
 uint8_t* last_result;
 RawImage decode(std::string buffer) {
   int width, height;
   last_result = WebPDecodeRGBA((const uint8_t*)buffer.c_str(), buffer.size(), &width, &height);
-  return RawImage(
+  return RawImage(val(typed_memory_view(width * height * 4, last_result)), width, height);
-    val(typed_memory_view(width*height*4, last_result)),
-    width,
-    height
-  );
 }
 
 void free_result() {
@@ -37,9 +32,9 @@ void free_result() {
 
 EMSCRIPTEN_BINDINGS(my_module) {
   class_<RawImage>("RawImage")
-    .property("buffer", &RawImage::buffer)
+      .property("buffer", &RawImage::buffer)
-    .property("width", &RawImage::width)
+      .property("width", &RawImage::width)
-    .property("height", &RawImage::height);
+      .property("height", &RawImage::height);
 
   function("decode", &decode);
   function("version", &version);

codecs/webp/enc/example.html

@@ -19,7 +19,7 @@
 
   module.onRuntimeInitialized = async _ => {
     console.log('Version:', module.version().toString(16));
-    const image = await loadImage('../example.png');
+    const image = await loadImage('../../example.png');
     const result = module.encode(image.data, image.width, image.height, {
       quality: 75,
       target_size: 0,

codecs/webp/enc/webp_enc.cpp

@@ -0,0 +1,93 @@
+#include <emscripten/bind.h>
+#include <emscripten/val.h>
+#include <stdlib.h>
+#include <string.h>
+#include <stdexcept>
+#include "src/webp/encode.h"
+
+using namespace emscripten;
+
+int version() {
+  return WebPGetEncoderVersion();
+}
+
+uint8_t* last_result;
+
+val encode(std::string img, int width, int height, WebPConfig config) {
+  uint8_t* img_in = (uint8_t*)img.c_str();
+
+  // A lot of this is duplicated from Encode in picture_enc.c
+  WebPPicture pic;
+  WebPMemoryWriter wrt;
+  int ok;
+
+  if (!WebPPictureInit(&pic)) {
+    // shouldn't happen, except if system installation is broken
+    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.width = width;
+  pic.height = height;
+  pic.writer = WebPMemoryWrite;
+  pic.custom_ptr = &wrt;
+
+  WebPMemoryWriterInit(&wrt);
+
+  ok = WebPPictureImportRGBA(&pic, (uint8_t*)img_in, width * 4) && WebPEncode(&config, &pic);
+  WebPPictureFree(&pic);
+  if (!ok) {
+    WebPMemoryWriterClear(&wrt);
+    throw std::runtime_error("Encode failed");
+  }
+
+  last_result = wrt.mem;
+
+  return val(typed_memory_view(wrt.size, wrt.mem));
+}
+
+void free_result() {
+  WebPFree(last_result);
+}
+
+EMSCRIPTEN_BINDINGS(my_module) {
+  enum_<WebPImageHint>("WebPImageHint")
+      .value("WEBP_HINT_DEFAULT", WebPImageHint::WEBP_HINT_DEFAULT)
+      .value("WEBP_HINT_PICTURE", WebPImageHint::WEBP_HINT_PICTURE)
+      .value("WEBP_HINT_PHOTO", WebPImageHint::WEBP_HINT_PHOTO)
+      .value("WEBP_HINT_GRAPH", WebPImageHint::WEBP_HINT_GRAPH);
+
+  value_object<WebPConfig>("WebPConfig")
+      .field("lossless", &WebPConfig::lossless)
+      .field("quality", &WebPConfig::quality)
+      .field("method", &WebPConfig::method)
+      .field("image_hint", &WebPConfig::image_hint)
+      .field("target_size", &WebPConfig::target_size)
+      .field("target_PSNR", &WebPConfig::target_PSNR)
+      .field("segments", &WebPConfig::segments)
+      .field("sns_strength", &WebPConfig::sns_strength)
+      .field("filter_strength", &WebPConfig::filter_strength)
+      .field("filter_sharpness", &WebPConfig::filter_sharpness)
+      .field("filter_type", &WebPConfig::filter_type)
+      .field("autofilter", &WebPConfig::autofilter)
+      .field("alpha_compression", &WebPConfig::alpha_compression)
+      .field("alpha_filtering", &WebPConfig::alpha_filtering)
+      .field("alpha_quality", &WebPConfig::alpha_quality)
+      .field("pass", &WebPConfig::pass)
+      .field("show_compressed", &WebPConfig::show_compressed)
+      .field("preprocessing", &WebPConfig::preprocessing)
+      .field("partitions", &WebPConfig::partitions)
+      .field("partition_limit", &WebPConfig::partition_limit)
+      .field("emulate_jpeg_size", &WebPConfig::emulate_jpeg_size)
+      .field("thread_level", &WebPConfig::thread_level)
+      .field("low_memory", &WebPConfig::low_memory)
+      .field("near_lossless", &WebPConfig::near_lossless)
+      .field("exact", &WebPConfig::exact)
+      .field("use_delta_palette", &WebPConfig::use_delta_palette)
+      .field("use_sharp_yuv", &WebPConfig::use_sharp_yuv);
+
+  function("version", &version);
+  function("encode", &encode);
+  function("free_result", &free_result);
+}

codecs/webp/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "webp_enc",
+  "name": "webp",
   "requires": true,
   "lockfileVersion": 1,
   "dependencies": {

codecs/webp/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "webp_enc",
+  "name": "webp",
   "scripts": {
     "install": "napa",
     "build": "docker run --rm -v $(pwd):/src trzeci/emscripten-upstream ./build.sh"

codecs/webp_dec/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "webp_dec",
-  "scripts": {
-    "install": "napa",
-    "build": "docker run --rm -v $(pwd):/src trzeci/emscripten-upstream ./build.sh"
-  },
-  "napa": {
-    "libwebp": "webmproject/libwebp#v1.0.2"
-  },
-  "devDependencies": {
-    "napa": "3.0.0"
-  }
-}

codecs/webp_enc/build.sh

@@ -1,62 +0,0 @@
-#!/bin/bash
-
-set -e
-
-export OPTIMIZE="-Os -flto --llvm-lto 1"
-export LDFLAGS="${OPTIMIZE}"
-export CFLAGS="${OPTIMIZE}"
-export CPPFLAGS="${OPTIMIZE}"
-
-apt-get update
-apt-get install -qqy autoconf libtool pkg-config
-
-echo "============================================="
-echo "Compiling libwebp"
-echo "============================================="
-test -n "$SKIP_LIBWEBP" || (
-  cd node_modules/libwebp
-  autoreconf -fiv
-  rm -rf build || true
-  mkdir -p build && cd build
-  emconfigure ../configure \
-    --disable-libwebpdemux \
-    --disable-wic \
-    --disable-gif \
-    --disable-tiff \
-    --disable-jpeg \
-    --disable-png \
-    --disable-sdl \
-    --disable-gl \
-    --disable-threading \
-    --disable-neon-rtcd \
-    --disable-neon \
-    --disable-sse2 \
-    --disable-sse4.1
-  emmake make -j`nproc`
-)
-echo "============================================="
-echo "Compiling wasm bindings"
-echo "============================================="
-(
-  emcc \
-    ${OPTIMIZE} \
-    --closure 1 \
-    --bind \
-    -s ALLOW_MEMORY_GROWTH=1 \
-    -s MODULARIZE=1 \
-    -s 'EXPORT_NAME="webp_enc"' \
-    --std=c++11 \
-    -I node_modules/libwebp \
-    -o ./webp_enc.js \
-    -x c++ \
-    webp_enc.cpp \
-    node_modules/libwebp/build/src/.libs/libwebp.a
-)
-echo "============================================="
-echo "Compiling wasm bindings done"
-echo "============================================="
-
-echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
-echo "Did you update your docker image?"
-echo "Run \`docker pull trzeci/emscripten-upstream\`"
-echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"

codecs/webp_enc/webp_enc.cpp

@@ -1,96 +0,0 @@
-#include <emscripten/bind.h>
-#include <emscripten/val.h>
-#include "src/webp/encode.h"
-#include <stdlib.h>
-#include <string.h>
-#include <stdexcept>
-
-using namespace emscripten;
-
-int version() {
-  return WebPGetEncoderVersion();
-}
-
-uint8_t* last_result;
-
-val encode(std::string img, int width, int height, WebPConfig config) {
-  uint8_t* img_in = (uint8_t*) img.c_str();
-
-  // A lot of this is duplicated from Encode in picture_enc.c
-  WebPPicture pic;
-  WebPMemoryWriter wrt;
-  int ok;
-
-  if (!WebPPictureInit(&pic)) {
-    // shouldn't happen, except if system installation is broken
-    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.width = width;
-  pic.height = height;
-  pic.writer = WebPMemoryWrite;
-  pic.custom_ptr = &wrt;
-
-  WebPMemoryWriterInit(&wrt);
-
-  ok = WebPPictureImportRGBA(&pic, (uint8_t*) img_in, width * 4) && WebPEncode(&config, &pic);
-  WebPPictureFree(&pic);
-  if (!ok) {
-    WebPMemoryWriterClear(&wrt);
-    throw std::runtime_error("Encode failed");
-  }
-
-  last_result = wrt.mem;
-
-  return val(typed_memory_view(wrt.size, wrt.mem));
-}
-
-void free_result() {
-  WebPFree(last_result);
-}
-
-
-EMSCRIPTEN_BINDINGS(my_module) {
-  enum_<WebPImageHint>("WebPImageHint")
-    .value("WEBP_HINT_DEFAULT", WebPImageHint::WEBP_HINT_DEFAULT)
-    .value("WEBP_HINT_PICTURE", WebPImageHint::WEBP_HINT_PICTURE)
-    .value("WEBP_HINT_PHOTO", WebPImageHint::WEBP_HINT_PHOTO)
-    .value("WEBP_HINT_GRAPH", WebPImageHint::WEBP_HINT_GRAPH)
-    ;
-
-  value_object<WebPConfig>("WebPConfig")
-    .field("lossless", &WebPConfig::lossless)
-    .field("quality", &WebPConfig::quality)
-    .field("method", &WebPConfig::method)
-    .field("image_hint", &WebPConfig::image_hint)
-    .field("target_size", &WebPConfig::target_size)
-    .field("target_PSNR", &WebPConfig::target_PSNR)
-    .field("segments", &WebPConfig::segments)
-    .field("sns_strength", &WebPConfig::sns_strength)
-    .field("filter_strength", &WebPConfig::filter_strength)
-    .field("filter_sharpness", &WebPConfig::filter_sharpness)
-    .field("filter_type", &WebPConfig::filter_type)
-    .field("autofilter", &WebPConfig::autofilter)
-    .field("alpha_compression", &WebPConfig::alpha_compression)
-    .field("alpha_filtering", &WebPConfig::alpha_filtering)
-    .field("alpha_quality", &WebPConfig::alpha_quality)
-    .field("pass", &WebPConfig::pass)
-    .field("show_compressed", &WebPConfig::show_compressed)
-    .field("preprocessing", &WebPConfig::preprocessing)
-    .field("partitions", &WebPConfig::partitions)
-    .field("partition_limit", &WebPConfig::partition_limit)
-    .field("emulate_jpeg_size", &WebPConfig::emulate_jpeg_size)
-    .field("thread_level", &WebPConfig::thread_level)
-    .field("low_memory", &WebPConfig::low_memory)
-    .field("near_lossless", &WebPConfig::near_lossless)
-    .field("exact", &WebPConfig::exact)
-    .field("use_delta_palette", &WebPConfig::use_delta_palette)
-    .field("use_sharp_yuv", &WebPConfig::use_sharp_yuv)
-    ;
-
-  function("version", &version);
-  function("encode", &encode);
-  function("free_result", &free_result);
-}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "squoosh",
-  "version": "1.9.1",
+  "version": "1.11.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "squoosh",
-  "version": "1.9.1",
+  "version": "1.11.3",
   "license": "apache-2.0",
   "scripts": {
     "start": "webpack-dev-server --host 0.0.0.0 --hot",

sizereport.config.js

@@ -3,7 +3,7 @@ const escapeRE = require("escape-string-regexp");
 module.exports = {
   repo: "GoogleChromeLabs/squoosh",
   path: "build/**/!(*.map)",
-  branch: "master",
+  branch: "dev",
   findRenamed(path, newPaths) {
     const nameParts = /^(.+\.)[a-f0-9]+(\..+)$/.exec(path);
     if (!nameParts) return;

src/codecs/webp/decoder.ts

@@ -1,5 +1,5 @@
-import webp_dec, { WebPModule } from '../../../codecs/webp_dec/webp_dec';
+import webp_dec, { WebPModule } from '../../../codecs/webp/dec/webp_dec';
-import wasmUrl from '../../../codecs/webp_dec/webp_dec.wasm';
+import wasmUrl from '../../../codecs/webp/dec/webp_dec.wasm';
 import { initEmscriptenModule } from '../util';
 
 let emscriptenModule: Promise<WebPModule>;

src/codecs/webp/encoder.ts

@@ -1,5 +1,5 @@
-import webp_enc, { WebPModule } from '../../../codecs/webp_enc/webp_enc';
+import webp_enc, { WebPModule } from '../../../codecs/webp/enc/webp_enc';
-import wasmUrl from '../../../codecs/webp_enc/webp_enc.wasm';
+import wasmUrl from '../../../codecs/webp/enc/webp_enc.wasm';
 import { EncodeOptions } from './encoder-meta';
 import { initEmscriptenModule } from '../util';
 

src/codecs/webp/options.tsx

@@ -270,7 +270,7 @@ export default class WebPEncoderOptions extends Component<Props, State> {
                   value={options.sns_strength}
                   onInput={this.onChange}
                 >
-                  Spacial noise shaping:
+                  Spatial noise shaping:
                 </Range>
               </div>
               <label class={style.optionTextFirst}>

src/components/intro/index.tsx

@@ -41,17 +41,31 @@ const demos = [
   },
 ];
 
+const installButtonSource = 'introInstallButton-Purple';
+
 interface Props {
   onFile: (file: File | Fileish) => void;
   showSnack: SnackBarElement['showSnackbar'];
 }
 interface State {
   fetchingDemoIndex?: number;
+  beforeInstallEvent?: BeforeInstallPromptEvent;
 }
 
 export default class Intro extends Component<Props, State> {
   state: State = {};
   private fileInput?: HTMLInputElement;
+  private installingViaButton = false;
+
+  constructor() {
+    super();
+
+    // Listen for beforeinstallprompt events, indicating Squoosh is installable.
+    window.addEventListener('beforeinstallprompt', this.onBeforeInstallPromptEvent);
+
+    // Listen for the appinstalled event, indicating Squoosh has been installed.
+    window.addEventListener('appinstalled', this.onAppInstalled);
+  }
 
   @bind
   private resetFileInput() {
@@ -90,7 +104,64 @@ export default class Intro extends Component<Props, State> {
     }
   }
 
-  render({ }: Props, { fetchingDemoIndex }: State) {
+  @bind
+  private onBeforeInstallPromptEvent(event: BeforeInstallPromptEvent) {
+    // Don't show the mini-infobar on mobile
+    event.preventDefault();
+
+    // Save the beforeinstallprompt event so it can be called later.
+    this.setState({ beforeInstallEvent: event });
+
+    // Log the event.
+    const gaEventInfo = {
+      eventCategory: 'pwa-install',
+      eventAction: 'promo-shown',
+      nonInteraction: true,
+    };
+    ga('send', 'event', gaEventInfo);
+  }
+
+  @bind
+  private async onInstallClick(event: Event) {
+    // Get the deferred beforeinstallprompt event
+    const beforeInstallEvent = this.state.beforeInstallEvent;
+    // If there's no deferred prompt, bail.
+    if (!beforeInstallEvent) return;
+
+    this.installingViaButton = true;
+
+    // Show the browser install prompt
+    beforeInstallEvent.prompt();
+
+    // Wait for the user to accept or dismiss the install prompt
+    const { outcome } = await beforeInstallEvent.userChoice;
+    // Send the analytics data
+    const gaEventInfo = {
+      eventCategory: 'pwa-install',
+      eventAction: 'promo-clicked',
+      eventLabel: installButtonSource,
+      eventValue: outcome === 'accepted' ? 1 : 0,
+    };
+    ga('send', 'event', gaEventInfo);
+
+    // If the prompt was dismissed, we aren't going to install via the button.
+    if (outcome === 'dismissed') {
+      this.installingViaButton = false;
+    }
+  }
+
+  @bind
+  private onAppInstalled() {
+    // Try to get the install, if it's not set, use 'browser'
+    const source = this.installingViaButton ? installButtonSource : 'browser';
+    ga('send', 'event', 'pwa-install', 'installed', source);
+
+    this.installingViaButton = false;
+    // We don't need the install button, if it's shown
+    this.setState({ beforeInstallEvent: undefined });
+  }
+
+  render({ }: Props, { fetchingDemoIndex, beforeInstallEvent }: State) {
     return (
       <div class={style.intro}>
         <div>
@@ -120,7 +191,7 @@ export default class Intro extends Component<Props, State> {
                         <img class={style.demoIcon} src={demo.iconUrl} alt="" decoding="async" />
                         {fetchingDemoIndex === i &&
                           <div class={style.demoLoading}>
-                            <loading-spinner class={style.demoLoadingSpinner}/>
+                            <loading-spinner class={style.demoLoadingSpinner} />
                           </div>
                         }
                       </div>
@@ -132,11 +203,20 @@ export default class Intro extends Component<Props, State> {
             )}
           </ul>
         </div>
+        {beforeInstallEvent &&
+          <button
+            type="button"
+            class={style.installButton}
+            onClick={this.onInstallClick}
+          >
+            Install
+          </button>
+        }
         <ul class={style.relatedLinks}>
           <li><a href="https://github.com/GoogleChromeLabs/squoosh/">View the code</a></li>
           <li><a href="https://github.com/GoogleChromeLabs/squoosh/issues">Report a bug</a></li>
           <li>
-            <a href="https://github.com/GoogleChromeLabs/squoosh/blob/master/README.md#privacy">
+            <a href="https://github.com/GoogleChromeLabs/squoosh/blob/dev/README.md#privacy">
               Privacy
             </a>
           </li>

src/components/intro/missing-types.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The BeforeInstallPromptEvent is fired at the Window.onbeforeinstallprompt handler
+ * before a user is prompted to "install" a web site to a home screen on mobile.
+ */
+interface BeforeInstallPromptEvent extends Event {
+
+  /**
+   * Returns an array of DOMString items containing the platforms on which the event was dispatched.
+   * This is provided for user agents that want to present a choice of versions to the user such as,
+   * for example, "web" or "play" which would allow the user to chose between a web version or
+   * an Android version.
+   */
+  readonly platforms: Array<string>;
+
+  /**
+   * Returns a Promise that resolves to a DOMString containing either "accepted" or "dismissed".
+   */
+  readonly userChoice: Promise<{
+    outcome: 'accepted' | 'dismissed',
+    platform: string
+  }>;
+
+  /**
+   * Allows a developer to show the install prompt at a time of their own choosing.
+   * This method returns a Promise.
+   */
+  prompt(): Promise<void>;
+}
+
+interface WindowEventMap {
+  "beforeinstallprompt": BeforeInstallPromptEvent;
+}

src/components/intro/style.scss

@@ -170,6 +170,31 @@
   --color: #fff;
 }
 
+.install-button {
+  composes: unbutton from '../../lib/util.scss';
+
+  &:hover,
+  &:focus {
+    background: #504488;
+  }
+
+  background: #5D509E;
+  border: 1px solid #e8e8e8;
+  color: #fff;
+  padding: 14px;
+  font-size: 1.3rem;
+
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+
+  animation: fade-in .3s ease-in-out;
+}
+
+@keyframes fade-in {
+	from { opacity: 0; }
+}
+
 .related-links {
   display: flex;
   padding: 0;

src/index.ts

@@ -13,11 +13,19 @@ if (!('customElements' in self)) {
 }
 
 if (typeof PRERENDER === 'undefined') {
+  // Determine the current display mode.
+  let displayMode = 'browser';
+  const mqStandAlone = '(display-mode: standalone)';
+  if (navigator.standalone || window.matchMedia(mqStandAlone).matches) {
+    displayMode = 'standalone';
+  }
+  // Setup analytics
   window.ga = window.ga || ((...args) => (ga.q = ga.q || []).push(args));
   ga('create', 'UA-128752250-1', 'auto');
   ga('set', 'transport', 'beacon');
+  ga('set', 'dimension1', displayMode);
   ga('send', 'pageview');
-    // Load the GA script
+  // Load the GA script
   const s = document.createElement('script');
   s.src = 'https://www.google-analytics.com/analytics.js';
   document.head!.appendChild(s);

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Squoosh",
   "short_name": "Squoosh",
-  "start_url": "/",
+  "start_url": "/?utm_medium=PWA&utm_source=launcher",
   "display": "standalone",
   "orientation": "any",
   "background_color": "#fff",
@@ -20,7 +20,7 @@
     }
   ],
   "share_target": {
-    "action": "/?share-target",
+    "action": "/?utm_medium=PWA&utm_source=share-target&share-target",
     "method": "POST",
     "enctype": "multipart/form-data",
     "params": {

src/missing-types.d.ts

@@ -39,3 +39,7 @@ declare var ga: {
   (...args: any[]): void;
   q: any[];
 };
+
+interface Navigator {
+	readonly standalone: boolean;
+}