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 976ba2047c96faaf3edce159c216375f0fc0fdff..a1b6c665b3df05e601d050964f39070881ff5b9d 100644
--- a/third_party/WebKit/Source/devtools/front_end/console/consoleView.css
+++ b/third_party/WebKit/Source/devtools/front_end/console/consoleView.css
@@ -57,7 +57,7 @@
 #console-prompt {
     clear: right;
     position: relative;
-    margin: 0 22px 0 20px;
+    margin: 0 22px 0 21px;
     min-height: 18px;  /* Sync with ConsoleViewMessage.js */
 }
 
@@ -75,7 +75,7 @@
 
 #console-prompt .console-prompt-icon {
     position: absolute;
-    left: -13px;
+    left: -14px;
     top: 5px;
     -webkit-user-select: none;
 }
@@ -85,7 +85,6 @@
     clear: right;
     position: relative;
     padding: 3px 22px 1px 0;
-    margin-left: 24px;
     min-height: 18px;  /* Sync with ConsoleViewMessage.js */
     flex: auto;
     display: flex;
@@ -95,31 +94,36 @@
     flex: auto;
 }
 
-.console-timestamp {
-    color: gray;
+.console-timestamp,
+.console-message-repeat-count,
+.expand-group-icon,
+.nesting-level-markers-wrapper,
+.message-level-icon {
     -webkit-user-select: none;
     flex: none;
-    margin-right: 5px;
 }
 
-.message-level-icon, .command-result-icon {
-    position: absolute;
-    left: -17px;
-    top: 4px;
-    -webkit-user-select: none;
+.console-timestamp,
+.message-level-icon {

[pfeldman, 2017/02/04 01:55:19]

let's name these consistently.

[luoe, 2017/02/06 19:51:55]

Done.

+    margin-top: 4px;
 }
 
-.console-message-repeat-count {
-    margin: 2px 0 0 10px;
-    flex: none;
+.console-timestamp {
+    color: gray;
+    margin-right: 5px;
 }
 
-.repeated-message {
-    margin-left: 4px;
+.message-level-icon {
+    min-width: 18px;
+}
+
+.console-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,
@@ -127,32 +131,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 {
@@ -160,6 +152,7 @@
 }
 
 .console-message-wrapper {
+    padding-left: 7px;
     display: flex;
     border-bottom: 1px solid rgb(240, 240, 240);
 }
@@ -180,12 +173,16 @@
     margin-top: -1px;
 }
 
+.nesting-level-markers-wrapper {
+    margin-bottom: -1px;
+}
+
 .console-message-wrapper .nesting-level-marker {
-    width: 14px;
-    flex: 0 0 auto;
     border-right: 1px solid #a5a5a5;
     position: relative;
-    margin-bottom: -1px;
+    margin: 0 8px 0 4px;
+    height: 100%;
+    display: inline-block;
 }
 
 .console-message-wrapper:last-child .nesting-level-marker::before,
@@ -198,7 +195,6 @@
     position: absolute;
     top: 0;
     left: 0;
-    margin-left: 100%;
     width: 3px;
     height: 100%;
     box-sizing: border-box;