refactor(devtools): visual separation between directives in the property tab (angular#64222)

also a drive by clean-up to remove some `ng-deep` stylings

PR Close angular#64222

Author: JeanMeche

devtools/cypress/integration/node-selection.e2e.js

@@ -65,10 +65,10 @@ describe('node selection', () => {
         .last()
         .click({force: true});
 
-      cy.get('ng-property-view').last().find('mat-tree-node:contains("todo")').click();
+      cy.get('ng-property-view').first().find('mat-tree-node:contains("todo")').click();
 
       cy.get('ng-property-view')
-        .last()
+        .first()
         .find('mat-tree-node:contains("Build something fun!")')
         .its('length')
         .should('eq', 1);

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

@@ -1,15 +1,5 @@
 :host {
   height: 100%;
-
-  ::ng-deep {
-    as-split-area {
-      overflow-y: hidden;
-    }
-
-    .as-split-gutter-icon {
-      display: none;
-    }
-  }
 }
 
 .forest-breadcrumbs {
@@ -30,6 +20,7 @@
   flex: 1;
   overflow: auto;
   width: 100%;
+  background: var(--senary-contrast);
 
   .no-selected-element {
     text-align: center;

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.scss

@@ -18,6 +18,7 @@
     gap: 0.375rem;
     padding-inline: 0.625rem;
     box-sizing: border-box;
+    background: var(--color-background);
 
     .component-name {
       @extend %body-bold-01;
@@ -71,7 +72,6 @@
     &.mat-accordion {
       .mat-expansion-panel {
         border: none;
-        box-shadow: none;
 
         .mat-expansion-panel-header {
           padding: 0;

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

@@ -1,11 +1,3 @@
 .dehydrated-component {
   padding: 0.75rem;
 }
-
-/* FRAGILE */
-::ng-deep {
-  .mat-expansion-panel {
-    border-bottom: 1px solid var(--color-separator);
-    box-shadow: none !important;
-  }
-}

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts

@@ -34,10 +34,12 @@ export class PropertyTabComponent {
     if (!selected) {
       return;
     }
-    const directives = [...selected.directives];
+    const directives = [];
     if (selected.component) {
       directives.push(selected.component);
     }
+    directives.push(...selected.directives);
+
     return directives;
   });
 }

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

@@ -58,4 +58,8 @@
       }
     }
   }
+
+  .mat-accordion-content:not(:empty):not(:last-child) {
+    border-bottom: 1px solid var(--color-separator);
+  }
 }

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

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+  background: var(--color-background);
+  margin: 0.5rem;
+  border-radius: 0.5rem;
+}

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

@@ -5,12 +5,6 @@
   overflow: auto;
   height: 100%;
 
-  ::ng-deep {
-    .as-split-gutter-icon {
-      display: none;
-    }
-  }
-
   .selected-entry {
     padding: 0.75rem;
     box-sizing: border-box;

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

@@ -79,9 +79,3 @@
     margin-bottom: 1rem;
   }
 }
-
-::ng-deep {
-  .as-split-gutter-icon {
-    display: none;
-  }
-}

devtools/projects/ng-devtools/src/lib/shared/split/split.component.ts

@@ -101,7 +101,9 @@ import {
           (mouseup)="clickGutter($event, $index + 1)"
           (touchend)="clickGutter($event, $index + 1)"
         >
+        @if(showGutterIcon()) {  
           <div class="as-split-gutter-icon"></div>
+        }
         </div>
       }
     }`,
@@ -120,6 +122,7 @@ export class SplitComponent implements OnDestroy {
 
   unit = input<Unit>('percent');
 
+  showGutterIcon = input(false, {transform: booleanAttribute});
   gutterSize = input(11, {transform: (v: unknown) => getInputPositiveNumber(v, 11)});
   gutterStep = input(1, {transform: (v: unknown) => getInputPositiveNumber(v, 1)});
   restrictMove = input(false, {transform: booleanAttribute});