Bug 1490366 - Part 1: Move card styles to common from about:debugging r=dao
☠☠ backed out by 45299a26e20a ☠ ☠
authorMark Striemer <mstriemer@mozilla.com>
Sun, 14 Oct 2018 15:13:31 +0000
changeset 499610 7e0abd16a50b77fb6437f96b80cafe0b83723c27
parent 499609 7109102a6cdd6c4764ae9fdbd6fa4effdb1688ab
child 499611 4486727805723d44387702ce85f25abbeb8937cf
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;