Merge pull request #2151 from bitwarden/responsive-notificationBar

Even more responsive notification bar

src/_locales/en/messages.json

@@ -558,10 +558,7 @@
     "message": "Should Bitwarden remember this password for you?"
   },
   "notificationAddSave": {
-    "message": "Yes, Save Now"
+    "message": "Save"
-  },
-  "notificationNeverSave": {
-    "message": "Never for this website"
   },
   "disableChangedPasswordNotification": {
     "message": "Disable Changed Password Notification"
@@ -573,7 +570,7 @@
     "message": "Do you want to update this password in Bitwarden?"
   },
   "notificationChangeSave": {
-    "message": "Yes, Update Now"
+    "message": "Update"
   },
   "disableContextMenuItem": {
     "message": "Disable Context Menu Options"

src/notification/bar.html

@@ -25,7 +25,7 @@
             <div class="add-text"></div>
             <div class="add-buttons">
                 <button type="button" class="never-save link"></button>
-                <select class="select-folder"></select>
+                <select class="select-folder" isVaultLocked="false"></select>
                 <button type="button" class="add-save"></button>
             </div>
         </div>

src/notification/bar.js

@@ -6,11 +6,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
     i18n.appName = chrome.i18n.getMessage('appName');
     i18n.close = chrome.i18n.getMessage('close');
-    i18n.yes = chrome.i18n.getMessage('yes');
     i18n.never = chrome.i18n.getMessage('never');
     i18n.folder = chrome.i18n.getMessage('folder');
     i18n.notificationAddSave = chrome.i18n.getMessage('notificationAddSave');
-    i18n.notificationNeverSave = chrome.i18n.getMessage('notificationNeverSave');
     i18n.notificationAddDesc = chrome.i18n.getMessage('notificationAddDesc');
     i18n.notificationChangeSave = chrome.i18n.getMessage('notificationChangeSave');
     i18n.notificationChangeDesc = chrome.i18n.getMessage('notificationChangeDesc');
@@ -25,33 +23,29 @@ document.addEventListener('DOMContentLoaded', () => {
             ? chrome.runtime.getURL('images/icon38_locked.png')
             : chrome.runtime.getURL('images/icon38.png');
 
-        document.getElementById('close').src = chrome.runtime.getURL('images/close.png');
-        document.getElementById('close').alt = i18n.close;
-
-        var closeButton = document.getElementById('close-button'),
-            body = document.querySelector('body'),
-            bodyRect = body.getBoundingClientRect();
-
-        // i18n
-        body.classList.add('lang-' + lang.slice(0, 2));
-
         document.getElementById('logo-link').title = i18n.appName;
+
+        var neverButton = document.querySelector('#template-add .never-save');
+        neverButton.textContent = i18n.never;
+
+        var selectFolder = document.querySelector('#template-add .select-folder');
+        selectFolder.setAttribute('aria-label', i18n.folder);
+        selectFolder.setAttribute('isVaultLocked', isVaultLocked.toString());
+
+        var addButton = document.querySelector('#template-add .add-save');
+        addButton.textContent = i18n.notificationAddSave;
+
+        var changeButton = document.querySelector('#template-change .change-save');
+        changeButton.textContent = i18n.notificationChangeSave;
+
+        var closeIcon = document.getElementById('close');
+        closeIcon.src = chrome.runtime.getURL('images/close.png');
+        closeIcon.alt = i18n.close;
+
+        var closeButton = document.getElementById('close-button')
         closeButton.title = i18n.close;
         closeButton.setAttribute('aria-label', i18n.close);
 
-        if (bodyRect.width < 768) {
-            document.querySelector('#template-add .add-save').textContent = i18n.yes;
-            document.querySelector('#template-add .never-save').textContent = i18n.never;
-            document.querySelector('#template-add .select-folder').style.display = 'none';
-            document.querySelector('#template-change .change-save').textContent = i18n.yes;
-        } else {
-            document.querySelector('#template-add .add-save').textContent = i18n.notificationAddSave;
-            document.querySelector('#template-add .never-save').textContent = i18n.notificationNeverSave;
-            document.querySelector('#template-add .select-folder').style.display = isVaultLocked ? 'none' : 'initial';
-            document.querySelector('#template-add .select-folder').setAttribute('aria-label', i18n.folder);
-            document.querySelector('#template-change .change-save').textContent = i18n.notificationChangeSave;
-        }
-
         document.querySelector('#template-add .add-text').textContent = i18n.notificationAddDesc;
         document.querySelector('#template-change .change-text').textContent = i18n.notificationChangeDesc;
 

src/notification/bar.scss

@@ -24,7 +24,6 @@
     grid-template-columns: auto max-content;
 }
 
-
 .outer-wrapper > *, .inner-wrapper > * {
     align-self: center;
 }
@@ -77,6 +76,16 @@ button.neutral {
     }
 }
 
+.select-folder[isVaultLocked="true"] {
+    display: none
+}
+
+@media screen and (max-width: 768px) {
+    .select-folder {
+        display: none
+    }
+}
+
 @media (print) {
     body {
         display: none;