Bug 1525615: Change the style of DebugTargetItem. r=jdescottes,ladybenko
☠☠ backed out by 894e76afd6ba ☠ ☠
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Fri, 22 Feb 2019 02:23:57 +0000
changeset 518944 54455c6ac7cac2fad4d50d3c0b28e3dc2cb2ff3b
parent 518943 383b6665578306219dd34b178353e100ca2848eb
child 518945 c6f3144fb731c869d3ec6f300d1aec0c96eee4d4
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, ladybenko
bugs1525615
milestone67.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 1525615: Change the style of DebugTargetItem. r=jdescottes,ladybenko Depends on D20295 Differential Revision: https://phabricator.services.mozilla.com/D20296
devtools/client/aboutdebugging-new/src/base.css
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css
--- a/devtools/client/aboutdebugging-new/src/base.css
+++ b/devtools/client/aboutdebugging-new/src/base.css
@@ -41,16 +41,20 @@
   --grey-90-a30: rgba(12, 12, 13, 0.3);
   --grey-90-a60: rgba(12, 12, 13, 0.6);
   --grey-90-a80: rgba(12, 12, 13, 0.8);
   --white-100: #fff; /* for ui, no special semantic */
 
   /* Typography from Photon */
   --body-10-font-size: 13px;
   --body-10-font-weight: 400;
+  --body-20-font-size: 15px;
+  --body-20-font-weight: 700;
+  --caption-20-font-size: 13px;
+  --caption-20-font-weight: 400;
   --title-20-font-size: 17px;
   --title-20-font-weight: 600;
 
   /* Global layout vars */
   --page-width: 664px;
   --base-unit: 4px;
 
   /* Global styles */
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
@@ -9,35 +9,36 @@
  *  | [Icon] | Name                        | Action button  |
  *  +--------+-----------------------------+----------------+
  *  |        | Detail                                       |
  *  |        |                                              |
  *  +--------+----------------------------------------------+
  */
 .debug-target-item {
   display: grid;
-  grid-template-columns: calc(var(--base-unit) * 9) 1fr max-content;
+  grid-template-columns: calc(var(--base-unit) * 8) 1fr max-content;
   grid-column-gap: calc(var(--base-unit) * 2);
   grid-template-areas: "icon name   action"
                        ".    detail detail";
   margin-block-end: calc(var(--base-unit) * 4);
 }
 
 .debug-target-item__icon {
   grid-area: icon;
   width: 100%;
 }
 
 .debug-target-item__name {
   grid-area: name;
-  /* so as to ellipsis */
-  min-width: 0;
-  font-size: calc(var(--base-unit) * 5);
+  font-size: var(--body-20-font-size);
+  font-weight: var(--body-20-font-weight);
 }
 
 .debug-target-item__action {
   grid-area: action;
   align-self: center;
 }
 
 .debug-target-item__detail {
   grid-area: detail;
+  font-size: var(--caption-20-font-size);
+  font-weight: var(--caption-20-font-weight);
 }
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css
@@ -1,12 +1,11 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .debug-target-list {
-  margin-inline-start: calc(var(--base-unit) * 6);
   overflow: hidden;
 }
 
 .debug-target-list--collapsed {
   max-height: 0;
 }