feature #54364 [WebProfilerBundle] [WebProfilerPanel] Update the desi…

…gn of the workflow profiler panel (javiereguiluz)

This PR was squashed before being merged into the 7.1 branch.

Discussion
----------

[WebProfilerBundle] [WebProfilerPanel] Update the design of the workflow profiler panel

| Q             | A
| ------------- | ---
| Branch?       | 7.1
| Bug fix?      | no
| New feature?  | yes
| Deprecations? | no
| Issues        | -
| License       | MIT

The Workflow profiler panel is very nice, but I think it has some design issues, mostly on dark mode. This PR proposes some changes:

| Before | After
| ------ | -----
| ![workflow-profiler-dark-before](https://github.com/symfony/symfony/assets/73419/6420854f-a120-490b-9bd6-6797fb5e4c51) | ![workflow-profiler-dark-after](https://github.com/symfony/symfony/assets/73419/3cbfafa7-9fee-433e-816f-0bba4b6500ba)
| ![workflow-profiler-light-before](https://github.com/symfony/symfony/assets/73419/b374a23e-93a3-45a0-a2eb-edf98781c7de) | ![workflow-profiler-light-after](https://github.com/symfony/symfony/assets/73419/7d651f93-2d34-4676-97d1-bf3e769ef546)

I don't have before/after screenshots, but this PR also fixes the design of the dialog that opens when you click on any node.

-----

There's other obvious issue which is that the SVG diagram overflows the page. I looked into JS libraries such as https://github.com/anvaka/panzoom and https://github.com/bumbu/svg-pan-zoom to add a "pan + zoom" utility ... but for now I think this would be worse. A full-size overflown diagram is more productive to quickly find issues.

Commits
-------

6297faa [WebProfilerBundle] [WebProfilerPanel] Update the design of the workflow profiler panel

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/workflow.html.twig

@@ -3,7 +3,15 @@
 {% block stylesheets %}
     {{ parent() }}
     <style>
+        :root {
+            --workflow-dialog-background: var(--gray-200);
+        }
+        .theme-dark {
+            --workflow-dialog-background: var(--gray-900);
+        }
+
         dialog {
+            background: var(--workflow-dialog-background);
             border: none;
             border-radius: 6px;
             box-shadow: var(--settings-modal-shadow);
@@ -32,7 +40,10 @@
         }
 
         dialog h2 {
-            margin-top: 0.2em
+            box-shadow: none !important;
+            color: var(--page-color);
+            font-size: 18px;
+            margin: 0 0 .5em;
         }
 
         dialog i.cancel {
@@ -42,47 +53,37 @@
         }
 
         dialog table {
-            border: 1px solid #ccc;
+            background: var(--page-background);
             border-collapse: collapse;
+            border-radius: 4px;
+            box-shadow: inset 0 0 0 1px var(--table-border-color);
+            color: var(--page-color);
             margin: 0 0 1em 0;
             margin-bottom: 1em;
             padding: 0;
-            table-layout: fixed;
         }
 
         dialog table tr {
-            background-color: #f8f8f8;
-            border: 1px solid #ddd;
+            border: 1px solid var(--table-border-color);
             padding: .35em;
         }
 
         dialog table th,
         dialog table td {
+            border: 1px solid var(--table-border-color);
             padding: .625em;
-            text-align: center;
+            text-align: left;
         }
 
-        dialog table th {
+        dialog table thead th {
+            background: var(--table-header);
+            border-top-left-radius: 4px;
+            border-top-right-radius: 4px;
             font-size: .85em;
-            letter-spacing: .1em;
-            text-transform: uppercase;
         }
 
         dialog menu {
-            padding: 0;
-            margin: 0;
-            display: flex;
-            align-items: center;
-            flex-direction: row;
-            vertical-align: middle;
-            justify-content: center;
-        }
-
-        dialog menu small {
-            margin-right: auto;
-        }
-        dialog menu small i {
-            margin-right: 3px;
+            display: none;
         }
 
         @keyframes scale {
@@ -133,9 +134,23 @@
     {% else %}
         <script type="module">
             import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+            const isDarkMode = document.querySelector('body').classList.contains('theme-dark');
             mermaid.initialize({
                 flowchart: { useMaxWidth: false },
                 securityLevel: 'loose',
+                'theme': 'base',
+                'themeVariables': {
+                    darkMode: isDarkMode,
+                    'fontFamily': 'var(--font-family-system)',
+                    'fontSize': 'var(--font-size-body)',
+                    // the properties below don't support CSS variables
+                    'primaryColor': isDarkMode ? 'lightsteelblue' : 'aliceblue',
+                    'primaryTextColor': isDarkMode ? '#000' : '#000',
+                    'primaryBorderColor': isDarkMode ? 'steelblue' : 'lightsteelblue',
+                    'lineColor': isDarkMode ? '#939393' : '#d4d4d4',
+                    'secondaryColor': isDarkMode ? 'lightyellow' : 'lightyellow',
+                    'tertiaryColor': isDarkMode ? 'lightSalmon' : 'lightSalmon',
+                }
             });
 
             {% for name, data in collector.workflows %}