Have click toggle actualSize of image (#423)

Author: jart

tensorboard/plugins/image/tf_image_dashboard/tf-image-loader.html

@@ -69,9 +69,33 @@
         </div>
       </template>
     </tf-card-heading>
-    <div id="main-image-container"></div>
+
+    <button aria-label="Toggle actual size"
+            id="main-image-container"
+            on-tap="_handleTap"></button>
 
     <style>
+      /** Make button a div. */
+      button {
+        width: 100%;
+        display: block;
+        background: none;
+        border: 0;
+        padding: 0;
+      }
+
+      /** Firefox: Get rid of dotted line inside button. */
+      button::-moz-focus-inner {
+        border: 0;
+        padding: 0;
+      }
+
+      /** Firefox: Simulate Chrome's outer glow on button when focused. */
+      button:-moz-focusring {
+        outline: none;
+        box-shadow: 0px 0px 1px 2px Highlight;
+      }
+
       :host {
         display: block;
         width: 350px;
@@ -89,6 +113,7 @@
 
       :host[actual-size] #main-image-container {
         max-height: none;
+        width: auto;
       }
 
       :host[actual-size] #main-image-container img {
@@ -127,9 +152,10 @@
       }
 
       #main-image-container img {
+        cursor: pointer;
+        display: block;
         image-rendering: -moz-crisp-edges;
         image-rendering: pixelated;
-        display: block;
         width: 100%;
         height: auto;
       }
@@ -343,6 +369,9 @@
         this.set("_isImageLoading", true);
         img.src = steps[stepIndex].url;
       },
+      _handleTap(e) {
+        this.set('actualSize', !this.actualSize);
+      },
     });
   </script>
 </dom-module>