Recording - automatically add sites to containers as you browse

src/css/content.css

@@ -1,27 +1,107 @@
-.container-notification {
+#container-notifications,
+#container-notifications * {
+  all: unset;
+}
+
+#container-notifications {
+  display: block;
+  inline-size: 100vw;
+  inset-block-start: 0; /* stylelint-disable-line property-no-unknown */
+  inset-inline-start: 0; /* stylelint-disable-line property-no-unknown */
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  offset-block-start: 0;
+  offset-inline-start: 0;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+  position: fixed;
+  z-index: 999999999999;
+}
+
+#container-notifications > iframe {
+  border: 1px solid;
+  inset-block-start: 4px; /* stylelint-disable-line property-no-unknown */
+  inset-inline-end: 4px; /* stylelint-disable-line property-no-unknown */
+  offset-block-start: 4px;
+  offset-inline-end: 4px;
+  position: absolute;
+  z-index: 2;
+}
+
+#container-notifications > div.recording {
+  z-index: 1;
+}
+
+#container-notifications > div {
+  display: block;
+  max-block-size: 0;
+  overflow: hidden;
+  position: relative;
+  transition: all 1s cubic-bezier(0.07, 0.95, 0, 1);
+}
+
+#container-notifications > div.show {
+  max-block-size: 500px;
+  transition: all 1s ease-in;
+}
+
+#container-notifications > div:hover,
+#container-notifications > div:focus,
+#container-notifications > div:visited {
+  color: #003f07;
+  text-decoration: none;
+}
+
+#container-notifications > div > div.real {
+  inset-block-end: 0; /* stylelint-disable-line property-no-unknown */
+  offset-block-end: 0;
+  position: absolute;
+}
+
+#container-notifications > div > div.dummy {
+  visibility: hidden;
+}
+
+#container-notifications > div > div > div {
   align-items: center;
   background: #efefef;
   color: #003f07;
   display: flex;
   font: 12px sans-serif;
   inline-size: 100vw;
   justify-content: start;
-  offset-block-start: 0;
-  offset-inline-start: 0;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
   padding-block-end: 8px;
   padding-block-start: 8px;
   padding-inline-end: 8px;
   padding-inline-start: 8px;
-  position: fixed;
   text-align: start;
-  transform: translateY(-100%);
-  transition: transform 0.3s cubic-bezier(0.07, 0.95, 0, 1) 0.3s;
-  z-index: 999999999999;
 }
 
-.container-notification img {
+#container-notifications > div > div > div > .title {
+  font-weight: bold;
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+}
+
+#container-notifications > div > div > div > .logo {
   block-size: 16px;
   display: inline-block;
   inline-size: 16px;
   margin-inline-end: 3px;
 }
+
+#container-notifications > div.recording > div > div {
+  background: #fcc;
+}
+
+#container-notifications > div.recording > div > div > .title {
+  color: red;
+}

src/css/popup.css

@@ -18,6 +18,7 @@ html {
 }
 
 body {
+  display: flex;
   font-family: Roboto, Noto, "San Francisco", Ubuntu, "Segoe UI", "Fira Sans", message-box, Arial, sans-serif;
   inline-size: calc(var(--overflow-size) + 299px);
   max-inline-size: calc(var(--overflow-size) + 299px);
@@ -246,6 +247,7 @@ table {
 /* Panels keep everything together */
 .panel {
   display: flex;
+  flex: 1;
   flex-direction: column;
   justify-content: space-between;
   min-block-size: 400px;
@@ -451,32 +453,61 @@ manage things like container crud */
 }
 
 .container-panel-controls {
-  display: flex;
+  display: grid;
+  grid-auto-flow: column;
+  grid-column-gap: var(--inline-item-space-size);
   justify-content: flex-end;
   margin-block-end: var(--block-line-space-size);
   margin-block-start: var(--block-line-space-size);
   margin-inline-end: var(--inline-item-space-size);
   margin-inline-start: var(--inline-item-space-size);
 }
 
-#container-panel #sort-containers-link {
+#container-panel .container-panel-controls > * {
   align-items: center;
   block-size: var(--block-url-label-size);
   border: 1px solid #d8d8d8;
   border-radius: var(--small-radius);
   color: var(--title-text-color);
   display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
   font-size: var(--small-text-size);
   inline-size: var(--inline-button-size);
   justify-content: center;
   text-decoration: none;
 }
 
-#container-panel #sort-containers-link:hover,
-#container-panel #sort-containers-link:focus {
+#container-panel .container-panel-controls > a:hover,
+#container-panel .container-panel-controls > a:focus,
+#container-panel .container-panel-controls > .disabled {
   background: #f2f2f2;
 }
 
+#container-panel .container-panel-controls > #record-link {
+  inline-size: var(--block-url-label-size);
+}
+
+.container-panel-controls > #record-link > .icon {
+  margin-block-end: 4px;
+  margin-block-start: 4px;
+  margin-inline-end: 4px;
+  margin-inline-start: 4px;
+}
+
+#record-link > .icon {
+  filter: invert(0.2);
+}
+
+#record-link.disabled > .icon {
+  filter: invert(0.6);
+}
+
+#record-link.active > .icon,
+.container-record-banner img {
+  filter: invert(0.5) sepia(1) saturate(127) hue-rotate(360deg);
+}
+
 span ~ .panel-header-text {
   padding-block-end: 0;
   padding-block-start: 0;
@@ -674,7 +705,8 @@ span ~ .panel-header-text {
   inline-size: calc(var(--column-panel-inline-size) - 58px);
 }
 
-#container-info-hideorshow {
+#container-info-hideorshow,
+#container-record-banner {
   margin-block-start: 4px;
 }
 
@@ -704,7 +736,8 @@ span ~ .panel-header-text {
 }
 
 .container-info-has-tabs,
-.container-info-tab-row {
+.container-info-tab-row,
+.container-record-banner {
   align-items: center;
   display: flex;
   flex: 0 0 28px;
@@ -718,13 +751,25 @@ span ~ .panel-header-text {
   padding-inline-start: 16px;
 }
 
+.container-record-banner {
+  background: #fcc;
+  color: red;
+}
+
 .container-info-has-tabs img,
-.container-info-tab-row img {
+.container-info-tab-row img,
+.container-record-banner img {
   block-size: 16px;
   flex: 0 0 16px;
   margin-inline-end: 4px;
 }
 
+.container-record-banner img {
+  block-size: 24px;
+  flex: 0 0 24px;
+  margin-inline-end: 6px;
+}
+
 .container-info-tab-row img[src=""] {
   margin-inline-end: 0;
 }
@@ -749,7 +794,9 @@ span ~ .panel-header-text {
   background-color: #ebebeb;
 }
 
-.edit-containers-exit-text {
+.edit-containers-exit-text,
+.container-record-exit-text,
+.container-record-banner-text {
   align-items: center;
   background: var(--primary-action-color);
   block-size: 100%;
@@ -760,11 +807,13 @@ span ~ .panel-header-text {
   padding-inline-start: 30%;
 }
 
-.edit-containers-panel-footer {
+.edit-containers-panel-footer,
+.container-record-panel-footer {
   background: var(--primary-action-color);
 }
 
-.exit-edit-mode-link img {
+.exit-edit-mode-link img,
+.exit-record-mode-link img {
   block-size: 16px;
   display: inline;
   filter: grayscale(100%) brightness(5);
@@ -797,11 +846,13 @@ span ~ .panel-header-text {
   overflow: hidden; /* Bugfix: issue 948 */
 }
 
-#edit-sites-assigned {
+#edit-sites-assigned,
+#record-sites-assigned {
   flex: 1000; /* Bugfix: issue 948 */
 }
 
-#edit-sites-assigned h3 {
+#edit-sites-assigned h3,
+#record-sites-assigned h3 {
   font-size: 14px;
   font-weight: normal;
   padding-block-end: 6px;

src/js/.eslintrc.js

@@ -3,10 +3,12 @@ module.exports = {
     "../../.eslintrc.js"
   ],
   "globals": {
+    "recordManager": "readonly",
     "assignManager": true,
     "badge": true,
     "backgroundLogic": true,
     "identityState": true,
-    "messageHandler": true
+    "messageHandler": true,
+    "browserAPIInjector": "readonly"
   }
 };

src/js/background/assignManager.js

@@ -116,6 +116,13 @@ const assignManager = {
     this.storageArea.setExempted(pageUrl, m.tabId);
     return true;
   },
+
+  _determineSetAssignmentDueToRecording(tabId, url, siteSettings) {
+    if (siteSettings) { return false; } // Assignment already set
+    if (!recordManager.isRecordingTabId(tabId)) { return false; }
+    if (!url.startsWith("http")) { return false; } // Exclude moz-extension:// requests
+    return true;
+  },
 
   // Before a request is handled by the browser we decide if we should route through a different container
   async onBeforeRequest(options) {
@@ -141,6 +148,12 @@ const assignManager = {
       return {};
     }
     const userContextId = this.getUserContextIdFromCookieStore(tab);
+
+    // Recording
+    if (this._determineSetAssignmentDueToRecording(tab.id, options.url, siteSettings)) {
+      await this._setOrRemoveAssignment(tab.id, options.url, userContextId, false);
+    }
+
     if (!siteSettings
         || userContextId === siteSettings.userContextId
         || this.storageArea.isExempted(options.url, tab.id)) {
@@ -374,7 +387,7 @@ const assignManager = {
     // Context menu has stored context IDs as strings, so we need to coerce
     // the value to a string for accurate checking
     userContextId = String(userContextId);
-
+    
     if (!remove) {
       const tabs = await browser.tabs.query({});
       const assignmentStoreKey = this.storageArea.getSiteStoreKey(pageUrl);
@@ -394,18 +407,20 @@ const assignManager = {
         userContextId,
         neverAsk: false
       }, exemptedTabIds);
-      actionName = "added";
+      actionName = "Successfully set to always open in this container";
     } else {
       await this.storageArea.remove(pageUrl);
-      actionName = "removed";
+      actionName = "Successfully removed from this container";
     }
-    browser.tabs.sendMessage(tabId, {
-      text: `Successfully ${actionName} site to always open in this container`
+    const hostname = new window.URL(pageUrl).hostname;
+    messageHandler.sendTabMessage(tabId, {
+      title: hostname,
+      text: actionName
     });
     const tab = await browser.tabs.get(tabId);
     this.calculateContextMenu(tab);
   },
-
+  
   async _getAssignment(tab) {
     const cookieStore = this.getUserContextIdFromCookieStore(tab);
     // Ensure we have a cookieStore to assign to
@@ -415,11 +430,11 @@ const assignManager = {
     }
     return false;
   },
-
+  
   _getByContainer(userContextId) {
     return this.storageArea.getByContainer(userContextId);
   },
-
+  
   removeContextMenu() {
     // There is a focus issue in this menu where if you change window with a context menu click
     // you get the wrong menu display because of async