Added font awesome, and stylized the popup

css/popup.css

@@ -1,13 +1,57 @@
 body {
-  min-width: 200px;
-  max-width: 400px;
+  width: 300px;
   font-size: 12px;
   background: #fefefe;
   color: #333;
   font-family: helvetica, arial, sans-serif;
-  padding-left: 7px;
-  padding-right: 7px;
   overflow-y: hidden;
   overflow-x: hidden;
-  width: calc(100% - 30px);
+  margin: 0;
+}
+
+.clear {
+  clear: both;
+}
+
+.tools-panel {
+  width: 100%;
+  padding: 3px;
+  background: #5b5655;
+  color: #fefefe;
+}
+
+.tools-panel .tools-title {
+  font-size: 18px;
+  margin-left: 5px;
+  float: left;
+}
+
+.tools-panel .tools-options {
+  float: right;
+  margin-right: 5px;
+}
+
+.item-panel {
+  border: 2px solid #e7e7e7;
+  margin: 5px;
+}
+
+.item-panel .item-button {
+  margin: 2px;
+}
+
+.item-panel .item-details {
+  margin: 2px;
+}
+
+.item-panel .item-details .item-title {
+  width: 100%;
+  font-size: 14px;
+  font-weight: bold;
+  border-bottom: 2px solid #e7e7e7;
+}
+
+.item-panel .item-details .item-url {
+  width: 100%;
+  font-size: 12px;
 }

manifest.json

@@ -21,7 +21,7 @@
   ],
   
   "browser_action": {
-    "browser_style": true,
+    "browser_style": false,
     "default_icon": {
       "16": "images/favicon-16.png",
       "48": "images/favicon-48.png"

scripts/background.js

@@ -69,6 +69,8 @@ function processMessage(msg, sender, sendResponse) {
       sendResponse(true);
       break;
     case 'get-item':
+      var foundItem = getProcessItem(msg.id);
+      sendResponse(foundItem);
       break;
     case 'get-all-items':
       sendResponse(itemList);
@@ -77,20 +79,26 @@ function processMessage(msg, sender, sendResponse) {
 }
 
 // Updates the process item list
-function addProcessItem(type, url) {
-  console.log('Added ' + type + ': ' + url);
-  
+function addProcessItem(type, data) {
   // Update the total process count
   processedItemTotal++;
   
   // Create a new object for this process and add it to the main list
-  var item = { id: processedItemTotal, type: type, url: url };
+  var item = { id: processedItemTotal, type: type, data: data };
   itemList.push(item);
   
   // Update Badge
   updateBadge();
 }
 
+function getProcessItem(id) {  
+  // Get the item from the master list
+  var foundItem = itemList.find(function(item) {
+      return item.id === id;
+  });
+  return foundItem;
+}
+
 function delProcessItem(id) {
   // Remove the item from the master list
   itemList = itemList.filter(function(item) {

scripts/paste.js

@@ -12,10 +12,10 @@ function createPaste(text) {
               browser.tabs.create({ url: pasteUrl });
         
               // Update the browser action
-              addProcessItem('Paste', pasteUrl);
+              addProcessItem('paste', response.result);
             }
             else {
-              notify("Paste Error", response.error.message);
+              onError("Paste Error: " + response.error.message);
             }
         }
     });

scripts/popup.js

@@ -18,40 +18,127 @@ function fillItems(items) {
   else {
     // Add a div for each item
     items.forEach(function(item) {      
-      if ($('#process-item-' + item.id).length) {
-        // It already exists, so let's update it
-        var itemDiv = $('#process-item-' + item.id);
-        itemDiv.find('#type').html(item.type);
-        itemDiv.find('#url').html(item.url);
-      }
-      else {
-        var itemDiv = $('#process-item-template');
+      fillItem(item);
+    });
+  }
+}
+
+function fillItem(item) {
+  var itemDiv;
+  
+  if ($('#process-item-' + item.id).length) {
+    // It already exists, so let's update it
+    itemDiv = $('#process-item-' + item.id);
+  }
+  else {  
+    // Create a new one depending on the type
+    switch (item.type) {
+      case 'shorten':
+      case 'paste':
+      case 'upload':  
+        // Setup a new itemDiv
+        itemDiv = $('#process-item-template').clone();
         itemDiv.attr('id', 'process-item-' + item.id);
-        itemDiv.find('#type').html(item.type);
-        itemDiv.find('#url').html(item.url);
+        
+        itemDiv.find('#copy').click(function () {
+          copyTextToClipboard(item.id);
+        });        
         
         itemDiv.find('#open').click(function () {
-          openItem(item.url);
+          openItem(item.id);
         });
         
-        itemDiv.find('#remove').click(function () {
+        itemDiv.find('#close').click(function () {
           clearItem(item.id);
         });
+        break;     
+      case 'progress':
+        // Setup a new itemDiv
+        itemDiv = $('#process-item-progress-template').clone();
+        itemDiv.attr('id', 'process-item-' + item.id);
+        
+        itemDiv.find('#close').click(function () {
+          cancelItem(item.id);
+        });
+        break;
+      case 'error':
+        // Setup a new itemDiv
+        itemDiv = $('#process-item-error-template').clone();
+        itemDiv.attr('id', 'process-item-' + item.id);
         
-        // Add to the main div
-        $('#process-list').append(itemDiv);
+        itemDiv.find('#close').click(function () {
+          clearItem(item.id);
+        });
+        break;
+    }
+    
+    // Add to the main div
+    $('#process-list').append(itemDiv);
+  }
+  
+  // Add the data info depending on the type
+  switch (item.type) {
+    case 'shorten':
+      itemDiv.find('#title').html('Shortened Url');
+      itemDiv.find('#url').html(item.data.shortUrl);
+      break;
+    case 'paste':
+      itemDiv.find('#title').html('Paste');
+      itemDiv.find('#url').html(item.data.url);
+      break;
+    case 'upload':
+      itemDiv.find('#title').html('Upload');
+      var fullUrl = item.data.url;
+      var key = '';
+      if (item.data.key != null) {
+          key = item.data.key;
       }
-    });
+      if (!item.data.saveKey) {
+          fullUrl = fullUrl + '#' + key;
+      }
+      itemDiv.find('#url').html(fullUrl);
+      break;
+    case 'progress':
+      itemDiv.find('#title').html('Processing...');
+      itemDiv.find('#progress').html(item.data.progress);
+      break;
+    case 'error':
+      itemDiv.find('#title').html('Error');
+      itemDiv.find('#error').html(item.data.message);
+      break;
   }
 }
 
-function clearItem(itemId) {
-  var msg = browser.runtime.sendMessage({ cmd: 'del-item', id: itemId });
+function cancelItem(id) {
+  var msg = browser.runtime.sendMessage({ cmd: 'cancel-item', id: id });
+  msg.then(function() {
+    $('#process-item-' + id).remove();
+  }, onError);
+}
+
+function clearItem(id) {
+  var msg = browser.runtime.sendMessage({ cmd: 'del-item', id: id });
   msg.then(function() {
-    $('#process-item-' + itemId).remove();
+    $('#process-item-' + id).remove();
   }, onError);
 }
 
-function openItem(url) {  
-  browser.tabs.create({ url: url });
+function openItem(id) {  
+  var itemDiv = $('#process-item-' + id);
+  browser.tabs.create({ url: itemDiv.find('#url').html() });
+}
+
+function copyItem(id) {
+  var itemDiv = $('#process-item-' + id);
+  copyTextToClipboard(itemDiv.find('#url').html());
+}
+
+function copyTextToClipboard(text) {
+  var copyFrom = document.createElement("textarea");
+  copyFrom.textContent = text;
+  var body = document.getElementsByTagName('body')[0];
+  body.appendChild(copyFrom);
+  copyFrom.select();
+  document.execCommand('copy');
+  body.removeChild(copyFrom);
 }

scripts/shorten.js

@@ -10,12 +10,11 @@ function shortenUrl(url) {
             if (response.result) {
               var shortUrl = response.result.shortUrl;
         
-              // Update the browser action
-              addProcessItem('Shortened Url', shortUrl);
-              notify("Url Shortened", "The Url has been shortened to: " + shortUrl);
+              // add the new item
+              addProcessItem('shorten', response.result);
             }
             else {
-              notify("Shorten Error", response.error.message);
+              onError("Shorten Error: " + response.error.message);
             }
         }
     });

scripts/upload.js

@@ -8,7 +8,7 @@ function uploadFromUrl(contentUrl) {
     encryptFile(xhr.response, xhr.response.type, false, false, false, 256, 128, 1000, uploadFile);
   };
   xhr.onerror = function(err) {
-    notify("Upload Error", err);
+    onError("Upload Error: " + err);
   };
   xhr.onprogress = function (data) {
       if (data.lengthComputable) {
@@ -61,7 +61,7 @@ function encryptFile(fileBlob, contentType, saveKey, serverSideEncrypt, genDelKe
                 worker.onerror = function (err) {
                     // An error occured
                     /* NOTIFY SOMEONE */
-                    notify("Upload Error", err.message);
+                    onError("Upload Error: " + err.message);
                 }
 
                 // Execute worker with data
@@ -141,27 +141,30 @@ function uploadComplete(key, saveKey, evt) {
             fullUrl = fullUrl + '#' + key;
         }
         
+        // Add the saveKey to the results
+        obj.result.saveKey = saveKey;
+        
         // Open a new tab to the upload
         browser.tabs.create({ url: fullUrl });
         
-        // Update the browser action
-        addProcessItem('Upload', fullUrl);
+        // Add the completed item
+        addProcessItem('upload', obj.result);
     }
     else
     {
         if (obj.error != null) {
-            notify("Upload Error", obj.error.message);
+            onError("Upload Error: " + obj.error.message);
         }
         else {
-            notify("Upload Error", 'Unable to Upload File');
+            onError('Upload Error: Unable to Upload File');
         }
     }
 }
 
 function uploadFailed(evt) {
-    notify("Upload Error", 'Upload Failed');
+    onError('Upload Error: Upload Failed');
 }
 
 function uploadCanceled(evt) {
-    notify("Upload Error", 'Upload Canceled');
+    onError('Upload Error: Upload Canceled');
 }

views/popup.html

@@ -4,6 +4,7 @@
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/font-awesome.min.css"/>
     <link rel="stylesheet" href="../css/common.css"/>
     <link rel="stylesheet" href="../css/popup.css"/>
     
@@ -12,22 +13,53 @@
 
   <body>
     <div class="panel">
-      <div id="process-list"></div>
-      <div id="extraTools">
-        <button id="settings">Settings</button>
+      <div id="extraTools" class="tools-panel">
+        <span class="tools-title">Teknik Services</span>
+        <span class="tools-options">
+          <button id="settings" class="tools-button"><i class="fa fa-cog"></i></button>
+        </span>
+        <div class="clear"></div>
       </div>
+      <div id="process-list"></div>
     </div>
     
+    <!-- Templates for panels -->
     <div id="templates" style="display: none">
+      <!-- Completed Item Template -->
       <div id="process-item-template" class="item-panel">
         <div class="item-details">
-          <h2 class="item-title" id="type"></h2>
+          <div class="item-title" id="title"></div>
           <div class="item-url" id="url"></div>
         </div>
         
         <div class="item-actions">
-          <button id="open" class="item-button">Open</button>
-          <button id="remove" class="item-button">Remove</button>
+          <button id="copy" class="item-button"><i class="fa fa-clipboard"></i></button>
+          <button id="open" class="item-button"><i class="fa fa-external-link"></i></button>
+          <button id="close" class="item-button"><i class="fa fa-times-circle"></i></button>
+        </div>
+      </div>      
+      
+      <!-- In Progress Template -->
+      <div id="process-item-progress-template" class="item-panel">
+        <div class="item-details">
+          <div class="item-title" id="title"></div>
+          <div class="item-progress" id="progress"></div>
+        </div>
+        
+        <div class="item-actions">
+          <button id="close" class="item-button"><i class="fa fa-ban"></i></button>
+        </div>
+      </div>
+      
+      <!-- Error Template -->
+      <div id="process-item-error-template" class="item-panel">
+        <div class="item-details">
+          <div class="item-title" id="title"></div>
+          <div class="item-error" id="error"></div>
+        </div>
+        
+        <div class="item-actions">
+          <button id="close" class="item-button"><i class="fa fa-times-circle"></i></button>
         </div>
       </div>
     </div>