Bug 1505126 - Part 1: UX fixes. r=jdescottes,daisuke,Ola

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

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

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

@@ -27,11 +27,13 @@
   --link-color-hover: #0060df;
 
   /* Colors from Photon */
-  --success-50: #30e60b;
+  --success-background: #30e60b;
-  --warning-50: #ffe900;
+  --warning-background: #fffbd6; /* from the Web Console */
-  --warning-90: #3e2800;
+  --warning-icon: var(--yellow-65); /* from the Web Console */
-  --error-50: #ff0039;
+  --warning-text: var(--yellow-80); /* from the Web Console */
-  --error-60: #d70022;
+  --error-background: #fdf2f5; /* from the Web Console */
+  --error-icon: var(--red-60); /* from the Web Console */
+  --error-text: var(--red-70); /* from the Web Console */
   --highlight-50: #0a84ff;
   --grey-20: #ededf0; /* for ui, no special semantic */
   --grey-30: #d7d7db; /* for ui, no special semantic */
@@ -62,6 +64,8 @@
   --caption-20-color: var(--grey-50);
   --display-20-font-size: 36px;
   --display-20-font-weight: 200;
+  --display-10-font-size: 28px;
+  --display-10-font-weight: 200;
   --title-20-font-size: 17px;
   --title-20-font-weight: 600;
   --title-30-font-size: 22px;
@@ -178,8 +182,8 @@ p, h1 {
 
 /* Main style for heading (i.e. h1) */
 .main-heading {
-  font-size: var(--display-20-font-size);
+  font-size: var(--display-10-font-size);
-  font-weight: var(--display-20-font-weight);
+  font-weight: var(--display-10-font-weight);
   line-height: 1.2;
   color: var(--in-content-text-color);
 }
@@ -224,6 +228,11 @@ p, h1 {
   margin-block-end: calc(var(--base-unit) * 4);
 }
 
+.alt-heading--larger {
+  font-size: var(--title-30-font-size);
+  font-weight: var(--title-30-font-weight);
+}
+
 /* Alternative style for a subheading (i.e. h2). It features an icon */
 /* +--------+-------------+
 *  | [Icon] | Lorem ipsum |
@@ -395,15 +404,15 @@ Form controls
 }
 
 .badge--success {
-  background: var(--success-50);
+  background: var(--success-background);
 }
 
 .badge--warning {
-  background: var(--warning-50);
+  background: var(--warning-background);
 }
 
 .badge--error {
-  background: var(--error-50);
+  background: var(--error-background);
 }
 
 /*
@@ -413,7 +422,7 @@ Form controls
   background-color: var(--white-100); /* from common.inc.css */
   border-radius: var(--card-shadow-blur-radius); /* from common.inc.css */
   box-shadow: 0 1px 4px var(--grey-90-a10); /* from common.inc.css */
-  padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
+  padding-block: calc(var(--base-unit) * 5);
 }
 
 .card__heading {

devtools/client/aboutdebugging-new/src/components/App.css

@@ -17,7 +17,7 @@
 
 .app {
   /* from common */
-  --sidebar-width: 240px;
+  --sidebar-width: 320px;
   --app-top-padding: 70px;
   --app-bottom-padding: 40px;
   --app-left-padding: 34px;
@@ -57,4 +57,6 @@
 
 .page {
   max-width: var(--page-width);
+  font-size: var(--body-20-font-size);
+  font-weight: var(--body-20-font-weight);
 }

devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css

@@ -21,7 +21,7 @@
   grid-column-gap: var(--main-heading-icon-gap);
   grid-template-areas:
   "icon title    action"
-  "icon subtitle action";
+  "icon subtitle .";
   grid-template-columns: var(--main-heading-icon-size) 1fr max-content;
   grid-template-rows: 1fr max-content;
 
@@ -38,9 +38,5 @@
   grid-area: subtitle;
 }
 .runtime-info__action {
-  align-self: start;
-  /* The default-button has a font-size of 1em at the moment, this rule should not be
-   * necessary after the first patch from Bug 1525615 lands. */
-  font-size: var(--base-font-size);
   grid-area: action;
 }

devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css

@@ -20,6 +20,7 @@
                        "status . toggle";
   grid-template-columns: auto 1fr auto;
   grid-column-gap: calc(var(--base-unit) * 2);
+  grid-row-gap: var(--base-unit);
 }
 
 .connect-page__usb-section__heading__toggle {

devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js

@@ -207,7 +207,7 @@ class ConnectPage extends PureComponent {
         },
         dom.h1(
           {
-            className: "alt-heading",
+            className: "alt-heading alt-heading--larger",
           },
           "Setup"
         ),
@@ -258,7 +258,7 @@ class ConnectPage extends PureComponent {
           {
             id: "about-debugging-setup-connect-heading",
           },
-          dom.h1(
+          dom.h2(
             {
               className: "alt-heading",
             },

devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css

@@ -20,7 +20,7 @@
   grid-column-gap: var(--header-col-gap);
   align-items: center;
 
-  padding-block: calc(var(--base-unit) * 4);
+  padding-block-end: calc(var(--base-unit) * 4);
   padding-inline: calc(var(--base-unit) * 5);
 }
 
@@ -39,10 +39,8 @@
   padding-inline-start: calc(var(--base-unit) * 5
     + var(--header-col-gap) + var(--icon-size));
   padding-inline-end: calc(var(--base-unit) * 5);
-  padding-block-end: calc(var(--base-unit) * 4);
 }
 
 .connect-section__extra {
   border-block-start: 1px solid var(--card-separator-color);
-  padding-block-end: calc(var(--base-unit) * 4);
 }

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

@@ -35,7 +35,7 @@ class DebugTargetList extends PureComponent {
       {
         id: "about-debugging-debug-target-list-empty",
       },
-      dom.span(
+      dom.p(
         {
           className: "js-debug-target-list-empty",
         },
@@ -53,22 +53,23 @@ class DebugTargetList extends PureComponent {
       targets,
     } = this.props;
 
-    return dom.ul(
+    return targets.length === 0
-      {
+      ? this.renderEmptyList()
-        className: "debug-target-list js-debug-target-list",
+      : dom.ul(
-      },
+        {
-      targets.length === 0
+          className: "debug-target-list js-debug-target-list",
-        ? this.renderEmptyList()
+        },
-        : targets.map((target, key) =>
+        targets.map((target, key) =>
-            DebugTargetItem({
+          DebugTargetItem({
-              actionComponent,
+            actionComponent,
-              additionalActionsComponent,
+            additionalActionsComponent,
-              detailComponent,
+            detailComponent,
-              dispatch,
+            dispatch,
-              key,
+            key,
-              target,
+            target,
-            })),
+          })
-    );
+        ),
+      );
   }
 }
 

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

@@ -22,5 +22,5 @@
 }
 
 .service-worker-action__status--running::before {
-  background-color: var(--success-50);
+  background-color: var(--success-background);
 }

devtools/client/aboutdebugging-new/src/components/shared/Message.css

@@ -3,18 +3,21 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .message--level-error {
-  --message-color: var(--white-100);
+  --message-color: var(--error-text);
-  --message-background-color: var(--error-60);
+  --message-background-color: var(--error-background);
+  --message-icon-color: var(--error-icon);
 }
 
 .message--level-info {
   --message-color: var(--grey-90);
   --message-background-color: var(--grey-20);
+  --message-icon-color: var(--grey-90);
 }
 
 .message--level-warning {
-  --message-color: var(--warning-90);
+  --message-color: var(--warning-text);
-  --message-background-color: var(--warning-50);
+  --message-background-color: var(--warning-background);
+  --message-icon-color: var(--warning-icon);
 }
 
 /*
@@ -31,9 +34,8 @@
   border-radius: var(--base-unit);
   color: var(--message-color);
   display: grid;
-  fill: var(--message-color);
   grid-column-gap: var(--base-unit);
-  grid-template-columns: calc(var(--base-unit) * 6) 1fr auto;  
+  grid-template-columns: calc(var(--base-unit) * 6) 1fr auto;
   grid-template-areas:
     "icon body button";
   margin: calc(var(--base-unit) * 2) 0;
@@ -43,6 +45,7 @@
 
 .message__icon {
   margin: var(--base-unit);
+  fill: var(--message-icon-color);
   grid-area: icon;
 }
 
@@ -54,24 +57,18 @@
 
 .message__button {
   grid-area: button;
+  fill: var(--message-icon-color);
 }
 
-.message__button--warning:hover {
+.message__button:hover {
-  background-color: var(--yellow-60);
+  /* reverse colors with icon when hover state */
+  background-color: var(--message-icon-color);
+  fill: var(--message-background-color);
 }
 
-.message__button--warning:active {
+.message__button:active {
-  background-color: var(--yellow-70);
+  /* reverse colors with text when active state */
+  background-color: var(--message-color);
+  fill: var(--message-background-color);
 }
 
-.message__button--error {
-  fill: white;
-}
-
-.message__button--error:hover {
-  background-color: var(--red-70);
-}
-
-.message__button--error:active {
-  background-color: var(--red-80);
-}

devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.css

@@ -15,6 +15,10 @@
   font-size: var(--message-font-size);
 }
 
+.sidebar__adb-status {
+  margin-block-end: calc(var(--base-unit) * 2);
+}
+
 .sidebar__refresh-usb {
   text-align: center;
 }

devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js

@@ -207,7 +207,7 @@ class Sidebar extends PureComponent {
         ),
         SidebarItem(
           {
-            className: "sidebar-item--overflow sidebar-item--full-width",
+            className: "sidebar__adb-status sidebar-item--full-width",
           },
           dom.hr({ className: "separator separator--breathe" }),
           this.renderAdbStatus(),

devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css

@@ -30,11 +30,6 @@
   padding-inline-end: 0;
 }
 
-/* .sidebar-item--overflow {
-  min-height: var(--category-height);
-  height: auto;
-} */
-
 .sidebar-item__link {
   display: block;
   height: 100%;
@@ -46,7 +41,7 @@
 }
 
 .sidebar-item:not(.sidebar-item--selectable) {
-  color: var(--grey-40);
+  color: var(--grey-50);
 }
 
 .sidebar-item--selectable:hover {

devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.css

@@ -11,11 +11,12 @@
  */
 
 .sidebar-runtime-item__container {
+  box-sizing: border-box;
+  height: var(--category-height);
   align-items: center;
   display: grid;
   grid-column-gap: var(--base-unit);
   grid-template-columns: calc(var(--base-unit) * 6) 1fr auto;
-  height: 100%;
   font-size: var(--body-20-font-size);
   font-weight: var(--body-20-font-weight);
 }
@@ -26,10 +27,14 @@
 }
 
 .sidebar-runtime-item__runtime {
-  line-height: 1.2;
+  line-height: 1;
 }
 
 .sidebar-runtime-item__runtime__details {
   font-size: var(--caption-10-font-size);
   font-weight: var(--caption-10-font-weight);
 }
+
+.sidebar-runtime-item__message:first-of-type {
+  margin-block-start: calc(var(--base-unit) * -1);
+}

devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js

@@ -71,8 +71,7 @@ class SidebarRuntimeItem extends PureComponent {
     return Message(
       {
         level,
-        key: className,
+        className: `${className} sidebar-runtime-item__message`,
-        className,
       },
       Localized(
         {
@@ -159,29 +158,25 @@ class SidebarRuntimeItem extends PureComponent {
       getString("aboutdebugging-sidebar-runtime-connection-status-connected") :
       getString("aboutdebugging-sidebar-runtime-connection-status-disconnected");
 
-    return [
+    return SidebarItem(
-      SidebarItem(
+      {
+        isSelected,
+        to: isConnected ? `/runtime/${encodeURIComponent(runtimeId)}` : null,
+      },
+      dom.section(
         {
-          className: "sidebar-item--tall",
+          className: "sidebar-runtime-item__container",
-          key: "sidebar-item",
-          isSelected,
-          to: isConnected ? `/runtime/${encodeURIComponent(runtimeId)}` : null,
         },
-        dom.section(
+        dom.img(
           {
-            className: "sidebar-runtime-item__container",
+            className: "sidebar-runtime-item__icon ",
-          },
+            src: icon,
-          dom.img(
+            alt: connectionStatus,
-            {
+            title: connectionStatus,
-              className: "sidebar-runtime-item__icon ",
+          }
-              src: icon,
-              alt: connectionStatus,
-              title: connectionStatus,
-            }
-          ),
-          this.renderName(),
-          !isUnavailable && !isConnected ? this.renderConnectButton() : null
         ),
+        this.renderName(),
+        !isUnavailable && !isConnected ? this.renderConnectButton() : null
       ),
       this.renderMessage(
         isConnectionFailed,
@@ -201,7 +196,7 @@ class SidebarRuntimeItem extends PureComponent {
         "about-debugging-sidebar-item-connect-button-connection-not-responding",
         "qa-connection-not-responding"
       ),
-    ];
+    );
   }
 }