Bug 1516768 - Put a border on add-on cards in high contrast mode r=dao
authorMark Striemer <mstriemer@mozilla.com>
Wed, 16 Jan 2019 12:38:42 +0000
changeset 511230 5b6bfa47b5c4d9ac5cd655c2bb997e02776c3f60
parent 511229 34476dc321b5071bded4819e76393ca140e3472b
child 511231 e12cee7d872760126178afaa6b92f3ac57e495c4
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1516768
milestone66.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 1516768 - Put a border on add-on cards in high contrast mode r=dao Differential Revision: https://phabricator.services.mozilla.com/D16520
toolkit/themes/shared/extensions/extensions.inc.css
toolkit/themes/shared/in-content/common.inc.css
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -678,18 +678,28 @@ button.warning {
 }
 
 .addon.card {
   background-origin: border-box;
   color: var(--in-content-text-color);
   margin: 8px 4px;
   max-width: 664px;
   /* The .addon-control element on the end has 4px of margin, remove it
-   * from the padding to stay balanced. */
-  padding-inline-end: 12px;
+   * from the padding to stay balanced (also the 1px border for high-contrast). */
+  padding-inline-end: calc(var(--card-padding) - 5px);
+}
+
+.list:focus > .addon[selected] {
+  /* Needed for high-contrast where the border will appear. */
+  border: 2px solid transparent;
+  /* Remove the border from the overall padding. */
+  padding: calc(var(--card-padding) - 2px);
+  /* The .addon-control element on the end has 4px of margin, remove it
+   * from the padding to stay balanced (also the 2px border). */
+  padding-inline-end: calc(var(--card-padding) - 6px);
 }
 
 .addon-detail.card:hover {
   box-shadow: var(--card-shadow);
 }
 
 .addon.card > .card-heading-image {
   margin-inline-end: -12px;
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -66,16 +66,17 @@
   --grey-90-a50: rgba(12, 12, 13, 0.5);
   --red-50: #ff0039;
   --red-50-a30: rgba(255, 0, 57, 0.3);
   --red-60: #d70022;
   --yellow-50: #ffe900;
   --yellow-90: #3e2800;
 
   --shadow-10: 0 1px 4px var(--grey-90-a10);
+  --card-padding: 16px;
   --card-shadow: var(--shadow-10);
   --card-outline-color: var(--grey-30);
   --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
   --card-shadow-focus: 0 0 0 2px var(--blue-50), 0 0 0 6px var(--blue-50-a30);
 }
 
 html|html,
 xul|page,
@@ -865,20 +866,23 @@ xul|treechildren::-moz-tree-image(select
 }
 
 .message-bar-warning > .message-bar-icon {
   list-style-image: url("chrome://browser/skin/warning.svg");
 }
 
 .card {
   background: var(--in-content-box-background);
+  /* Needed for high-contrast where the border will appear. */
+  border: 1px solid transparent;
   border-radius: 4px;
   box-shadow: var(--card-shadow);
   margin: 0 0 8px;
-  padding: 16px;
+  /* Remove the border from the overall padding. */
+  padding: calc(var(--card-padding) - 1px);
   transition: box-shadow 150ms;
 }
 
 .card:hover {
   box-shadow: var(--card-shadow-hover);
 }
 
 .card-heading-image {