--- a/devtools/client/themes/components-frame.css
+++ b/devtools/client/themes/components-frame.css
@@ -6,48 +6,51 @@
 /**
  * Frame Component
  * Styles for React component at `devtools/client/shared/components/frame.js`
  */
 
 .frame-link {
   display: flex;
   justify-content: space-between;
+  --frame-link-line-color: var(--theme-highlight-blue);
 }
 
 .frame-link-async-cause {
-  color: var(--theme-body-color-inactive);
+  color: var(--theme-comment);
 }
 
 .frame-link .frame-link-source {
   flex: initial;
-  color: var(--theme-highlight-blue);
+  color: var(--theme-highlight-purple);
 }
 
 .frame-link a.frame-link-source {
   cursor: pointer;
   text-decoration: none;
   font-style: normal;
 }
 
 .frame-link a.frame-link-source:hover {
   text-decoration: underline;
 }
 
 .frame-link .frame-link-host {
   margin-inline-start: 5px;
   font-size: 90%;
-  color: var(--theme-content-color2);
+  color: var(--theme-comment);
 }
 
 .frame-link .frame-link-function-display-name {
   margin-inline-end: 5px;
+  color: var(--console-output-color, currentColor);
 }
 
 .frame-link .frame-link-line {
-  color: var(--theme-highlight-orange);
+  color: var(--frame-link-line-color);
 }
 
+
 .focused .frame-link .frame-link-source,
 .focused .frame-link .frame-link-line,
 .focused .frame-link .frame-link-host {
   color: var(--theme-selection-color);
 }

--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -291,18 +291,22 @@
 
   --purple-60: #8000d7;
 
   --blue-50: #0a84ff;
   --blue-55: #0074e8;
   --blue-60: #0060df;
   --blue-70: #003eaa;
 
+  --red-70: #a4000f;
+
   --green-70: #058b00;
 
+  --yellow-80: #715100;
+
   --grey-10: #f9f9fa;
   --grey-20: #ededf0;
   --grey-30: #d7d7db;
   --grey-40: #b1b1b3;
   --grey-50: #737373;
   --grey-60: #4a4a4f;
   --grey-70: #38383d;
   --grey-80: #2a2a2e;

--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -212,21 +212,16 @@ a {
 }
 
 /* Network styles */
 .webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
   background-image: linear-gradient(#444444, #000000);
   border-color: #777;
 }
 
-.theme-light .message[severity=error],
-.theme-light .message.error {
-  background-color: rgba(255, 150, 150, 0.3);
-}
-
 .theme-dark .message[severity=error],
 .theme-dark .message.error {
   background-color: rgba(235, 83, 104, 0.17);
 }
 
 .console-string {
   color: var(--theme-highlight-lightorange);
 }
@@ -709,33 +704,53 @@ a.learn-more-link.webconsole-learn-more-
   border-bottom: 2px solid #D7D7D7;
   border-left: 1px solid #D7D7D7;
   border-right: 1px solid #D7D7D7;
 }
 
 
 /* NEW CONSOLE STYLES */
 
-#output-wrapper > div {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
 #output-container {
   height: 100%;
 }
 
 .webconsole-output-wrapper {
   display: flex;
   flex-direction: column;
   height: 100%;
   -moz-user-focus: normal;
+  color: var(--console-output-color);
+  --console-output-indent-width: 1rem;
+  --console-output-indent-border-color: var(--theme-selection-background);
+  --icon-top-margin: 4px;
+  --object-inspector-hover-background: transparent;
+  --attachment-margin-block-end: 3px;
+}
+
+/* Webconsole specific theme variables */
+.theme-light .webconsole-output-wrapper,
+.theme-firebug .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);
+  --attachment-border-color: var(--theme-content-color1);
+  --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;
+  --attachment-border-color: var(--theme-body-color);
+  --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.
@@ -759,23 +774,26 @@ a.learn-more-link.webconsole-learn-more-
   ------------------------------------------------------------------------------------
   | Error - Warning - Log - Info - Debug - CSS - Network - XHR                       |
   ------------------------------------------------------------------------------------
 */
 .webconsole-filteringbar-wrapper {
   display: flex;
   /* Wrap so the "Hidden messages" bar can go to its own row if needed */
   flex-wrap: wrap;
+  --primary-toolbar-height: 29px;
 }
 
 .webconsole-filterbar-primary {
   display: flex;
   /* We want the toolbar (which contain the text search input) to be at least 200px
   so we don't allow to shrink it */
   flex: 100 0 200px;
+  align-items: center;
+  min-height: var(--primary-toolbar-height);
 }
 
 .devtools-toolbar.webconsole-filterbar-secondary {
   display: flex;
   width: 100%;
   align-items: center;
   -moz-user-select: none;
 }
@@ -797,84 +815,158 @@ a.learn-more-link.webconsole-learn-more-
 }
 
 .webconsole-filterbar-filtered-messages {
   /* Needed so the bar takes the whole horizontal space when it is wrapped */
   flex-grow: 1;
   justify-content: flex-end;
   color: var(--theme-comment);
   text-align: end;
+  align-items: center;
+  min-height: var(--primary-toolbar-height);
 }
 
 .webconsole-filterbar-filtered-messages .filter-message-text {
   font-style: italic;
   -moz-user-select: none;
 }
 
 .webconsole-filterbar-filtered-messages .reset-filters-button {
   margin-inline-start: 0.5em;
 }
 
 .webconsole-output {
   flex: 1;
   overflow: auto;
+  font-size: 13px;
 }
 
 .webconsole-output-wrapper .message {
   --border-size: 3px;
   border-inline-start: var(--border-size) solid transparent;
 }
 
 .webconsole-output-wrapper .message:hover {
-  border-inline-start-color: #0a84ff; /* Photon Design System Blue 50 */
+  border-inline-start-color: var(--theme-highlight-blue);
+}
+
+.webconsole-output-wrapper .message.warn.warn {
+  background-color: var(--warning-background-color);
+  color: var(--warning-color);
+}
+
+/* Special casing error and warning String reps so they are legible */
+.webconsole-output-wrapper .message.error .message-body,
+.webconsole-output-wrapper .message.error .message-body > .objectBox-string {
+  color: var(--error-color);
+}
+.webconsole-output-wrapper .message.warn .message-body > .objectBox-string {
+  color: var(--warning-color);
+}
+
+/* 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 {
+  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 {
+  --tree-indent-border-color: var(--theme-body-color);
 }
 
 .webconsole-output-wrapper .message-flex-body > .message-body {
   display: flex;
   flex-wrap: wrap;
   max-width: 100%;
 }
 
 .webconsole-output-wrapper .message-body > * {
   flex-shrink: 0;
 }
 
-.webconsole-output.hideTimestamps > .message > .timestamp {
-  display: none;
-}
-
 .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: 3px 0 0 0;
+  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: var(--icon-top-margin) 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;
+  height: auto;
+}
+
 /* Network Messages */
 
-.message.network .method {
+.webconsole-output-wrapper .message.network .method {
   margin-inline-end: 5px;
 }
 
+.webconsole-output-wrapper .message.network .xhr {
+  background-color: var(--theme-comment);
+  color: white;
+  border-radius: 2px;
+  font-weight: normal;
+  line-height: inherit;
+}
+
+.webconsole-output-wrapper .message.network:not(.navigation-marker) .url {
+  color: var(--theme-comment);
+  font-style: inherit;
+}
+
+.webconsole-output-wrapper .message.network .status {
+  color: var(--theme-highlight-blue);
+  font-style: inherit;
+}
+
+
 .network.message .network-info {
   display: none;
   margin-top: 8px;
   border: solid 1px var(--theme-splitter-color);
 }
 
 .network.message.open .network-info {
   display: block;
@@ -894,17 +986,17 @@ a.learn-more-link.webconsole-learn-more-
 .network .message-flex-body > .message-body {
   display: flex;
 }
 
 /* Output Wrapper */
 
 .webconsole-output-wrapper .message .indent {
   display: inline-block;
-  border-inline-end: solid 1px var(--theme-splitter-color);
+  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;
@@ -922,52 +1014,80 @@ a.learn-more-link.webconsole-learn-more-
  */
 .webconsole-output-wrapper .open-inspector {
   background: unset;
   padding-left: unset;
   margin-left: unset;
   cursor: unset;
 }
 
+/* Stacktraces */
+.webconsole-output-wrapper  .stacktrace {
+  border: 1px solid var(--attachment-border-color);
+  border-radius: 2px;
+  margin-block-end: var(--attachment-margin-block-end);
+}
+
+.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%;
   border-collapse: collapse;
-  --consoletable-border: 1px solid var(--table-splitter-color);
+  --consoletable-border: var(--theme-splitter-color);
+  margin-block-end: var(--attachment-margin-block-end);
+  color: var(--theme-body-color);
 }
 
-.new-consoletable thead,
+.new-consoletable thead {
+  border: 1px solid var(--consoletable-border);
+}
+
 .new-consoletable tbody {
   background-color: var(--theme-body-background);
+  border: 1px solid var(--consoletable-border);
+  border-block-start-width: 0;
 }
 
 .new-consoletable th {
-  background-color: var(--theme-selection-background);
-  color: var(--theme-selection-color);
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color);
   margin: 0;
   padding: 5px 0 0;
   font-weight: inherit;
-  border-inline-end: var(--consoletable-border);
-  border-bottom: var(--consoletable-border);
+}
+
+.new-consoletable th:not(:last-of-type) {
+  border-inline-end: 1px solid var(--consoletable-border);
 }
 
 .new-consoletable tr:nth-of-type(even) {
   background-color: var(--table-zebra-background);
 }
 
 .new-consoletable td {
   padding: 3px 4px;
   min-width: 100px;
   -moz-user-focus: normal;
   color: var(--theme-body-color);
-  border-inline-end: var(--consoletable-border);
   height: 1.25em;
   line-height: 1.25em;
+  /* Objects are expandable in cells, and if one gets tall,
+   * we still want other columns to stick to the top.
+   */
+  vertical-align: top;
 }
 
+.new-consoletable tr td:not(:last-of-type) {
+  border-inline-end: 1px solid var(--consoletable-border);
+}
 /* Layout */
 
 .webconsole-output {
   flex: 1;
   direction: ltr;
   overflow: auto;
   -moz-user-select: text;
   position: relative;
@@ -998,8 +1118,24 @@ body #output-container {
 
 .webconsole-output-wrapper {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
 /* Object Inspector */
+.webconsole-output-wrapper .object-inspector.tree {
+  /*
+   * Make the arrow the same color and approximately the same size of the twisty icon.
+   * Should be properly fixed in https://bugzilla.mozilla.org/show_bug.cgi?id=1307937.
+   */
+  --arrow-width: 8px;
+  --arrow-fill-color: #AFA8AB;
+  --arrow-single-margin: 0.5rem;
+  --tree-indent-width: var(--console-output-indent-width);
+  --tree-indent-border-color: var(--console-output-indent-border-color);
+  --tree-node-hover-background-color : var(--object-inspector-hover-background);
+}
+
+.theme-dark .webconsole-output-wrapper .object-inspector.tree {
+  --arrow-fill-color: #7F7E81;
+}