Bug 848400 - [E-Mail] Support attaching any file available on the SD car...

apps/download/js/pick.js

@@ -0,0 +1,147 @@
+'use strict';
+
+/* global DownloadStore, DownloadFormatter, DownloadHelper, LazyLoader */
+
+/*
+ * This library implements a picker activity for downloaded files.
+ *
+ * How it works:
+ *
+ * var activity = new MozActivity({
+ *   name: 'pick', 
+ *   data: {
+ *     type: 'application/*'
+ *   }
+ * });
+ *
+ * ... and returns an object like this:
+ *
+ * activity.onsuccess = function(e) {
+ *   console.log('Name of the file:', activity.result.name);
+ *   console.log('Mime type:', activity.result.type);
+ *   console.log('Binary content:', activity.result.blob);
+ *   console.log('File path:', activity.result.path);
+ *   console.log('File size in bytes:', activity.result.size);
+ * };
+ */
+
+(function(exports) {
+
+  const CHUNK_SIZE = 10;
+
+  function DownloadPicker() {
+    this.header = document.querySelector('#header');
+    this.list = document.querySelector('#downloads ul');
+    // It holds download objects indexed by id.
+    this.downloads = Object.create(null);
+
+    navigator.mozSetMessageHandler('activity', this.handleActivity.bind(this));
+  }
+
+  DownloadPicker.prototype = {
+    handleActivity: function(activity) {
+      switch (activity.source.name) {
+        case 'pick':
+          this.activity = activity;
+          this.attachActionHandlers();
+          this.renderList();
+          break;
+
+        default:
+          activity.postError('name not supported');
+      }
+    },
+
+    renderList: function() {
+      DownloadStore.getAll().onsuccess = (event) => {
+        var result = event.target.result;
+        if (!Array.isArray(result)) {
+          result = [result];
+        }
+        // Painting downloads with reverse insertion order (the last the
+        // most recent).
+        var items = result.reverse();
+        // If document.body.dataset.downloads === 0 the UI will show a message
+        // telling user that there is not downloads.
+        var total = document.body.dataset.downloads = items.length;
+        this.renderFragment(items, 0, total);
+      };
+    },
+
+    renderFragment: function(items, from, total) {
+      var target = document.createDocumentFragment();
+      var idx = from;
+      for (; idx < from + CHUNK_SIZE && idx < total; idx++) {
+        this.appendDownload(items[idx], target);
+      }
+
+      this.list.appendChild(target);
+      (idx < total) && setTimeout(() => {
+        this.renderFragment(items, idx, total);
+      });
+    },
+
+    appendDownload: function(download, target) {
+      var id = download.id;
+      if (this.downloads[id]) {
+        return;
+      }
+
+      this.downloads[id] = download;
+
+      var item = document.createElement('li');
+      // This parameter lets us know which item was clicked in the list
+      item.dataset.id = id;
+
+      // File name
+      var pFileName = document.createElement('p');
+      pFileName.classList.add('fileName');
+      pFileName.textContent = DownloadFormatter.getFileName(download);
+
+      // Additional information (start time and file size in bytes)
+      var pInfo = document.createElement('p');
+      pInfo.classList.add('info');
+      DownloadFormatter.getDate(download, (date) => {
+        navigator.mozL10n.setAttributes(pInfo, 'summary', {
+          date: date,
+          status: DownloadFormatter.getTotalSize(download)
+        });
+      });
+
+      item.appendChild(pFileName);
+      item.appendChild(pInfo);
+      target.appendChild(item);
+    },
+
+    attachActionHandlers: function() {
+      this.header.addEventListener('action', () => {
+        // closing the picker activity
+        this.activity.postError('cancelled');
+      });
+
+      this.list.addEventListener('click', (event) => {
+        var download = this.downloads[event.target.dataset.id];
+        download && this.pick(download);
+      });
+    },
+
+    pick: function(download) {
+      // download was selected by the user
+      LazyLoader.load(['shared/js/mime_mapper.js',
+                       'shared/js/download/download_helper.js'], () => {
+        var req = DownloadHelper.info(download);
+
+        req.onsuccess = (event) => {
+          this.activity.postResult(event.target.result);
+        };
+
+        req.onerror = (event) => {
+          DownloadHelper.handlerError(req.error, download);
+        };
+      });
+    }
+  };
+
+  exports.downloadPicker = new DownloadPicker();
+
+}(window));

apps/download/locales/download.en-US.properties

@@ -0,0 +1 @@
+select-download = Select download

apps/download/manifest.webapp

@@ -0,0 +1,47 @@
+{
+  "name": "Downloads",
+  "description": "Gaia Download Picker",
+  "type": "certified",
+  "role": "system",
+  "orientation": "default",
+  "developer": {
+    "name": "The Gaia Team",
+    "url": "https://github.com/mozilla-b2g/gaia"
+  },
+  "permissions": {
+    "device-storage:pictures":{ "access": "readonly" },
+    "device-storage:music":{ "access": "readonly" },
+    "device-storage:videos":{ "access": "readonly" },
+    "device-storage:sdcard":{ "access": "readonly" }
+  },
+  "activities": {
+    "pick": {
+      "filters": {
+        "type": "application/*"
+       },
+      "disposition": "inline",
+      "returnValue": true,
+      "href": "/pick.html"
+    }
+  },
+  "datastores-access": {
+    "download_store": {
+      "readonly": true,
+      "description": "Stores download finished"
+    }
+  },
+  "icons": {
+    "84": "/style/icons/download_84.png",
+    "126": "/style/icons/download_126.png",
+    "142": "/style/icons/download_142.png",
+    "189": "/style/icons/download_189.png",
+    "284": "/style/icons/download_284.png"
+  },
+  "locales": {
+    "en-US": {
+      "name": "Downloads",
+      "description": "Gaia Download Picker"
+    }
+  },
+  "default_locale": "en-US"
+}

apps/download/pick.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+    <meta charset="utf-8">
+    <title>Download Picker</title>
+
+    <!-- Localization -->
+    <link rel="localization" href="shared/locales/date/date.{locale}.properties">
+    <link rel="localization" href="shared/locales/download/download.{locale}.properties">
+    <link rel="localization" href="locales/download.{locale}.properties">
+    <script type="text/javascript" src="shared/js/l10n.js"></script>
+
+    <!-- Web Components -->
+    <script defer src="shared/elements/config.js"></script>
+    <script defer src="shared/elements/gaia-header/dist/script.js"></script>
+    <link rel="stylesheet" type="text/css" href="shared/elements/gaia-theme/style.css">
+    <!-- <link rel="stylesheet" type="text/css" href="shared/elements/gaia-icons/style.css" /> -->
+
+    <link rel="stylesheet" type="text/css" href="shared/style/lists.css">
+    <link rel="stylesheet" href="style/pick.css">
+
+    <!-- <script type="text/javascript" src="shared/js/l10n_date.js"></script> -->
+    <script type="text/javascript" defer src="shared/js/lazy_loader.js"></script>
+    <script type="text/javascript" defer src="shared/js/download/download_store.js"></script>
+    <!-- <script type="text/javascript" defer src="shared/js/mime_mapper.js"></script> -->
+    <!-- <script type="text/javascript" defer src="shared/js/download/download_ui.js"></script> -->
+    <!-- <script type="text/javascript" defer src="shared/js/download/download_helper.js"></script> -->
+    <script type="text/javascript" defer src="shared/js/download/download_formatter.js"></script>
+
+    <!-- Specific code -->
+    <script type="text/javascript" defer src="js/pick.js"></script>
+
+    <!-- Error messages -->
+    <link rel="stylesheet" type="text/css" href="shared/style/buttons.css">
+    <link rel="stylesheet" type="text/css" href="shared/style/confirm.css">
+  </head>
+
+  <body class="theme-media">
+    <section role="region" class="skin-dark">
+      <gaia-header id="header" action="close">
+        <h1 data-l10n-id="select-download"></h1>
+      </gaia-header>
+
+      <section id="no-downloads">
+        <span></span>
+        <span data-l10n-id="no-downloads"></span>
+      </section>
+
+      <section id="downloads" data-type="list" class="active">
+        <ul>
+        </ul>
+      </section>
+    </section>
+  </body>
+</html>

apps/download/style/pick.css

@@ -0,0 +1,63 @@
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-size: 10px;
+}
+
+body > section {
+  width: 100%;
+  height: 100%;
+}
+
+/* No downloads message */
+
+#no-downloads {
+  height: calc(100% - 5rem);
+  text-align: center;
+  display: none;
+}
+
+body[data-downloads="0"] #no-downloads {
+  display: block;
+}
+
+#no-downloads span:first-child {
+  height: 100%;
+  display: inline-block;
+  width: 0;
+  vertical-align: middle;
+}
+
+#no-downloads span:nth-child(2) {
+  font-size: 1.8rem;
+  color: #1CABCB;
+}
+
+/* List of downloads */
+
+#downloads {
+  height: calc(100% - 5rem);
+  font-weight: 400;
+  padding: 0;
+  overflow: hidden;
+}
+
+#downloads ul {
+  overflow-y: auto;
+  height: 100%;
+}
+
+/* Only <li> elements are touchable */
+#downloads li p {
+  pointer-events: none;
+}
+
+#downloads li .fileName {
+  padding: 1rem 6rem 1rem 3.5rem;
+}
+
+#downloads li .info {
+  font-size: 1.2rem;
+  padding: 0 6rem 0 3.5rem;
+}