DevTools: optimize Styles sidebar for reading property values

SSP UI changes
- Curly brace, Source link color less dark
- Source links are more aggressively truncated
- "Inherited from" separators have less noise

Screenshot: https://imgur.com/a/SwpWkGs

Bug: 929536
Change-Id: I43b2252998f7d723b8ec88f0e908e751fe150c86
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1460448
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Commit-Position: refs/heads/master@{#642093}

third_party/blink/renderer/devtools/front_end/elements/StylesSidebarPane.js

@@ -732,7 +732,7 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane {
   }
 };
 
-Elements.StylesSidebarPane._maxLinkLength = 30;
+Elements.StylesSidebarPane._maxLinkLength = 23;
 
 Elements.SectionBlock = class {
   /**
@@ -844,9 +844,8 @@ Elements.StylePropertiesSection = class {
     this._selectorElement.addEventListener('mousemove', event => event.consume(), false);
     this._selectorElement.addEventListener('mouseleave', this._onMouseOutSelector.bind(this), false);
 
-    const openBrace = createElement('span');
+    const openBrace = selectorContainer.createChild('span', 'sidebar-pane-open-brace');
     openBrace.textContent = ' {';
-    selectorContainer.appendChild(openBrace);
     selectorContainer.addEventListener('mousedown', this._handleEmptySpaceMouseDown.bind(this), false);
     selectorContainer.addEventListener('click', this._handleSelectorContainerClick.bind(this), false);
 
@@ -929,7 +928,7 @@ Elements.StylePropertiesSection = class {
 
     if (header && header.ownerNode) {
       const link = Elements.DOMLinkifier.linkifyDeferredNodeReference(header.ownerNode);
-      link.textContent = '<style>…</style>';
+      link.textContent = '<style>';
       return link;
     }
 

third_party/blink/renderer/devtools/front_end/elements/stylesSidebarPane.css

@@ -54,7 +54,7 @@
 }
 
 .styles-section-title .media-list {
-    color: #888;
+    color: hsl(0, 0%, 46%);
 }
 
 .styles-section-title .media-list.media-matches .media.editable-media {
@@ -68,13 +68,13 @@
 
 .styles-section-title .media .subtitle {
     float: right;
-    color: rgb(85, 85, 85);
+    color: hsl(0, 0%, 34%);
 }
 
 .styles-section-subtitle {
-    color: rgb(85, 85, 85);
+    color: hsl(0, 0%, 44%);
     float: right;
-    margin-left: 5px;
+    padding-left: 15px;
     max-width: 100%;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -83,12 +83,18 @@
     margin-bottom: -1px;
 }
 
+.sidebar-pane-open-brace,
+.sidebar-pane-closing-brace {
+    color: hsl(0, 0%, 46%);
+}
+
 .styles-section .styles-section-subtitle .devtools-link {
-    color: inherit;
+    color: hsl(0, 0%, 44%);
+    text-decoration-color: hsl(0, 0%, 60%);
 }
 
 .styles-section .selector {
-    color: #888;
+    color: hsl(0, 0%, 46%);
 }
 
 .styles-section .simple-selector.selector-matches, .styles-section.keyframe-key {
@@ -192,17 +198,20 @@
     background-color: var(--toolbar-bg-color);
     padding: 0 5px;
     border-bottom: 1px solid var(--divider-color);
-    color: rgb(50, 50, 50);
+    color: hsla(0, 0%, 32%, 1);
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     line-height: 22px;
 }
 
 .sidebar-separator > span.monospace {
-    background: rgb(255, 255, 255);
-    padding: 1px 3px;
-    border: 1px solid var(--divider-color);
+    max-width: 90px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    margin-left: 2px;
 }
 
 .sidebar-pane-section-toolbar {

third_party/blink/web_tests/http/tests/devtools/elements/elements-panel-styles-expected.txt

@@ -60,24 +60,24 @@ element.style { ()
     -webkit-font-smoothing: subpixel-antialiased;
 
 [expanded] 
-#container .foo { (elements-panel-styles.css:17 -> elements-panel-styles.css:17:18)
+#container .foo { (elements-pa…yles.css:17 -> elements-panel-styles.css:17:18)
     font-style: italic !important;
 
 [expanded] 
-body .foo { (elements-panel-styles.css:6 -> elements-panel-styles.css:6:12)
+body .foo { (elements-pa…tyles.css:6 -> elements-panel-styles.css:6:12)
 /-- overloaded --/     text-indent: 10px;
 
 [expanded] 
-.foo { (elements-panel-styles.css:53 -> elements-panel-styles.css:53:7)
+.foo { (elements-pa…yles.css:53 -> elements-panel-styles.css:53:7)
 
 [expanded] 
-.foo, .foo::before { (elements-panel-styles.css:34 -> elements-panel-styles.css:34:21)
+.foo, .foo::before { (elements-pa…yles.css:34 -> elements-panel-styles.css:34:21)
     content: "[before Foo]";
     color: blue;
     display: block !important;
 
 [expanded] 
-.foo { (elements-panel-styles.css:21 -> elements-panel-styles.css:21:7)
+.foo { (elements-pa…yles.css:21 -> elements-panel-styles.css:21:7)
 /-- overloaded --/     color: black;
     margin-left: 1px;
     margin: 10px 0 2px;
@@ -111,20 +111,20 @@ div { (user agent stylesheet)
 
 ======== Inherited from div#container ========
 [expanded] 
-#container { (elements-panel-styles.css:10 -> elements-panel-styles.css:10:13)
+#container { (elements-pa…yles.css:10 -> elements-panel-styles.css:10:13)
     font-family: serif;
     font-size: 14px;
 /-- overloaded --/     color: red;
 
 ======== Inherited from body ========
 [expanded] 
-body { (elements-panel-styles.css:1 -> elements-panel-styles.css:1:7)
+body { (elements-pa…tyles.css:1 -> elements-panel-styles.css:1:7)
 /-- overloaded --/     font-size: 12px;
 /-- overloaded --/     text-indent: 20px !important;
 
 ======== Inherited from html ========
 [expanded] 
-html { (elements-panel-styles.css:61 -> elements-panel-styles.css:61:7)
+html { (elements-pa…yles.css:61 -> elements-panel-styles.css:61:7)
 /-- overloaded --/     color: magenta !important;
 
 [expanded] 
@@ -133,26 +133,26 @@ html { (user agent stylesheet)
 
 ======== Pseudo ::before element ========
 [expanded] 
-.foo::before { (elements-panel-styles.css:57 -> elements-panel-styles.css:57:15)
+.foo::before { (elements-pa…yles.css:57 -> elements-panel-styles.css:57:15)
 
 [expanded] 
-.foo::before { (elements-panel-styles.css:40 -> elements-panel-styles.css:40:15)
+.foo::before { (elements-pa…yles.css:40 -> elements-panel-styles.css:40:15)
     color: red;
 
 [expanded] 
-.foo, .foo::before { (elements-panel-styles.css:34 -> elements-panel-styles.css:34:21)
+.foo, .foo::before { (elements-pa…yles.css:34 -> elements-panel-styles.css:34:21)
     content: "[before Foo]";
 /-- overloaded --/     color: blue;
     display: block !important;
 
 ======== Pseudo ::after element ========
 [expanded] 
-.foo::after { (elements-panel-styles.css:48 -> elements-panel-styles.css:48:14)
+.foo::after { (elements-pa…yles.css:48 -> elements-panel-styles.css:48:14)
     font-family: courier;
     content: "[after Foo 2]";
 
 [expanded] 
-.foo::after { (elements-panel-styles.css:44 -> elements-panel-styles.css:44:14)
+.foo::after { (elements-pa…yles.css:44 -> elements-panel-styles.css:44:14)
 /-- overloaded --/     content: "[after Foo]";
     color: green;
 

third_party/blink/web_tests/http/tests/devtools/elements/navigate-styles-sidebar-with-arrow-keys-expected.txt

@@ -9,27 +9,27 @@ element.style {}
 
 Navigating with arrow keys
 Editing: false
-<style>…</style>div#foo {}
+<style>div#foo {}
 
 Editing: false
-<style>…</style>#foo {}
+<style>#foo {}
 
 Editing: false
-<style>…</style>div {}
+<style>div {}
 
 Editing: false
 user agent stylesheetdiv {}
 
 Editing: false
-<style>…</style>div {}
+<style>div {}
 
 Typing should start editing
 Editing: true
 t
 
 Pressing escape again should restore focus
 Editing: false
-<style>…</style>div {}
+<style>div {}
 
 Pressing enter should start editing selector
 Editing: true

third_party/blink/web_tests/http/tests/devtools/elements/styles-1/commit-selector-expected.txt

@@ -6,7 +6,7 @@ element.style { ()
     color: red;
 
 [expanded] 
-#inspected { (<style>…</style>)
+#inspected { (<style>)
 /-- overloaded --/     color: green;
 
 [expanded] 
@@ -24,7 +24,7 @@ element.style { ()
     color: red;
 
 [expanded] 
-hr, #inspected { (<style>…</style>)
+hr, #inspected { (<style>)
 /-- overloaded --/     color: green;
 
 [expanded] 
@@ -42,7 +42,7 @@ element.style { ()
     color: red;
 
 [expanded] [no-affect] 
-#inspectedChanged { (<style>…</style>)
+#inspectedChanged { (<style>)
     color: green;
 
 [expanded] 

third_party/blink/web_tests/http/tests/devtools/elements/styles-1/cssom-media-insert-crash-expected.txt

@@ -4,12 +4,12 @@ Tests that the inspected page does not crash after inspecting element with CSSOM
 element.style { ()
 
 [expanded] 
-#box { (<style>…</style>)
+#box { (<style>)
     color: white;
     background: red;
 
 [expanded] 
-div { (<style>…</style>)
+div { (<style>)
     border: 1px solid black;
 /-- overloaded --/     background-color: white;
     padding: 20px;

third_party/blink/web_tests/http/tests/devtools/elements/styles-1/disable-property-workingcopy-update-expected.txt

@@ -24,7 +24,7 @@ Running: dumpDisabledText
 element.style { ()
 
 [expanded] 
-#inspected { (disable-propert…y-update.css:1 -> disable-property-workingcopy-update.css:1:13)
+#inspected { (disable-pro…pdate.css:1 -> disable-property-workingcopy-update.css:1:13)
 /-- overloaded --/ /-- disabled --/     /* font-weight: bold; */
 
 [expanded] 
@@ -50,7 +50,7 @@ Running: dumpEnabledText
 element.style { ()
 
 [expanded] 
-#inspected { (disable-propert…y-update.css:1 -> disable-property-workingcopy-update.css:1:13)
+#inspected { (disable-pro…pdate.css:1 -> disable-property-workingcopy-update.css:1:13)
     font-weight: bold;
 
 [expanded] 

third_party/blink/web_tests/http/tests/devtools/elements/styles-1/dynamic-style-tag-expected.txt

@@ -58,27 +58,27 @@ element.style { ()
     color: red;
 
 [expanded] 
-.inline-style-created-by-script-with-source-url { (inlineStyleCrea…ByScript.css:1 -> inlineStyleCreatedByScript.css:1:50)
+.inline-style-created-by-script-with-source-url { (inlineStyle…cript.css:1 -> inlineStyleCreatedByScript.css:1:50)
 /-- overloaded --/     color: grey;
 
 [expanded] 
-.inline-style-created-by-script { (<style>…</style>)
+.inline-style-created-by-script { (<style>)
 /-- overloaded --/     color: orange;
 
 [expanded] 
-.inline-style-added-by-document-write-with-source-url { (inlineStyleAdde…entWrite.css:2 -> inlineStyleAddedByDocumentWrite.css:2:56)
+.inline-style-added-by-document-write-with-source-url { (inlineStyle…Write.css:2 -> inlineStyleAddedByDocumentWrite.css:2:56)
 /-- overloaded --/     color: yellow;
 
 [expanded] 
-.inline-style-added-by-parser-in-document-write { (<style>…</style>)
+.inline-style-added-by-parser-in-document-write { (<style>)
 /-- overloaded --/     color: blue;
 
 [expanded] 
-.inline-style-added-by-parser-with-source-url { (inlineStyleAddedByParser.css:2 -> inlineStyleAddedByParser.css:2:48)
+.inline-style-added-by-parser-with-source-url { (inlineStyle…arser.css:2 -> inlineStyleAddedByParser.css:2:48)
 /-- overloaded --/     color: green;
 
 [expanded] 
-.inline-style-added-by-parser { (dynamic-style-tag.html:3 -> dynamic-style-tag.html:3:45)
+.inline-style-added-by-parser { (dynamic-sty…-tag.html:3 -> dynamic-style-tag.html:3:45)
 /-- overloaded --/     color: red;
 
 [expanded] 

third_party/blink/web_tests/http/tests/devtools/elements/styles-1/edit-media-text-expected.txt

@@ -7,12 +7,12 @@ element.style { ()
 
 [expanded] 
 @media screen and (max-device-width: 100000px)
-#inspected { (<style>…</style>)
+#inspected { (<style>)
 /-- overloaded --/     color: blue;
 
 [expanded] 
 @media screen and (max-device-width: 100000px)
-#inspected { (<style>…</style>)
+#inspected { (<style>)
 /-- overloaded --/     color: green;
 
 [expanded] 
@@ -31,12 +31,12 @@ element.style { ()
 
 [expanded] 
 @media screen and (max-device-width: 99999px)
-#inspected { (<style>…</style>)
+#inspected { (<style>)
 /-- overloaded --/     color: blue;
 
 [expanded] 
 @media screen and (max-device-width: 99999px)
-#inspected { (<style>…</style>)
+#inspected { (<style>)
 /-- overloaded --/     color: green;
 
 [expanded] 
@@ -54,11 +54,11 @@ element.style { ()
     color: red;
 
 [expanded] 
-#inspected { (<style>…</style>)
+#inspected { (<style>)
 /-- overloaded --/     color: blue;
 
 [expanded] 
-#inspected { (<style>…</style>)
+#inspected { (<style>)
 /-- overloaded --/     color: green;
 
 [expanded] 

third_party/blink/web_tests/http/tests/devtools/elements/styles-1/empty-background-url-expected.txt

@@ -4,7 +4,7 @@ Tests that empty url in the property value does not break inspector.
 element.style { ()
 
 [expanded] 
-#inspected { (<style>…</style>)
+#inspected { (<style>)
     background-image: url();
 
 [expanded] 

third_party/blink/web_tests/http/tests/devtools/elements/styles-2/add-import-rule-expected.txt

@@ -7,7 +7,7 @@ Tests that adding an @import with data URI does not lead to stylesheet collectio
 element.style { ()
 
 [expanded] 
-span { (<style>…</style>)
+span { (<style>)
     color: red;
 
 ======== Inherited from html ========
@@ -22,7 +22,7 @@ html { (user agent stylesheet)
 element.style { ()
 
 [expanded] 
-span { (data:text/css,s…color:green}:1 -> data:text/css,span{color:green}:1:6)
+span { (data:text/c…or:green}:1 -> data:text/css,span{color:green}:1:6)
     color: green;
 
 ======== Inherited from html ========

third_party/blink/web_tests/http/tests/devtools/elements/styles-2/cssom-shorthand-important-expected.txt

@@ -4,7 +4,7 @@ Tests that CSSOM-modified shorthands are reporting their "important" bits.
 element.style { ()
 
 [expanded] 
-#inspected { (<style>…</style>)
+#inspected { (<style>)
     margin-top: 10px;
     padding: 10px 50px !important;
         padding-top: 10px !important;