Handle mode preference should stick

Change-Id: I28e4c537175c065e12e1d3cc31410b1235ac824b

gr-image-diff-tool/gr-image-diff-tool.html

diff --git a/gr-image-diff-tool/gr-image-diff-tool.html b/gr-image-diff-tool/gr-image-diff-tool.html
index 6f2d85e..55d1c46 100644
--- a/gr-image-diff-tool/gr-image-diff-tool.html
+++ b/gr-image-diff-tool/gr-image-diff-tool.html
@@ -48,7 +48,7 @@
 
     <div id="header">
       <h3>Image Diff</h3>
-      <select id="dropdown">
+      <select value="{{_observeMode::change}}" id="dropdown">
         <option value="resemble">Resemble Mode</option>
         <option value="opacity">Opacity Mode</option>
       </select>

gr-image-diff-tool/gr-image-diff-tool.js

diff --git a/gr-image-diff-tool/gr-image-diff-tool.js b/gr-image-diff-tool/gr-image-diff-tool.js
index 20a0ac9..95df491 100644
--- a/gr-image-diff-tool/gr-image-diff-tool.js
+++ b/gr-image-diff-tool/gr-image-diff-tool.js
@@ -14,29 +14,54 @@
 (function() {
   'use strict';
 
+  const DiffModes = {
+    OPACITY: 'opacity',
+    RESEMBLE: 'resemble',
+  };
+
   Polymer({
     is: 'gr-image-diff-tool',
 
     properties: {
-      _showResembleMode: {
-        type: Boolean,
-        value: true,
-      },
-      _showOpacityMode: {
-        type: Boolean,
-        value: false,
+      _showResembleMode: Boolean,
+      _showOpacityMode: Boolean,
+      _observeMode: {
+        type: String,
+        observer: '_handleSelect',
       },
     },
 
-    handleSelect() {
-      const mode = this.$.dropdown.value;
-      if (mode === 'resemble') {
-        this._showResembleMode = true;
-        this._showOpacityMode = false;
-      } else if (mode === 'opacity') {
-        this._showOpacityMode = true;
-        this._showResembleMode = false;
-      }
+    attached() {
+      const diff_mode = this._getMode();
+      diff_mode === DiffModes.OPACITY ?
+          this._displayOpacityMode() : this._displayResembleMode();
+    },
+
+    _getMode() {
+      return window.localStorage.getItem('image-diff-mode');
+    },
+
+    _setMode(mode) {
+      window.localStorage.setItem('image-diff-mode', mode);
+    },
+
+    _handleSelect(mode) {
+      mode === DiffModes.OPACITY ?
+          this._displayOpacityMode() : this._displayResembleMode();
+    },
+
+    _displayResembleMode() {
+      this._observeMode = DiffModes.RESEMBLE;
+      this._showResembleMode = true;
+      this._showOpacityMode = false;
+      this._setMode(DiffModes.RESEMBLE);
+    },
+
+    _displayOpacityMode() {
+      this._observeMode = DiffModes.OPACITY;
+      this._showResembleMode = false;
+      this._showOpacityMode = true;
+      this._setMode(DiffModes.OPACITY);
     },
   });
 })();
\ No newline at end of file

gr-image-diff-tool/gr-image-diff-tool_test.html

diff --git a/gr-image-diff-tool/gr-image-diff-tool_test.html b/gr-image-diff-tool/gr-image-diff-tool_test.html
index 0fe8a3e..ec1a4be 100644
--- a/gr-image-diff-tool/gr-image-diff-tool_test.html
+++ b/gr-image-diff-tool/gr-image-diff-tool_test.html
@@ -38,14 +38,17 @@
 <script>
   suite('gr-image-diff-tool tests', () => {
     let element;
+    let sandbox;
 
     setup(() => {
       element = fixture('basicFixture');
+      sandbox = sinon.sandbox.create();
     });
 
+    teardown(() => { sandbox.restore(); });
+
     test('test opacity mode', () => {
-      element.$.dropdown.value = 'opacity';
-      element.handleSelect();
+      element._observeMode = 'opacity';
       assert.isTrue(element._showOpacityMode);
       assert.isFalse(element._showResembleMode);
       flushAsynchronousOperations();
@@ -55,8 +58,7 @@
     });
 
     test('test resemble mode', () => {
-      element.$.dropdown.value = 'resemble';
-      element.handleSelect();
+      element._observeMode = 'resemble';
       assert.isTrue(element._showResembleMode);
       assert.isFalse(element._showOpacityMode);
       flushAsynchronousOperations();
@@ -64,5 +66,17 @@
       assert.ok(element.$$('gr-resemble-diff-mode'));
       assert.equal(element.$$('gr-opacity-diff-mode'), null);
     });
+
+    test('localStorage persists', () => {
+      sandbox.stub(element, '_setMode');
+      sandbox.stub(element, '_getMode');
+      element.attached();
+      assert.equal(element._getMode.callCount, 1);
+      assert.equal(element._setMode.callCount, 1);
+      element._observeMode = 'opacity';
+      assert.equal(element._setMode.callCount, 2);
+      element._observeMode = 'resemble';
+      assert.equal(element._setMode.callCount, 3);
+    });
   });
 </script>
\ No newline at end of file