From 1b344ade0d19a63b360f9bc6acdfbf1388c902ee Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Thu, 7 Sep 2017 10:12:34 -0400
Subject: [PATCH] adjust notification bar for small/zoomed screens

---
 src/background.js              |  3 +++
 src/content/notificationBar.js | 21 +++++++++++++++++++++
 src/notification/bar.css       | 10 ++++++++++
 src/notification/bar.html      |  2 +-
 src/notification/bar.js        | 19 +++++++++++++++++--
 5 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/src/background.js b/src/background.js
index 7829414ded..4f9ec73131 100644
--- a/src/background.js
+++ b/src/background.js
@@ -75,6 +75,9 @@ chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
     else if (msg.command === 'bgCloseNotificationBar') {
         messageTab(sender.tab.id, 'closeNotificationBar');
     }
+    else if (msg.command === 'bgAdjustNotificationBar') {
+        messageTab(sender.tab.id, 'adjustNotificationBar', msg.data);
+    }
     else if (msg.command === 'bgCollectPageDetails') {
         collectPageDetailsForContentScript(sender.tab, msg.sender);
     }
diff --git a/src/content/notificationBar.js b/src/content/notificationBar.js
index 5370f951b5..5edda51ea5 100644
--- a/src/content/notificationBar.js
+++ b/src/content/notificationBar.js
@@ -17,6 +17,11 @@
             sendResponse();
             return true;
         }
+        else if (msg.command === 'adjustNotificationBar') {
+            adjustBar(msg.data);
+            sendResponse();
+            return true;
+        }
         else if (msg.command === 'pageDetails') {
             pageDetails.push(msg.data.details);
             watchForms(msg.data.forms);
@@ -249,4 +254,20 @@
                 break;
         }
     }
+
+    function adjustBar(data) {
+        if (data.height !== 42) {
+            var newHeight = data.height + 'px';
+            doHeightAdjustment('bit-notification-bar-iframe', newHeight);
+            doHeightAdjustment('bit-notification-bar', newHeight);
+            doHeightAdjustment('bit-notification-bar-spacer', newHeight);
+        }
+    }
+
+    function doHeightAdjustment(elId, heightStyle) {
+        var el = document.getElementById(elId);
+        if (el) {
+            el.style.height = heightStyle;
+        }
+    }
 });
diff --git a/src/notification/bar.css b/src/notification/bar.css
index 95e384fbf7..7770f58142 100644
--- a/src/notification/bar.css
+++ b/src/notification/bar.css
@@ -79,3 +79,13 @@ button.link {
         background: none;
         text-decoration: underline;
     }
+
+.add-buttons {
+    width: 175px;
+}
+
+@media (min-width: 768px) {
+    .add-buttons {
+        width: 320px;
+    }
+}
diff --git a/src/notification/bar.html b/src/notification/bar.html
index 4319643943..b824f019ca 100644
--- a/src/notification/bar.html
+++ b/src/notification/bar.html
@@ -28,7 +28,7 @@
             <tbody>
                 <tr>
                     <td class="add-text"></td>
-                    <td align="right" width="320">
+                    <td align="right" class="add-buttons">
                         <button class="never-save link"></button>
                         <button class="add-save"></button>
                     </td>
diff --git a/src/notification/bar.js b/src/notification/bar.js
index 10388aacd1..4b44248838 100644
--- a/src/notification/bar.js
+++ b/src/notification/bar.js
@@ -5,8 +5,16 @@
     // i18n
     $('#logo-link').attr('title', chrome.i18n.getMessage('appName'));
     closeButton.attr('title', chrome.i18n.getMessage('close'));
-    $('#template-add .add-save').text(chrome.i18n.getMessage('notificationAddSave'));
-    $('#template-add .never-save').text(chrome.i18n.getMessage('notificationNeverSave'));
+
+    if (window.innerWidth < 768) {
+        $('#template-add .add-save').text(chrome.i18n.getMessage('yes'));
+        $('#template-add .never-save').text(chrome.i18n.getMessage('never'));
+    }
+    else {
+        $('#template-add .add-save').text(chrome.i18n.getMessage('notificationAddSave'));
+        $('#template-add .never-save').text(chrome.i18n.getMessage('notificationNeverSave'));
+    }
+
     $('#template-add .add-text').text(chrome.i18n.getMessage('notificationAddDesc'));
 
     if (getQueryVariable('add')) {
@@ -42,6 +50,13 @@
         });
     });
 
+    chrome.runtime.sendMessage({
+        command: 'bgAdjustNotificationBar',
+        data: {
+            height: document.body.scrollHeight
+        }
+    });
+
     function getQueryVariable(variable) {
         var query = window.location.search.substring(1);
         var vars = query.split('&');