Bug 1547182 - Added borders for error / warning messages r=jdescottes
authorOla Gasidlo <ogasidlo@mozilla.com>
Fri, 03 May 2019 07:32:32 +0000
changeset 531254 de1a60c3fbf2078321aa69300a3ee0c277ea59bc
parent 531253 451701e88d92935b77385235832865dabe8c2942
child 531255 f52499501a149497888857d4dc23ec5adca2c352
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1547182
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 1547182 - Added borders for error / warning messages r=jdescottes Added borders for error / warning messages. Reduced line height in message body. Added more space between device list / message and refresh device button Differential Revision: https://phabricator.services.mozilla.com/D29652
devtools/client/aboutdebugging-new/src/base.css
devtools/client/aboutdebugging-new/src/components/shared/Message.css
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css
--- a/devtools/client/aboutdebugging-new/src/base.css
+++ b/devtools/client/aboutdebugging-new/src/base.css
@@ -24,19 +24,21 @@
 
   --link-color: #0a8dff;
   --link-color-active: #003eaa;
   --link-color-hover: #0060df;
 
   /* Colors from Photon */
   --success-background: #30e60b;
   --warning-background: #fffbd6; /* from the Web Console */
+  --warning-border: rgba(164, 127, 0, 0.27); /* yellow-70(#a47f00) at 27% */
   --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-border: rgba(90, 0, 2, 0.16); /*  red-80(#5a0002) at 16% */
   --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);
--- a/devtools/client/aboutdebugging-new/src/components/shared/Message.css
+++ b/devtools/client/aboutdebugging-new/src/components/shared/Message.css
@@ -1,41 +1,45 @@
 /* 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-background-color: var(--error-background);
+  --message-border-color: var(--error-border);
   --message-color: var(--error-text);
-  --message-background-color: var(--error-background);
   --message-icon-color: var(--error-icon);
 }
 
 .message--level-info {
+  --message-background-color: var(--grey-20);
+  --message-border-color: transparent;
   --message-color: var(--grey-90);
-  --message-background-color: var(--grey-20);
   --message-icon-color: var(--grey-90);
 }
 
 .message--level-warning {
+  --message-background-color: var(--warning-background);
+  --message-border-color: var(--warning-border);
   --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: 1px solid var(--message-border-color);
   border-radius: var(--base-unit);
   color: var(--message-color);
   display: grid;
   grid-column-gap: var(--base-unit);
   grid-template-columns: calc(var(--base-unit) * 6) 1fr auto;
   grid-template-areas:
     "icon body button";
   margin: calc(var(--base-unit) * 2) 0;
@@ -45,19 +49,21 @@
 
 .message__icon {
   margin: var(--base-unit);
   fill: var(--message-icon-color);
   grid-area: icon;
 }
 
 .message__body {
+  align-self: center;
   font-size: var(--message-font-size);
   font-weight: 400;
   grid-area: body;
+  line-height: 1.6;
 }
 
 .message__button {
   grid-area: button;
   fill: var(--message-icon-color);
 }
 
 .message__button:hover {
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css
@@ -43,11 +43,11 @@
   background-color: var(--sidebar-background-hover);
 }
 
 .sidebar-item--selected {
   color: var(--sidebar-selected-color);
 }
 
 .sidebar-item--breathe {
-  margin-block-start: calc(2 * var(--base-unit));
+  margin-block-start: calc(6 * var(--base-unit));
   margin-block-end: calc(2 * var(--base-unit));
 }