Merge branch 'dev' into button-position

src/codecs/decoders.ts

@@ -1,19 +1,19 @@
-import { nativeDecode, sniffMimeType, canDecodeImage } from '../lib/util';
+import { builtinDecode, sniffMimeType, canDecodeImage } from '../lib/util';
 import Processor from './processor';
 import webpDataUrl from 'url-loader!./tiny.webp';
 
-const nativeWebPSupported = canDecodeImage(webpDataUrl);
+const webPSupported = canDecodeImage(webpDataUrl);
 
 export async function decodeImage(blob: Blob, processor: Processor): Promise<ImageData> {
   const mimeType = await sniffMimeType(blob);
 
   try {
-    if (mimeType === 'image/webp' && !(await nativeWebPSupported)) {
+    if (mimeType === 'image/webp' && !(await webPSupported)) {
       return await processor.webpDecode(blob);
     }
 
     // Otherwise, just throw it at the browser's decoder.
-    return await nativeDecode(blob);
+    return await builtinDecode(blob);
   } catch (err) {
     throw Error("Couldn't decode image");
   }

src/codecs/resize/processor-sync.ts

@@ -1,4 +1,4 @@
-import { nativeResize, NativeResizeMethod, drawableToImageData } from '../../lib/util';
+import { builtinResize, BuiltinResizeMethod, drawableToImageData } from '../../lib/util';
 import { BrowserResizeOptions, VectorResizeOptions } from './processor-meta';
 import { getContainOffsets } from './util';
 
@@ -12,9 +12,9 @@ export function browserResize(data: ImageData, opts: BrowserResizeOptions): Imag
     ({ sx, sy, sw, sh } = getContainOffsets(sw, sh, opts.width, opts.height));
   }
 
-  return nativeResize(
+  return builtinResize(
     data, sx, sy, sw, sh, opts.width, opts.height,
-    opts.method.slice('browser-'.length) as NativeResizeMethod,
+    opts.method.slice('browser-'.length) as BuiltinResizeMethod,
   );
 }
 

src/components/intro/index.tsx

@@ -152,13 +152,20 @@ export default class Intro extends Component<Props, State> {
 
   @bind
   private onAppInstalled() {
+    // We don't need the install button, if it's shown
+    this.setState({ beforeInstallEvent: undefined });
+
+    // Don't log analytics if page is not visible
+    if (document.hidden) {
+      return;
+    }
+
     // 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);
 
+    // Clear the install method property
     this.installingViaButton = false;
-    // We don't need the install button, if it's shown
-    this.setState({ beforeInstallEvent: undefined });
   }
 
   render({ }: Props, { fetchingDemoIndex, beforeInstallEvent }: State) {

src/components/select/index.tsx

@@ -12,8 +12,8 @@ export default class Select extends Component<Props, State> {
 
     return (
       <div class={style.select}>
-        <select class={`${style.nativeSelect} ${large ? style.large : ''}`} {...otherProps}/>
-        <svg class={style.arrow} viewBox="0 0 10 5"><path d="M0 0l5 5 5-5z"/></svg>
+        <select class={`${style.builtinSelect} ${large ? style.large : ''}`} {...otherProps} />
+        <svg class={style.arrow} viewBox="0 0 10 5"><path d="M0 0l5 5 5-5z" /></svg>
       </div>
     );
   }

src/components/select/style.scss

@@ -2,7 +2,7 @@
   position: relative;
 }
 
-.native-select {
+.builtin-select {
   background: #2f2f2f;
   border-radius: 4px;
   font: inherit;

src/index.ts

@@ -24,7 +24,7 @@ if (typeof PRERENDER === 'undefined') {
   ga('create', 'UA-128752250-1', 'auto');
   ga('set', 'transport', 'beacon');
   ga('set', 'dimension1', displayMode);
-  ga('send', 'pageview');
+  ga('send', 'pageview', '/index.html', { title: 'Squoosh' });
   // Load the GA script
   const s = document.createElement('script');
   s.src = 'https://www.google-analytics.com/analytics.js';

src/lib/util.ts

@@ -163,7 +163,7 @@ export function drawableToImageData(
   return ctx.getImageData(0, 0, width, height);
 }
 
-export async function nativeDecode(blob: Blob): Promise<ImageData> {
+export async function builtinDecode(blob: Blob): Promise<ImageData> {
   // Prefer createImageBitmap as it's the off-thread option for Firefox.
   const drawable = 'createImageBitmap' in self ?
     await createImageBitmap(blob) : await blobToImg(blob);
@@ -171,13 +171,13 @@ export async function nativeDecode(blob: Blob): Promise<ImageData> {
   return drawableToImageData(drawable);
 }
 
-export type NativeResizeMethod = 'pixelated' | 'low' | 'medium' | 'high';
+export type BuiltinResizeMethod = 'pixelated' | 'low' | 'medium' | 'high';
 
-export function nativeResize(
+export function builtinResize(
   data: ImageData,
   sx: number, sy: number, sw: number, sh: number,
   dw: number, dh: number,
-  method: NativeResizeMethod,
+  method: BuiltinResizeMethod,
 ): ImageData {
   const canvasSource = document.createElement('canvas');
   canvasSource.width = data.width;

src/sw/util.ts

@@ -116,7 +116,7 @@ export async function cacheAdditionalProcessors(cacheName: string, buildAssets:
     return createImageBitmap(blob).then(() => true, () => false);
   })();
 
-  // No point caching the WebP decoder if it's supported natively:
+  // No point caching the WebP decoder if the browser supports it:
   if (supportsWebP) {
     toCache = toCache.filter(asset => !/webp[\-_]dec/.test(asset));
   }