freelawproject · mlissner · Apr 18, 2024 · Apr 17, 2024 · Apr 17, 2024 · Apr 17, 2024
diff --git a/CHANGES.md b/CHANGES.md
@@ -8,7 +8,7 @@ Features:
  - None yet
 
 Changes:
- - None yet
+ - Adds a banner to the PACER login page to link users to a donate page with information about the pacer class action([#367](https://github.com/freelawproject/recap/issues/367), [#368](https://github.com/freelawproject/recap-chrome/pull/368)).
 
 Fixes:
  - None yet

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
@@ -540,34 +540,66 @@ footer #version {
   border-color: #255885;
 }
 
-.info-banner {
-  background-color: #CCE5FF;
-  border-color: #B8DAFF;
-  border-radius: 4px;
-  padding: 28px 20px;
-  margin-bottom: 10px;
+.recap-login-banner {
+  display: flex;
+  position: absolute;
+  width: 534px;
+  height: 75px;
+  align-items: center;
+  background-color: #FFFFFF;
+  border: 1px solid black;
+  gap: 10px;
+  padding: 10px 13px;
+  margin: 0 auto;
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);
+  left: 0;
+  right: 0;
+}
+
+.banner-icon-container {
+  width: 56px;
+  height: 55px;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  order: 0;
 }
 
-#info-banner-message {
+.banner-open-btn {
+  width: 73px;
+  height: 36px;
+  font-family: helvetica,arial,serif;
   font-size: 16px;
-  color: #004085;
+  font-weight: 400;
+  text-decoration: none;
+  color: white;
 }
 
-.banner-icon-container {
-  padding-top: 12.5px;
-  padding-right: 20px;
-  padding-bottom: 12.5px;
+.banner-open-btn:visited,
+.banner-open-btn:link {
+  color: white;
 }
 
-#banner-icon {
-  width: 24px;
+.banner-close-btn {
+  position: absolute;
+  top: 0px;
+  right: 5px;
+  text-decoration: none;
+  opacity: 0.5;
+  color: black;
 }
 
-#dismiss-banner {
-  padding-left: 20px;
+.banner-close-btn:hover {
+  opacity: 0.9;
 }
-#dismiss-banner button {
-  width: 16px;
+
+.banner-close-btn span {
+  font-size: 17px;
+}
+
+.banner-message-wrapper {
+  display: flex;
+  flex-direction: column;
 }
 
 /* For printed pages, we want to hide anything that we add. */

diff --git a/src/background.js b/src/background.js
@@ -203,14 +203,3 @@ chrome.tabs.onUpdated.addListener(async function (tabId, details, tab) {
 chrome.tabs.onActivated.addListener(function(activeInfo){
   getTabById(activeInfo.tabId, updateToolbarButton);
 });
-
-chrome.runtime.onConnect.addListener(function (port) {
-  if (port.name === 'popup') {
-    port.onDisconnect.addListener(function () {
-      chrome.storage.local.get('options', function (items) {
-        items.options['dismiss_bagde'] = true;
-        saveOptionsAndUpdateToolbar(items.options);
-      });
-    });
-  }
-});
diff --git a/src/content.js b/src/content.js
@@ -1,4 +1,15 @@
 // Content script to run when DOM finishes loading (run_at: "document_end").
+const bannerMessages = {
+  A: 'The PACER fees class action was settled for $125 million. Free Law Project will continue the fight.',
+  B: 'News! The PACER fees class action was settled. Learn more and help us make PACER free forever.',
+};
+
+const donateLinks = {
+  A: 'https://donate.free.law/forms/pacer-a1',
+  B: 'https://donate.free.law/forms/pacer-a2',
+  C: 'https://donate.free.law/forms/pacer-b1',
+  D: 'https://donate.free.law/forms/pacer-b2',
+};
 
 let url = window.location.href;
 let court = PACER.getCourtFromUrl(url);
@@ -36,6 +47,28 @@ async function addRecapInformation(msg) {
       });
     }
 
+    const options = await getItemsFromStorage('options');
+    if ('dismiss_class_action_info' in options && options['dismiss_class_action_info']) {
+      return;
+    }
+
+    const variant = await getItemsFromStorage('variant');
+    const [bannerVariant, linkVariant] = variant.split('-');
+    PACER.addRecapBannerToLoginPage(
+      bannerMessages[bannerVariant], donateLinks[linkVariant]
+    );
+
+    let dismiss_button = document.getElementById('dismiss_recap_info_banner');
+    dismiss_button.addEventListener('click', async () => {
+      // Updates user preferences and remove the information banner
+      let info_banner = document.getElementById('recap_info_banner');
+      info_banner.remove();
+
+      let options = await getItemsFromStorage('options');
+      options['dismiss_class_action_info'] = true;
+      saveItemToStorage({ options: options });
+    });
+
     return;
   }
 

diff --git a/src/options.html b/src/options.html
@@ -13,59 +13,22 @@
     <!-- Main Tab Content + Donation plea -->
     <header>
       <div class="d-flex flex-column">
-        <div id="header-banner" class="info-banner d-flex flex-column">
-          <div id="message-section" class="d-flex">
-            <div class="flex align-items-center banner-icon-container">
-              <div id="banner-icon">
-                <?xml version="1.0" encoding="UTF-8"?>
-                <svg fill="none" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg">
-                  <g clip-path="url(#a)" clip-rule="evenodd" fill="#000" fill-rule="evenodd">
-                    <path
-                      d="m3 9.5v12.75c0 0.1989 0.07902 0.3897 0.21967 0.5303 0.14065 0.1407 0.33142 0.2197 0.53033 0.2197h16.5c0.1989 0 0.3897-0.079 0.5303-0.2197 0.1407-0.1406 0.2197-0.3314 0.2197-0.5303v-12.75h1.5v12.75c0 0.5967-0.2371 1.169-0.659 1.591-0.422 0.4219-0.9943 0.659-1.591 0.659h-16.5c-0.59674 0-1.169-0.2371-1.591-0.659-0.42196-0.422-0.65901-0.9943-0.65901-1.591v-12.75h1.5zm12-7.5c-0.5967 0-1.169 0.23705-1.591 0.65901-0.4219 0.42196-0.659 0.99425-0.659 1.591 0 0.147 0.0495 0.24 0.18 0.3405 0.1545 0.1215 0.408 0.225 0.735 0.3 0.4188 0.08926 0.8471 0.12605 1.275 0.1095h0.0225l0.0375-0.0015 0.0375 3e-3h0.021c0.1269 0.00578 0.2541 0.00528 0.381-0.0015 0.255-9e-3 0.5805-0.039 0.897-0.1095 0.3255-0.072 0.579-0.177 0.735-0.2985 0.129-0.099 0.1785-0.195 0.1785-0.3405 2e-4 -0.2956-0.0579-0.58834-0.1708-0.8615-0.113-0.27315-0.2787-0.52137-0.4877-0.73046-0.2089-0.20909-0.457-0.37496-0.7301-0.48813-0.2731-0.11316-0.5658-0.17141-0.8614-0.17141zm0 4.5h-9e-3c-0.1629 0.00752-0.3261 0.00752-0.489 0-0.392-0.01404-0.7821-0.06273-1.1655-0.1455-0.4245-0.0945-0.921-0.2625-1.3275-0.5775-0.2378-0.17683-0.4304-0.40729-0.5623-0.67263s-0.1993-0.55807-0.1967-0.85437c0-0.99456 0.3951-1.9484 1.0983-2.6516 0.7033-0.70326 1.6571-1.0984 2.6517-1.0984s1.9484 0.39509 2.6516 1.0984c0.7033 0.70326 1.0984 1.6571 1.0984 2.6516 0 0.681-0.3255 1.1895-0.759 1.5255-0.405 0.315-0.903 0.483-1.3275 0.5775-0.5436 0.11857-1.1 0.16846-1.656 0.1485h-0.0075v-0.0015z" />
-                    <path
-                      d="m9 2c-0.59674 0-1.169 0.23705-1.591 0.65901s-0.65901 0.99425-0.65901 1.591c0 0.147 0.0495 0.24 0.18 0.3405 0.1545 0.1215 0.408 0.225 0.735 0.3 0.41881 0.08926 0.8471 0.12605 1.275 0.1095h0.0225l0.0375-0.0015 0.0375 3e-3h0.021l0.0795 0.0015c0.40237 0.00365 0.80403-0.03455 1.1985-0.114 0.3255-0.072 0.579-0.177 0.735-0.2985 0.129-0.099 0.1785-0.195 0.1785-0.3405 0-0.59674-0.237-1.169-0.659-1.591s-0.99425-0.65901-1.591-0.65901zm0 4.5h-9e-3c-0.16291 0.00752-0.32609 0.00752-0.489 0-0.39203-0.01404-0.78205-0.06273-1.1655-0.1455-0.4245-0.0945-0.921-0.2625-1.3275-0.5775-0.23776-0.17683-0.43042-0.40729-0.56231-0.67263s-0.19928-0.55807-0.19669-0.85437c0-0.99456 0.39509-1.9484 1.0984-2.6516 0.70326-0.70326 1.6571-1.0984 2.6516-1.0984s1.9484 0.39509 2.6517 1.0984c0.7032 0.70326 1.0983 1.6571 1.0983 2.6516 0 0.681-0.3255 1.1895-0.759 1.5255-0.405 0.315-0.903 0.483-1.3275 0.5775-0.5431 0.11843-1.099 0.16832-1.6545 0.1485h-9e-3v-0.0015zm2.25 18v-15h1.5v15h-1.5z" />
-                    <path
-                      d="M22.5 6.5H1.5V8H22.5V6.5ZM1.5 5C1.10218 5 0.720644 5.15804 0.43934 5.43934C0.158035 5.72064 0 6.10218 0 6.5L0 8C0 8.39782 0.158035 8.77936 0.43934 9.06066C0.720644 9.34196 1.10218 9.5 1.5 9.5H22.5C22.8978 9.5 23.2794 9.34196 23.5607 9.06066C23.842 8.77936 24 8.39782 24 8V6.5C24 6.10218 23.842 5.72064 23.5607 5.43934C23.2794 5.15804 22.8978 5 22.5 5H1.5Z" />
-                  </g>
-                  <defs>
-                    <clipPath id="a">
-                      <rect transform="translate(0 .5)" width="24" height="24" fill="#fff" />
-                    </clipPath>
-                  </defs>
-                </svg>
-              </div>
-            </div>
-            <p id="info-banner-message"></p>
-            <div id="dismiss-banner" class="d-flex align-items-start justify-content-end">
-              <button type="button" class="close" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-              </button>
-            </div>
-          </div>
-          <div class="input-group-append d-flex justify-content-center">
-            <a class="btn btn-primary" id="learn-more-button" target="_blank" rel="noopener">
-              &nbsp;Learn More
+        <nav>
+          <div class="nav nav-tabs" id="nav-recap-tab" role="tablist">
+            <a id="nav-recap-tab" class="col-sm text-center nav-item nav-link active" data-toggle="tab" role="tab"
+              href="#nav-recap" aria-controls="nav-recap" aria-selected="true">
+              RECAP Archive
+            </a>
+            <a id="nav-settings-tab" class="col-sm text-center nav-item nav-link" data-toggle="tab" role="tab"
+              href="#nav-settings" aria-controls="nav-settings" aria-selected="false">
+              Settings
+            </a>
+            <a id="nav-donate-tab" class="col-sm text-center nav-item nav-link" data-toggle="tab" role="tab"
+              href="#nav-donate" aria-controls="nav-donate" aria-selected="false">
+              Donate
             </a>
           </div>
-        </div>
-          <div>
-            <nav>
-              <div class="nav nav-tabs" id="nav-recap-tab" role="tablist">
-                <a id="nav-recap-tab" class="col-sm text-center nav-item nav-link active" data-toggle="tab" role="tab"
-                  href="#nav-recap" aria-controls="nav-recap" aria-selected="true">
-                  RECAP Archive
-                </a>
-                <a id="nav-settings-tab" class="col-sm text-center nav-item nav-link" data-toggle="tab" role="tab"
-                  href="#nav-settings" aria-controls="nav-settings" aria-selected="false">
-                  Settings
-                </a>
-                <a id="nav-donate-tab" class="col-sm text-center nav-item nav-link" data-toggle="tab" role="tab" href="#nav-donate"
-                  aria-controls="nav-donate" aria-selected="false">
-                  Donate
-                </a>
-              </div>
-            </nav>
-          </div>
+        </nav>
       </div>
       <!-- Navigation Tabs -->
     </header>

diff --git a/src/options.js b/src/options.js
@@ -1,16 +1,5 @@
 // JavaScript for the options page/popup.
 
-const bannerMessages = {
-  A: 'The PACER fees class action was settled for $125 million. Free Law Project will continue the fight.',
-  B: 'News! The PACER fees class action was settled. Learn more and help us make PACER free forever.',
-};
-const donateLinks = {
-  A: 'https://donate.free.law/forms/pacer-a1',
-  B: 'https://donate.free.law/forms/pacer-a2',
-  C: 'https://donate.free.law/forms/pacer-b1',
-  D: 'https://donate.free.law/forms/pacer-b2',
-};
-
 let inputs = document.getElementsByTagName('input');
 
 function removeInfoBanner() {
@@ -31,21 +20,6 @@ async function load_options() {
         inputs[i].value = items.options[inputs[i].id] || '';
       }
     }
-    if ('dismiss_class_action_info' in items.options) removeInfoBanner();
-  });
-
-  await chrome.storage.local.get('variant', function (items) {
-    let banner = document.getElementById('header-banner');
-    if (!banner) return;
-
-    let bannerVariant, linkVariant;
-    [bannerVariant, linkVariant] = items.variant.split('-');
-
-    let bannerInfo = document.getElementById('info-banner-message');
-    bannerInfo.innerHTML = bannerMessages[bannerVariant];
-
-    let learnMoreButton = document.getElementById('learn-more-button');
-    learnMoreButton.href = donateLinks[linkVariant];
   });
 }
 
@@ -60,11 +34,6 @@ function save_options() {
       }
     }
 
-    let banner = document.getElementById('header-banner');
-    if (!banner) {
-      options['dismiss_class_action_info'] = true;
-    }
-
     chrome.storage.local.set({ options: options }, function () {
       chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
         updateToolbarButton(tabs[0]);
@@ -155,17 +124,4 @@ function showHideReceiptsWarning (tabs){
 (function () {
   let ver = document.getElementById('version');
   ver.textContent = `(version ${chrome.runtime.getManifest().version})`;
-
-  let dismiss_button = document.querySelector("#dismiss-banner button");
-  if (dismiss_button) {
-    dismiss_button.addEventListener('click', function (e) {
-      removeInfoBanner();
-      save_options()
-    });
-  }
-
-  // Use the messaging APIs to set up a Port between the popup and background
-  // page. We should get a onDisconnect event in the background page when
-  // the popup goes away.
-  chrome.runtime.connect({ name: "popup" });
 })();
diff --git a/src/pacer.js b/src/pacer.js
@@ -744,6 +744,55 @@ let PACER = {
     }
   },
 
+  addRecapBannerToLoginPage: (message, link) => {
+    let headerContainer = document.getElementById('pscHeaderContainer');
+    let banner_div = document.createElement('div');
+
+    let banner_wrapper = document.createElement('div');
+    banner_wrapper.id = 'recap_info_banner';
+    banner_wrapper.classList.add('recap-login-banner');
+
+    let banner_icon_container = document.createElement('div');
+    banner_icon_container.classList.add('banner-icon-container');
+
+    let recap_icon = document.createElement('img');
+    recap_icon.src = chrome.extension.getURL('assets/images/icon-48.png');
+    recap_icon.style.width = '48px';
+    recap_icon.style.height = '48px';
+    banner_icon_container.appendChild(recap_icon);
+
+    let banner_message_wrapper = document.createElement('div');
+    banner_message_wrapper.classList.add('banner-message-wrapper')
+
+    let banner_text = document.createElement('p');
+    banner_text.innerHTML = message;
+
+    banner_message_wrapper.appendChild(banner_text);
+
+    let banner_button = document.createElement('a');
+    banner_button.classList.add('btn');
+    banner_button.classList.add('btn-primary');
+    banner_button.classList.add('banner-open-btn');
+    banner_button.innerHTML = 'Open';
+    banner_button.href = link;
+    banner_button.target = '_blank';
+    banner_button.rel = 'noopener';
+
+    let dismiss_button = document.createElement('a');
+    dismiss_button.classList.add('banner-close-btn');
+    dismiss_button.id = 'dismiss_recap_info_banner'
+    dismiss_button.href = 'javascript:void(0);';
+    dismiss_button.innerHTML = '<span aria-hidden="true">&times;</span>';
+
+    banner_wrapper.appendChild(banner_icon_container);
+    banner_wrapper.appendChild(banner_message_wrapper);
+    banner_wrapper.appendChild(banner_button);
+    banner_wrapper.appendChild(dismiss_button);
+    banner_div.appendChild(banner_wrapper);
+
+    headerContainer.after(banner_div);
+  },
+
   // These are all the supported PACER court identifiers, together with their
   // West-style court name abbreviations.
   COURT_ABBREVS: {

diff --git a/src/toolbar_button.js b/src/toolbar_button.js
@@ -28,13 +28,6 @@ function updateToolbarButton(tab) {
   };
 
   chrome.storage.local.get('options', function(items){
-
-    if ('dismiss_bagde' in items['options'] && items['options']['dismiss_bagde']) {
-      chrome.browserAction.setBadgeText({ text: '' });
-    } else {
-      chrome.browserAction.setBadgeText({ text: '🎁' });
-    }
-
     if (tab === null || tab === undefined) {
       // There's code in Firefox that can be called before the defaults are set
       // and before the tab is even established. Catch that, and handle it or