Bug 1525615: Change the style of DebugTargetItem. r=jdescottes,ladybenko

Depends on D20295

Differential Revision: https://phabricator.services.mozilla.com/D20296

--HG--
extra : moz-landing-system : lando

devtools/client/aboutdebugging-new/src/base.css

@@ -46,6 +46,10 @@
   /* 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;
 

devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css

@@ -14,7 +14,7 @@
  */
 .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";
@@ -28,9 +28,8 @@
 
 .debug-target-item__name {
   grid-area: name;
-  /* so as to ellipsis */
+  font-size: var(--body-20-font-size);
-  min-width: 0;
+  font-weight: var(--body-20-font-weight);
-  font-size: calc(var(--base-unit) * 5);
 }
 
 .debug-target-item__action {
@@ -40,4 +39,6 @@
 
 .debug-target-item__detail {
   grid-area: detail;
+  font-size: var(--caption-20-font-size);
+  font-weight: var(--caption-20-font-weight);
 }

devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css

@@ -3,7 +3,6 @@
  * 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;
 }