Bug 1579165 - Separators between logins (and bounding boxes of containers) should be lighter to match the spec r=jaws
authormcrawford@mozilla.com <mcrawford@mozilla.com>
Tue, 15 Oct 2019 22:12:00 +0000
changeset 497740 a214efa56e4d33596632693c8eda0f1220f0473e
parent 497739 f1b176cc076697c9094ed22deef7d866122007de
child 497741 35c3e4b22040b1caee3571bb139a6c228faf2dc4
push id36695
push usercsabou@mozilla.com
push dateWed, 16 Oct 2019 05:20:00 +0000
treeherdermozilla-central@7b19086f802c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1579165
milestone71.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1579165 - Separators between logins (and bounding boxes of containers) should be lighter to match the spec r=jaws Note - I did not edit the refernces to `--in-content-box-border-color` across the following refernces: login-list: :host (Also contained references to backround color: `--in-content-box-background`) .meta (Also contained references to backround color: `--in-content-box-background`) .create-login-button-container (Shadow color property) menu-button: .menu (Also contained references to backround color: `--in-content-box-background`) Differential Revision: https://phabricator.services.mozilla.com/D49188
browser/components/aboutlogins/content/aboutLogins.css
browser/components/aboutlogins/content/components/login-item.css
browser/components/aboutlogins/content/components/login-list.css
--- a/browser/components/aboutlogins/content/aboutLogins.css
+++ b/browser/components/aboutlogins/content/aboutLogins.css
@@ -12,17 +12,17 @@ body {
   height: 100vh;
 }
 
 header {
   display: flex;
   grid-area: header;
   align-items: center;
   background-color: var(--in-content-page-background);
-  border-bottom: 1px solid var(--in-content-box-border-color);
+  border-bottom: 1px solid var(--in-content-border-color);
   padding-inline-end: 23px;
 }
 
 login-filter {
   min-width: 200px;
   max-width: 400px;
   margin-inline: 40px auto;
   flex-grow: 0.5;
--- a/browser/components/aboutlogins/content/components/login-item.css
+++ b/browser/components/aboutlogins/content/components/login-item.css
@@ -85,17 +85,17 @@ input[type="url"][readOnly] {
 
 .save-changes-button {
   margin-inline-start: 0; /* Align the button on the start side */
 }
 
 .header {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--in-content-box-border-color);
+  border-bottom: 1px solid var(--in-content-border-color);
   margin-bottom: 40px;
 }
 
 .title {
   margin-top: 0;
   margin-bottom: 0;
   flex-grow: 1;
   overflow: hidden;
@@ -219,17 +219,17 @@ input[type="url"][readOnly]:hover:active
   margin-top: 0;
   margin-bottom: 8px;
 }
 
 .meta-info:first-of-type::before {
   content: "";
   display: block;
   margin-bottom: 20px;
-  border-top: 1px solid var(--in-content-box-border-color);
+  border-top: 1px solid var(--in-content-border-color);
   width: 40px;
 }
 
 input[name="password"] {
   font-family: monospace !important; /* override `all: unset` in the rule above */
 }
 
 .reveal-password-checkbox {
--- a/browser/components/aboutlogins/content/components/login-list.css
+++ b/browser/components/aboutlogins/content/components/login-list.css
@@ -66,17 +66,17 @@
 }
 
 .empty-search-message,
 .intro {
   text-align: center;
   padding: 1em;
   max-width: 50ch; /* This should be kept in sync with login-list-item username and title max-width */
   flex-grow: 1;
-  border-bottom: 1px solid var(--in-content-box-border-color);
+  border-bottom: 1px solid var(--in-content-border-color);
 }
 
 .empty-search-message span,
 .intro span {
   font-size: 0.85em;
 }
 
 ol {
@@ -99,17 +99,17 @@ ol {
 
 .login-list-item {
   display: flex;
   align-items: center;
   padding: 10px;
   padding-inline-end: 18px;
   padding-inline-start: 12px;
   border-inline-start: 4px solid transparent;
-  border-bottom: 1px solid var(--in-content-box-border-color);
+  border-bottom: 1px solid var(--in-content-border-color);
   user-select: none;
 }
 
 .login-list-item:hover {
   background-color: var(--in-content-box-background-hover);
 }
 
 .login-list-item:hover:active {