Fix Security Sidebar style behavior

A few fixes:

1. Background highlighting would get clipped before when sidebar
was small or there was a long url to be shown. Fixed to scale down
with sidebar width

2. Scheme color would change when element was highlighted. Fixed to
remain same color when selected

3. Overflow acts weird with fix #1. Fixed to show ellipsis instead

side by side changes:
https://screenshot.googleplex.com/7e6BWrUQM3razDk.png

Bug: 365737493
Change-Id: I073f19b427821584b9882d38cc2d88b8bd6a36de
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5931804
Reviewed-by: Kim-Anh Tran <[email protected]>
Reviewed-by: Shuran Huang <[email protected]>
Commit-Queue: Joshua Thomas <[email protected]>

Author: masnoble

front_end/panels/security/sidebar.css

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+.tree-outline-disclosure {
+  width: 100%;
+}
+
 .tree-outline li.security-group-list-item {
   & + ol {
     padding-left: 0;
@@ -18,10 +22,37 @@
   color: var(--sys-color-token-subtle);
 }
 
+.tree-outline li.security-sidebar-origins + .children > li {
+  &.selected {
+    .url-scheme-secure {
+      color: var(--sys-color-green);
+    }
+
+    .url-scheme-neutral,
+    .url-scheme-insecure,
+    .url-scheme-insecure-broken {
+      color: var(--sys-color-error);
+    }
+  }
+}
+
 .security-main-view-reload-message,
 .tree-outline li.security-sidebar-origins,
 .tree-outline li.security-group-list-item {
   &:hover:not(:has(span[is="dt-checkbox"])) .selection {
     background: transparent;
   }
 }
+
+.tree-outline li {
+  & .leading-icons {
+    flex: none;
+  }
+
+  & .tree-element-title,
+  .highlighted-url,
+  .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}