fix(devtools): align theme to other Chrome DevTools

fixes rangle/angular-devtools#489 contrast issue
fixes rangle/angular-devtools#594 double scrolling
changes colors to follow Chrome DevTools tabs (first pass)

projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss

@@ -31,7 +31,7 @@ mat-tab-group {
 }
 
 #version-number {
-  color: #3f51b5;
+  color: #1b1aa5;
   cursor: text;
   -moz-user-select: text;
   -khtml-user-select: text;
@@ -96,7 +96,7 @@ mat-tab-group {
 
 :host-context(.dark-theme) {
   #version-number {
-    color: #5CAACE;
+    color: #5caace;
   }
 }
 
@@ -114,4 +114,4 @@ mat-tab-group {
   #app-angular-version {
     display: none;
   }
-}
+}

projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/breadcrumbs/breadcrumbs.component.scss

@@ -13,20 +13,30 @@
   .mat-stroked-button {
     height: 20px;
     line-height: 20px;
-    font-size: 0.8em;
+    font-size: 1em;
     margin-right: 5px;
     width: fit-content;
+
+    &:hover {
+      background-color: #ebf1fb;
+    }
   }
 
   .mat-card.breadcrumb-card span {
-    color: #3f51b5;
+    color: #8a1882;
   }
 }
 
 :host-context(.dark-theme) {
   ::ng-deep {
     .mat-card.breadcrumb-card span {
-      color: #5CAACE;
+      color: #5caace;
+    }
+
+    .mat-stroked-button {
+      &:hover {
+        background-color: #093e69;
+      }
     }
   }
 }

projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.scss

@@ -4,9 +4,8 @@
   overflow: auto;
 
   .tree-node {
-    padding-top: 2px;
-    padding-bottom: 2px;
     position: relative;
+    color: #8a1882;
 
     cursor: default;
     font-family: Menlo, monospace;
@@ -21,7 +20,7 @@
       padding: 0;
       position: absolute;
       background-color: transparent;
-      top: 5px;
+      top: 2px;
     }
 
     .mat-icon {
@@ -31,33 +30,32 @@
       display: inline-block;
     }
 
+    .dir-names {
+      color: #9b4807;
+    }
+
+    .console-reference {
+      color: #748591;
+      padding-left: 8px;
+      font-style: italic;
+    }
+
     &:hover {
-      background-color: #cce7df;
-      color: rgba(0, 0, 0, 0.87);
+      background-color: #ebf1fb;
       cursor: pointer;
     }
 
     &.matched {
-      background-color: #d2e6e4;
-      color: rgba(0, 0, 0, 0.87);
+      background-color: #ebf1fb;
 
       &:hover {
-        background-color: #85CDC9;
-      }
-
-      .dir-names, .console-reference {
-        opacity: 0.7;
+        background-color: #cfe8fc;
       }
     }
 
     &.selected,
     &.highlighted {
-      background-color: #4db6ac;
-      color: rgba(0, 0, 0, 0.87);
-
-      .dir-names, .console-reference {
-        opacity: 1.0;
-      }
+      background-color: #cfe8fc;
     }
   }
 }
@@ -67,7 +65,8 @@
     background-color: transparent;
   }
   50% {
-    background-color: #FECF4A;
+    background-color: #fecf4a;
+    color: #748591;
   }
   100% {
     background-color: transparent;
@@ -113,7 +112,7 @@
 
 .angular-element {
   content: '';
-  color: #3f51b5;
+  color: #1b1aa5;
 
   &::before {
     content: '<';
@@ -124,43 +123,34 @@
   }
 }
 
-.dir-names {
-  opacity: 0.7;
-}
-
-.console-reference {
-  padding-left: 8px;
-  opacity: 0.7;
-  font-style: italic;
-}
-
 :host-context(.dark-theme) {
-  .tree-node, .tree-node .mat-icon {
-    color: #fff;
+  .tree-node,
+  .tree-node .mat-icon {
+    color: #5cadd3;
+
+    .dir-names {
+      color: #91adcb;
+    }
 
     .angular-element {
-      color: #5CAACE;
+      color: #dc8c61;
     }
-    
+
     &:hover {
-      background-color: #7b5681;
+      background-color: #262d36;
     }
 
     &.matched {
-      background-color: #61193f;
+      background-color: #093e69;
 
       &:hover {
-        background-color: #880e4f;
+        background-color: #073d69;
       }
     }
 
     &.selected,
     &.highlighted {
-      background-color: #ce93d8;
-      color: black;
-      .mat-icon {
-        color: black;
-      }
+      background-color: #073d69;
     }
   }
 }

projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-tree/property-editor/property-editor.component.scss

@@ -1,3 +1,10 @@
 .editor {
   cursor: text;
+  border: none;
+  width: fit-content;
+}
+
+input {
+  border: none;
+  width: fit-content;
 }

projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-tree/property-view-tree.component.scss

@@ -35,7 +35,7 @@
   margin: 5px 5px 5px 15px;
   mat-tree-node {
     .name {
-      color: #880e4f;
+      color: #ce271e;
       font-weight: 500;
     }
   }

projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-header/property-view-header.component.html

@@ -1 +1 @@
-<mat-toolbar color="accent">Properties of {{ directive }} </mat-toolbar>
+<mat-toolbar>Properties of {{ directive }} </mat-toolbar>

projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/timeline-visualizer.component.html

@@ -18,7 +18,7 @@
   </as-split-area>
   <as-split-area size="25" minSize="15" *ngIf="selectedEntry">
     <mat-card class="selected-entry">
-      <mat-toolbar color="accent">{{ selectedEntry.label }} details</mat-toolbar>
+      <mat-toolbar>{{ selectedEntry.label }} details</mat-toolbar>
       <section class="entry-statistics">
         <div class="txt-total-time">
           <label>Total time spent:</label><span> {{ selectedEntry.value | number }}ms</span>

projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/timeline.component.html

@@ -1,10 +1,8 @@
 <ng-recording-modal *ngIf="!hasFrames && !visualizing"></ng-recording-modal>
 
-<p class="info" *ngIf="!hasFrames && visualizing">
-  There's no information to show.
-</p>
+<p class="info" *ngIf="!hasFrames && visualizing">There's no information to show.</p>
 
-<div style="margin: 10px; height: 100%;">
+<div style="margin: 10px; height: 100%">
   <ng-timeline-controls
     [class.hidden]="!hasFrames"
     [record]="frame"
@@ -23,9 +21,7 @@
     (selectFrames)="selectFrames($event)"
   ></ng-frame-selector>
 
-  <p class="info" *ngIf="hasFrames && frame">
-    Select a bar to preview a particular change detection cycle.
-  </p>
+  <p class="info" *ngIf="hasFrames && !frame">Select a bar to preview a particular change detection cycle.</p>
 
   <ng-timeline-visualizer
     *ngIf="hasFrames && frame"

projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.scss

@@ -27,7 +27,7 @@
     flex-grow: 0;
     flex-shrink: 0;
     overflow-x: hidden;
-    overflow-y: auto;
+    overflow-y: hidden;
 
     /* When <as-split-area [visible]="false"> force size to 0. */
 

src/styles.scss

@@ -10,7 +10,7 @@ body {
 }
 
 // Light theme
-$light-primary: mat-palette($mat-grey, 700);
+$light-primary: mat-palette($mat-grey, 700, 200);
 $light-accent: mat-palette($mat-teal, 300);
 $light-theme: mat-light-theme($light-primary, $light-accent);