adjust notification bar for small/zoomed screens

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);
     }

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;
+        }
+    }
 });

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;
+    }
+}

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>

src/notification/bar.js

@@ -5,8 +5,16 @@
     // i18n
     $('#logo-link').attr('title', chrome.i18n.getMessage('appName'));
     closeButton.attr('title', chrome.i18n.getMessage('close'));
+
+    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('&');