Merge "Handle resemble output setting applying to every image"
diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode.js b/gr-resemble-diff-mode/gr-resemble-diff-mode.js
index 4a54955..a9e1f00 100644
--- a/gr-resemble-diff-mode/gr-resemble-diff-mode.js
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode.js
@@ -14,6 +14,11 @@
 (function() {
   'use strict';
 
+  const DEFAULT_SETTING = {
+    errorType: 'movement',
+    largeImageThreshold: 1200,
+  };
+
   Polymer({
     is: 'gr-resemble-diff-mode',
 
@@ -49,11 +54,7 @@
     ],
 
     attached() {
-      window.resemble.outputSettings({
-        errorType: 'movement',
-        largeImageThreshold: 0,
-        transparency: 1,
-      });
+      window.resemble.outputSettings(DEFAULT_SETTING);
     },
 
     _handleImageDiff() {
@@ -79,10 +80,23 @@
     },
 
     _createDiffProcess(base, rev, ignoreColors) {
+      window.resemble.outputSettings(this._setOutputSetting());
       const process = window.resemble(base).compareTo(rev);
       return this._maybeIgnoreColors(process, ignoreColors);
     },
 
+    _setOutputSetting() {
+      const rgb = this._hexToRGB(this._colorValue);
+      return {
+        transparency: this._transparent ? 0.1 : 1,
+        errorColor: {
+          red: rgb.r,
+          green: rgb.g,
+          blue: rgb.b,
+        },
+      };
+    },
+
     /**
      * Reloads the diff. Resemble 1.2.1 seems to have an issue with successive
      * reloads via the repaint() function, so this implementation creates a
@@ -121,9 +135,6 @@
     _handleTransparentToggle() {
       this.debounce('transparent-toggle', () => {
         this._transparent = !this._transparent;
-        window.resemble.outputSettings({
-          transparency: this._transparent ? 0.3 : 1,
-        });
         this.reload();
       }, 1);
     },
@@ -133,14 +144,6 @@
     // the color to show up immediately on the image diff.
     _handleColorChange() {
       this.debounce('color-change', () => {
-        const rgb = this._hexToRGB(this._colorValue);
-        window.resemble.outputSettings({
-          errorColor: {
-            red: rgb.r,
-            green: rgb.g,
-            blue: rgb.b,
-          },
-        });
         this.reload();
       }, 5);
     },
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 6c19660..280693d 100644
--- a/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
@@ -79,6 +79,25 @@
       assert.isTrue(dummyProcess.ignoreColors.called);
     });
 
+    test('_setOutputSetting', () => {
+      sandbox.stub(window.resemble, 'outputSettings');
+      element._transparent = true;
+      element._colorValue = '#00ffff';
+      const expectedResult = {
+        transparency: 0.1,
+        errorColor: {
+          red: 0,
+          green: 255,
+          blue: 255,
+        },
+      };
+      element._createDiffProcess();
+      flushAsynchronousOperations();
+
+      assert.isTrue(window.resemble.outputSettings.called);
+      sinon.assert.calledWith(window.resemble.outputSettings, expectedResult);
+    });
+
     test('_handleIgnoreColorsToggle', () => {
       sandbox.stub(element, 'reload');
       element._ignoreColors = false;
@@ -105,13 +124,10 @@
 
     test('_handleColorChange', () => {
       sandbox.stub(element, 'reload');
-      sandbox.stub(element, '_hexToRGB')
-          .returns({r: 0, g: 0, b: 0});
       element._colorValue = '';
       element.flushDebouncer('color-change');
       flushAsynchronousOperations();
 
-      assert.isTrue(element._hexToRGB.called);
       assert.isTrue(element.reload.called);
     });