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 441179 a19f3794f0c9
parent 441170 1feb8b3f06e7
child 441180 cb62a8b8a525
push id34850
push userncsoregi@mozilla.com
push dateMon, 15 Oct 2018 04:53:00 +0000
treeherdermozilla-central@8bf31628742d [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;