Allow an isolated tab to inherit its color or icon from its parent

package.json

@@ -86,7 +86,7 @@
     "npm-check-updates": "^6.0.1",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
-    "parcel": "^2.0.0-nightly.228",
+    "parcel": "^2.8.3",
     "prettier": "2.0.5",
     "rimraf": "^3.0.2",
     "sinon": "^9.0.2",

src/_locales/en/messages.json

@@ -56,6 +56,9 @@
   "optionsGeneralContainerRandomColor": {
     "message": "Random Container Color"
   },
+  "optionsGeneralContainerInheritColor": {
+    "message": "Inherit color after isolation"
+  },
   "optionsGeneralContainerIcon": {
     "message": "Container Icon"
   },
@@ -101,6 +104,9 @@
   "optionsGeneralContainerIconRandom": {
     "message": "Random Container Icon"
   },
+  "optionsGeneralContainerInheritIcon": {
+    "message": "Inherit icon after isolation"
+  },
   "optionsGeneralContainerNumber": {
     "message": "Container Number"
   },

src/background/container.ts

@@ -66,6 +66,7 @@ export class Container {
     deletesHistory = false,
     macConfirmPage = false,
     openerTab,
+    inheritContainerOptions,
   }: TmpTabOptions): Promise<Tab | undefined> {
     if (request && request.requestId) {
       // we saw that request already
@@ -86,10 +87,24 @@ export class Container {
       });
     }
 
+    let inheritedContainerOptions;
+    if (tab && inheritContainerOptions) {
+      if (this.tabs.containerMap.has(tab.id)) {
+        inheritedContainerOptions = this.storage.local.tempContainers[
+          tab.cookieStoreId
+        ];
+      } else {
+        inheritedContainerOptions = await browser.contextualIdentities.get(
+          tab.cookieStoreId
+        );
+      }
+    }
+
     const contextualIdentity = await this.createTempContainer({
       url,
       request,
       deletesHistory,
+      inheritedContainerOptions,
     });
 
     return this.createTab({
@@ -107,10 +122,14 @@ export class Container {
     url,
     request,
     deletesHistory,
+    inheritedContainerOptions,
   }: {
     url?: string;
     request?: false | WebRequestOnBeforeRequestDetails;
     deletesHistory?: boolean;
+    inheritedContainerOptions?:
+      | ContainerOptions
+      | browser.contextualIdentities.ContextualIdentity;
   }): Promise<browser.contextualIdentities.ContextualIdentity> {
     const containerOptions = this.generateContainerNameIconColor(
       (request && request.url) || url
@@ -120,6 +139,15 @@ export class Container {
       this.storage.local.tempContainersNumbers.push(containerOptions.number);
     }
 
+    if (inheritedContainerOptions) {
+      if (this.pref.container.colorInherit) {
+        containerOptions.color = inheritedContainerOptions.color;
+      }
+      if (this.pref.container.iconInherit) {
+        containerOptions.icon = inheritedContainerOptions.icon;
+      }
+    }
+
     if (deletesHistory) {
       if (this.permissions.history) {
         containerOptions.name += '-deletes-history';
@@ -276,6 +304,7 @@ export class Container {
     request,
     macConfirmPage,
     dontPin = true,
+    inheritContainerOptions,
   }: {
     tab?: Tab;
     url?: string;
@@ -284,6 +313,7 @@ export class Container {
     request?: WebRequestOnBeforeRequestDetails;
     macConfirmPage?: boolean;
     dontPin?: boolean;
+    inheritContainerOptions?: boolean;
   }): Promise<undefined | Tab> {
     const newTab = await this.createTabInTempContainer({
       tab,
@@ -293,6 +323,7 @@ export class Container {
       deletesHistory,
       request,
       macConfirmPage,
+      inheritContainerOptions,
     });
     if (!tab) {
       return newTab;

src/background/isolation.ts

@@ -185,6 +185,8 @@ export class Isolation {
       request,
       deletesHistory:
         this.pref.deletesHistory.containerIsolation === 'automatic',
+      inheritContainerOptions:
+        this.pref.container.colorInherit || this.pref.container.iconInherit,
     };
 
     let reload = false;

src/background/preferences.ts

@@ -18,9 +18,11 @@ export class Preferences {
       color: 'toolbar',
       colorRandom: false,
       colorRandomExcluded: [],
+      colorInherit: false,
       icon: 'circle',
       iconRandom: false,
       iconRandomExcluded: [],
+      iconInherit: false,
       numberMode: 'keep',
       removal: 900000, // ms
     },

src/types.ts

@@ -48,6 +48,7 @@ export interface TmpTabOptions {
   deletesHistory?: boolean;
   macConfirmPage?: boolean;
   openerTab?: Tab;
+  inheritContainerOptions?: boolean;
 }
 
 export type IsolationAction =
@@ -156,9 +157,11 @@ export interface PreferencesSchema {
     color: ContainerColor;
     colorRandom: boolean;
     colorRandomExcluded: ContainerColor[];
+    colorInherit: boolean;
     icon: ContainerIcon;
     iconRandom: boolean;
     iconRandomExcluded: ContainerIcon[];
+    iconInherit: boolean;
     numberMode: 'keep' | 'keepuntilrestart' | 'reuse' | 'hide';
     removal: Milliseconds;
   };

src/ui/components/general.vue

@@ -215,6 +215,12 @@ export default mixins(mixin).extend({
           <label>{{ t('optionsGeneralContainerRandomColor') }}</label>
         </div>
       </div>
+      <div v-show="preferences.container.colorRandom" class="field">
+        <div class="ui checkbox">
+          <input v-model="preferences.container.colorInherit" type="checkbox" />
+          <label>{{ t('optionsGeneralContainerInheritColor') }}</label>
+        </div>
+      </div>
       <div id="containerIcon" class="field">
         <label v-if="!preferences.container.iconRandom">
           {{ t('optionsGeneralContainerIcon') }}
@@ -255,6 +261,12 @@ export default mixins(mixin).extend({
           <label>{{ t('optionsGeneralContainerIconRandom') }}</label>
         </div>
       </div>
+      <div v-show="preferences.container.iconRandom" class="field">
+        <div class="ui checkbox">
+          <input v-model="preferences.container.iconInherit" type="checkbox" />
+          <label>{{ t('optionsGeneralContainerInheritIcon') }}</label>
+        </div>
+      </div>
       <div class="field">
         <label>{{ t('optionsGeneralContainerNumber') }}</label>
         <select