Bug 1505126 - Part 1: UX fixes. r=jdescottes,daisuke,Ola
authorBelén Albeza <balbeza@mozilla.com>
Thu, 25 Apr 2019 16:05:08 +0000
changeset 471336 def772263e58819da4b777d99625496d2b87d848
parent 471335 8218cc92ee8d4527c3dd19da32b516c420d75a25
child 471337 155b510b215d6a95bfe57c36df1c57ca8bdfbeff
push id112913
push useropoprus@mozilla.com
push dateThu, 25 Apr 2019 22:21:16 +0000
treeherdermozilla-inbound@5279ac14ae48 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, daisuke, Ola
bugs1505126
milestone68.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 1505126 - Part 1: UX fixes. r=jdescottes,daisuke,Ola Differential Revision: https://phabricator.services.mozilla.com/D28515
devtools/client/aboutdebugging-new/src/base.css
devtools/client/aboutdebugging-new/src/components/App.css
devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css
devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css
devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.js
devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAction.css
devtools/client/aboutdebugging-new/src/components/shared/Message.css
devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.css
devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.css
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js
--- a/devtools/client/aboutdebugging-new/src/base.css
+++ b/devtools/client/aboutdebugging-new/src/base.css
@@ -22,51 +22,52 @@
   --category-padding: 10px;
   --category-transition-duration: 150ms;
 
   --link-color: #0a8dff;
   --link-color-active: #003eaa;
   --link-color-hover: #0060df;
 
   /* Colors from Photon */
-  --success-50: #30e60b;
-  --warning-50: #ffe900;
-  --warning-90: #3e2800;
-  --error-50: #ff0039;
-  --error-60: #d70022;
+  --success-background: #30e60b;
+  --warning-background: #fffbd6; /* from the Web Console */
+  --warning-icon: var(--yellow-65); /* from the Web Console */
+  --warning-text: var(--yellow-80); /* from the Web Console */
+  --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 */
   --grey-50: #737373; /* for ui, no special semantic */
   --grey-90: #0c0c0d; /* for ui, no special semantic */
   --grey-90-a10: rgba(12, 12, 13, 0.1);
   --grey-90-a20: rgba(12, 12, 13, 0.2);
   --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);
   --red-70: #a4000f; /* for ui, no special semantic */
-  --red-80: #5a0002; /* for ui, no special semantic */
   --white-100: #fff; /* for ui, no special semantic */
   --yellow-60: #d7b600; /* for ui, no special semantic */
   --yellow-70: #a47f00; /* for ui, no special semantic */
 
   /* Typography from Photon */
   /* See https://firefox-dev.tools/photon/visuals/typography.html */
   --body-10-font-size: 13px;
   --body-10-font-weight: 400;
   --body-20-font-size: 15px;
   --body-20-font-weight: 400;
   --body-20-font-weight-bold: 700;
   --caption-10-font-size: 11px;
   --caption-10-font-weight: 400;
   --caption-20-font-size: 13px;
   --caption-20-font-weight: 400;
   --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;
   --title-30-font-weight: 300;
 
   /* Global layout vars */
   --page-width: 664px;
   --base-unit: 4px;
@@ -173,18 +174,18 @@ p, h1 {
 }
 
 /*
 * Typography
 */
 
 /* Main style for heading (i.e. h1) */
 .main-heading {
-  font-size: var(--display-20-font-size);
-  font-weight: var(--display-20-font-weight);
+  font-size: var(--display-10-font-size);
+  font-weight: var(--display-10-font-weight);
   line-height: 1.2;
   color: var(--in-content-text-color);
 }
 
 .main-heading__icon {
   width: 100%;
 }
 
@@ -219,16 +220,21 @@ p, h1 {
 .alt-heading {
   font-weight: var(--title-20-font-weight);
   font-size: var(--title-20-font-size);
 
   margin-block-start: 0;
   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 |
 *  +--------+-------------+
 */
 .alt-subheading {
   margin-block-start: calc(var(--base-unit) * 4);
   font-weight: 600;
@@ -390,33 +396,33 @@ Form controls
   padding: var(--base-unit) calc(2 * var(--base-unit));
 }
 
 .badge--info {
   background: var(--highlight-50);
 }
 
 .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);
 }
 
 /*
  * Card UI, from Photon
  */
 .card {
   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 {
   font-size: var(--title-20-font-size); /* Note: this is from Photon Title 20 */
   font-weight: var(--title-20-font-weight); /* Note: this is from Photon Title 20 */
 }
--- a/devtools/client/aboutdebugging-new/src/components/App.css
+++ b/devtools/client/aboutdebugging-new/src/components/App.css
@@ -12,17 +12,17 @@
  *  +-------------+-------------------------------+
  *
  * Some of the values (font sizes, widths, etc.) are the same as
  * about:preferences, which uses the shared common.css
  */
 
 .app {
   /* from common */
-  --sidebar-width: 240px;
+  --sidebar-width: 320px;
   --app-top-padding: 70px;
   --app-bottom-padding: 40px;
   --app-left-padding: 34px;
 
   box-sizing: border-box;
   width: 100vw;
   height: 100vh;
   overflow: hidden; /* we don't want the sidebar to scroll, only the main content */
@@ -52,9 +52,11 @@
   /* padding will give space for card shadow to appear and
      margin will correct the alignment */
   margin-inline: calc(var(--card-shadow-blur-radius) * -1);
   padding-inline: var(--card-shadow-blur-radius);
 }
 
 .page {
   max-width: var(--page-width);
+  font-size: var(--body-20-font-size);
+  font-weight: var(--body-20-font-weight);
 }
--- a/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css
@@ -16,31 +16,27 @@
  */
 .runtime-info {
   align-items: center;
   display: grid;
 
   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;
 
   margin-block-end: calc(var(--base-unit) * 5);
 }
 
 .runtime-info__icon {
   grid-area: icon;
 }
 .runtime-info__title {
   grid-area: title;
 }
 .runtime-info__subtitle {
   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;
 }
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css
@@ -15,16 +15,17 @@
  */
 .connect-page__usb-section__heading {
   display: grid;
   align-items: center;
   grid-template-areas: "title  . toggle"
                        "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 {
   grid-area: toggle;
 }
 
 .connect-page__usb-section__heading__title {
   grid-area: title;
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
@@ -202,17 +202,17 @@ class ConnectPage extends PureComponent 
         className: "page connect-page js-connect-page",
       },
       Localized(
         {
           id: "about-debugging-setup-title",
         },
         dom.h1(
           {
-            className: "alt-heading",
+            className: "alt-heading alt-heading--larger",
           },
           "Setup"
         ),
       ),
       Localized(
         {
           id: "about-debugging-setup-intro",
         },
@@ -253,17 +253,17 @@ class ConnectPage extends PureComponent 
       dom.section(
         {
           className: "connect-page__breather",
         },
         Localized(
           {
             id: "about-debugging-setup-connect-heading",
           },
-          dom.h1(
+          dom.h2(
             {
               className: "alt-heading",
             },
             "Connect a device",
           ),
         ),
         this.renderUsb(),
         this.renderNetwork()
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css
@@ -15,17 +15,17 @@
 .connect-section__header {
   display: grid;
   grid-template-areas: "icon heading";
   grid-template-columns: auto 1fr;
   grid-template-rows: var(--icon-size);
   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);
 }
 
 .connect-section__header__title {
   grid-area: heading;
 }
 
 .connect-section__header__icon {
@@ -34,15 +34,13 @@
   height: var(--icon-size);
 }
 
 .connect-section__content {
   line-height: 1.5;
   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);
 }
\ No newline at end of file
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.js
@@ -30,17 +30,17 @@ class DebugTargetList extends PureCompon
     };
   }
 
   renderEmptyList() {
     return Localized(
       {
         id: "about-debugging-debug-target-list-empty",
       },
-      dom.span(
+      dom.p(
         {
           className: "js-debug-target-list-empty",
         },
         "Nothing yet."
       )
     );
   }
 
@@ -48,28 +48,29 @@ class DebugTargetList extends PureCompon
     const {
       actionComponent,
       additionalActionsComponent,
       detailComponent,
       dispatch,
       targets,
     } = this.props;
 
-    return dom.ul(
-      {
-        className: "debug-target-list js-debug-target-list",
-      },
-      targets.length === 0
-        ? this.renderEmptyList()
-        : targets.map((target, key) =>
-            DebugTargetItem({
-              actionComponent,
-              additionalActionsComponent,
-              detailComponent,
-              dispatch,
-              key,
-              target,
-            })),
-    );
+    return targets.length === 0
+      ? this.renderEmptyList()
+      : dom.ul(
+        {
+          className: "debug-target-list js-debug-target-list",
+        },
+        targets.map((target, key) =>
+          DebugTargetItem({
+            actionComponent,
+            additionalActionsComponent,
+            detailComponent,
+            dispatch,
+            key,
+            target,
+          })
+        ),
+      );
   }
 }
 
 module.exports = DebugTargetList;
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAction.css
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAction.css
@@ -17,10 +17,10 @@
   border-radius: 100%;
   content: "";
   height: calc(var(--base-unit) * 2);
   margin-inline-end: var(--base-unit);
   width: calc(var(--base-unit) * 2);
 }
 
 .service-worker-action__status--running::before {
-  background-color: var(--success-50);
+  background-color: var(--success-background);
 }
--- a/devtools/client/aboutdebugging-new/src/components/shared/Message.css
+++ b/devtools/client/aboutdebugging-new/src/components/shared/Message.css
@@ -1,77 +1,74 @@
 /* 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/. */
 
 .message--level-error {
-  --message-color: var(--white-100);
-  --message-background-color: var(--error-60);
+  --message-color: var(--error-text);
+  --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-background-color: var(--warning-50);
+  --message-color: var(--warning-text);
+  --message-background-color: var(--warning-background);
+  --message-icon-color: var(--warning-icon);
 }
 
 /*
  * Layout of the message
  *
  *  +--------+-----------------+----------+
  *  | Icon   | Message content | closing  |
  *  |        | (several lines) | button   |
  *  |        | (     ...     ) |(optional)|
  *  +--------+-----------------+----------+
  */
 .message {
   background-color: var(--message-background-color);
   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;
   padding: var(--base-unit);
   -moz-context-properties: fill;
 }
 
 .message__icon {
   margin: var(--base-unit);
+  fill: var(--message-icon-color);
   grid-area: icon;
 }
 
 .message__body {
   font-size: var(--message-font-size);
   font-weight: 400;
   grid-area: body;
 }
 
 .message__button {
   grid-area: button;
-}
-
-.message__button--warning:hover {
-  background-color: var(--yellow-60);
-}
-
-.message__button--warning:active {
-  background-color: var(--yellow-70);
+  fill: var(--message-icon-color);
 }
 
-.message__button--error {
-  fill: white;
+.message__button:hover {
+  /* reverse colors with icon when hover state */
+  background-color: var(--message-icon-color);
+  fill: var(--message-background-color);
 }
 
-.message__button--error:hover {
-  background-color: var(--red-70);
+.message__button:active {
+  /* reverse colors with text when active state */
+  background-color: var(--message-color);
+  fill: var(--message-background-color);
 }
 
-.message__button--error:active {
-  background-color: var(--red-80);
-}
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.css
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.css
@@ -10,16 +10,20 @@
 .sidebar__label {
   color: var(--grey-40);
   display: block;
   padding: 12px 0;
   text-align: center;
   font-size: var(--message-font-size);
 }
 
+.sidebar__adb-status {
+  margin-block-end: calc(var(--base-unit) * 2);
+}
+
 .sidebar__refresh-usb {
   text-align: center;
 }
 
 .sidebar__footer {
   align-self: flex-end;
 }
 
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
@@ -202,17 +202,17 @@ class Sidebar extends PureComponent {
               selectedRuntimeId === RUNTIMES.THIS_FIREFOX,
             key: RUNTIMES.THIS_FIREFOX,
             name: "This Firefox",
             to: `/runtime/${RUNTIMES.THIS_FIREFOX}`,
           })
         ),
         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(),
         ),
         this.renderDevices(),
         SidebarItem(
           {
             className: "sidebar-item--breathe sidebar__refresh-usb",
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css
@@ -25,33 +25,28 @@
   height: calc(var(--base-unit) * 9);
 }
 
 .sidebar-item--full-width {
   padding-inline-start: 0;
   padding-inline-end: 0;
 }
 
-/* .sidebar-item--overflow {
-  min-height: var(--category-height);
-  height: auto;
-} */
-
 .sidebar-item__link {
   display: block;
   height: 100%;
 }
 
 .sidebar-item__link,
 .sidebar-item__link:hover {
   color: inherit; /* do not apply usual link colors, but grab this element parent's */
 }
 
 .sidebar-item:not(.sidebar-item--selectable) {
-  color: var(--grey-40);
+  color: var(--grey-50);
 }
 
 .sidebar-item--selectable:hover {
   background-color: var(--sidebar-background-hover);
 }
 
 .sidebar-item--selected {
   color: var(--sidebar-selected-color);
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.css
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.css
@@ -6,30 +6,35 @@
  * Layout of a runtime sidebar item
  *
  *  +--------+----------------+---------------------------+
  *  | Icon   | Runtime name   | Connect button            |
  *  +--------+----------------+---------------------------+
  */
 
 .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);
 }
 
 .sidebar-runtime-item__icon {
   fill: currentColor;
   -moz-context-properties: fill;
 }
 
 .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);
+}
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js
@@ -66,18 +66,17 @@ class SidebarRuntimeItem extends PureCom
   renderMessage(flag, level, localizationId, className) {
     if (!flag) {
       return null;
     }
 
     return Message(
       {
         level,
-        key: className,
-        className,
+        className: `${className} sidebar-runtime-item__message`,
       },
       Localized(
         {
           id: localizationId,
         },
         dom.p({ className: "word-wrap-anywhere" }, localizationId)
       )
     );
@@ -154,39 +153,35 @@ class SidebarRuntimeItem extends PureCom
       isUnavailable,
       runtimeId,
     } = this.props;
 
     const connectionStatus = isConnected ?
       getString("aboutdebugging-sidebar-runtime-connection-status-connected") :
       getString("aboutdebugging-sidebar-runtime-connection-status-disconnected");
 
-    return [
-      SidebarItem(
+    return SidebarItem(
+      {
+        isSelected,
+        to: isConnected ? `/runtime/${encodeURIComponent(runtimeId)}` : null,
+      },
+      dom.section(
         {
-          className: "sidebar-item--tall",
-          key: "sidebar-item",
-          isSelected,
-          to: isConnected ? `/runtime/${encodeURIComponent(runtimeId)}` : null,
+          className: "sidebar-runtime-item__container",
         },
-        dom.section(
+        dom.img(
           {
-            className: "sidebar-runtime-item__container",
-          },
-          dom.img(
-            {
-              className: "sidebar-runtime-item__icon ",
-              src: icon,
-              alt: connectionStatus,
-              title: connectionStatus,
-            }
-          ),
-          this.renderName(),
-          !isUnavailable && !isConnected ? this.renderConnectButton() : null
+            className: "sidebar-runtime-item__icon ",
+            src: icon,
+            alt: connectionStatus,
+            title: connectionStatus,
+          }
         ),
+        this.renderName(),
+        !isUnavailable && !isConnected ? this.renderConnectButton() : null
       ),
       this.renderMessage(
         isConnectionFailed,
         MESSAGE_LEVEL.ERROR,
         "about-debugging-sidebar-item-connect-button-connection-failed",
         "qa-connection-error"
       ),
       this.renderMessage(
@@ -196,13 +191,13 @@ class SidebarRuntimeItem extends PureCom
         "qa-connection-timeout"
       ),
       this.renderMessage(
         isConnectionNotResponding,
         MESSAGE_LEVEL.WARNING,
         "about-debugging-sidebar-item-connect-button-connection-not-responding",
         "qa-connection-not-responding"
       ),
-    ];
+    );
   }
 }
 
 module.exports = FluentReact.withLocalization(SidebarRuntimeItem);