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 39 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,
+.console-message-repeat-count,
+.expand-group-icon,
+.nesting-level-markers-wrapper,
+.message-level-icon {
+    -webkit-user-select: none;
+    flex: 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-timestamp {
     color: gray;
-    -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;
+.message-level-icon {
+    min-width: 18px;
 }
 
 .console-message-repeat-count {
-    margin: 2px 0 0 10px;
-    flex: none;
-}
-
-.repeated-message {
-    margin-left: 4px;
+    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);
 }
 
 .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;
-    border-right: 1px solid #a5a5a5;
-    position: relative;
+.nesting-level-markers-wrapper {
     margin-bottom: -1px;
 }
 
+.console-message-wrapper .nesting-level-marker {
+    border-right: 1px solid #a5a5a5;
+    position: relative;
+    margin: 0 8px 0 4px;
+    height: 100%;
+    display: inline-block;
+}
+
 .console-message-wrapper:last-child .nesting-level-marker::before,
 .console-message-wrapper .nesting-level-marker.group-closed::before {
     content: "";
 }
 
 .console-message-wrapper .nesting-level-marker::before {
     border-bottom: 1px solid #a5a5a5;
     position: absolute;
     top: 0;
     left: 0;
-    margin-left: 100%;
     width: 3px;
     height: 100%;
     box-sizing: border-box;
 }
 
 .console-error-level {
     background-color: hsl(0, 100%, 97%);
 }
 
 .-theme-with-dark-background .console-error-level {
@@ skipping 142 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;
 }