Bug 1507632 - Use Photon colors for console icons; r=nchevobbe
authorFlorens Verschelde <florens@fvsch.com>
Fri, 16 Nov 2018 17:38:22 +0000
changeset 446830 e58fd91eddcdbdf00c8a1902026c1d4fe0845396
parent 446829 3e9dee27eade4a155aec2748424e414a1900ece2
child 446831 669cd919724934a05579ed2e561d04dedd11e93a
push id35052
push userapavel@mozilla.com
push dateSat, 17 Nov 2018 11:25:40 +0000
treeherdermozilla-central@efc1da42132b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1507632
milestone65.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 1507632 - Use Photon colors for console icons; r=nchevobbe Differential Revision: https://phabricator.services.mozilla.com/D12068
devtools/client/themes/variables.css
devtools/client/themes/webconsole.css
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -232,36 +232,39 @@
    */
   --magenta-50: #ff1ad9;
   --magenta-65: #dd00a9;
   --magenta-70: #b5007f;
 
   --purple-50: #9400ff;
   --purple-60: #8000d7;
 
+  --blue-30: #75baff;
   --blue-40: #45a1ff;
   --blue-50: #0a84ff;
   --blue-55: #0074e8;
   --blue-60: #0060df;
   --blue-70: #003eaa;
 
   --teal-60: #00c8d7;
   --teal-70: #008ea4;
 
   --red-20: #ffb3d2;
+  --red-40: #ff3b6b;
   --red-50: #ff0039;
   --red-60: #d70022;
   --red-70: #a4000f;
 
   --green-50: #30e60b;
   --green-60: #12bc00;
   --green-70: #058b00;
 
   --yellow-50: #ffe900;
   --yellow-60: #d7b600;
+  --yellow-65: #be9b00;
   --yellow-80: #715100;
 
   --grey-10: #f9f9fa;
   --grey-20: #ededf0;
   --grey-25: #e0e0e2;
   --grey-30: #d7d7db;
   --grey-30-a40: rgba(215, 215, 219, 0.4);
   --grey-30-a90: rgba(215, 215, 219, 0.9);
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -13,38 +13,38 @@
   /* Width of the left gutter where icons appear */
   --console-inline-start-gutter: 32px;
   /* Icons perfectly centered in the left gutter "feel" closer to the window
    * edge than to message text. This value pushes them slightly to the right. */
   --console-icon-horizontal-offset: 1px;
 }
 
 .theme-dark {
-  --console-input-icon-color: hsl(0, 0%, 50%, 0.5);
-  --console-input-icon-focused: hsl(210, 100%, 73%);
-  --console-output-icon-info: hsl(210, 6%, 52%);
-  --console-output-icon-input: hsl(210, 6%, 76%);
-  --console-output-icon-error: hsl(0, 100%, 65%);
-  --console-output-icon-warning: hsl(36, 100%, 60%);
+  --console-input-icon-color: var(--grey-60);
+  --console-input-icon-focused: var(--blue-30);
+  --console-output-icon-medium-color: var(--grey-50);
+  --console-output-icon-strong-color: var(--grey-30);
+  --console-output-icon-error-color: var(--red-40);
+  --console-output-icon-warning-color: var(--yellow-60);
   --console-output-indent-border-color: var(--theme-highlight-blue);
   --error-color: var(--red-20);
-  --error-background-color: hsl(352, 79%, 62%, 0.17);
+  --error-background-color: hsl(345, 23%, 24%);
   --warning-color: hsl(43, 94%, 81%);
   --warning-background-color: hsl(42, 37%, 19%);
   --console-output-color: white;
   --repeat-bubble-background-color: var(--blue-60);
 }
 
 .theme-light {
-  --console-input-icon-color: hsl(210, 6%, 75%);
-  --console-input-icon-focused: hsl(210, 100%, 44%);
-  --console-output-icon-info: hsl(210, 6%, 67%);
-  --console-output-icon-input: hsl(210, 0%, 34%);
-  --console-output-icon-error: hsl(0, 90%, 45%);
-  --console-output-icon-warning: hsl(36, 100%, 45%);
+  --console-input-icon-color: var(--grey-40);
+  --console-input-icon-focused: var(--blue-55);
+  --console-output-icon-medium-color: var(--grey-40);
+  --console-output-icon-strong-color: var(--grey-60);
+  --console-output-icon-error-color: var(--red-60);
+  --console-output-icon-warning-color: var(--yellow-65);
   --console-output-indent-border-color: var(--theme-highlight-blue);
   --error-color: var(--red-70);
   --error-background-color: hsl(344, 73%, 97%);
   --warning-color: var(--yellow-80);
   --warning-background-color: hsl(54, 100%, 92%);
   --console-output-color: var(--grey-90);
   --repeat-bubble-background-color: var(--theme-highlight-blue);
 }
@@ -180,37 +180,37 @@ a {
 /* Icon on unindented row should be centered within the left gutter */
 .message > .indent[data-indent="0"] + .icon {
   width: 24px;
   margin-inline-start: var(--console-icon-horizontal-offset);
   margin-inline-end: calc(4px - var(--console-icon-horizontal-offset));
 }
 
 .message.command > .icon {
-  color: var(--console-output-icon-input);
+  color: var(--console-output-icon-strong-color);
   background-image: url(chrome://devtools/skin/images/webconsole/input.svg);
 }
 
 .message.result > .icon {
-  color: var(--console-output-icon-info);
+  color: var(--console-output-icon-medium-color);
   background-image: url(chrome://devtools/skin/images/webconsole/return.svg);
 }
 
 .message.info > .icon {
-  color: var(--console-output-icon-info);
+  color: var(--console-output-icon-medium-color);
   background-image: url(chrome://devtools/skin/images/webconsole/info.svg);
 }
 
 .message.error > .icon {
-  color: var(--console-output-icon-error);
+  color: var(--console-output-icon-error-color);
   background-image: url(chrome://devtools/skin/images/alert.svg);
 }
 
 .message.warn > .icon {
-  color: var(--console-output-icon-warning);
+  color: var(--console-output-icon-warning-color);
   background-image: url(chrome://devtools/skin/images/alert.svg);
 }
 
 .message.navigationMarker > .icon {
   color: var(--object-color);
   background-image: url(chrome://devtools/skin/images/globe.svg);
 }
 
@@ -646,46 +646,41 @@ a.learn-more-link.webconsole-learn-more-
   font-style: italic;
   -moz-user-select: none;
 }
 
 .webconsole-filterbar-filtered-messages .reset-filters-button {
   margin-inline-start: 0.5em;
 }
 
-/* Special casing String reps so they are legible */
-.webconsole-output-wrapper .message .message-body > .objectBox-string {
-  color: currentColor;
-}
-
-/* Special casing warning and error string colors so they are legible */
-.theme-dark .message.error .objectBox-string,
-.theme-light .message.error .objectBox-string,
-.theme-dark .message.warn .objectBox-string,
-.theme-light .message.warn .objectBox-string {
-  color: var(--error-color);
+/* Special casing String reps, and warning/error string colors
+ * so they are legible */
+.message .message-body > .objectBox-string,
+.message.error .objectBox-string,
+.message.warn .objectBox-string {
+  color: inherit;
 }
 
 /* Special casing dark-theme error and warning ObjectInspector colors */
-.theme-dark .webconsole-output-wrapper .message.error .tree.object-inspector .object-label,
-.theme-dark .webconsole-output-wrapper .message.error .tree.object-inspector .object-label *,
-.theme-dark .webconsole-output-wrapper .message.warn .tree.object-inspector .object-label,
-.theme-dark .webconsole-output-wrapper .message.warn .tree.object-inspector .object-label *,
-.theme-dark .webconsole-output-wrapper .message.error .objectLeftBrace,
-.theme-dark .webconsole-output-wrapper .message.error .objectRightBrace,
-.theme-dark .webconsole-output-wrapper .message.error .arrayLeftBracket,
-.theme-dark .webconsole-output-wrapper .message.error .arrayRightBracket,
-.theme-dark .webconsole-output-wrapper .message.warn .objectLeftBrace,
-.theme-dark .webconsole-output-wrapper .message.warn .objectRightBrace,
-.theme-dark .webconsole-output-wrapper .message.warn .arrayLeftBracket,
-.theme-dark .webconsole-output-wrapper .message.warn .arrayRightBracket {
+.theme-dark .message.error .tree.object-inspector .object-label,
+.theme-dark .message.error .tree.object-inspector .object-label *,
+.theme-dark .message.warn .tree.object-inspector .object-label,
+.theme-dark .message.warn .tree.object-inspector .object-label *,
+.theme-dark .message.error .objectLeftBrace,
+.theme-dark .message.error .objectRightBrace,
+.theme-dark .message.error .arrayLeftBracket,
+.theme-dark .message.error .arrayRightBracket,
+.theme-dark .message.warn .objectLeftBrace,
+.theme-dark .message.warn .objectRightBrace,
+.theme-dark .message.warn .arrayLeftBracket,
+.theme-dark .message.warn .arrayRightBracket {
   color: var(--theme-body-color);
 }
-.theme-dark .webconsole-output-wrapper .message.error .tree.object-inspector,
-.theme-dark .webconsole-output-wrapper .message.warn .tree.object-inspector {
+.theme-dark .message.error .tree.object-inspector,
+.theme-dark .message.warn .tree.object-inspector {
   --console-output-indent-border-color: var(--theme-body-color);
 }
 
 .webconsole-output-wrapper .message-flex-body > .message-body {
   overflow: hidden;
 }
 
 .webconsole-output-wrapper .message-body > * {