Bug 1516768 - Put a border on add-on cards in high contrast mode. r=dao, a=RyanVM
authorMark Striemer <mstriemer@mozilla.com>
Wed, 16 Jan 2019 12:38:42 +0000
changeset 509530 21ebd471d7a645f5b501abbb194f4696195dae63
parent 509529 73101717e0676ee8ead22272dc3df324db94b87a
child 509531 6881825b5cd71efff043f4dbb0e56339e93b3ad7
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, RyanVM
bugs1516768
milestone65.0
Bug 1516768 - Put a border on add-on cards in high contrast mode. r=dao, a=RyanVM 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
@@ -671,18 +671,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
@@ -65,16 +65,17 @@
   --grey-90-a30: rgba(12, 12, 13, 0.3);
   --grey-90-a50: rgba(12, 12, 13, 0.5);
   --red-50: #ff0039;
   --red-50-a30: rgba(255, 0, 57, 0.3);
   --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,
@@ -875,20 +876,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 {