Fixing edge bug

src/components/App/index.tsx

@@ -74,7 +74,7 @@ export default class App extends Component<Props, State> {
   render({}: Props, { file, Compress }: State) {
     return (
       <div id="app" class={style.app}>
-        <file-drop accept="image/*" onfiledrop={this.onFileDrop}>
+        <file-drop accept="image/*" onfiledrop={this.onFileDrop} class={style.drop}>
           {(!file)
             ? <Intro onFile={this.onIntroPickFile} onError={this.showError} />
             : (Compress)

src/components/App/style.scss

@@ -12,14 +12,14 @@ Note: These styles are temporary. They will be replaced before going live.
   contain: strict;
 }
 
-:global {
+.drop {
-  file-drop {
+  overflow: hidden;
-    overflow: hidden;
+  touch-action: none;
-    touch-action: none;
+  height: 100%;
-    height:100%;
+  width: 100%;
-    width:100%;
 
-    &:after {
+  &:global {
+    &::after {
       content: '';
       position: absolute;
       display: block;
@@ -28,28 +28,20 @@ Note: These styles are temporary. They will be replaced before going live.
       right: 10px;
       bottom: 10px;
       border: 2px dashed #fff;
+      background-color:rgba(88, 116, 88, 0.2);
+      border-color: rgba(65, 129, 65, 0.5);
       border-radius: 10px;
       opacity: 0;
       transform: scale(0.95);
-      transition: opacity 300ms ease, transform 300ms cubic-bezier(.6,2,.6,1), background-color 300ms step-end, border-color 300ms step-end;
+      transition: all 200ms ease-in;
+      transition-property: transform, opacity;
       pointer-events: none;
     }
 
-    &.drop-valid:after,
+    &.drop-valid::after {
-    &.drop-invalid:after {
       opacity: 1;
       transform: scale(1);
-      transition: opacity 300ms ease, transform 300ms cubic-bezier(.6,2,.6,1);
+      transition-timing-function: ease-out;
-    }
-
-    &.drop-valid:after {
-      background-color:rgba(88, 116, 88, 0.2);
-      border-color: rgba(65, 129, 65, 0.5);
-    }
-
-    &.drop-invalid:after {
-      background-color:rgba(119, 85, 85, 0.2);
-      border-color:rgba(129, 63, 63, 0.5);
     }
   }
 }

src/components/Output/custom-els/PinchZoom/index.ts

@@ -145,7 +145,7 @@ export default class PinchZoom extends HTMLElement {
     const relativeToEl = (relativeTo === 'content' ? this._positioningEl : this);
 
     // No content element? Fall back to just setting scale
-    if (!relativeToEl) {
+    if (!relativeToEl || !this._positioningEl) {
       this.setTransform({ scale, allowChangeEvent });
       return;
     }
@@ -157,6 +157,10 @@ export default class PinchZoom extends HTMLElement {
     if (relativeTo === 'content') {
       originX += this.x;
       originY += this.y;
+    } else {
+      const currentRect = this._positioningEl.getBoundingClientRect();
+      originX -= currentRect.left;
+      originY -= currentRect.top;
     }
 
     this._applyChange({

src/components/Output/custom-els/TwoUp/index.ts

@@ -68,12 +68,14 @@ export default class TwoUp extends HTMLElement {
   }
 
   connectedCallback() {
-    this._handle.innerHTML = `<div class="${styles.scrubber}">${
-      '<svg viewBox="0 0 20 10" fill="currentColor"><path d="M8 0v10L0 5zM12 0v10l8-5z"/></svg>'
-    }</div>`;
-
     this._childrenChange();
+
     if (!this._everConnected) {
+      this._handle.innerHTML = `<div class="${styles.scrubber}">${
+        `<svg viewBox="0 0 27 20" fill="currentColor">${
+          '<path d="M17 19.2l9.5-9.6L16.9 0zM9.6 0L0 9.6l9.6 9.6z"/>'
+        }</svg>`
+      }</div>`;
       this._resetPosition();
       this._everConnected = true;
     }

src/components/Output/custom-els/TwoUp/styles.css

@@ -6,29 +6,41 @@ two-up {
   --track-color: var(--accent-color);
   --thumb-background: #fff;
   --thumb-color: var(--accent-color);
+  --thumb-size: 62px;
+  --bar-size: 6px;
+  --bar-touch-size: 30px;
 }
 
 two-up > * {
-  /* Overlay all children on top of each other, and let
+  /* Overlay all children on top of each other, and let two-up's layout contain all of them. */
-  two-up's layout contain all of them. */
   grid-area: 1/1;
 }
 
-two-up[legacy-clip-compat] > :not(.twoUpHandle) {
+two-up[legacy-clip-compat] > :not(.two-up-handle) {
+  /* Legacy mode uses clip rather than clip-path (Edge doesn't support clip-path), but clip requires
+  elements to be positioned absolutely */
   position: absolute;
 }
 
-.twoUpHandle {
+.two-up-handle {
   touch-action: none;
   position: relative;
-  width: 10px;
+  width: var(--bar-touch-size);
-  background: var(--track-color);
   transform: translateX(var(--split-point)) translateX(-50%);
-  box-shadow: inset 4px 0 0 rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.4);
   will-change: transform;
   cursor: ew-resize;
 }
 
+.two-up-handle::before {
+  content: '';
+  display: block;
+  height: 100%;
+  width: var(--bar-size);
+  margin: 0 auto;
+  box-shadow: inset calc(var(--bar-size) / 2) 0 0 rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.4);
+  background: var(--track-color);
+}
+
 .scrubber {
   display: flex;
   position: absolute;
@@ -36,51 +48,56 @@ two-up[legacy-clip-compat] > :not(.twoUpHandle) {
   left: 50%;
   transform-origin: 50% 50%;
   transform: translate(-50%, -50%);
-  width: 62px;
+  width: var(--thumb-size);
-  height: 56px;
+  height: calc(var(--thumb-size) * 0.9);
   background: var(--thumb-background);
   border: 1px solid rgba(0,0,0,0.2);
-  border-radius: 5px;
+  border-radius: calc(var(--thumb-size) * 0.08);
   box-shadow: 0 1px 4px rgba(0,0,0,0.1);
   color: var(--thumb-color);
-}
+  box-sizing: border-box;
-.scrubber svg {
+  padding: 0 48%;
-  flex: 1;
-  margin: 0 10px;
 }
 
-two-up[orientation='vertical'] .twoUpHandle {
+.scrubber svg {
+  flex: 1;
+}
+
+two-up[orientation='vertical'] .two-up-handle {
   width: auto;
-  height: 7px;
+  height: var(--bar-touch-size);
   transform: translateY(var(--split-point)) translateY(-50%);
-  box-shadow: inset 0 3px 0 rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.4);
   cursor: ns-resize;
 }
 
+two-up[orientation='vertical'] .two-up-handle::before {
+  width: auto;
+  height: var(--bar-size);
+  box-shadow: inset 0 calc(var(--bar-size) / 2) 0 rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.4);
+  margin: calc((var(--bar-touch-size) - var(--bar-size)) / 2) 0 0 0;
+}
+
 two-up[orientation='vertical'] .scrubber {
-  width: 46px;
-  height: 40px;
-  font-size: 18px;
   box-shadow: 1px 0 4px rgba(0,0,0,0.1);
   transform: translate(-50%, -50%) rotate(-90deg);
 }
 
-two-up > :nth-child(1):not(.twoUpHandle) {
+two-up > :nth-child(1):not(.two-up-handle) {
   -webkit-clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
   clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
 }
 
-two-up > :nth-child(2):not(.twoUpHandle) {
+two-up > :nth-child(2):not(.two-up-handle) {
   -webkit-clip-path: inset(0 0 0 var(--split-point));
   clip-path: inset(0 0 0 var(--split-point));
 }
 
-two-up[orientation='vertical'] > :nth-child(1):not(.twoUpHandle) {
+two-up[orientation='vertical'] > :nth-child(1):not(.two-up-handle) {
   -webkit-clip-path: inset(0 0 calc(100% - var(--split-point)) 0);
   clip-path: inset(0 0 calc(100% - var(--split-point)) 0);
 }
 
-two-up[orientation='vertical'] > :nth-child(2):not(.twoUpHandle) {
+two-up[orientation='vertical'] > :nth-child(2):not(.two-up-handle) {
   -webkit-clip-path: inset(var(--split-point) 0 0 0);
   clip-path: inset(var(--split-point) 0 0 0);
 }
@@ -90,19 +107,19 @@ two-up[orientation='vertical'] > :nth-child(2):not(.twoUpHandle) {
   It performs way better in Safari.
  */
 @supports not ((clip-path: inset(0 0 0 0)) or (-webkit-clip-path: inset(0 0 0 0))) {
-  two-up[legacy-clip-compat] > :nth-child(1):not(.twoUpHandle) {
+  two-up[legacy-clip-compat] > :nth-child(1):not(.two-up-handle) {
     clip: rect(auto var(--split-point) auto auto);
   }
 
-  two-up[legacy-clip-compat] > :nth-child(2):not(.twoUpHandle) {
+  two-up[legacy-clip-compat] > :nth-child(2):not(.two-up-handle) {
     clip: rect(auto auto auto var(--split-point));
   }
 
-  two-up[orientation='vertical'][legacy-clip-compat] > :nth-child(1):not(.twoUpHandle) {
+  two-up[orientation='vertical'][legacy-clip-compat] > :nth-child(1):not(.two-up-handle) {
     clip: rect(auto auto var(--split-point) auto);
   }
 
-  two-up[orientation='vertical'][legacy-clip-compat] > :nth-child(2):not(.twoUpHandle) {
+  two-up[orientation='vertical'][legacy-clip-compat] > :nth-child(2):not(.two-up-handle) {
     clip: rect(var(--split-point) auto auto auto);
   }
 }

src/components/Output/index.tsx

@@ -113,14 +113,19 @@ export default class Output extends Component<Props, State> {
   }
 
   @bind
-  private editScale() {
+  private onScaleValueFocus() {
     this.setState({ editingScale: true }, () => {
-      if (this.scaleInput) this.scaleInput.focus();
+      if (this.scaleInput) {
+        // Firefox unfocuses the input straight away unless I force a style calculation here. I have
+        // no idea why, but it's late and I'm quite tired.
+        getComputedStyle(this.scaleInput).transform;
+        this.scaleInput.focus();
+      }
     });
   }
 
   @bind
-  private cancelEditScale() {
+  private onScaleInputBlur() {
     this.setState({ editingScale: false });
   }
 
@@ -188,6 +193,7 @@ export default class Output extends Component<Props, State> {
       <div class={`${style.output} ${altBackground ? style.altBackground : ''}`}>
         <two-up
           legacy-clip-compat
+          class={style.twoUp}
           orientation={orientation}
           // Event redirecting. See onRetargetableEvent.
           onTouchStartCapture={this.onRetargetableEvent}
@@ -198,6 +204,7 @@ export default class Output extends Component<Props, State> {
           onWheelCapture={this.onRetargetableEvent}
         >
           <pinch-zoom
+            class={style.pinchZoom}
             onChange={this.onPinchZoomLeftChange}
             ref={linkRef(this, 'pinchZoomLeft')}
           >
@@ -213,7 +220,7 @@ export default class Output extends Component<Props, State> {
               }}
             />
           </pinch-zoom>
-          <pinch-zoom ref={linkRef(this, 'pinchZoomRight')}>
+          <pinch-zoom class={style.pinchZoom} ref={linkRef(this, 'pinchZoomRight')}>
             <canvas
               class={style.outputCanvas}
               ref={linkRef(this, 'canvasRight')}
@@ -229,7 +236,7 @@ export default class Output extends Component<Props, State> {
         </two-up>
 
         <div class={style.controls}>
-          <div class={style.group}>
+          <div class={style.zoomControls}>
             <button class={style.button} onClick={this.zoomOut}>
               <RemoveIcon />
             </button>
@@ -243,11 +250,11 @@ export default class Output extends Component<Props, State> {
                 class={style.zoom}
                 value={Math.round(scale * 100)}
                 onInput={this.onScaleInputChanged}
-                onBlur={this.cancelEditScale}
+                onBlur={this.onScaleInputBlur}
               />
             ) : (
-              <span class={style.zoom} tabIndex={0} onFocus={this.editScale}>
+              <span class={style.zoom} tabIndex={0} onFocus={this.onScaleValueFocus}>
-                <strong>{Math.round(scale * 100)}</strong>
+                <span class={style.zoomValue}>{Math.round(scale * 100)}</span>
                 %
               </span>
             )}

src/components/Output/style.scss

@@ -2,134 +2,68 @@
 Note: These styles are temporary. They will be replaced before going live.
 */
 
-%fill {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  contain: strict;
-}
-
 .output {
-  @extend %fill;
+  composes: abs-fill from '../../lib/util.scss';
 
-  &:before {
+  &::before {
     content: '';
-    @extend %fill;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     background: #000;
     opacity: 0;
     transition: opacity 500ms ease;
   }
-  &.altBackground:before {
-    opacity: .6;
-  }
 
-  > two-up {
+  &.alt-background::before {
-    @extend %fill;
+    opacity: 0.6;
-    --accent-color: var(--button-fg);
-
-    > pinch-zoom {
-      @extend %fill;
-      outline: none;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
   }
 }
 
+.two-up {
+  composes: abs-fill from '../../lib/util.scss';
+  --accent-color: var(--button-fg);
+}
+
+.pinch-zoom {
+  composes: abs-fill from '../../lib/util.scss';
+  outline: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .controls {
   position: absolute;
   display: flex;
   justify-content: center;
-  left: 220px;
+  top: 0;
-  right: 220px;
+  left: 0;
-  bottom: 0;
+  right: 0;
   padding: 9px;
   overflow: hidden;
   flex-wrap: wrap;
   contain: content;
 
-  @media (max-width: 680px) {
+  @media (min-width: 680px) {
-    top: 0;
+    top: auto;
-    bottom: auto;
+    left: 220px;
-    left: 0;
+    right: 220px;
-    right: 0;
+    bottom: 0;
   }
+}
 
-  > * {
+.zoom-controls {
-    z-index: 2;
+  display: flex;
-  }
 
-  .group {
+  & :not(:first-child) {
-    display: flex;
-  }
-
-  .button,
-  .zoom {
-    display: flex;
-    align-items: center;
-    flex: 0;
-    box-sizing: border-box;
-    height: 48px;
-    padding: 0 16px;
-    margin: 4px;
-    background-color: #fff;
-    border: 1px solid rgba(0,0,0,0.2);
-    border-radius: 5px;
-    line-height: 1;
-    font-size: 110%;
-    white-space: nowrap;
-
-    &:focus {
-      box-shadow: 0 0 0 2px var(--button-fg);
-      outline: none;
-      z-index: 1;
-    }
-  }
-
-  .button {
-    text-transform: uppercase;
-    color: var(--button-fg);
-    cursor: pointer;
-    text-indent: 6px;
-  }
-
-  .button:hover {
-    background-color: #eee;
-  }
-
-  .zoom {
-    flex: 0 0 6em;
-    color: #625E80;
-    font: inherit;
-    cursor: text;
-    width: 6em;
-    text-align: center;
-    justify-content: center;
-
-    &:focus {
-      box-shadow: inset 0 1px 4px rgba(0,0,0,0.2), 0 0 0 2px var(--button-fg);
-    }
-
-    strong {
-      position: relative;
-      top: 1px;
-      margin: 0 3px 0 0;
-      color: #888;
-      font-weight: normal;
-      border-bottom: 1px dashed #999;
-    }
-  }
-
-  .group > :not(:first-child) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     margin-left: 0;
   }
-  .group > :not(:last-child) {
+  & :not(:last-child) {
     margin-right: 0;
     border-right-width: 0;
     border-top-right-radius: 0;
@@ -137,6 +71,60 @@ Note: These styles are temporary. They will be replaced before going live.
   }
 }
 
+.button,
+.zoom {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 48px;
+  padding: 0 16px;
+  margin: 4px;
+  background-color: #fff;
+  border: 1px solid rgba(0,0,0,0.2);
+  border-radius: 5px;
+  line-height: 1;
+  white-space: nowrap;
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--button-fg);
+    outline: none;
+    z-index: 1;
+  }
+}
+
+.button {
+  text-transform: uppercase;
+  color: var(--button-fg);
+  cursor: pointer;
+  text-indent: 6px;
+  font-size: 110%;
+
+  &:hover {
+    background-color: #eee;
+  }
+}
+
+.zoom {
+  color: #625E80;
+  cursor: text;
+  width: 6em;
+  font: inherit;
+  text-align: center;
+  justify-content: center;
+
+  &:focus {
+    box-shadow: inset 0 1px 4px rgba(0,0,0,0.2), 0 0 0 2px var(--button-fg);
+  }
+}
+
+.zoom-value {
+  position: relative;
+  top: 1px;
+  margin: 0 3px 0 0;
+  color: #888;
+  border-bottom: 1px dashed #999;
+}
+
 .output-canvas {
   flex-shrink: 0;
 }

src/components/compress/style.scss

@@ -4,7 +4,6 @@
 
 .option-pair {
   display: flex;
-  justify-content: flex-end;
   width: 100%;
   height: 100%;
 
@@ -15,5 +14,6 @@
 
   &.vertical {
     flex-direction: column;
+    justify-content: flex-end;
   }
 }

src/init-app.tsx

@@ -16,6 +16,7 @@ if (process.env.NODE_ENV === 'development') {
 
   // When an update to any module is received, re-import the app and trigger a full re-render:
   module.hot.accept('./components/App', () => {
+    // The linter doesn't like the capital A in App. It is wrong.
     // tslint:disable-next-line variable-name
     import('./components/App').then(({ default: App }) => {
       root = render(<App />, document.body, root);

src/lib/icons.tsx

@@ -2,31 +2,29 @@ import { h } from 'preact';
 
 // tslint:disable:max-line-length variable-name
 
-export interface IconProps extends JSX.HTMLAttributes {}
+const Icon = (props: JSX.HTMLAttributes) => (
-
-const Icon = (props: IconProps) => (
   <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" {...props} />
 );
 
-export const DownloadIcon = (props: IconProps) => (
+export const DownloadIcon = (props: JSX.HTMLAttributes) => (
   <Icon {...props}>
     <path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z" />
   </Icon>
 );
 
-export const ToggleIcon = (props: IconProps) => (
+export const ToggleIcon = (props: JSX.HTMLAttributes) => (
   <Icon {...props}>
     <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>
 );
 
-export const AddIcon = (props: IconProps) => (
+export const AddIcon = (props: JSX.HTMLAttributes) => (
   <Icon {...props}>
     <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
   </Icon>
 );
 
-export const RemoveIcon = (props: IconProps) => (
+export const RemoveIcon = (props: JSX.HTMLAttributes) => (
   <Icon {...props}>
     <path d="M19 13H5v-2h14v2z"/>
   </Icon>

src/lib/util.scss

@@ -5,6 +5,7 @@
   width: 100%;
   height: 100%;
   box-sizing: border-box;
+  contain: strict;
 }
 
 .unbutton {