From e40307803a969bbb17851effa005179e02b38d4b Mon Sep 17 00:00:00 2001 From: Matthieu Riegler Date: Fri, 3 Oct 2025 13:48:55 +0200 Subject: [PATCH] refactor(devtools): visual separation between directives in the property tab (#64222) also a drive by clean-up to remove some `ng-deep` stylings PR Close #64222 --- devtools/cypress/integration/node-selection.e2e.js | 4 ++-- .../directive-explorer.component.scss | 11 +---------- .../property-tab-header.component.scss | 2 +- .../property-tab/property-tab.component.scss | 8 -------- .../property-tab/property-tab.component.ts | 4 +++- .../property-view-body.component.scss | 4 ++++ .../property-view/property-view.component.scss | 6 ++++++ .../recording-visualizer.component.scss | 6 ------ .../ng-devtools/src/lib/devtools.component.scss | 6 ------ .../src/lib/shared/split/split.component.ts | 3 +++ .../projects/ng-devtools/src/styles/_overrides.scss | 1 + 11 files changed, 21 insertions(+), 34 deletions(-) diff --git a/devtools/cypress/integration/node-selection.e2e.js b/devtools/cypress/integration/node-selection.e2e.js index 6ed76401c92..580a10b1a19 100644 --- a/devtools/cypress/integration/node-selection.e2e.js +++ b/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); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.scss index c519139c084..d0fb0097ff2 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.scss +++ b/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; diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.scss index d41fa34b185..7864538acd2 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.scss +++ b/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; diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.scss index 6cb5480110e..87820ad8117 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.scss +++ b/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; - } -} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts index 02b5cc3e6c6..eb435975a26 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts +++ b/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; }); } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.scss index 4c7cde7dfc1..6f29fa93058 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.scss +++ b/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); + } } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.scss index e69de29bb2d..68504073a62 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.scss +++ b/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; +} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-visualizer/recording-visualizer.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-visualizer/recording-visualizer.component.scss index 6b307d713f1..a2c1e4870fa 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-visualizer/recording-visualizer.component.scss +++ b/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; diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.scss b/devtools/projects/ng-devtools/src/lib/devtools.component.scss index 4f57ce1800d..3ddecdf3858 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools.component.scss +++ b/devtools/projects/ng-devtools/src/lib/devtools.component.scss @@ -79,9 +79,3 @@ margin-bottom: 1rem; } } - -::ng-deep { - .as-split-gutter-icon { - display: none; - } -} diff --git a/devtools/projects/ng-devtools/src/lib/shared/split/split.component.ts b/devtools/projects/ng-devtools/src/lib/shared/split/split.component.ts index f74a91b2755..5cb8726241e 100644 --- a/devtools/projects/ng-devtools/src/lib/shared/split/split.component.ts +++ b/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()) {
+ } } }`, @@ -120,6 +122,7 @@ export class SplitComponent implements OnDestroy { unit = input('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}); diff --git a/devtools/projects/ng-devtools/src/styles/_overrides.scss b/devtools/projects/ng-devtools/src/styles/_overrides.scss index b8a0f8570d7..aeeda461f79 100644 --- a/devtools/projects/ng-devtools/src/styles/_overrides.scss +++ b/devtools/projects/ng-devtools/src/styles/_overrides.scss @@ -7,6 +7,7 @@ @include mat.expansion-overrides( ( container-background-color: transparent, + container-elevation-shadow: none, ) );