DevTools: insert console message decorations in order

third_party/WebKit/Source/devtools/front_end/console/consoleView.css

 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 48 matching lines @@
     padding: 2px 0;
     overflow-y: auto;
     word-wrap: break-word;
     -webkit-user-select: text;
     transform: translateZ(0);
 }
 
 #console-prompt {
     clear: right;
     position: relative;
-    margin: 0 22px 0 20px;
+    margin: 0 22px 0 21px;
     min-height: 18px;  /* Sync with ConsoleViewMessage.js */
 }
 
 #console-prompt .CodeMirror {
     padding: 3px 0 1px 0;
 }
 
 #console-prompt .CodeMirror-line {
     padding-top: 0;
 }
 
 #console-prompt .CodeMirror-lines {
     padding-top: 0;
 }
 
 #console-prompt .console-prompt-icon {
     position: absolute;
-    left: -13px;
+    left: -14px;
     top: 5px;
     -webkit-user-select: none;
 }
 
 .console-message,
 .console-user-command {
     clear: right;
     position: relative;
     padding: 3px 22px 1px 0;
-    margin-left: 24px;
     min-height: 18px;  /* Sync with ConsoleViewMessage.js */
     flex: auto;
     display: flex;
 }
 
 .console-message > * {
     flex: auto;
 }
 
-.console-timestamp {
-    color: gray;
+.message-decoration-wrapper {
     -webkit-user-select: none;
     flex: none;
+    display: flex;
+}
+
+.message-timestamp,
+.message-level-icon {
+    margin-top: 3px;
+}
+
+.message-timestamp {
+    color: gray;
     margin-right: 5px;
 }
 
-.message-level-icon, .command-result-icon {
-    position: absolute;
-    left: -17px;
-    top: 4px;
-    -webkit-user-select: none;
+.message-level-icon {
+    min-width: 18px;
 }
 
-.console-message-repeat-count {
-    margin: 2px 0 0 10px;
-    flex: none;
-}
-
-.repeated-message {
-    margin-left: 4px;
+.message-repeat-count {
+    margin-top: 2px;
+    margin-right: 5px;
 }
 
 .repeated-message .message-level-icon {
-    display: none;
+    visibility: hidden;
 }
 
 .repeated-message .console-message-stack-trace-toggle,
 .repeated-message > .console-message-text {
     flex: 1;
 }
 
-.console-error-level .repeated-message,
-.console-warning-level .repeated-message,
-.console-verbose-level .repeated-message,
-.console-info-level .repeated-message {
-    display: flex;
-}
-
 .console-info {
     color: rgb(128, 128, 128);
     font-style: italic;
     padding-bottom: 2px;
 }
 
-.console-group .console-group > .console-group-messages {
-    margin-left: 16px;
-}
-
 .console-group-title {
     font-weight: bold;
 }
 
 .expand-group-icon {
-    -webkit-user-select: none;
-    position: absolute;
     background-color: rgb(110, 110, 110);
-    left: -14px;
+    max-width: 10px;
+    margin-top: 2px;
 }
 
 .console-group {
     position: relative;
 }
 
 .console-message-wrapper {
+    padding-left: 7px;
     display: flex;
     border-bottom: 1px solid rgb(240, 240, 240);
+    position: relative;
 }
 
 .console-message-wrapper.console-adjacent-user-command-result {
     border-bottom: none;
 }
 
 .console-message-wrapper.console-error-level {
     border-top: 1px solid hsl(0, 100%, 92%);
     border-bottom: 1px solid hsl(0, 100%, 92%);
     margin-top: -1px;
 }
 
 .console-message-wrapper.console-warning-level {
     border-top: 1px solid hsl(50, 100%, 88%);
     border-bottom: 1px solid hsl(50, 100%, 88%);
     margin-top: -1px;
 }
 
-.console-message-wrapper .nesting-level-marker {
-    width: 14px;
-    flex: 0 0 auto;
+.console-message-wrapper .message-nesting-level-marker {
     border-right: 1px solid #a5a5a5;
-    position: relative;
-    margin-bottom: -1px;
+    margin: -1px 8px -1px 4px;
 }
 
-.console-message-wrapper:last-child .nesting-level-marker::before,
-.console-message-wrapper .nesting-level-marker.group-closed::before {
+.console-message-wrapper:last-child .message-nesting-level-marker::before,
+.console-message-wrapper .message-nesting-level-marker.group-closed::before {
     content: "";
 }
 
-.console-message-wrapper .nesting-level-marker::before {
+.console-message-wrapper .message-nesting-level-marker::before {
     border-bottom: 1px solid #a5a5a5;
     position: absolute;
-    top: 0;
-    left: 0;
-    margin-left: 100%;
+    bottom: -1px;
     width: 3px;
-    height: 100%;
     box-sizing: border-box;
+    z-index: 1;
 }
 
 .console-error-level {
     background-color: hsl(0, 100%, 97%);
 }
 
 .-theme-with-dark-background .console-error-level {
     background-color: hsl(0, 100%, 8%);
 }
 
@@ skipping 144 matching lines @@
 .console-message-stack-trace-wrapper {
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     align-items: stretch;
 }
 
 .console-message-stack-trace-wrapper > * {
     flex: none;
 }