Add transparency funtionality to resemble mode

Change-Id: I1fdbd27931f50ecaf3f11cf2936110eed2d801cb

gr-resemble-diff-mode/gr-resemble-diff-mode.html

diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode.html b/gr-resemble-diff-mode/gr-resemble-diff-mode.html
index a3ea88e..b94859e 100644
--- a/gr-resemble-diff-mode/gr-resemble-diff-mode.html
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode.html
@@ -52,6 +52,14 @@
           on-tap="_handleIgnoreColorsToggle">
       Ignore colors
     </label>
+    <label>
+      <input
+          id="transparentToggle"
+          type="checkbox"
+          checked$="[[_transparent]]"
+          on-tap="_handleTransparentToggle">
+      Transparent
+    </label>
   </template>
   <script src="gr-resemble-diff-mode.js"></script>
 </dom-module>
\ No newline at end of file

gr-resemble-diff-mode/gr-resemble-diff-mode.js

diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode.js b/gr-resemble-diff-mode/gr-resemble-diff-mode.js
index 1160bc5..3161fd9 100644
--- a/gr-resemble-diff-mode/gr-resemble-diff-mode.js
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode.js
@@ -24,6 +24,10 @@
         type: Boolean,
         value: false,
       },
+      _transparent: {
+        type: Boolean,
+        value: false,
+      },
       loading: {
         type: Boolean,
         value: false,
@@ -38,7 +42,8 @@
     attached() {
       window.resemble.outputSettings({
         errorType: 'movement',
-        largeImageThreshold: 450,
+        largeImageThreshold: 0,
+        transparency: 1,
       });
     },
 
@@ -56,11 +61,7 @@
     },
 
     _maybeIgnoreColors(diffProcess, ignoreColors) {
-      if (ignoreColors) {
-        diffProcess.ignoreColors();
-      } else {
-        diffProcess.ignoreNothing();
-      }
+      ignoreColors ? diffProcess.ignoreColors() : diffProcess.ignoreNothing();
       return diffProcess;
     },
 
@@ -94,9 +95,23 @@
       this.loading = false;
     },
 
+    // The use of debounce is to prevent the user from repeatedly calling the
+    // functions in a short amount of time.
     _handleIgnoreColorsToggle() {
-      this._ignoreColors = !this._ignoreColors;
-      this.reload();
+      this.debounce('ignore-colors-toggle', () => {
+        this._ignoreColors = !this._ignoreColors;
+        this.reload();
+      }, 1);
+    },
+
+    _handleTransparentToggle() {
+      this.debounce('transparent-toggle', () => {
+        this._transparent = !this._transparent;
+        window.resemble.outputSettings({
+          transparency: this._transparent ? 0.3 : 1,
+        });
+        this.reload();
+      }, 1);
     },
   });
 })();

gr-resemble-diff-mode/gr-resemble-diff-mode_test.html

diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html b/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
index 9fe5161..2441ac4 100644
--- a/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
@@ -78,12 +78,25 @@
       element._ignoreColors = false;
       assert.isFalse(element.$.ignoreColorsToggle.checked);
       MockInteractions.tap(element.$.ignoreColorsToggle);
+      element.flushDebouncer('ignore-colors-toggle');
       flushAsynchronousOperations();
 
       assert.isTrue(element._ignoreColors);
       assert.isTrue(element.reload.called);
     });
 
+    test('_handleTransparentToggle', () => {
+      sandbox.stub(element, 'reload');
+      element._transparent = false;
+      assert.isFalse(element.$.transparentToggle.checked);
+      MockInteractions.tap(element.$.transparentToggle);
+      element.flushDebouncer('transparent-toggle');
+      flushAsynchronousOperations();
+
+      assert.isTrue(element._transparent);
+      assert.isTrue(element.reload.called);
+    });
+
     test('calls reload', () => {
       sandbox.stub(element, 'reload');
       element.baseImage = {};
@@ -91,7 +104,11 @@
       element.revisionImage = {};
       assert.equal(element.reload.callCount, 1);
       MockInteractions.tap(element.$.ignoreColorsToggle);
+      element.flushDebouncer('ignore-colors-toggle');
       assert.equal(element.reload.callCount, 2);
+      MockInteractions.tap(element.$.transparentToggle);
+      element.flushDebouncer('transparent-toggle');
+      assert.equal(element.reload.callCount, 3);
     });
   });
 </script>
\ No newline at end of file