introduce treeoutline-dirac.css to fix styling issues in console

Console looks nice when all rows are 19px.
Some treeoutline styles were producing too fat rows because of some
ad-hoc styles. I assume they are needed in some other parts of the UI
and that is why I limit my overrides to .console-message context.

resources/unpacked/devtools/front_end/ui/module.json

@@ -76,6 +76,7 @@
         "textButton.css",
         "textPrompt.css",
         "tooltip.css",
-        "treeoutline.css"
+        "treeoutline.css",
+        "treeoutline-dirac.css"
     ]
 }

resources/unpacked/devtools/front_end/ui/treeoutline-dirac.css

@@ -0,0 +1,16 @@
+:host-context(.console-message) .tree-outline li {
+    min-height: 10px; /* min-height: 16px; was causing fat line in console if tree-outline was used */
+}
+
+/* do not apply padding to tree-outline when hosted in .console-message */
+:host-context(.console-message) {
+   padding: 0px;
+}
+
+:host-context(.console-message) .object-properties-section-root-element::before {
+    -webkit-mask-position: -4px -96px !important;
+}
+
+:host-context(.console-message) .object-properties-section-root-element.expanded::before {
+    -webkit-mask-position: -20px -96px !important;
+}

resources/unpacked/devtools/front_end/ui/treeoutline.js

@@ -323,6 +323,7 @@ function TreeOutlineInShadow()
     // Redefine element to the external one.
     this.element = createElement("div");
     this._shadowRoot = WebInspector.createShadowRootWithCoreStyles(this.element, "ui/treeoutline.css");
+    WebInspector.appendStyle(this._shadowRoot, "ui/treeoutline-dirac.css");
     this._disclosureElement = this._shadowRoot.createChild("div", "tree-outline-disclosure");
     this._disclosureElement.appendChild(innerElement);
     this._renderSelection = true;