Backed out 8 changesets (bug 1838939) for dt failure on browser_styleeditor_fission_switch_target.js . CLOSED TREE

Backed out changeset bfb8bcb267c5 (bug 1838939)
Backed out changeset 94174e2d7373 (bug 1838939)
Backed out changeset a296d5def7c8 (bug 1838939)
Backed out changeset 8e69b0238271 (bug 1838939)
Backed out changeset c0ba65d79200 (bug 1838939)
Backed out changeset 6fb9170b1bc5 (bug 1838939)
Backed out changeset 221a4fc5492e (bug 1838939)
Backed out changeset b67f33657dc4 (bug 1838939)

Author: nbeleuzu

browser/components/aboutlogins/content/aboutLogins.html

@@ -164,7 +164,7 @@ <h1 class="title" id="title"></h1>
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/fxaccounts-button.css">
       <div class="logged-out-view">
-        <p class="fxaccounts-extra-text text-deemphasized" data-l10n-id="fxaccounts-sign-in-text"></p>
+        <p class="fxaccounts-extra-text" data-l10n-id="fxaccounts-sign-in-text"></p>
         <button class="fxaccounts-enable-button" data-l10n-id="fxaccounts-sign-in-sync-button"></button>
       </div>
       <div class="logged-in-view">
@@ -186,7 +186,7 @@ <h1 class="title" id="title"></h1>
           <login-command-button class="create-login-button" l10nId="create-new-login-button" icon="chrome://global/skin/icons/plus.svg" tooltip="" ></login-command-button>
         </div>
       </div>
-      <div class="meta text-deemphasized">
+      <div class="meta">
         <label for="login-sort">
           <span data-l10n-id="login-list-sort-label-text"></span>
           <select id="login-sort">
@@ -219,8 +219,8 @@ <h1 class="title" id="title"></h1>
       <li class="login-list-item" role="option">
         <img class="favicon" />
         <div class="labels">
-          <span class="title text-truncated-ellipsis" dir="auto"></span>
-          <span class="username text-deemphasized text-truncated-ellipsis" dir="ltr"></span>
+          <span class="title" dir="auto"></span>
+          <span class="username" dir="ltr"></span>
         </div>
         <img class="alert-icon" title="" src=""/>
       </li>
@@ -275,7 +275,7 @@ <h1 class="heading" data-l10n-id="about-logins-login-intro-heading-logged-out2">
           </div>
           <div class="header">
             <img class="login-item-favicon" />
-            <h2 class="title text-truncated-ellipsis">
+            <h2 class="title">
               <span class="login-item-title"></span>
               <span class="new-login-title" data-l10n-id="login-item-new-login-title"></span>
             </h2>
@@ -287,7 +287,7 @@ <h2 class="title text-truncated-ellipsis">
           <form>
             <div class="detail-row">
               <label class="detail-cell">
-                <span class="origin-label field-label text-deemphasized" data-l10n-id="login-item-origin-label"></span>
+                <span class="origin-label field-label" data-l10n-id="login-item-origin-label"></span>
                 <!-- Default text inputs to readonly to reduce jumping of the field
                     size on page load since it always starts readonly. -->
 
@@ -308,7 +308,7 @@ <h2 class="title text-truncated-ellipsis">
             <div class="detail-grid">
               <div class="detail-row">
                 <label class="detail-cell">
-                  <span class="username-label field-label text-deemphasized" data-l10n-id="login-item-username-label"></span>
+                  <span class="username-label field-label" data-l10n-id="login-item-username-label"></span>
                   <input type="text"
                          name="username"
                          data-l10n-id="login-item-username"
@@ -320,7 +320,7 @@ <h2 class="title text-truncated-ellipsis">
               </div>
               <div class="detail-row">
                 <label class="detail-cell">
-                  <span class="password-label field-label text-deemphasized" data-l10n-id="login-item-password-label"></span>
+                  <span class="password-label field-label" data-l10n-id="login-item-password-label"></span>
                   <div class="reveal-password-wrapper">
                     <input type="password"
                            name="password"

browser/components/aboutlogins/content/components/fxaccounts-button.css

@@ -15,9 +15,17 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
+
+  color: var(--text-color-deemphasized);
   text-align: end;
 }
 
+.fxaccounts-extra-text,
+.fxaccount-email,
+.fxaccounts-enable-button {
+  font-size: 13px;
+}
+
 @media (max-width: 830px) {
   .fxaccounts-extra-text,
   .fxaccount-email {
@@ -27,7 +35,6 @@
 
 .fxaccount-avatar,
 .fxaccounts-enable-button {
-  font-size: var(--font-size-small);
   margin-inline-start: 9px;
 }
 
@@ -46,7 +53,6 @@
 }
 
 .fxaccount-email {
-  font-size: var(--font-size-small);
   vertical-align: middle;
 }
 

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

@@ -6,7 +6,6 @@ button {
   margin: 0;
   display: inline-flex;
   flex-direction: row;
-  align-items: center;
   min-width: auto;
 }
 

browser/components/aboutlogins/content/components/login-intro.css

@@ -9,12 +9,16 @@
   align-items: center;
 }
 
+.heading {
+  font-size: 1.5em;
+}
+
 section {
   line-height: 2;
 }
 
 .description {
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
   margin-bottom: 0;
 }
 

browser/components/aboutlogins/content/components/login-item.css

@@ -106,6 +106,9 @@ input[type="url"]:read-only {
 .title {
   margin-block: 0;
   flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 input[type = "url"]:focus:not(:-moz-ui-invalid):invalid ~ .tooltip-container {
@@ -213,6 +216,8 @@ input[type = "url"]:focus:-moz-ui-invalid:not(:placeholder-shown) ~ .tooltip-con
 
 .field-label {
   display: block;
+  font-size: smaller;
+  color: var(--text-color-deemphasized);
   margin-bottom: 8px;
 }
 
@@ -292,20 +297,20 @@ login-command-button {
 }
 
 .alert-title {
-  font-size: var(--font-size-xlarge);
-  font-weight: var(--font-weight-default);
+  font-size: 22px;
+  font-weight: normal;
   line-height: 1em;
   margin-block: 0 12px;
 }
 
 .alert-date {
   display: block;
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
 }
 
 .alert-link:visited,
 .alert-link {
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
   overflow-wrap: anywhere;
 }
 
@@ -331,7 +336,7 @@ login-command-button {
   inset-block-start: 16px;
   inset-inline-end: 32px;
   color: inherit;
-  font-size: var(--font-size-small);
+  font-size: 13px;
 }
 
 .vulnerable-alert > .alert-learn-more-link {
@@ -362,5 +367,5 @@ login-command-button {
 .error-message-link > a:hover:active {
   color: currentColor;
   text-decoration: underline;
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
 }

browser/components/aboutlogins/content/components/login-list.css

@@ -16,6 +16,8 @@
   padding: 0 16px 16px;
   border-bottom: 1px solid var(--in-content-border-color);
   background-color: var(--in-content-box-background);
+  color: var(--text-color-deemphasized);
+  font-size: 0.8em;
 }
 
 .meta > label > span {
@@ -34,7 +36,7 @@
 }
 
 #login-sort > option {
-  font-weight: var(--font-weight-default);
+  font-weight: normal;
 }
 
 .count {
@@ -107,7 +109,7 @@ ol {
   position: sticky;
   top: 0;
   font-size: .85em;
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
   padding: 4px 16px;
   border-bottom: 1px solid var(--in-content-border-color);
   background-color: var(--in-content-box-background);
@@ -136,7 +138,7 @@ ol {
 }
 
 .login-list-item.selected .title {
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
 }
 
 .labels {
@@ -148,6 +150,14 @@ ol {
   justify-content: center;
 }
 
+.title,
+.username {
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 .favicon {
   height: 16px;
   width: 16px;
@@ -157,6 +167,11 @@ ol {
   fill-opacity: 0.8;
 }
 
+.username {
+  font-size: 0.85em;
+  color: var(--text-color-deemphasized);
+}
+
 .alert-icon {
   min-width: 16px;
   width: 16px;

browser/components/enterprisepolicies/content/aboutPolicies.html

@@ -42,11 +42,11 @@
     </div>
     <div class="main-content">
       <div class="header">
-        <h1
+        <div
           id="sectionTitle"
           class="header-name"
           data-l10n-id="active-policies-tab"
-        ></h1>
+        ></div>
       </div>
 
       <div id="active" class="tab active">

browser/components/protections/content/protections.css

@@ -65,10 +65,12 @@ body[focuseddatatype=cryptominer] {
 }
 
 h2 {
-  font-weight: var(--font-weight-bold);
+  font-weight: 700;
 }
 
 #report-title {
+  font-size: 20px;
+  font-weight: 300;
   margin-block-end: 20px;
 }
 

browser/components/storybook/.storybook/preview-head.html

@@ -1,20 +1,8 @@
 <!-- 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/. -->
-
-<link
-  rel="stylesheet"
-  href="chrome://global/skin/design-system/text-and-typography.css"
-/>
-<link
-  rel="stylesheet"
-  href="chrome://global/skin/design-system/tokens-brand.css"
-/>
-
+<link rel="stylesheet" href="chrome://global/skin/design-tokens-brand.css" />
 <style>
-  :root {
-    font-size: var(--font-size-root);
-  }
   /* Override the default Storybook padding in favour of styles
    provided by our WithCommonStyles wrapper */
   .sb-show-main.sb-main-padded {
@@ -32,54 +20,10 @@
     height: unset;
   }
 
-  /* Typography preview and design tokens table */
-  table.sb-preview-design-tokens {
-    -moz-osx-font-smoothing: auto;
-    border-collapse: separate;
-    table-layout: fixed;
-    text-align: left;
-    width: 100%;
-
-    & th {
-      background: #ebf5fc;
-    }
-
-    & tr td,
-    & tr th {
-      padding: 8px;
-    }
-
-    & td {
-      background: #ffffff;
-    }
-  }
-
-  td.sb-preview-chrome-typescale {
-    & .docs-story {
-      * {
-        font: message-box;
-      }
-
-      & h1 {
-        font-weight: var(--font-weight-bold) !important;
-      }
-    }
-
-    &.sb-preview-chrome-menu .docs-story * {
-      font: menu;
-    }
+  panel-item[action="new"]::part(button) {
+    background-image: url("chrome://global/skin/icons/plus.svg");
   }
-
-  h1.sb-preview-chrome-typescale {
-    font: message-box;
-    font-weight: var(--font-weight-bold) !important;
-
-    &.sb-preview-chrome-menu {
-      font: menu;
-    }
-  }
-
-  table .sb-preview-font-size-small {
-    font-size: var(--font-size-small);
+  panel-item[action="save"]::part(button) {
+    background-image: url("chrome://global/skin/icons/page-portrait.svg");
   }
 </style>

browser/components/storybook/.storybook/preview.mjs

@@ -44,15 +44,15 @@ class WithCommonStyles extends MozLitElement {
     :host,
     :root {
       font: message-box;
-      font-size: var(--font-size-root);
       appearance: none;
-      background-color: var(--color-canvas);
-      color: var(--text-color);
+      background-color: var(--in-content-page-background);
+      color: var(--in-content-page-color);
       -moz-box-layout: flex;
     }
 
-    :host {
-      font-size: var(--font-size-root);
+    :host,
+    :root:not(.system-font-size) {
+      font-size: 15px;
     }
   `;