Bug 1810890 - Part 6: remove Storybook CSS path rewrites from credential management elements r=credential-management-reviewers,mtigley

Depends on D185094

Differential Revision: https://phabricator.services.mozilla.com/D185095

browser/components/aboutlogins/content/components/login-alert.mjs

@@ -19,13 +19,12 @@ export class LoginAlert extends MozLitElement {
     };
   }
 
-  static stylesheetUrl = window.IS_STORYBOOK
-    ? "./login-alert.css"
-    : "chrome://browser/content/aboutlogins/components/login-alert.css";
-
   render() {
     return html`
-      <link rel="stylesheet" href=${this.constructor.stylesheetUrl} />
+      <link
+        rel="stylesheet"
+        href="chrome://browser/content/aboutlogins/components/login-alert.css"
+      />
       <img src=${ifDefined(this.icon)} />
       <h3 data-l10n-id=${ifDefined(this.titleId)}></h3>
       <div>
@@ -43,17 +42,16 @@ export class VulnerablePasswordAlert extends MozLitElement {
     };
   }
 
-  static stylesheetUrl = window.IS_STORYBOOK
-    ? "./login-alert.css"
-    : "chrome://browser/content/aboutlogins/components/login-alert.css";
-
   constructor() {
     super();
     this.hostname = "";
   }
   render() {
     return html`
-      <link rel="stylesheet" href=${this.constructor.stylesheetUrl} />
+      <link
+        rel="stylesheet"
+        href="chrome://browser/content/aboutlogins/components/login-alert.css"
+      />
       <login-alert
         variant="info"
         icon="chrome://browser/content/aboutlogins/icons/vulnerable-password.svg"
@@ -96,10 +94,6 @@ export class LoginBreachAlert extends MozLitElement {
     };
   }
 
-  static stylesheetUrl = window.IS_STORYBOOK
-    ? "./login-alert.css"
-    : "chrome://browser/content/aboutlogins/components/login-alert.css";
-
   constructor() {
     super();
     this.date = 0;
@@ -116,7 +110,10 @@ export class LoginBreachAlert extends MozLitElement {
 
   render() {
     return html`
-      <link rel="stylesheet" href=${this.constructor.stylesheetUrl} />
+      <link
+        rel="stylesheet"
+        href="chrome://browser/content/aboutlogins/components/login-alert.css"
+      />
       <login-alert
         variant="error"
         icon="chrome://browser/content/aboutlogins/icons/breached-website.svg"

browser/components/aboutlogins/content/components/login-command-button.mjs

@@ -30,17 +30,16 @@ export default class LoginCommandButton extends MozLitElement {
     this.tooltip = "";
   }
 
-  static stylesheetUrl = window.IS_STORYBOOK
-    ? "./login-command-button.css"
-    : "chrome://browser/content/aboutlogins/components/login-command-button.css";
-
   render() {
     return html`
       <link
         rel="stylesheet"
         href="chrome://global/skin/in-content/common.css"
       />
-      <link rel="stylesheet" href=${this.constructor.stylesheetUrl} />
+      <link
+        rel="stylesheet"
+        href="chrome://browser/content/aboutlogins/components/login-command-button.css"
+      />
 
       <!-- Keeping the data-l10n-id in a separate span tag for the correct formatting of 
       img before the l10nid. Keeping it within the button will cause a different format and

browser/components/aboutlogins/content/components/login-list-lit-item.mjs

@@ -19,10 +19,6 @@ export class ListItem extends MozLitElement {
     };
   }
 
-  static stylesheetUrl = window.IS_STORYBOOK
-    ? "./login-list-lit-item.css"
-    : "chrome://browser/content/aboutlogins/components/login-list-lit-item.css";
-
   constructor() {
     super();
     this.icon = "";
@@ -33,7 +29,7 @@ export class ListItem extends MozLitElement {
     const classes = { selected: this.selected, "list-item": true };
     return html` <link
         rel="stylesheet"
-        href=${this.constructor.stylesheetUrl}
+        href="chrome://browser/content/aboutlogins/components/login-list-lit-item.css"
       />
       <li class=${classMap(classes)} role="option">
         <img class="icon" src=${this.icon} />
@@ -49,10 +45,6 @@ export class NewListItem extends MozLitElement {
     selected: { type: Boolean },
   };
 
-  static stylesheetUrl = window.IS_STORYBOOK
-    ? "./login-list-lit-item.css"
-    : "chrome://browser/content/aboutlogins/components/login-list-lit-item.css";
-
   constructor() {
     super();
     this.id = "new-login-list-item";
@@ -62,7 +54,10 @@ export class NewListItem extends MozLitElement {
 
   render() {
     return html`
-      <link rel="stylesheet" href=${this.constructor.stylesheetUrl} />
+      <link
+        rel="stylesheet"
+        href="chrome://browser/content/aboutlogins/components/login-list-lit-item.css"
+      />
       <list-item ?selected=${this.selected} icon=${this.icon}>
         <div class="labels" slot="login-info">
           <span
@@ -91,9 +86,6 @@ export class LoginListItem extends MozLitElement {
       selected: { type: Boolean },
     };
   }
-  static stylesheetUrl = window.IS_STORYBOOK
-    ? "./login-list-lit-item.css"
-    : "chrome://browser/content/aboutlogins/components/login-list-lit-item.css";
 
   constructor() {
     super();
@@ -118,7 +110,10 @@ export class LoginListItem extends MozLitElement {
     }
 
     return html`
-      <link rel="stylesheet" href=${this.constructor.stylesheetUrl} />
+      <link
+        rel="stylesheet"
+        href="chrome://browser/content/aboutlogins/components/login-list-lit-item.css"
+      />
       <list-item
         icon=${this.favicon}
         title=${this.title}

browser/components/aboutlogins/content/components/login-timeline.mjs

@@ -21,11 +21,6 @@ export default class Timeline extends MozLitElement {
     this.history = [];
   }
 
-  // Use a relative URL in storybook to get faster reloads on style changes.
-  static stylesheetUrl = window.IS_STORYBOOK
-    ? "./login-timeline.css"
-    : "chrome://browser/content/aboutlogins/components/login-timeline.css";
-
   render() {
     this.history = this.history.filter(historyPoint => historyPoint.time);
     this.history.sort((a, b) => a.time - b.time);
@@ -64,7 +59,10 @@ export default class Timeline extends MozLitElement {
     });
 
     return html`
-      <link rel="stylesheet" href=${this.constructor.stylesheetUrl} />
+      <link
+        rel="stylesheet"
+        href="chrome://browser/content/aboutlogins/components/login-timeline.css"
+      />
       <div
         class="timeline ${classMap({ empty: !this.history.length })}"
         style=${styleMap({ gridTemplateColumns: columns })}