Bug 1490366 - Part 1: Move card styles to common from about:debugging r=dao
authorMark Striemer <mstriemer@mozilla.com>
Sun, 14 Oct 2018 19:20:02 +0000
changeset 489520 a19f3794f0c9b63868f7e4e028bc6a76fb199930
parent 489513 1feb8b3f06e7f93d1cd67d59011074add931b086
child 489521 cb62a8b8a525d7442d53ee6441fe3f60608b0160
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersdao
bugs1490366
milestone64.0a1
Bug 1490366 - Part 1: Move card styles to common from about:debugging r=dao Differential Revision: https://phabricator.services.mozilla.com/D8101
devtools/client/aboutdebugging/aboutdebugging.css
devtools/client/aboutdebugging/components/addons/Target.js
toolkit/themes/shared/in-content/common.inc.css
--- a/devtools/client/aboutdebugging/aboutdebugging.css
+++ b/devtools/client/aboutdebugging/aboutdebugging.css
@@ -245,53 +245,90 @@ button {
 }
 
 #addons-panel h2 {
   font-size: 1.5rem;
   font-weight: bold;
 }
 
 .addon-target-container {
-  background: #fff;
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.12);
   list-style-type: none;
-  font-size: 13px;
-  margin: 0 0 8px;
-  padding: 4px 16px;
-  transition: box-shadow 150ms;
+  margin: 16px 0;
 }
 
-.addon-target-container:hover {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
+.target-card-heading {
+  margin: 0;
 }
 
-.addon-target-container .target {
+.target-card-heading {
   align-items: center;
   display: flex;
   margin: 0;
-  padding: 16px 0;
-}
+  padding: 0 0 16px;
 
-.addon-target-name {
   font-size: 15px;
   font-weight: 600;
 }
 
-.addon-target-actions {
-  border-top: 1px solid rgba(0, 0, 0, 0.2);
-}
-
-.addon-target-container .target-icon {
+.target-card-heading-icon {
+  height: 24px;
+  width: 24px;
   margin-inline-end: 16px;
 }
 
-.addon-target-container .name {
-  align-self: center;
-  font-size: 16px;
-  font-weight: 600;
+.target-card-actions {
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
+  padding-top: 16px;
+}
+
+.target-card-action-link {
+  background: none;
+  border: none;
+  color: #0087ff;
+  font-size: 13px;
+  /* Use some negative top margin to account for the padding and keep the
+   * button vertically centred. */
+  margin: -4px 0 0 12px;
+  min-width: auto;
+  padding: 4px;
+  transition: color 150ms;
+}
+
+.target-card-action-link:first-of-type {
+  /* Other action buttons will have 12px of margin to space between each other,
+   * but for the first button subtract the start padding to align with the border. */
+  margin-inline-start: -4px;
+}
+
+.target-card-action-link:active,
+.target-card-action-link:hover,
+.target-card-action-link:enabled:hover:active {
+  background: none;
+}
+
+.target-card-action-link:disabled {
+  color: #999;
+  opacity: 1;
+}
+
+.target-card-action-link:enabled:focus,
+.target-card-action-link:enabled:hover {
+  background: none;
+  color: #0052cc;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.target-card-action-link:enabled:hover:active {
+  color: #003399;
+  text-decoration: none;
+}
+
+.addon-target-icon.target-icon {
+  margin-inline-end: 16px;
 }
 
 .addon-target-info {
   display: grid;
   grid-template-columns: 128px 1fr;
 }
 
 .addon-target-info-label {
@@ -306,57 +343,16 @@ button {
 .addon-target-info-content {
   margin: 0;
 }
 
 .addon-target-info-more {
   padding-left: 1ch;
 }
 
-.addon-target-button {
-  background: none;
-  border: none;
-  color: #0087ff;
-  font-size: 13px;
-  margin: 12px;
-  min-width: auto;
-  padding: 4px;
-  transition: color 150ms;
-}
-
-.addon-target-button:active,
-.addon-target-button:hover,
-.addon-target-button:enabled:hover:active {
-  background: none;
-}
-
-.addon-target-button:disabled {
-  color: #999;
-  opacity: 1;
-}
-
-.addon-target-button:enabled:focus,
-.addon-target-button:enabled:hover {
-  background: none;
-  color: #0052cc;
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.addon-target-button:enabled:hover:active {
-  color: #003399;
-  text-decoration: none;
-}
-
-.addon-target-button:first-of-type {
-  /* Subtract the start padding so the button is still a bigger click target but
-   * lines up with the icon. */
-  margin-inline-start: -4px;
-}
-
 .addon-target-messages {
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   margin-bottom: 16px;
   padding: 0 0 12px 0;
 }
 
 .addon-target-message {
   list-style-type: none;
--- a/devtools/client/aboutdebugging/components/addons/Target.js
+++ b/devtools/client/aboutdebugging/components/addons/Target.js
@@ -204,49 +204,49 @@ class AddonTarget extends Component {
       throw new Error("Error reloading addon " + target.addonID + ": " + e.message);
     }
   }
 
   render() {
     const { target, debugDisabled } = this.props;
 
     return dom.li(
-      { className: "addon-target-container", "data-addon-id": target.addonID },
-      dom.div({ className: "target" },
+      { className: "card addon-target-container", "data-addon-id": target.addonID },
+      dom.div({ className: "target-card-heading target" },
         dom.img({
-          className: "target-icon",
+          className: "target-icon addon-target-icon",
           role: "presentation",
           src: target.icon
         }),
         dom.span(
           { className: "target-name addon-target-name", title: target.name },
           target.name)
       ),
       showMessages(target),
       dom.dl(
         { className: "addon-target-info" },
         ...filePathForTarget(target),
         ...addonIDforTarget(target),
         ...internalIDForTarget(target),
       ),
-      dom.div({className: "addon-target-actions"},
+      dom.div({className: "target-card-actions"},
         dom.button({
-          className: "debug-button addon-target-button",
+          className: "target-card-action-link debug-button addon-target-button",
           onClick: this.debug,
           disabled: debugDisabled,
         }, Strings.GetStringFromName("debug")),
         target.temporarilyInstalled
           ? dom.button({
-            className: "reload-button addon-target-button",
+            className: "target-card-action-link reload-button addon-target-button",
             onClick: this.reload,
           }, Strings.GetStringFromName("reload"))
           : null,
         target.temporarilyInstalled
           ? dom.button({
-            className: "uninstall-button addon-target-button",
+            className: "target-card-action-link uninstall-button addon-target-button",
             onClick: this.uninstall,
           }, Strings.GetStringFromName("remove"))
           : null,
       ),
     );
   }
 }
 
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -841,16 +841,28 @@ xul|treechildren::-moz-tree-image(select
   background-color: var(--yellow-50);
   color: var(--yellow-90);
 }
 
 .message-bar-warning > .message-bar-icon {
   list-style-image: url("chrome://browser/skin/warning.svg");
 }
 
+.card {
+  background: #fff;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.12);
+  margin: 0 0 8px;
+  padding: 16px;
+  transition: box-shadow 150ms;
+}
+
+.card:hover {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
 .sidebar-footer-button {
   padding: 1px; /* Adding padding around help label in order to make entire keyboard focusing outline visible */
 }
 
 .sidebar-footer-button > .text-link {
   -moz-box-flex: 1;
   margin-inline-start: 34px;
   margin-inline-end: 0;