Start #2024, add a download-only button when you make a selection.

Refactor the filename generating code into AbstractShot (out of shot/view.js)

addon/data/selector-ui.js

@@ -287,6 +287,19 @@ const ui = (function () { // eslint-disable-line no-unused-vars
       } else {
         this.save.style.display = "none";
       }
+      if (callbacks !== undefined && callbacks.download) {
+        this.download.removeAttribute("disabled");
+        this.download.onclick = (e) => {
+          this.download.setAttribute("disabled", true);
+          callbacks.download(e);
+          e.preventDefault();
+          e.stopPropagation();
+          return false;
+        };
+        this.download.style.display = "";
+      } else {
+        this.download.style.display = "none";
+      }
       let bodyRect = getBodyRect();
       // Note, document.documentElement.scrollHeight is zero on some strange pages (such as the page created when you load an image):
       let docHeight = Math.max(document.documentElement.scrollHeight || 0, document.body.scrollHeight);
@@ -333,12 +346,16 @@ const ui = (function () { // eslint-disable-line no-unused-vars
       }
       boxEl = makeEl("div", "pageshot-highlight");
       let buttons = makeEl("div", "pageshot-highlight-buttons");
+      let download = makeEl("button", "pageshot-highlight-button-download");
+      download.textContent = "Download";
+      buttons.appendChild(download);
       let cancel = makeEl("button", "pageshot-highlight-button-cancel");
       cancel.textContent = "Cancel";
       buttons.appendChild(cancel);
       let save = makeEl("button", "pageshot-highlight-button-save");
       save.textContent = "Save";
       buttons.appendChild(save);
+      this.download = download;
       this.cancel = cancel;
       this.save = save;
       boxEl.appendChild(buttons);
@@ -515,5 +532,13 @@ const ui = (function () { // eslint-disable-line no-unused-vars
     el: null
   };
 
+  exports.triggerDownload = function (dataUrl, filename) {
+    let a = iframe.document.createElement("a");
+    a.href = dataUrl;
+    a.setAttribute("download", filename);
+    iframe.document.body.appendChild(a);
+    a.click();
+  };
+
   return exports;
 })();

addon/data/shooter-interactive-worker.js

@@ -130,6 +130,9 @@ let standardDisplayCallbacks = {
   }, save: () => {
     sendEvent("save-shot", "overlay-save-button");
     self.port.emit("take-shot");
+  }, download: () => {
+    sendEvent("download-shot", "overlay-download-button");
+    self.port.emit("requestDownload");
   }
 };
 
@@ -965,6 +968,14 @@ if (! isChrome) {
     }), 0);
   }));
 
+  self.port.on("triggerDownload", watchFunction((dataUrl, filename) => {
+    ui.triggerDownload(dataUrl, filename);
+    setTimeout(() => {
+      deactivate();
+      self.port.emit("deactivate");
+    });
+  }));
+
   // Happens if this worker is detached for some reason
   // (such as moving windows, add-on unloading)
   self.port.on("detach", watchFunction(() => {

addon/lib/shooter.js

@@ -224,6 +224,11 @@ const ShotContext = Class({
     });
   },
 
+  triggerDownload: function () {
+    let clip = this.shot.getClip(this.shot.clipNames()[0]);
+    this.interactiveWorker.port.emit("triggerDownload", clip.image.url, this.shot.filename);
+  },
+
   /** Activate the worker that handles selection */
   _activateWorker: function () {
     this.interactiveWorker = watchWorker(this.tab.attach({
@@ -295,6 +300,9 @@ const ShotContext = Class({
     this.interactiveWorker.port.on("take-shot", watchFunction(function () {
       this.takeShot();
     }, this));
+    this.interactiveWorker.port.on("requestDownload", watchFunction(() => {
+      this.triggerDownload();
+    }));
 
     this._pendingScreenPositions = [];
     this.interactiveWorker.port.on("screenPosition", watchFunction(function (pos) {

docs/METRICS.md

@@ -106,6 +106,7 @@ Event label: exactly what control invoked the action, such as toolbar-pageshot-b
 9. [x] Finish moving, without a change `addon/keep-move-selection/mouseup`
 3. [x] Click Save `addon/save-shot/overlay-save-button` ![image](https://d17oy1vhnax1f7.cloudfront.net/items/1F021R1U1z0y3A1i0C2F/Image%202016-09-07%20at%202.02.43%20PM.png?v=1c42ee47)
 4. [x] Click Cancel `addon/cancel-shot/topbar-cancel` ![image](https://d17oy1vhnax1f7.cloudfront.net/items/3u2M2G1N431s1O193L1n/Image%202016-09-07%20at%202.03.24%20PM.png?v=bedc4e14)
+5. [x] Click Download `addon/download-shot/overlay-download-button`
 5. [x] Cancel because URL changed `addon/cancel-shot/url-changed` (when something that uses window.history "navigates" spontaneously away)
 6. [x] Cancel because the tab is closed `addon/cancel-shot/tab-close`
 7. [x] Cancel because the tab is navigated (such as entering something in the URL bar) `addon/cancel-shot/tab-load`

server/src/pages/shot/view.js

@@ -330,17 +330,7 @@ class Body extends React.Component {
       let clip = this.props.shot.getClip(clipId);
       clipUrl = clip.image.url;
     }
-    let date = new Date(this.props.shot.createdDate);
-    let filenameTitle = this.props.shot.title;
-    filenameTitle = filenameTitle.replace(/[\/!@&*.|\n\r\t]/g, " ");
-    filenameTitle = filenameTitle.replace(/\s+/g, " ");
-    let clipFilename = `Page-Shot-${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${filenameTitle}`;
-    const clipFilenameBytesSize = clipFilename.length * 2; // JS STrings are UTF-16
-    if (clipFilenameBytesSize > 251) { // 255 bytes (Usual filesystems max) - 4 for the ".png" file extension string
-      const excedingchars = (clipFilenameBytesSize - 246) / 2; // 251 - 5 for ellipsis "[...]"
-      clipFilename = clipFilename.substring(0, clipFilename.length - excedingchars);
-      clipFilename = clipFilename.concat('[...]');
-    }
+    let clipFilename = this.props.shot.filename;
 
     /*
     {this.props.hasSavedShot ?

shared/shot.js

@@ -432,6 +432,21 @@ ${options.addBody || ""}
     this._url = val;
   }
 
+  get filename() {
+    let filenameTitle = this.props.shot.title;
+    let date = new Date(this.props.shot.createdDate);
+    filenameTitle = filenameTitle.replace(/[\/!@&*.|\n\r\t]/g, " ");
+    filenameTitle = filenameTitle.replace(/\s+/g, " ");
+    let clipFilename = `Page-Shot-${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${filenameTitle}`;
+    const clipFilenameBytesSize = clipFilename.length * 2; // JS STrings are UTF-16
+    if (clipFilenameBytesSize > 251) { // 255 bytes (Usual filesystems max) - 4 for the ".png" file extension string
+      const excedingchars = (clipFilenameBytesSize - 246) / 2; // 251 - 5 for ellipsis "[...]"
+      clipFilename = clipFilename.substring(0, clipFilename.length - excedingchars);
+      clipFilename = clipFilename + '[...]';
+    }
+    return clipFilename;
+  }
+
   get urlDisplay() {
     if (this.url.search(/^https?/i) != -1) {
       let txt = this.url;

static/css/inline-selection.scss

@@ -58,6 +58,13 @@ $overlay-z-index: 9999999999;
   width: 80px;
 }
 
+.pageshot-highlight-button-download {
+  @extend .button;
+  @extend .primary;
+  margin: 5px;
+  width: 100px;
+}
+
 .pageshot-mover-target {
   position: absolute;
   z-index: 5;