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 499627 a19f3794f0c9b63868f7e4e028bc6a76fb199930
parent 499618 1feb8b3f06e7f93d1cd67d59011074add931b086
child 499628 cb62a8b8a525d7442d53ee6441fe3f60608b0160
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1490366
milestone64.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 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;