Add diff color picker functionality to resemble mode Change-Id: I771508fd75ecccdf1d5d42c21bb3f725d1e0a916

diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode.html b/gr-resemble-diff-mode/gr-resemble-diff-mode.html
index b94859e..0404bb5 100644
--- a/gr-resemble-diff-mode/gr-resemble-diff-mode.html
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode.html

@@ -60,6 +60,9 @@
           on-tap="_handleTransparentToggle">
       Transparent
     </label>
+    <input
+        type="color"
+        value="{{_colorValue::change}}">
   </template>
   <script src="gr-resemble-diff-mode.js"></script>
 </dom-module>
\ No newline at end of file

diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode.js b/gr-resemble-diff-mode/gr-resemble-diff-mode.js
index 3161fd9..8e706f0 100644
--- a/gr-resemble-diff-mode/gr-resemble-diff-mode.js
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode.js

@@ -20,6 +20,11 @@
     properties: {
       baseImage: Object,
       revisionImage: Object,
+      _colorValue: {
+        type: String,
+        observer: '_handleColorChange',
+        value: '#00ffff',
+      },
       _ignoreColors: {
         type: Boolean,
         value: false,
@@ -113,5 +118,31 @@
         this.reload();
       }, 1);
     },
+
+    // The wait time of 5 ms allows users to see the color change in the image
+    // diff relatively close to real time. Any larger wait time will not allow
+    // 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);
+    },
+
+    _hexToRGB(hex) {
+      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+      return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      } : null;
+    },
   });
 })();

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 2441ac4..ba3e9ca 100644
--- a/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html

@@ -97,6 +97,27 @@
       assert.isTrue(element.reload.called);
     });
 
+    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);
+    });
+
+    test('_hexToRGB', () => {
+      const expected = {r: 0, g: 255, b: 255};
+      const input = '#00ffff';
+      const output = element._hexToRGB(input);
+      assert.equal(output.r, expected.r);
+      assert.equal(output.g, expected.g);
+      assert.equal(output.b, expected.b);
+    });
+
     test('calls reload', () => {
       sandbox.stub(element, 'reload');
       element.baseImage = {};