Merge "Hide image diff if revision or base is missing"
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
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);
},
});
})();
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
