Bug 1479750 - Part 2: Improve console alignment, visual consistency and icons; r=nchevobbe
authorfvsch <florens@fvsch.com>
Thu, 23 Aug 2018 08:00:24 +0000
changeset 433017 ce26d250b22ddb97ab1455126c08ac05af26e056
parent 433016 707789fe9986fba796739ab359089a5af30e1b43
child 433018 5412e9ef6314e378952186b398966a77b24edb7e
push id68180
push usernchevobbe@mozilla.com
push dateThu, 23 Aug 2018 09:55:53 +0000
treeherderautoland@ce26d250b22d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1479750
milestone63.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 1479750 - Part 2: Improve console alignment, visual consistency and icons; r=nchevobbe Depends on D3482 Differential Revision: https://phabricator.services.mozilla.com/D3483
devtools/client/jar.mn
devtools/client/themes/debugger.css
devtools/client/themes/images/commandline-icon.svg
devtools/client/themes/images/webconsole/alert.svg
devtools/client/themes/images/webconsole/info.svg
devtools/client/themes/images/webconsole/input.svg
devtools/client/themes/images/webconsole/return.svg
devtools/client/themes/variables.css
devtools/client/themes/webconsole.css
devtools/client/webconsole/components/CollapseButton.js
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -125,17 +125,16 @@ devtools.jar:
     skin/images/performance-details-flamegraph.svg (themes/images/performance-details-flamegraph.svg)
     skin/breadcrumbs.css (themes/breadcrumbs.css)
     skin/chart.css (themes/chart.css)
     skin/widgets.css (themes/widgets.css)
     skin/images/power.svg (themes/images/power.svg)
     skin/images/filetypes/dir-close.svg (themes/images/filetypes/dir-close.svg)
     skin/images/filetypes/dir-open.svg (themes/images/filetypes/dir-open.svg)
     skin/images/filetypes/globe.svg (themes/images/filetypes/globe.svg)
-    skin/images/commandline-icon.svg (themes/images/commandline-icon.svg)
     skin/images/alerticon-warning.png (themes/images/alerticon-warning.png)
     skin/images/alerticon-warning@2x.png (themes/images/alerticon-warning@2x.png)
     skin/rules.css (themes/rules.css)
     skin/images/command-paintflashing.svg (themes/images/command-paintflashing.svg)
     skin/images/command-screenshot.svg (themes/images/command-screenshot.svg)
     skin/images/command-responsivemode.svg (themes/images/command-responsivemode.svg)
     skin/images/command-pick.svg (themes/images/command-pick.svg)
     skin/images/command-pick-accessibility.svg (themes/images/command-pick-accessibility.svg)
@@ -146,16 +145,20 @@ devtools.jar:
     skin/images/command-measure.svg (themes/images/command-measure.svg)
     skin/images/command-noautohide.svg (themes/images/command-noautohide.svg)
     skin/images/command-chevron.svg (themes/images/command-chevron.svg)
     skin/markup.css (themes/markup.css)
     skin/images/editor-error.png (themes/images/editor-error.png)
     skin/images/breakpoint.svg (themes/images/breakpoint.svg)
     skin/webconsole.css (themes/webconsole.css)
     skin/images/webconsole.svg (themes/images/webconsole.svg)
+    skin/images/webconsole/alert.svg (themes/images/webconsole/alert.svg)
+    skin/images/webconsole/info.svg (themes/images/webconsole/info.svg)
+    skin/images/webconsole/input.svg (themes/images/webconsole/input.svg)
+    skin/images/webconsole/return.svg (themes/images/webconsole/return.svg)
     skin/images/breadcrumbs-scrollbutton.svg (themes/images/breadcrumbs-scrollbutton.svg)
     skin/animation.css (themes/animation.css)
     skin/animationinspector.css (themes/animationinspector.css)
     skin/canvasdebugger.css (themes/canvasdebugger.css)
     skin/debugger.css (themes/debugger.css)
     skin/perf.css (themes/perf.css)
     skin/performance.css (themes/performance.css)
     skin/memory.css (themes/memory.css)
--- a/devtools/client/themes/debugger.css
+++ b/devtools/client/themes/debugger.css
@@ -280,20 +280,26 @@
   max-height: 125px;
 }
 
 .dbg-expression {
   height: 20px;
 }
 
 .dbg-expression-arrow {
-  background-image: var(--theme-command-line-image-focus);
-  width: 16px;
-  height: 16px;
-  margin: 2px;
+  background-image: var(--theme-console-input-image);
+  width: 12px;
+  height: 12px;
+  margin: 4px;
+  -moz-context-properties: fill;
+  fill: #75BFFF;
+}
+
+.theme-light .dbg-expression-arrow {
+  fill: #0060DF;
 }
 
 .dbg-expression-input {
   color: inherit;
 }
 
 .dbg-expression-button {
   -moz-appearance: none;
deleted file mode 100644
--- a/devtools/client/themes/images/commandline-icon.svg
+++ /dev/null
@@ -1,42 +0,0 @@
-<!-- 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/. -->
-<svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <style>
-      g {
-        display: none;
-      }
-
-      #light-theme:target,
-      #light-theme-focus:target ~ #light-theme,
-      #dark-theme:target,
-      #dark-theme-focus:target ~ #dark-theme {
-        display: inline;
-      }
-
-      #light-theme-focus:target ~ #light-theme {
-        fill: #0060DF;
-      }
-      #dark-theme-focus:target ~ #dark-theme {
-        fill: #75BFFF;
-      }
-
-      /* Unfocused states */
-      #light-theme,
-      #dark-theme {
-        fill: rgba(128, 128, 128, .5);
-      }
-    </style>
-  </defs>
-  <g id="light-theme-focus"/>
-  <g id="light-theme">
-    <path d="M7.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
-    <path d="M2.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
-  </g>
-  <g id="dark-theme-focus"/>
-  <g id="dark-theme">
-    <path d="M7.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
-    <path d="M2.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
-  </g>
-</svg>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/webconsole/alert.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="context-fill #0b0b0b">
+  <path d="M1.12 9.4L5 1.6c.41-.81 1.58-.81 2 0l3.88 7.78a1.11 1.11 0 0 1-1 1.61H2.11a1.11 1.11 0 0 1-1-1.6zM6 8.4c-.55 0-1 .4-1 .9s.45.9 1 .9 1-.4 1-.9-.45-.9-1-.9zm0-4.9c-.55 0-1 .36-1 .8v2.4c0 .44.45.8 1 .8s1-.36 1-.8V4.3c0-.44-.45-.8-1-.8z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/webconsole/info.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="context-fill #0b0b0b">
+  <path d="M6 1a5 5 0 1 1 0 10A5 5 0 0 1 6 1zm0 1.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0 3c.55 0 1 .36 1 .8v2.4c0 .44-.45.8-1 .8s-1-.36-1-.8V6.3c0-.44.45-.8 1-.8z" fill-rule="evenodd"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/webconsole/input.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="context-fill #0b0b0b">
+  <path d="M11.04 5.46L7.29 1.71a.75.75 0 0 0-1.06 1.06L9.45 6 6.23 9.21a.75.75 0 1 0 1.06 1.06l3.75-3.75c.3-.3.3-.77 0-1.06z"/>
+  <path d="M6.04 5.46L2.29 1.71a.75.75 0 0 0-1.06 1.06L4.45 6 1.23 9.21a.75.75 0 1 0 1.06 1.06l3.75-3.75c.3-.3.3-.77 0-1.06z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/webconsole/return.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="context-fill #0b0b0b">
+  <path d="M3.87 5.25h5.88a.75.75 0 1 1 0 1.5H3.89l2.46 2.46a.75.75 0 1 1-1.06 1.06L1.54 6.52a.75.75 0 0 1 0-1.06l3.75-3.75a.75.75 0 0 1 1.06 1.06L3.87 5.25z"/>
+</svg>
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -97,20 +97,16 @@
   --theme-arrowpanel-background: -moz-field;
   --theme-arrowpanel-color: -moz-fieldText;
   --theme-arrowpanel-border-color: ThreeDShadow;
   --theme-arrowpanel-separator: ThreeDShadow;
   --theme-arrowpanel-dimmed: hsla(0,0%,80%,.3);
   --theme-arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
   --theme-arrowpanel-disabled-color: GrayText;
 
-  /* Command line */
-  --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme);
-  --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus);
-
   --theme-codemirror-gutter-background: #f4f4f4;
   --theme-messageCloseButtonFilter: invert(0);
 }
 
 /*
  * For doorhangers elsewhere in Firefox, Mac uses fixed colors rather than
  * system colors.
  */
@@ -204,20 +200,16 @@
   --theme-arrowpanel-background: var(--grey-60);
   --theme-arrowpanel-color: rgb(249,249,250);
   --theme-arrowpanel-border-color: #27272b;
   --theme-arrowpanel-separator: rgba(249,249,250,.1);
   --theme-arrowpanel-dimmed: rgba(249,249,250,.1);
   --theme-arrowpanel-dimmed-further: rgba(249,249,250,.15);
   --theme-arrowpanel-disabled-color: rgba(249,249,250,.5);
 
-  /* Command line */
-  --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme);
-  --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus);
-
   --theme-codemirror-gutter-background: #262b37;
   --theme-messageCloseButtonFilter: invert(1);
 }
 
 :root {
   --theme-focus-border-color-textbox: #0675d3;
   --theme-textbox-box-shadow: rgba(97,181,255,.75);
 
@@ -239,16 +231,20 @@
 
   /* The photon animation curve */
   --animation-curve: cubic-bezier(.07,.95,0,1);
 
   /* Images */
   --select-arrow-image: url(chrome://devtools/skin/images/select-arrow.svg);
   --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
   --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
+  --theme-console-alert-image: url(chrome://devtools/skin/images/webconsole/alert.svg);
+  --theme-console-info-image: url(chrome://devtools/skin/images/webconsole/info.svg);
+  --theme-console-input-image: url(chrome://devtools/skin/images/webconsole/input.svg);
+  --theme-console-return-image: url(chrome://devtools/skin/images/webconsole/return.svg);
 
   /* Firefox Colors CSS Variables v1.0.3
    * Colors are taken from: https://github.com/FirefoxUX/design-tokens */
   --magenta-50: #ff1ad9;
   --magenta-65: #dd00a9;
   --magenta-70: #b5007f;
 
   --purple-50: #9400ff;
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -1,17 +1,59 @@
 /* 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/. */
 
 /* Webconsole specific theme variables */
+:root {
+  /* Output rows should be 20px tall for a single line of text;
+   * 20 = 3 (top padding) + 14 (line-height) + 3 (bottom padding)
+   */
+  --console-output-font-size: 11px;
+  --console-output-line-height: calc(14 / 11);
+  --console-output-vertical-padding: 3px;
+  /* 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-arrow-color: hsl(210, 6%, 52%);
+  --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-output-indent-border-color: var(--theme-highlight-blue);
+  --error-color: hsl(0, 100%, 79%);
+  --error-background-color: hsl(352, 79%, 62%, 0.17);
+  --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 {
-  --error-color: #FF0000;
-  --error-background-color: #FFEBEB;
-  --warning-background-color: #FFFFC8;
+  --console-arrow-color: hsl(210, 6%, 67%);
+  --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, 6%, 34%);
+  --console-output-icon-error: hsl(0, 90%, 45%);
+  --console-output-icon-warning: hsl(36, 100%, 45%);
+  --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);
 }
 
 /* General output styles */
 
 a {
   -moz-user-focus: normal;
   cursor: pointer;
   text-decoration: underline;
@@ -22,88 +64,146 @@ a {
 *:visited { }
 
 * {
   box-sizing: border-box;
 }
 
 .message {
   display: flex;
-  padding: 0 7px;
   width: 100%;
-  box-sizing: border-box;
+  /* Avoid vertical padding, so that we can draw full-height items (e.g. indent guides).
+   * Use vertical margins on children instead. */
+  padding-inline-start: 1px;
+  padding-inline-end: 8px;
+  border-inline-start: solid 3px transparent;
+  font-size: var(--console-output-font-size);
+  line-height: var(--console-output-line-height);
+}
+
+.message:hover {
+  border-inline-start-color: var(--theme-highlight-blue);
+}
+
+.message.error {
+  color: var(--error-color);
+  background-color: var(--error-background-color);
+}
+
+.message.warn {
+  color: var(--warning-color);
+  background-color: var(--warning-background-color);
+}
+
+.message.startGroup,
+.message.startGroupCollapsed {
+  --console-output-indent-border-color: transparent;
 }
 
 .message > .prefix,
 .message > .timestamp {
   flex: none;
   color: var(--theme-comment);
-  margin: 3px 6px 0 0;
+  margin: var(--console-output-vertical-padding) 4px;
+}
+
+@media (max-width: 500px) {
+  .message > .timestamp {
+    display: none;
+  }
 }
 
 .message > .indent {
   flex: none;
+  display: inline-block;
+  margin-inline-start: 12px;
+  border-inline-end: solid 1px var(--console-output-indent-border-color);
+}
+
+.message > .indent[data-indent="0"] {
+  display: none;
+}
+
+/* Center first level indent within the left gutter */
+.message:not(.startGroup):not(.startGroupCollapsed) > .indent[data-indent="1"] {
+  margin-inline-start: calc(1px + var(--console-icon-horizontal-offset));
+  margin-inline-end: calc(11px - var(--console-icon-horizontal-offset));
 }
 
 .message > .icon {
   flex: none;
-  margin: 3px 6px 0 0;
-  padding: 0 4px;
-  height: 1em;
   align-self: flex-start;
+  /* Width and height must be a multiples of 2px to avoid blurry images.
+   * Height should match the text's line-height for optimal vertical alignment */
+  width: 14px;
+  height: 14px;
+  margin: var(--console-output-vertical-padding) 4px;
+  background-image: none;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
-.theme-light .message.error {
-  color: var(--error-color);
-  background-color: var(--error-background-color);
+/* 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));
 }
 
-.theme-light .message.warn {
-  background-color: var(--warning-background-color);
+.message.command > .icon {
+  color: var(--console-output-icon-input);
+  background-image: var(--theme-console-input-image);
+}
+
+.message.result > .icon {
+  color: var(--console-output-icon-info);
+  background-image: var(--theme-console-return-image);
 }
 
-.message > .icon::before {
-  content: "";
-  background-image: url(chrome://devtools/skin/images/webconsole.svg);
-  background-position: 12px 12px;
-  background-repeat: no-repeat;
-  background-size: 72px 60px;
-  width: 12px;
-  height: 12px;
-  display: inline-block;
+.message.info > .icon {
+  color: var(--console-output-icon-info);
+  background-image: var(--theme-console-info-image);
 }
 
-.theme-light .message > .icon::before {
-  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
+.message.error > .icon {
+  color: var(--console-output-icon-error);
+  background-image: var(--theme-console-alert-image);
+}
+
+.message.warn > .icon {
+  color: var(--console-output-icon-warning);
+  background-image: var(--theme-console-alert-image);
 }
 
 .message > .message-body-wrapper {
   flex: auto;
   min-width: 0px;
-  margin: 3px;
+  margin: var(--console-output-vertical-padding) 0;
 }
 
 .message-body-wrapper .table-widget-body {
   overflow: visible;
 }
 
-/* The red bubble that shows the number of times a message is repeated */
+/* The bubble that shows the number of times a message is repeated */
 .message-repeats {
   -moz-user-select: none;
   flex-shrink: 0;
-  margin: 2px 6px;
+  margin: 2px 5px;
   padding: 0 6px;
   height: 1.25em;
   color: white;
-  background-color: red;
+  background-color: var(--repeat-bubble-background-color);
   border-radius: 40px;
   font: message-box;
-  font-size: 0.9em;
-  font-weight: 600;
-  margin-inline-start: 5px;
+  font-size: 0.8em;
+  font-weight: normal;
 }
 
 .message-repeats[value="1"] {
   display: none;
 }
 
 .message-location {
   max-width: 40vw;
@@ -152,35 +252,27 @@ a {
 
 .message-flex-body > .message-body {
   display: block;
   flex: 1;
 }
 
 /* Network styles */
 
-.theme-dark .message.error {
-  background-color: rgba(235, 83, 104, 0.17);
-}
-
 .console-string {
   color: var(--theme-highlight-lightorange);
 }
 
 .theme-selected .console-string,
 .theme-selected .cm-number,
 .theme-selected .cm-variable,
 .theme-selected .kind-ArrayLike {
   color: #f5f7fa !important; /* Selection Text Color */
 }
 
-.message.network.error > .icon::before {
-  background-position: -12px 0;
-}
-
 .message.network > .message-body {
   display: flex;
   flex-wrap: wrap;
 }
 
 .message.network .method {
   flex: none;
 }
@@ -216,86 +308,42 @@ a {
   font-weight: bold;
   font-size: 10px;
   padding: 1px 2px;
   line-height: 10px;
   margin-inline-start: 0;
   margin-inline-end: 1ex;
 }
 
-/* CSS styles */
-
-.message.cssparser > .indent  {
-  border-inline-end: solid #00b6f0 6px;
-}
-
-.message.cssparser.error > .icon::before {
-  background-position: -12px -12px;
-}
-
-.message.cssparser.warn > .icon::before {
-  background-position: -24px -12px;
-}
-
-/* JS styles */
-
-.message.exception > .indent {
-  border-inline-end: solid #fb9500 6px;
-}
-
-.message.exception.error > .icon::before {
-  background-position: -12px -24px;
-}
-
-.message.exception.warn > .icon::before {
-  background-position: -24px -24px;
-}
-
-/* Web Developer styles */
-
-.message.console-api > .indent {
-  border-inline-end: solid #cbcbcb 6px;
-}
-
-/* Input and output styles */
-.message.command > .indent,
-.message.result > .indent {
-  border-inline-end: solid #808080 6px;
-}
-
-.message.command > .icon::before {
-  background-position: -48px -36px;
-}
-
-.message.result > .icon::before {
-  background-position: -60px -36px;
-}
-
 /* JSTerm Styles */
 
 html .jsterm-input-node-html,
 html #webconsole-notificationbox {
   flex: 0;
   width: 100vw;
 }
 
 .jsterm-input-container {
   background-color: var(--theme-tab-toolbar-background);
   border-top: 1px solid var(--theme-splitter-color);
   position: relative;
 }
 
 .jsterm-input-node {
-  background-image: var(--theme-command-line-image);
-  background-repeat: no-repeat;
-  background-size: 16px 16px;
-  background-position: 4px 4px;
-  color: var(--theme-content-color1);
   box-sizing: border-box;
   height: 100%;
+  color: var(--theme-content-color1);
+  /* input icon */
+  background-image: var(--theme-console-input-image);
+  background-position-x: calc(10px + var(--console-icon-horizontal-offset));
+  background-position-y: 7px;
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  -moz-context-properties: fill;
+  fill: var(--console-input-icon-color);
 }
 
 .jsterm-complete-node {
   color: var(--theme-comment);
 }
 
 .theme-light .jsterm-input-container {
   /* For light theme use a white background for the input - it looks better
@@ -309,129 +357,109 @@ textarea.jsterm-complete-node {
   width: 100%;
   margin: 0;
   border: none;
   background-color: transparent;
   resize: none;
   font-size: inherit;
   line-height: 16px;
   overflow-x: hidden;
-  padding: 4px 0;
-  padding-inline-start: 20px;
+  padding: 5px 0;
+  padding-inline-start: var(--console-inline-start-gutter);
 }
 
 textarea.jsterm-complete-node {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   pointer-events: none;
 }
 
 textarea.jsterm-input-node:focus {
-  background-image: var(--theme-command-line-image-focus);
+  fill: var(--console-input-icon-focused);
   box-shadow: none;
   outline: none;
 }
 
 /* CodeMirror-powered JsTerm */
 .jsterm-cm .jsterm-input-container > .CodeMirror {
-  font-size: inherit;
-  line-height: 16px;
-  padding-inline-start: 20px;
+  font-size: var(--console-output-font-size);
+  line-height: var(--console-output-line-height);
+  /* aim for a 32px left space (a descendent has 4px padding) */
+  padding-inline-start: calc(var(--console-inline-start-gutter) - 4px);
   /* input icon */
-  background-image: var(--theme-command-line-image);
+  background-image: var(--theme-console-input-image);
+  background-position-x: calc(10px + var(--console-icon-horizontal-offset));
+  background-position-y: 5px;
   background-repeat: no-repeat;
-  background-size: 16px 16px;
-  background-position: 4px 4px;
+  background-size: 12px 12px;
+  -moz-context-properties: fill;
+  fill: var(--console-input-icon-color);
 }
 
 .jsterm-cm .jsterm-input-container > .CodeMirror-focused {
-  background-image: var(--theme-command-line-image-focus);
+  fill: var(--console-input-icon-focused);
 }
 
 .jsterm-cm .cm-auto-complete-shadow-text::after {
   content: attr(title);
   color: var(--theme-comment);
 }
 
 /* Security styles */
 
-.message.security > .indent {
-  border-inline-end: solid red 6px;
-}
-
-.message.security.error > .icon::before {
-  background-position: -12px -48px;
-}
-
-.message.security.warn > .icon::before {
-  background-position: -24px -48px;
-}
-
 .navigation-marker {
   color: #aaa;
   background: linear-gradient(#aaa, #aaa) no-repeat left 50%;
   background-size: 100% 2px;
-  margin-top: 6px;
-  margin-bottom: 6px;
+  margin-block-start: 6px;
+  margin-block-end: 6px;
   font-size: 0.9em;
 }
 
 .navigation-marker .url {
   padding-inline-end: 9px;
   text-decoration: none;
   background: var(--theme-body-background);
 }
 
 .theme-light .navigation-marker .url {
   background: #fff;
 }
 
 .stacktrace {
   display: none;
-  padding: 5px 10px;
-  margin: 5px 0 0 0;
   overflow-y: auto;
-  border: 1px solid var(--theme-splitter-color);
-  border-radius: 3px;
+  margin-block-start: 5px;
+  margin-block-end: var(--attachment-margin-block-end);
+  padding-inline-start: 4px;
+}
+
+.message.open .stacktrace {
+  display: block;
 }
 
 .consoletable {
   margin: 5px 0 0 0;
 }
 
 /* Force cells to only show one row of contents.  Getting normal ellipses
    behavior has proven impossible so far, so this is better than letting
    rows get out of vertical alignment when one cell has a lot of content. */
 .consoletable .table-widget-cell > span {
   overflow: hidden;
   display: flex;
   height: 1.25em;
   line-height: 1.25em;
 }
 
-.theme-light .message.error .stacktrace {
-  background-color: rgba(255, 255, 255, 0.5);
-}
-
-.theme-dark .message.error .stacktrace {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.message.open .stacktrace {
-  display: block;
-}
-
-.message .theme-twisty {
-  position: relative;
-  top: 0.1em;
-}
-
-/*Do not mirror the twisty because container force to ltr */
+/* Do not mirror the twisty because container force to ltr
+ * (theme-twisty still used in network request details)
+ */
 .message .theme-twisty:dir(rtl),
 .message .theme-twisty:-moz-locale-dir(rtl) {
   transform: none;
 }
 
 .cm-s-mozilla a[class] {
   font-style: italic;
   text-decoration: none;
@@ -444,58 +472,33 @@ textarea.jsterm-input-node:focus {
 
 a.learn-more-link.webconsole-learn-more-link {
     font-style: normal;
 }
 
 /* Open DOMNode in inspector button */
 .open-inspector {
   background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
-  padding-left: 16px;
-  margin-left: 5px;
+  padding-inline-start: 16px;
+  margin-inline-start: 5px;
   cursor: pointer;
 }
 
 .open-inspector:hover {
   filter: var(--theme-icon-checked-filter);
 }
 
 .open-inspector:active {
   filter: var(--theme-icon-checked-filter) brightness(0.9);
 }
 
-@media (max-width: 500px) {
-  .message > .timestamp {
-    display: none;
-  }
-}
-
 #output-container {
   height: 100%;
 }
 
-/* Webconsole specific theme variables */
-.theme-light .webconsole-output-wrapper {
-  --error-color: var(--red-70);
-  --error-background-color: #FDF2F5;
-  --warning-color: var(--yellow-80);
-  --warning-background-color: #FFFBD5;
-  --console-output-color: var(--grey-90);
-  --repeat-bubble-background-color: var(--theme-highlight-blue);
-}
-
-.theme-dark .webconsole-output-wrapper {
-  --error-color: #FF9494;
-  --error-background-color: #442923;
-  --warning-color: #FCE19F;
-  --warning-background-color: #44391F;
-  --console-output-color: white;
-  --repeat-bubble-background-color: var(--blue-60);
-}
-
 /*
   This element contains the different toolbars in the console
     - primary, containing the clear messages button and the text search input.
       It can expand as much as it need.
     - filtered messages, containing the "X items hidden by filters" and the reset filters button.
       It should be on the same row than the primary bar if it fits there, or on its own 100% row if it is wrapped.
     - close button, close the split console panel. This button will be displayed on righ-top of tool bar always.
     - secondary, containing the filter buttons (Error, Warning, …).
@@ -565,17 +568,17 @@ a.learn-more-link.webconsole-learn-more-
   margin-inline-end: 0;
   height: 100%;
   margin: 0;
 }
 
 .webconsole-filterbar-primary .devtools-plaininput {
   flex: 1 1 100%;
   align-self: stretch;
-  margin-left: 1px;
+  margin-inline-start: 1px;
   padding-inline-start: 4px;
   border: 1px solid transparent;
 }
 
 .devtools-plaininput:focus {
   border: 1px solid var(--blue-50);
   transition: all 0.2s ease-in-out;
   outline: none;
@@ -615,37 +618,16 @@ 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;
 }
 
-.webconsole-output-wrapper .message {
-  --border-size: 3px;
-  border-inline-start: var(--border-size) solid transparent;
-}
-
-.webconsole-output-wrapper .message:hover {
-  border-inline-start-color: var(--theme-highlight-blue);
-}
-
-.webconsole-output-wrapper .message.warn.warn {
-  background-color: var(--warning-background-color);
-}
-
-.webconsole-output-wrapper .message.error .message-body {
-  color: var(--error-color);
-}
-
-.webconsole-output-wrapper .message.warn .message-body {
-  color: var(--warning-color);
-}
-
 /* Special casing String reps so they are legible */
 .webconsole-output-wrapper .message .message-body > .objectBox-string {
   color: currentColor;
 }
 
 /* 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 *,
@@ -676,54 +658,16 @@ a.learn-more-link.webconsole-learn-more-
 }
 
 .message.startGroup .message-body > .objectBox-string,
 .message.startGroupCollapsed .message-body > .objectBox-string {
   color: var(--theme-body-color);
   font-weight: bold;
 }
 
-.webconsole-output-wrapper .message > .icon {
-  margin: var(--icon-top-margin) 0 0 0;
-  padding: 0 0 0 6px;
-}
-
-.webconsole-output-wrapper .message.error > .icon::before {
-  /* Red warning icon */
-  background-position: -24px -48px;
-}
-
-.webconsole-output-wrapper .message.warn > .icon::before {
-  /* Yellow warning icon */
-  background-position: -24px -24px;
-}
-
-.webconsole-output-wrapper .message .theme-twisty {
-  margin: calc(var(--icon-top-margin) - 1px) 0 0 0;
-}
-
-.message.error > .icon::before {
-  background-position: -12px -36px;
-}
-
-.message.warn > .icon::before {
-  background-position: -24px -36px;
-}
-
-.message.info > .icon::before {
-  background-position: -36px -36px;
-}
-
-/* The bubble that shows the number of times a message is repeated */
-.webconsole-output-wrapper .message-repeats {
-  background-color: var(--repeat-bubble-background-color);
-  font-weight: normal;
-  font-size: 0.8em;
-}
-
 /* Prefix text that can be set by ConsoleAPI option */
 .webconsole-output-wrapper .console-message-prefix {
   color: var(--theme-comment);
 }
 
 /* Network Messages */
 
 .webconsole-output-wrapper .message.network .method {
@@ -776,17 +720,18 @@ a.learn-more-link.webconsole-learn-more-
 }
 
 .status-code[data-code^="5"] {
   background-color: var(--status-code-color-5xx);
 }
 
 .network.message .network-info {
   display: none;
-  margin-top: 8px;
+  margin-block-start: 6px;
+  margin-block-end: 2px;
   border: solid 1px var(--theme-splitter-color);
 }
 
 .network.message.open .network-info {
   display: block;
 }
 
 .network.message .network-info .panels {
@@ -800,58 +745,24 @@ a.learn-more-link.webconsole-learn-more-
   display: none;
 }
 
 .network .message-flex-body > .message-body {
   display: flex;
   flex-wrap: wrap;
 }
 
-/* Output Wrapper */
-
-.webconsole-output-wrapper .message .indent {
-  display: inline-block;
-  border-inline-end: solid 1px var(--console-output-indent-border-color);
-}
-.webconsole-output-wrapper .message .indent[data-indent="0"] {
-  border-inline-end: none;
-}
-
-.message.startGroup .indent,
-.message.startGroupCollapsed .indent {
-  border-inline-end-color: transparent;
-  margin-inline-end: 5px;
-}
-
-.message.startGroup .icon,
-.message.startGroupCollapsed .icon {
-  display: none;
-}
-
 /*
  * Open DOMNode in inspector button. Style need to be reset in the new
  * console since its style is already defined in reps.css .
  */
 .webconsole-output-wrapper .open-inspector {
   background-image: unset;
 }
 
-/* Stacktraces */
-.webconsole-output-wrapper .stacktrace {
-  border: none;
-  margin-block-end: var(--attachment-margin-block-end);
-  padding: 0 0 0 4px;
-}
-
-.theme-dark .webconsole-output-wrapper .message.error .stacktrace,
-.theme-light .webconsole-output-wrapper .message.error .stacktrace {
-  /* Removing specificity from the old console */
-  background-color: inherit;
-}
-
 /* console.table() */
 .new-consoletable {
   width: 100%;
   --consoletable-border: var(--theme-splitter-color);
   margin-block-end: var(--attachment-margin-block-end);
   color: var(--theme-body-color);
   display: grid;
   max-height: 250px;
@@ -924,30 +835,28 @@ body #output-container {
  *
  *  +------------------------------+--------------+
  *  |                              |              |
  *  |  WEBCONSOLE FLEX WRAPPER     |   SIDEBAR    |
  *  |                              |              |
  *  +------------------------------+--------------+
  */
 .webconsole-output-wrapper {
-  -moz-user-focus: normal;
-  color: var(--console-output-color);
-  --console-output-indent-border-color: var(--theme-selection-background);
-  --icon-top-margin: 3px;
   --object-inspector-hover-background: transparent;
   --attachment-margin-block-end: 3px;
   --primary-toolbar-height: 29px;
   --close-button-image: url(chrome://devtools/skin/images/close.svg);
   display: grid;
   grid-template-columns: minmax(200px, 1fr) auto;
   max-height: 100vh !important;
   height: 100vh !important;
   width: 100vw;
   overflow: hidden;
+  color: var(--console-output-color);
+  -moz-user-focus: normal;
 }
 
 .webconsole-flex-wrapper {
   display: flex;
   flex-direction: column;
   height: 100vh;
   max-height: 100vh;
   overflow: hidden;
@@ -960,25 +869,27 @@ body #output-container {
 .webconsole-flex-wrapper .webconsole-output {
   flex-shrink: 100000;
 }
 
 .webconsole-flex-wrapper > .webconsole-output:not(:empty) {
   min-height: 19px;
 }
 
-
 .webconsole-output-wrapper #webconsole-notificationbox {
   flex-shrink: 0;
 }
 
 .webconsole-output-wrapper .jsterm-input-container {
   min-height: 28px;
   overflow: auto;
-  padding-top: 1px;
+}
+
+.jsterm-cm .jsterm-input-container {
+  padding-block-start: 2px;
 }
 
 .webconsole-flex-wrapper > .webconsole-output:empty ~ .jsterm-input-container {
   border-top: none;
 }
 
 /* Last item in the flex wrapper should take the whole remaining height */
 .webconsole-flex-wrapper > :last-child {
@@ -998,55 +909,79 @@ body #output-container {
   background-color: var(--object-inspector-hover-background);
 }
 
 /*
  * Make console.group, exception and XHR message's arrow look the same as the arrow
  * used in the ObjectInspector (same background-image, width, transition).
  * Properties were copied from devtools/client/shared/components/reps/reps.css.
  */
-.webconsole-output-wrapper img.collapse-button.arrow {
+.collapse-button {
   flex: none;
+  align-self: flex-start;
+  margin-block-start: var(--console-output-vertical-padding);
+  margin-inline-start: -3px;
+  margin-inline-end: 0;
+  padding: 2px 4px;
+  border: none;
+  background: transparent;
+}
+
+.collapse-button::before {
+  content: "";
+  display: block;
+  width: 10px;
+  height: 10px;
   mask: url("chrome://devtools/skin/images/devtools-components/arrow.svg") no-repeat;
   mask-size: 100%;
-  width: 9px;
-  height: 9px;
-  margin-block-start: 5px;
-  margin-inline-start: 4px;
-  margin-inline-end: 1px;
   transform: rotate(-90deg);
   transition: transform 0.125s ease;
+  background-color: var(--console-arrow-color);
+}
+
+.collapse-button[aria-expanded="true"]::before {
+  transform: rotate(0);
+}
+
+.collapse-button::-moz-focus-inner {
+  border: none;
 }
 
-/*
- * We need to override the margin for group arrow in order to keep the alignment
- * with the indent border.
- */
-.webconsole-output-wrapper .message.startGroup img.collapse-button.arrow,
-.webconsole-output-wrapper .message.startGroupCollapsed img.collapse-button.arrow {
-  margin-inline-start: 2px;
+/* Larger collapse buttons for groups and network requests */
+.message.network > .collapse-button,
+.message.startGroup .collapse-button,
+.message.startGroupCollapsed .collapse-button {
+  margin-inline-start: 0;
+  padding-inline-start: 6px;
+  padding-inline-end: 6px;
 }
 
-html[dir="rtl"] .webconsole-output-wrapper img.collapse-button.arrow:not(.expanded) {
-  transform: rotate(90deg);
+/* Hide the icon, so that we can use the collapse-button in its place */
+.message.network > .icon,
+.message.startGroup > .icon,
+.message.startGroupCollapsed > .icon {
+  display: none;
 }
 
-.webconsole-output-wrapper img.collapse-button.arrow.expanded {
-  transform: rotate(0deg);
+/* Center the collapse button in the left gutter (first-level only) */
+.message.network > .collapse-button,
+.message.startGroup > .indent[data-indent="0"] ~ .collapse-button,
+.message.message.startGroupCollapsed > .indent[data-indent="0"] ~ .collapse-button {
+  margin-inline-start: calc(1px + var(--console-icon-horizontal-offset));
+  margin-inline-end: calc(5px - var(--console-icon-horizontal-offset));
 }
 
-/* Apply the same color to both message arrows and ObjectInspector ones. */
-.webconsole-output-wrapper .message img.arrow,
-.webconsole-output-wrapper .sidebar img.arrow {
-  background-color: #AFA8AB;
-}
-
-.theme-dark .webconsole-output-wrapper .message img.arrow,
-.theme-dark .webconsole-output-wrapper .sidebar img.arrow {
-  background-color: #7F7E81;
+/* Apply a style similar to collapse-button for the object tree arrows */
+.webconsole-output-wrapper .tree .arrow,
+.webconsole-output-wrapper .object-inspector .tree-node .arrow {
+  width: 10px;
+  height: 10px;
+  vertical-align: 0px;
+  line-height: 1;
+  background-color: var(--console-arrow-color);
 }
 
 /* Sidebar */
 .sidebar {
   display: flex;
   grid-row: 1 / -1;
   grid-column: -1 / -2;
   background-color: var(--theme-sidebar-background);
@@ -1093,16 +1028,12 @@ html[dir="rtl"] .webconsole-output-wrapp
   fill: var(--theme-toolbar-photon-icon-color);
   background-image: var(--close-button-image);
 }
 
 .sidebar-contents .object-inspector {
   min-width: 100%;
 }
 
-.theme-twisty {
-  cursor: default;
-}
-
 #split-console-close-button::before {
   fill: var(--theme-toolbar-photon-icon-color);
   background-image: var(--close-button-image);
 }
--- a/devtools/client/webconsole/components/CollapseButton.js
+++ b/devtools/client/webconsole/components/CollapseButton.js
@@ -13,22 +13,18 @@ const messageToggleDetails = l10n.getStr
 
 function CollapseButton(props) {
   const {
     open,
     onClick,
     title = messageToggleDetails,
   } = props;
 
-  const classes = ["arrow", "collapse-button"];
-
-  if (open) {
-    classes.push("expanded");
-  }
-
-  return dom.img({
-    className: classes.join(" "),
+  return dom.button({
+    "aria-expanded": open ? "true" : "false",
+    "aria-label": title,
+    className: "arrow collapse-button",
     onClick,
     title: title,
   });
 }
 
 module.exports = CollapseButton;