From 1f5c82712ac136e7064761331976d239466d0e79 Mon Sep 17 00:00:00 2001 From: Nicolas Riesco Date: Mon, 11 Apr 2016 14:23:52 +0100 Subject: [PATCH 1/2] devtools: Show diff image first --- devtools/image_viewer/viewer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/devtools/image_viewer/viewer.js b/devtools/image_viewer/viewer.js index 8802da4222b..0ea647522e1 100644 --- a/devtools/image_viewer/viewer.js +++ b/devtools/image_viewer/viewer.js @@ -44,9 +44,9 @@ function createButton(imageName) { d3.json(dirMocks + imageName + '.json', function(err, mock) { $images.innerHTML = ''; - $images.appendChild(imgBaseline); - $images.appendChild(imgTest); $images.appendChild(imgDiff); + $images.appendChild(imgTest); + $images.appendChild(imgBaseline); $mock.innerHTML = ''; $mock.appendChild(createJSONview(mock)); From c5a8d53b8ee5a3b75d0678bbf9adfbbcc1d8177c Mon Sep 17 00:00:00 2001 From: Nicolas Riesco Date: Fri, 20 May 2016 21:58:22 +0100 Subject: [PATCH 2/2] devtools: add image tooltip and toggle button --- devtools/image_viewer/index.html | 3 +- devtools/image_viewer/viewer.js | 75 +++++++++++++++++++++++--------- 2 files changed, 57 insertions(+), 21 deletions(-) diff --git a/devtools/image_viewer/index.html b/devtools/image_viewer/index.html index e4e7fc847fa..4b1652409d2 100644 --- a/devtools/image_viewer/index.html +++ b/devtools/image_viewer/index.html @@ -3,8 +3,9 @@
+
-
+ 

 
     
 
diff --git a/devtools/image_viewer/viewer.js b/devtools/image_viewer/viewer.js
index 0ea647522e1..3d777b1de4d 100644
--- a/devtools/image_viewer/viewer.js
+++ b/devtools/image_viewer/viewer.js
@@ -4,8 +4,22 @@ var path = require('path');
 var d3 = require('d3');
 
 var $plotlist = document.getElementById('plot-list'),
+    $toggles = document.getElementById('plot-toggles'),
     $images = document.getElementById('plot-images'),
-    $mock = document.getElementById('plot-mock');
+    $mock = document.getElementById('plot-mock'),
+    $toggleBaseline = document.createElement('button'),
+    $toggleTest = document.createElement('button'),
+    $toggleDiff = document.createElement('button'),
+    $imgBaseline = document.createElement('img'),
+    $imgTest = document.createElement('img'),
+    $imgDiff = document.createElement('img');
+
+$toggles.style.display = 'none';
+$images.style.display = 'none';
+
+setupToggle($toggleBaseline, $imgBaseline, 'Baseline');
+setupToggle($toggleTest, $imgTest, 'Test');
+setupToggle($toggleDiff, $imgDiff, 'Diff');
 
 var pathToRoot = path.join(__dirname, '../../'),
     pathToImageTest = path.join(pathToRoot, 'test/image'),
@@ -33,37 +47,58 @@ imageNames.forEach(function(imageName) {
 function createButton(imageName) {
     var button = document.createElement('button');
     button.style.cssFloat = 'left';
-    button.style.width = '100px';
     button.style.height = '40px';
     button.innerHTML = imageName;
+    button.style.padding = '0.5em';
+    button.style.border = '0';
+    button.style.margin = '1px';
+    button.style.cursor = 'pointer';
 
     button.addEventListener('click', function() {
-        var imgBaseline = createImg(dirBaseline, imageName),
-            imgTest = createImg(dirTest, imageName),
-            imgDiff = createImg(dirDiff, 'diff-' + imageName);
-
         d3.json(dirMocks + imageName + '.json', function(err, mock) {
-            $images.innerHTML = '';
-            $images.appendChild(imgDiff);
-            $images.appendChild(imgTest);
-            $images.appendChild(imgBaseline);
+            $toggles.style.display = 'block';
 
-            $mock.innerHTML = '';
-            $mock.appendChild(createJSONview(mock));
+            $images.style.display = 'block';
+            $imgBaseline.src = dirBaseline + imageName + '.png';
+            $imgTest.src = dirTest + imageName + '.png';
+            $imgDiff.src = dirDiff + 'diff-' + imageName + '.png';
+
+            $mock.innerHTML = JSON.stringify(mock, null, 2);
         });
     });
 
     return button;
 }
 
-function createImg(dir, name) {
-    var img = new Image();
-    img.src = dir + name + '.png';
-    return img;
+function setupToggle(toggle, img, title) {
+    img.title = title;
+    toggle.innerHTML = title;
+    toggle.style.padding = '0.5em';
+    toggle.style.border = '0';
+    toggle.style.margin = '1px';
+    toggle.style.cursor = 'pointer';
+
+    checkToggle(toggle, img);
+
+    toggle.addEventListener('click', function() {
+        if(toggle.value === 'checked') uncheckToggle(toggle, img);
+        else checkToggle(toggle, img);
+    });
+
+    $toggles.appendChild(toggle);
+    $images.appendChild(img);
+}
+
+function checkToggle(toggle, img) {
+    toggle.value = 'checked';
+    toggle.style.color = '#4c4c4c';
+    toggle.style.backgroundColor = '#f2f1f0';
+    img.style.display = 'inline';
 }
 
-function createJSONview(mock) {
-    var jsonView = document.createElement('pre');
-    jsonView.innerHTML = JSON.stringify(mock, null, 2);
-    return jsonView;
+function uncheckToggle(toggle, img) {
+    toggle.value = 'unchecked';
+    toggle.style.color = '#f2f1f0';
+    toggle.style.backgroundColor = '#4c4c4c';
+    img.style.display = 'none';
 }