Add core components: liaison, request handler, prompt, agent

browser/base/content/navigator-toolbox.inc.xhtml

@@ -298,6 +298,8 @@
                        data-l10n-id="urlbar-web-authn-anchor"/>
                 <image id="identity-credential-notification-icon" class="notification-anchor-icon" role="button"
                       data-l10n-id="identity-credential-urlbar-anchor"/>
+                <image id="berytus-notification-icon" class="notification-anchor-icon" role="button"
+                       alt="Open berytus panel"/>
                 <image id="storage-access-notification-icon" class="notification-anchor-icon storage-access-icon" role="button"
                        data-l10n-id="urlbar-storage-access-anchor"/>
               </box>

browser/base/content/popup-notifications.inc

@@ -178,6 +178,42 @@
       </popupnotificationfooter>
     </popupnotification>
 
+  <popupnotification id="berytus-notification" hidden="true">
+    <popupnotificationheader id="berytus-header" orient="horizontal"  hidden="true">
+      <html:div class="berytus-header-container">
+        <html:div class="berytus-header-row">
+          <html:img class="berytus-header-icon" src="chrome://global/skin/icons/info.svg"></html:img>
+          <html:p class="berytus-header-title">Berytus Secret Manager selection</html:p>
+        </html:div>
+        <span id="berytus-header-text"></span>
+      </html:div>
+
+  </popupnotificationheader>
+    <popupnotificationcontent id="berytus-secret-manager" orient="vertical">
+      <html:div id="berytus-secret-manager-selector-container">
+      </html:div>
+      <html:template id="template-berytus-secret-manager-list-item">
+        <html:label class="berytus-secret-manager-list-item" align="center">
+          <html:input type="radio" name="berytus-secret-manager" class="berytus-secret-manager-list-item-radio"></html:input>
+          <html:img class="berytus-secret-manager-list-item-icon" src="chrome://mozapps/skin/extensions/extension.svg"></html:img>
+          <div class="berytus-secret-manager-list-item-info">
+            <span class="berytus-secret-manager-list-item-label-primary"></span>
+            <span class="berytus-secret-manager-list-item-label-secondary"></span> <!-- hidden="true" / this is the version-->
+          </div>
+          <div class="berytus-secret-manager-list-item-stretch-till-end" />
+          <div class="berytus-secret-manager-list-item-metadata">
+            <html:img class="berytus-secret-manager-list-item-metadata-spinner-icon" src="chrome://content/global/icons/berytusSpinner.gif" />
+            <html:img class="berytus-secret-manager-list-item-metadata-error-icon" src="chrome://global/skin/icons/warning.svg" hidden="true" />
+            <div class="berytus-secret-manager-list-item-metadata-nb-accounts-container" hidden="true">
+              <html:img class="berytus-secret-manager-list-item-metadata-nb-accounts-icon" src="chrome://browser/skin/fxa/avatar-empty.svg" /> <!-- or chrome://browser/skin/fxa/avatar-empty.svg -->
+              <span class="berytus-secret-manager-list-item-metadata-nb-accounts"></span>
+            </div>
+          </div>
+        </html:label>
+      </html:template>
+    </popupnotificationcontent>
+  </popupnotification>
+
     <popupnotification id="identity-credential-notification" hidden="true">
       <popupnotificationheader id="identity-credential-header" orient="horizontal" hidden="true">
         <html:div class="identity-credential-header-container">

browser/themes/shared/berytus-notification.css

@@ -0,0 +1,203 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* Adapted from identity-credential-notificatio.css */
+
+#berytus-notification {
+    --list-item-border: color-mix(in srgb, currentColor 10%, transparent);
+    --list-item-checked-bgcolor: color-mix(in srgb, var(--button-primary-bgcolor) 6%, transparent);
+    --list-item-checked-border: color-mix(in srgb, var(--button-primary-bgcolor) 20%, transparent);
+
+    /**
+     * Ported and adapted from Mozilla v117.01a;
+     * --checkbox-unchecked-bgcolor and others
+     * seems to have been removed. We bring
+     * them back here, in adapted form, for now.
+     */
+    --checkbox-unchecked-bgcolor: var(--panel-background);
+    --checkbox-border-color: ButtonFace;
+    --checkbox-checked-bgcolor: SelectedItem;
+    --checkbox-checked-hover-bgcolor: SelectedItem;
+    --checkbox-unchecked-hover-bgcolor: var(--checkbox-checked-hover-bgcolor);
+    --checkbox-checked-color: var(--primary-button-text-color);
+    --checkbox-checked-border-color: var(--checkbox-border-color);
+    --checkbox-unchecked-active-bgcolor: var(--checkbox-checked-bgcolor);
+    --checkbox-checked-active-bgcolor: var(--checkbox-checked-bgcolor);
+    /* $ */
+
+    /* --list-item-checked-bgcolor: #4a044a;
+    --list-item-checked-border: #9d0c80; */
+}
+
+@media (prefers-contrast) {
+    #berytus {
+        --list-item-border: ThreeDShadow;
+        --list-item-checked-bgcolor: transparent;
+        --list-item-checked-border: AccentColor;
+    }
+}
+
+#berytus-secret-manager-selector-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-height: 540px;
+    overflow: auto;
+}
+
+.berytus-header-container {
+    margin: 16px 16px -16px 18px;
+}
+
+.berytus-header-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.berytus-header-icon {
+    width: 16px;
+    height: 16px;
+    margin-inline-end: 8px;
+    margin-top: 2px;
+    /* fill: white; */
+    -moz-context-properties: fill, fill-opacity;
+    fill: currentColor;
+}
+
+.berytus-header-title {
+    font-weight: 600;
+    margin-top: 2px;
+    margin-bottom: 6px;
+
+}
+
+#berytus-header-text {
+    /* font-weight: 600; */
+    font-weight: 400;
+}
+
+
+.berytus-secret-manager-list-item {
+    display: flex;
+    gap: 18px;
+    padding-block: max(calc(var(--arrowpanel-menuitem-padding-block) * 2), 4px);
+    padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) * 2);
+    border: 2px solid var(--list-item-border);
+    border-radius: 4px;
+}
+
+.berytus-secret-manager-list-item.checked {
+    background-color: var(--list-item-checked-bgcolor);
+    border-color: var(--list-item-checked-border);
+}
+
+.berytus-secret-manager-list-item-radio {
+    appearance: none;
+    background-color: var(--checkbox-unchecked-bgcolor);
+    background-image: url("chrome://global/skin/icons/radio.svg");
+    border: 1px solid var(--checkbox-border-color);
+    border-radius: 20%;
+    align-self: center;
+    outline: none;
+    -moz-context-properties: fill;
+    fill: transparent;
+    width: 18px;
+    height: 18px;
+}
+
+.berytus-secret-manager-list-item-radio:focus-visible {
+    outline-offset: var(--focus-outline-offset);
+}
+
+.berytus-secret-manager-list-item-radio:hover {
+    background-color: var(--checkbox-unchecked-hover-bgcolor);
+}
+
+.berytus-secret-manager-list-item-radio:hover:active {
+    background-color: var(--checkbox-unchecked-active-bgcolor);
+}
+
+.berytus-secret-manager-list-item-radio:checked {
+    fill: var(--checkbox-checked-color);
+    background-color: var(--checkbox-checked-bgcolor);
+    border-color: var(--checkbox-checked-border-color);
+}
+
+.berytus-secret-manager-list-item-radio:checked:hover {
+    background-color: var(--checkbox-checked-hover-bgcolor);
+}
+
+.berytus-secret-manager-list-item-radio:checked:hover:active {
+    background-color: var(--checkbox-checked-active-bgcolor);
+}
+
+.berytus-secret-manager-list-item-icon {
+    -moz-context-properties: fill, fill-opacity;
+    fill: currentColor;
+    fill-opacity: 0.6;
+    /* clip-path: circle(50%); */
+    width: 32px;
+    height: 32px;
+}
+
+.berytus-secret-manager-list-item>.berytus-secret-manager-list-item-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 4px;
+}
+
+.identity-credential-list-item-label-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 4px;
+}
+
+.identity-credential-list-item-label-primary {
+    font-weight: 600;
+}
+
+.identity-credential-list-item-label-secondary {
+    font-size: 80%;
+}
+
+.berytus-secret-manager-list-item-icon {
+    align-self: center;
+    /* width: 32px; */
+    width: 44px;
+    height: 44px;
+}
+
+.berytus-secret-manager-list-item-metadata {
+    display: flex;
+    flex-direction: column;
+    /* justify-content: center; */
+    gap: 4px;
+}
+
+.berytus-secret-manager-list-item-metadata-nb-accounts-container {
+    align-self: center;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+}
+
+.berytus-secret-manager-list-item-metadata-spinner-icon {
+    width: 16px;
+}
+
+.berytus-secret-manager-list-item-metadata-error-icon {
+    width: 16px;
+}
+
+.berytus-secret-manager-list-item-metadata-nb-accounts-icon {
+    width: 16px;
+    fill: white;
+    -moz-context-properties: fill, fill-opacity;
+    fill-opacity: 0.8;
+}
+
+.berytus-secret-manager-list-item-stretch-till-end {
+    flex: 1;
+}

browser/themes/shared/browser-shared.css

@@ -18,6 +18,7 @@
 @import url("chrome://browser/skin/notification-icons.css");
 @import url("chrome://browser/skin/addon-notification.css");
 @import url("chrome://browser/skin/identity-credential-notification.css");
+@import url("chrome://browser/skin/berytus-notification.css");
 @import url("chrome://browser/skin/urlbarView.css");
 @import url("chrome://browser/skin/autocomplete.css");
 @import url("chrome://browser/skin/places/editBookmarkPanel.css");

browser/themes/shared/jar.inc.mn

@@ -19,6 +19,7 @@
   skin/classic/browser/browser-shared.css                      (../shared/browser-shared.css)
   skin/classic/browser/formautofill-notification.css           (../shared/formautofill-notification.css)
   skin/classic/browser/identity-credential-notification.css    (../shared/identity-credential-notification.css)
+  skin/classic/browser/berytus-notification.css                (../shared/berytus-notification.css)
   skin/classic/browser/light-dark-overrides.css                (../shared/light-dark-overrides.css)
   skin/classic/browser/menupanel.css                           (../shared/menupanel.css)
   skin/classic/browser/notification-icons.css                  (../shared/notification-icons.css)
@@ -178,6 +179,7 @@
 #endif
   skin/classic/browser/library.svg                    (../shared/icons/library.svg)
   skin/classic/browser/login.svg                      (../shared/icons/login.svg)
+  skin/classic/browser/berytus-login.svg              (../shared/icons/berytus-login.svg)
   skin/classic/browser/logo-android.svg               (../shared/icons/logo-android.svg)
   skin/classic/browser/logo-ios.svg                   (../shared/icons/logo-ios.svg)
   skin/classic/browser/mail.svg                       (../shared/icons/mail.svg)

browser/themes/shared/notification-icons.css

@@ -197,6 +197,10 @@
   list-style-image: url(chrome://browser/skin/login.svg);
 }
 
+#berytus-notification-icon {
+  list-style-image: url(chrome://browser/skin/berytus-login.svg);
+}
+
 #webRTC-previewVideo {
   border-radius: var(--border-radius-small);
   border: 1px solid var(--panel-separator-color);

toolkit/components/berytus/.gitignore

@@ -0,0 +1 @@
+node_modules

toolkit/components/berytus/build/modules/add-mozbuild.ts

@@ -0,0 +1,37 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { getModules } from './utils.js';
+
+export const addMozBuild = async () => {
+    const modules: Array<string> = await getModules(
+        resolve("./modules")
+    );
+    const actorModules: Array<string> = await getModules(
+        resolve("./modules/actors")
+    );
+
+    const mozFile = `# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.\n`
+        + "EXTRA_JS_MODULES += [\n"
+        + modules.map(mn => {
+                return `\t"${mn}"`
+            }).join(",\n")
+        + "\n]"
+        + `
+FINAL_TARGET_FILES.actors += [
+    ${actorModules.map(p => `"actors/${p}"`).join(",\n\t")}
+]`;
+
+    await writeFile(
+        resolve('./modules/moz.build'),
+        mozFile,
+        { encoding: 'utf8' }
+    );
+}

toolkit/components/berytus/build/modules/prefix-modules.ts

@@ -0,0 +1,24 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { renameModules } from "./utils.js"
+import { resolve } from 'node:path';
+
+export const prefixModules = async () => {
+    const renameFn = (moduleName: string) => {
+        if (moduleName.startsWith('Berytus')) {
+            return moduleName;
+        }
+        return 'Berytus' + moduleName;
+    };
+
+    await renameModules(
+        resolve("./modules"),
+        renameFn
+    );
+    await renameModules(
+        resolve("./modules/actors"),
+        renameFn
+    );
+}

toolkit/components/berytus/build/modules/tailor-build.ts

@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { addMozBuild } from "./add-mozbuild.js";
+import { prefixModules } from "./prefix-modules.js";
+
+const tailor = async () => {
+    await prefixModules();
+    await addMozBuild();
+}
+
+tailor();