feat: group and highlight components by tag name

[MrPa2a]

Related issues

🚀 Feature #2532

Use postMessage to play with the configs (chrome extension part is not done yet)

• Set up groups (same message for the following configurations elementMinWidth, elementMinHeight, throttleInterval, maxDepth, chipsOpacity and autoRefresh)

window.postMessage({
  type: 'otter',
  to: 'app',
  content: {
    dataType: 'changeHighlightConfiguration',
    groupsInfo: {
      otter: {
        backgroundColor: '#f4dac6',
        color: 'black',
        regexp: '^o3r',
        displayName: 'o3r'
      },
      designFactory: {
        backgroundColor: '#000835',
        regexp: '^df',
        displayName: 'df'
      },
      ngBootstrap: {
        backgroundColor: '#0d6efd',
        regexp: '^ngb',
        displayName: 'ngb'
      }
    },
    maxDepth: 6,
    chipsOpacity: 0.8,
    autoRefresh: true
  }
});

• Activate highlight

window.postMessage({
  type: 'otter',
  to: 'app',
  content: {
    dataType: 'toggleHighlight',
    isRunning: true
  }
});

• You can also try to hover the chips and play with the opacity to have a better view on the highlighted elements

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 497c4a2.

Command	Status	Duration	Result
nx run-many --target=test-int	✅ Succeeded	7m 10s	View ↗
nx run-many --target=test-e2e	✅ Succeeded	2m 33s	View ↗
nx run-many --target=build --projects=eslint-pl...	✅ Succeeded	<1s	View ↗
nx run-many --target=publish --nx-bail --userco...	✅ Succeeded	31s	View ↗
nx run-many --target=prepare-publish --exclude-...	✅ Succeeded	7s	View ↗
nx run-many --target=build,build-swagger	✅ Succeeded	2m 54s	View ↗
nx affected --target=test --collectCoverage --c...	✅ Succeeded	40s	View ↗
nx run-many --target=documentation	✅ Succeeded	1m 23s	View ↗
Additional runs (3)	✅ Succeeded	...	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-03-28 16:46:49 UTC

[codecov]

Codecov Report

Attention: Patch coverage is 39.60396% with 122 lines in your changes missing coverage. Please review.

Project coverage is 72.01%. Comparing base (f4e354c) to head (497c4a2).
Report is 781 commits behind head on main.

Files with missing lines	Patch %	Lines
...mponents/src/devkit/highlight/highlight.service.ts	5.61%	84 Missing ⚠️
.../src/devkit/components-devtools.message.service.ts	4.34%	22 Missing ⚠️
...es/@o3r/components/src/devkit/highlight/helpers.ts	80.24%	15 Missing and 1 partial ⚠️

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[kpanot]

Suggested change

	GroupInfo,
	type GroupInfo,

[kpanot]

Why it is not exposed as injectable?

[kpanot]

I think you should unit test this function as well