DevTools: insert console message decorations in order

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

Index: third_party/WebKit/Source/devtools/front_end/console/consoleView.css
diff --git a/third_party/WebKit/Source/devtools/front_end/console/consoleView.css b/third_party/WebKit/Source/devtools/front_end/console/consoleView.css
index c124740f9b5f39677289812506d02ed0d84f5dda..2d8be278a43240d96e880c5c9d73821d5a1e06b2 100644
--- a/third_party/WebKit/Source/devtools/front_end/console/consoleView.css
+++ b/third_party/WebKit/Source/devtools/front_end/console/consoleView.css
@@ -66,7 +66,7 @@
 #console-prompt {
     clear: right;
     position: relative;
-    margin: 0 22px 0 20px;
+    margin: 0 22px 0 21px;
     min-height: 18px;  /* Sync with ConsoleViewMessage.js */
 }
 
@@ -84,7 +84,7 @@
 
 #console-prompt .console-prompt-icon {
     position: absolute;
-    left: -13px;
+    left: -14px;
     top: 5px;
     -webkit-user-select: none;
 }
@@ -94,7 +94,6 @@
     clear: right;
     position: relative;
     padding: 3px 22px 1px 0;
-    margin-left: 24px;
     min-height: 18px;  /* Sync with ConsoleViewMessage.js */
     flex: auto;
     display: flex;
@@ -104,31 +103,33 @@
     flex: auto;
 }
 
-.console-timestamp {
-    color: gray;
+.message-decoration-wrapper {
     -webkit-user-select: none;
     flex: none;
-    margin-right: 5px;
+    display: flex;
 }
 
-.message-level-icon, .command-result-icon {
-    position: absolute;
-    left: -17px;
-    top: 4px;
-    -webkit-user-select: none;
+.message-timestamp,
+.message-level-icon {
+    margin-top: 3px;
 }
 
-.console-message-repeat-count {
-    margin: 2px 0 0 10px;
-    flex: none;
+.message-timestamp {
+    color: gray;
+    margin-right: 5px;
 }
 
-.repeated-message {
-    margin-left: 4px;
+.message-level-icon {
+    min-width: 18px;
+}
+
+.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,
@@ -136,32 +137,20 @@
     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 {
@@ -169,8 +158,10 @@
 }
 
 .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 {
@@ -189,28 +180,23 @@
     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 {