Recording - automatically add sites to containers as you browse

package.json

@@ -26,7 +26,7 @@
     "stylelint-config-standard": "^16.0.0",
     "stylelint-order": "^0.3.0",
     "web-ext": "^2.9.3",
-    "webextensions-jsdom": "^1.1.0"
+    "webextensions-jsdom": "^1.1.2"
   },
   "homepage": "https://github.com/mozilla/multi-account-containers#readme",
   "license": "MPL-2.0",

src/css/content.css

@@ -1,27 +1,152 @@
-.container-notification {
-  align-items: center;
+:root {
+  /* calculated from 12px */
+  --block-line-separation-size: 0.33em; /* 10px */
+
+  /* Use for url and icon size */
+  --icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66em); /* 20px */
+}
+
+#container-notifications,
+#container-notifications * {
+  all: unset;
+  display: block;
+  font-size: 16px;
+}
+
+#container-notifications {
+  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;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+  position: fixed;
+  z-index: 999999999999;
+}
+
+#container-notifications > .popup {
+  border: 1px solid;
+  inset-block-start: 4px; /* stylelint-disable-line property-no-unknown */
+  inset-inline-end: 3em; /* stylelint-disable-line property-no-unknown */
+  position: fixed;
+  z-index: 2;
+}
+
+#container-notifications > .popup > .draggable {
+  background: #ebebeb url('../img/drag.svg');
+  background-size: 100% 100%;
+  block-size: var(--icon-button-size);
+  border-block-end: 0.5px solid darkgray;
+  inline-size: 100%;
+  z-index: 3;
+}
+
+#container-notifications > .popup > .draggable-mask {
+  background-color: black;
+  display: none;
+  inset-block-end: 0; /* stylelint-disable-line property-no-unknown */
+  inset-block-start: 0; /* stylelint-disable-line property-no-unknown */
+  inset-inline-end: 0; /* stylelint-disable-line property-no-unknown */
+  inset-inline-start: 0; /* stylelint-disable-line property-no-unknown */
+  opacity: 0.5;
+  position: absolute;
+  z-index: 2;
+}
+
+#container-notifications > .popup.drag > .draggable-mask {
+  display: block;
+}
+
+#container-notifications > .message.recording {
+  z-index: 1;
+}
+
+#container-notifications > .message {
+  max-block-size: 0;
+  opacity: 0;
+  overflow: hidden;
+  position: relative;
+  transition: opacity 0.6s ease-in, max-block-size 1s cubic-bezier(0.07, 0.95, 0, 1);
+}
+
+#container-notifications > .message.show {
+  max-block-size: 500px;
+  opacity: 1;
+  transition-property: max-block-size;
+  transition-timing-function: ease-in;
+}
+
+#container-notifications > .message:hover,
+#container-notifications > .message:focus,
+#container-notifications > .message:visited {
+  color: #003f07;
+  text-decoration: none;
+}
+
+#container-notifications > .message > .real {
+  inset-block-end: 0; /* stylelint-disable-line property-no-unknown */
+  position: absolute;
+}
+
+#container-notifications > .message > .dummy {
+  visibility: hidden;
+}
+
+#container-notifications > .message > div > div {
+  align-items: stretch;
   background: #efefef;
+  block-size: 3em;
   color: #003f07;
   display: flex;
-  font: 12px sans-serif;
+  font: 1em sans-serif;
   inline-size: 100vw;
-  justify-content: start;
-  offset-block-start: 0;
-  offset-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 {
-  block-size: 16px;
-  display: inline-block;
-  inline-size: 16px;
+#container-notifications > .message > div > div > .logo {
+  align-self: center;
+  block-size: 1em;
+  flex: 0 0 1em;
   margin-inline-end: 3px;
+  margin-inline-start: 8px;
+}
+
+#container-notifications > .message > div > div > .title {
+  align-self: center;
+  flex: 0;
+  font-weight: bold;
+  margin-inline-end: 1em;
+  margin-inline-start: 0.5em;
+  white-space: nowrap;
+}
+
+#container-notifications > .message > div > div > .text {
+  align-self: center;
+  flex: 1;
+}
+
+#container-notifications > .message > div > div > .close {
+  background: url('../img/container-close-tab.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 50%;
+  flex: 0 0 2em;
+  margin-inline-end: 0.5em;
+  opacity: 0.5;
+}
+
+#container-notifications > .message > div > div > .close:hover {
+  opacity: 1;
+}
+
+#container-notifications > .message.recording > div > div {
+  background: #fcc;
+}
+
+#container-notifications > .message.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,22 +794,27 @@ 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%;
   color: #fff;
   display: inline-block;
+  flex: 1;
   justify-content: center;
   padding-block-start: 6px;
   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 +847,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"
   }
 };