Merge branch 'master' of https://github.com/teresa-ou/inboxy into ter…

…esa-ou-master

dist/manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "Inboxier: Inbox Bundles for Gmail",
-    "version": "1.5.4",
+    "version": "1.6.0",
     "description": "Adds Google Inbox bundles and style to Gmail",
     "homepage_url": "https://github.com/64bitpandas/inboxier",
     "background": {

dist/options/options.css

@@ -329,6 +329,7 @@ textarea::placeholder {
     text-transform: uppercase;
     height: 36px;
     width: 94px;
+    margin: 20px 0px;
 }
 
 .save-button .saved-text {
@@ -361,4 +362,65 @@ textarea::placeholder {
 }
 .save-button.saved .saved-text {
     transform: translate(-50%, -50%) translateY(0);
+}
+
+/** Rounded toggle switch */
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 30px;
+  height: 17px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switch-label {
+    position:relative;
+    bottom:3px;
+    left: 5px;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .5s;
+  transition: .5s;
+  border-radius: 17px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 13px;
+  width: 13px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  -webkit-transition: .5s;
+  transition: .5s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #00acc1;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #00acc1;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(13px);
+  -ms-transform: translateX(13px);
+  transform: translateX(13px);
 }

dist/options/options.html

@@ -202,13 +202,16 @@ <h2 id="preferred-settings">Preferred Gmail settings</h2>
         <div class="tab">
             <h1>
                 Options
+            </h1>
+            <h2>
+                Labels
                 <div class="help-container">
                     <img src="assets/help.svg" class="help-icon">
                     <div class="tooltip">
                         Add the name of each bundle on a new line. For nested labels, use forward-slashes between the nesting hierarchy levels.
                     </div>
                 </div>
-            </h1>
+            </h2>
 
             <div class="list-type-options">
                 <div class="list-type">
@@ -223,6 +226,18 @@ <h1>
 
             <textarea id="label-list" rows="16"></textarea>
 
+            <h2>
+                Group by date
+            </h2>
+
+            <div>
+                <label class="switch">
+                    <input type="checkbox" id="group-by-date-checkbox">
+                    <span class="slider"></span>
+                </label>
+                <span class="switch-label">Group messages by date</span>
+            </div>            
+
             <button id="save-button" class="save-button">
                 <span class="save-text">Save</span>
                 <span class="saved-text">Saved <img src="assets/small-check.svg"></span>

dist/options/options.js

@@ -20,10 +20,12 @@ function saveOptions() {
     const exclude = document.getElementById('exclude-radio').checked;
     const labelList = document.getElementById('label-list');
     const labels = labelList.value.split(/[\n]+/).map(s => s.trim()).filter(s => !!s);
+    const groupMessagesByDate = document.getElementById('group-by-date-checkbox').checked;
 
     chrome.storage.sync.set({
         exclude: !!exclude,
         labels: labels,
+        groupMessagesByDate: !!groupMessagesByDate,
     }, function() {
         labelList.value = labels.join('\n');
 
@@ -39,6 +41,7 @@ function restoreOptions() {
     chrome.storage.sync.get({
         exclude: true,
         labels: [],
+        groupMessagesByDate: true,
     }, function(items) {
         const id = items.exclude ? 'exclude-radio' : 'include-radio';
         document.getElementById(id).checked = true;
@@ -48,6 +51,9 @@ function restoreOptions() {
         if (!items.labels.length) {
           labelList.placeholder = PLACEHOLDER;
         }
+
+        document.getElementById('group-by-date-checkbox').checked = items.groupMessagesByDate;
+
     });
 }
 document.getElementById('save-button').addEventListener('click', saveOptions);

src/bundling/Bundler.js

@@ -50,11 +50,16 @@ class Bundler {
         this.messageSelectHandler = new MessageSelectHandler(bundledMail, selectiveBundling);
         this.inboxyStyler = new InboxyStyler(bundledMail);
         this.quickSelectHandler = new QuickSelectHandler();
+        chrome.storage.sync.get(['groupMessagesByDate'], ({ groupMessagesByDate = true }) => {
+            this.groupMessagesByDate = groupMessagesByDate;
+        });
     }
 
     /**
      * Bundle together the messages on the current page of messages, if they aren't already bundled,
      * optionally reopening the most recently open bundle.
+     *
+     * Returns an object with info for debug printing.
      */
     bundleMessages(reopenRecentBundle) {
         const bundledMail = this.bundledMail;
@@ -64,14 +69,18 @@ class Bundler {
             : null;
 
         if (!messageList) {
-            return;
+            return {
+                foundMessageList: false,
+            };
         }
 
+        let debugInfo = { foundMessageList: true };
+
         this.messageListWatcher.disconnect();
 
         // Only redraw if message list isn't still bundled
         if (!messageList.children[0].classList.contains('is-bundled')) {
-            this._bundleMessages(messageList);
+            debugInfo = this._bundleMessages(messageList);
             messageList.children[0].classList.add('is-bundled');
         }
 
@@ -84,13 +93,17 @@ class Bundler {
         }
 
         this.messageListWatcher.observe();
+
+        return debugInfo;
     }
 
     /**
      * Bundle messages in the given messageList dom node.
      *
      * Table rows are reordered by using flexbox and the order property, since Gmail's js seems 
      * to require the DOM nodes to remain in their original order. 
+     *
+     * Returns an object with info for debug printing.
      */
     _bundleMessages(messageList) {
         const tableBody = messageList.querySelector(Selectors.TABLE_BODY);
@@ -116,6 +129,11 @@ class Bundler {
 
         this._applyStyles(messageNodes);
         this._attachHandlers(messageNodes, messageList);
+
+        return {
+            numMessages: messageNodes.length,
+            numBundles: Object.keys(bundlesByLabel).length,
+        };
     }
 
     /**
@@ -157,8 +175,13 @@ class Bundler {
      * a message row, date divider, or bundle row.
      */
     _calculateSortedTableRows(messageNodes, bundlesByLabel) {
+
         const rows = this._calculateMessageAndBundleRows(messageNodes, bundlesByLabel);
 
+        if (!this.groupMessagesByDate) {
+            return rows;
+        }
+
         const sampleDate = messageNodes.length 
             ? DomUtils.extractDate(messageNodes[0])
             : '';

src/bundling/DateGrouper.js

@@ -34,8 +34,10 @@ import DomUtils from '../util/DomUtils';
 class DateGrouper {
     constructor() {
         this.refreshDateDividers = this.refreshDateDividers.bind(this);
-
         this.pinnedMessageListWatcher = new PinnedMessageListWatcher(this.refreshDateDividers);
+        chrome.storage.sync.get(['groupMessagesByDate'], ({ groupMessagesByDate = true }) => {
+            this.groupMessagesByDate = groupMessagesByDate;
+        });
     }
 
     /** 
@@ -72,12 +74,16 @@ class DateGrouper {
             ? DomUtils.extractDate(messageNodes[0])
             : '';
 
-        const messageRows = messageNodes.map(m => ({
+        let messageRows = messageNodes.map(m => ({
             element: m,
             type: Element.UNBUNDLED_MESSAGE,
         }));
-        const rows = DateDivider.withDateDividers(messageRows, sampleDate);
-        this._drawRows(rows, tableBody);
+
+        if (this.groupMessagesByDate) {
+            messageRows = DateDivider.withDateDividers(messageRows, sampleDate);
+        }
+
+        this._drawRows(messageRows, tableBody);
     }
 
     /**

src/content.js

@@ -40,8 +40,16 @@ import {
     isStarredPage,
 } from './util/MessagePageUtils';
 
+const DEBUG = true;
+const logDebugMessage = message => {
+    if (DEBUG) {
+        console.log(`inboxy-debug: ${message}`);
+    }
+};
+
 const html = document.querySelector('html');
 if (html) {
+    logDebugMessage('Applying styles');
     html.classList.add(InboxyClasses.INBOXY);
 }
 
@@ -129,7 +137,9 @@ document.addEventListener('mousedown', e => {
 //
 
 function handleContentLoaded() {
+    logDebugMessage('Handle content loaded event');
     const bundleCurrentPage = supportsBundling(window.location.href);
+    logDebugMessage(`Url: ${window.location.href}, page supports bundling: ${bundleCurrentPage}`);
     tryBundling(0, bundleCurrentPage);
     createComposeButton();
 }
@@ -147,6 +157,8 @@ function tryBundling(i, bundleCurrentPage) {
             setTimeout(() => tryBundling(i + 1, bundleCurrentPage), RETRY_TIMEOUT_MS);
         }
         else {
+            logDebugMessage('Start observers');
+
             addPinnedToggle(); 
             startObservers();
 
@@ -166,7 +178,10 @@ function tryBundling(i, bundleCurrentPage) {
             setTimeout(() => tryBundling(i + 1, bundleCurrentPage), RETRY_TIMEOUT_MS);
         }
         else {
-            bundler.bundleMessages(false);
+            logDebugMessage('Bundle messages');
+
+            const debugInfo = bundler.bundleMessages(false);
+            logDebugMessage(JSON.stringify(debugInfo));
             addPinnedToggle();
             startObservers();
         }