Merge branch 'master' into 71-master

dist/options/options.html

@@ -256,6 +256,18 @@ <h2>
                 <span class="switch-label">Group messages by date</span>
             </div>            
 
+            <h2>
+                Use label colors
+            </h2>
+
+            <div>
+                <label class="switch">
+                    <input type="checkbox" id="use-label-colors-checkbox">
+                    <span class="slider"></span>
+                </label>
+                <span class="switch-label">Use label colors</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

@@ -21,6 +21,7 @@ function saveOptions() {
     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;
+    const useLabelColors = document.getElementById('use-label-colors-checkbox').checked;
 
     const actionButtons = document.querySelectorAll('.action:checked');
     const actions = [...actionButtons].map(button => button.value);
@@ -30,6 +31,7 @@ function saveOptions() {
         labels: labels,
         actions: actions,
         groupMessagesByDate: !!groupMessagesByDate,
+        useLabelColors: !!useLabelColors,
     }, function() {
         labelList.value = labels.join('\n');
 
@@ -47,6 +49,7 @@ function restoreOptions() {
         labels: [],
         actions: ['archive'],
         groupMessagesByDate: true,
+        useLabelColors: true,  // TODO: Should be default false?
     }, function(items) {
         const id = items.exclude ? 'exclude-radio' : 'include-radio';
         document.getElementById(id).checked = true;
@@ -60,6 +63,8 @@ function restoreOptions() {
         for (const action of items.actions) {
             document.getElementById(`${action}-checkbox`).checked = true;
         }
+        document.getElementById('group-by-date-checkbox').checked = items.groupMessagesByDate;
+        document.getElementById('use-label-colors-checkbox').checked = items.useLabelColors;
 
         document.getElementById('group-by-date-checkbox').checked = items.groupMessagesByDate;
     });

dist/style.css

@@ -102,6 +102,15 @@ html.inboxy .bundle-row.visible .xY.yX {
 html.inboxy .bundle-row.visible .bundle-and-count {
     overflow: hidden;
     text-overflow: ellipsis;
+    margin-left: -15px;
+}
+
+/* Make bundle labels look like Gmail labels */
+html.inboxy .bundle-row .bundle-and-count span {
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-weight: normal;
+    font-size: 13px;
 }
 
 /* Handle long label names */

src/bundling/Bundler.js

@@ -148,12 +148,12 @@ class Bundler {
 
             if (!this._isStarred(message)) {
                 messageLabels.forEach(l => {
-                    if (!bundlesByLabel[l]) {
-                        const bundle = new Bundle(l);
-                        bundlesByLabel[l] = bundle;
+                    if (!bundlesByLabel[l.title]) {
+                        const bundle = new Bundle(l.title, l.textColor, l.backgroundColor, l.borderColor);
+                        bundlesByLabel[l.title] = bundle;
                     }
 
-                    bundlesByLabel[l].addMessage(message);
+                    bundlesByLabel[l.title].addMessage(message);
                 });
             }
         })
@@ -200,12 +200,12 @@ class Bundler {
             }
 
             messageLabels.forEach(l => {
-                if (!labels.has(l) && bundlesByLabel[l]) {
+                if (!labels.has(l.title) && bundlesByLabel[l.title]) {
                     rows.push({
-                        element: bundlesByLabel[l],
+                        element: bundlesByLabel[l.title],
                         type: Element.BUNDLE,
                     });
-                    labels.add(l);
+                    labels.add(l.title);
                 }
             });
         }
@@ -292,7 +292,11 @@ class Bundler {
             messages,
             hasUnreadMessages, 
             this.bundleToggler.toggleBundle,
-            baseUrl);
+            baseUrl,
+            bundle.getTextColor(),
+            bundle.getBackgroundColor(),
+            bundle.getBorderColor()
+        );
         tableBody.appendChild(bundleRow);
 
         messages.forEach(m => m.classList.add(InboxyClasses.BUNDLED_MESSAGE));
@@ -331,4 +335,4 @@ class Bundler {
     }
 }
 
-export default Bundler;
+export default Bundler;

src/bundling/SelectiveBundling.js

@@ -30,13 +30,13 @@ class SelectiveBundling {
     }
 
     findRelevantLabels(message) {
-        const messageLabels = DomUtils.getLabelStrings(message);
+        const messageLabels = DomUtils.getLabels(message);
 
         if (this.exclude) {
-            return messageLabels.filter(l => !this.labels.has(l.toLowerCase()));
+            return messageLabels.filter(l => !this.labels.has(l.title.toLowerCase()));
         }
         else {
-            return messageLabels.filter(l => this.labels.has(l.toLowerCase()));
+            return messageLabels.filter(l => this.labels.has(l.title.toLowerCase()));
         }
     }
 }

src/components/BundleRow.js

@@ -26,10 +26,16 @@ import {
 
 const MAX_MESSAGE_COUNT = 25;
 
+// TODO: Using colors sholuld default to false?
+let useLabelColorsSetting = true;
+chrome.storage.sync.get(['useLabelColors'], ({ useLabelColors = true }) => {
+    useLabelColorsSetting = useLabelColors;
+});
+
 /**
  * Create a table row for a bundle, to be shown in the list of messages. 
  */
-function create(label, order, messages, hasUnread, toggleBundle, baseUrl) {
+function create(label, order, messages, hasUnread, toggleBundle, baseUrl, textColor, backgroundColor, borderColor) {
     const displayedMessageCount = messages.length >= MAX_MESSAGE_COUNT 
         ? `${MAX_MESSAGE_COUNT}+` 
         : messages.length;
@@ -53,14 +59,16 @@ function create(label, order, messages, hasUnread, toggleBundle, baseUrl) {
     const latestIsUnreadClass = messages[0].classList.contains(GmailClasses.UNREAD) ? 'unread' : '';
     const latestIsSnoozedClass = snoozedText ? GmailClasses.SNOOZED : '';
 
+    const labelColorStyle = useLabelColorsSetting ? `style="color: ${textColor}; background-color: ${backgroundColor}; border-color: ${borderColor};"` : '';
+
     const html = `
         <tr class="${GmailClasses.ROW} ${InboxyClasses.BUNDLE_ROW} ${unreadClass}">
             <td class="${GmailClasses.CELL} PF"></td>
             <td class="${GmailClasses.CELL} apU"></td>
             <td class="spacer ${GmailClasses.CELL} ${spacerClass}"></td>
             <td class="${GmailClasses.CELL} yX">
                 <div class="bundle-and-count">
-                    <span>${label}</span>
+                    <span ${labelColorStyle}>${label}</span>
                     <span class="bundle-count">(${displayedMessageCount})</span>
                 </div>
             </td>
@@ -151,4 +159,4 @@ function _generateSendersText(messages) {
         unreadStatusBySenders[s] ? `<span class="unread-sender">${s}</span>` : s)
 }
 
-export default { create };
+export default { create };

src/containers/Bundle.js

@@ -18,8 +18,11 @@
  * A bundle of messages that belong to a particular label.
  */
 class Bundle {
-    constructor(label) {
+    constructor(label, textColor, backgroundColor, borderColor) {
         this._label = label;
+        this._textColor = textColor;
+        this._backgroundColor = backgroundColor;
+        this._borderColor = borderColor;
         this._bundleRow = null;
         this._order = null;
         this._messages = [];
@@ -64,6 +67,27 @@ class Bundle {
     getMessages() {
         return this._messages;
     }
+
+    /**
+     * The text color of the bundle's corresponding label
+     */
+    getTextColor() {
+        return this._textColor;
+    }
+
+    /**
+     * The background color of the bundle's corresponding label
+     */
+    getBackgroundColor() {
+        return this._backgroundColor;
+    }
+
+    /**
+     * The border color of the bundle's corresponding label
+     */
+    getBorderColor() {
+        return this._borderColor;
+    }
 }
 
-export default Bundle;
+export default Bundle;

src/handlers/MessageSelectHandler.js

@@ -96,9 +96,11 @@ class MessageSelectHandler {
                 this.inboxyStyler.markSelectedBundlesFor(
                     this.selectiveBundling.findRelevantLabels(message));
                 this.inboxyStyler.disableBulkActionsIfNecessary();
+                    this.selectiveBundling.findRelevantLabels(message).map(l => l.title));
+                this.inboxyStyler.disableBulkArchiveIfNecessary();
             }
         });    
     }
 }
 
-export default MessageSelectHandler;
+export default MessageSelectHandler;

src/util/Constants.js

@@ -68,6 +68,7 @@ const Selectors = {
     INBOX_LABEL: `${LABELS}[title="Inbox"]`,
     INBOXY: `.${InboxyClasses.INBOXY}`,
     LABEL_CONTAINERS: '.ar.as',
+    LABEL_TEXT: '.av',
     LABELS: LABELS,
     IMPORTANCE_MARKER: `.${GmailClasses.ROW} .${GmailClasses.IMPORTANCE_MARKER}`,
     INBOX_TAB: '.TO[data-tooltip="Inbox"]',

src/util/DomUtils.js

@@ -32,9 +32,14 @@ const DomUtils = {
     isChecked: function(checkboxNode) {
         return checkboxNode.getAttribute('aria-checked') === 'true';
     },
-
-    getLabelStrings: function(message) {
-        return [...message.querySelectorAll(Selectors.LABELS)].map(l => l.title);
+
+    getLabels: function(message) {
+        return [...message.querySelectorAll(Selectors.LABELS)].map(l => ({
+            title: l.title,
+            backgroundColor: l.style.backgroundColor,
+            borderColor: l.style.borderColor,
+            textColor: l.querySelectorAll(Selectors.LABEL_TEXT)[0].style.color
+        }));
     },
 
     htmlToElement: function(html) {