Fix Vue webpack chunk loading in subfolders

- Fix vue chunk loading in subfolders
- Fix color contrast in debug bar

.github/workflows/ci.yml

@@ -266,7 +266,7 @@ jobs:
           docker compose exec -T app .github/actions/test_tests-e2e.sh
       - name: "Upload Cypress screenshots"
         if: "${{ failure() && steps.e2e.conclusion == 'failure' }}"
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: cypress-screenshots
           path: tests/cypress/screenshots

.vue.webpack.config.js

@@ -11,7 +11,7 @@ const config = {
         filename: 'app.js',
         chunkFilename: "[name].js",
         path: path.resolve(__dirname, 'public/build/vue'),
-        publicPath: '/public/build/vue/',
+        publicPath: '/public/build/vue',
         asyncChunks: true,
         clean: true,
     },

js/src/vue/Debug/Widget/Profiler.vue

@@ -1,4 +1,5 @@
 <script setup>
+    import ProfilerTable from './ProfilerTable.vue';
     import {computed, ref} from "vue";
 
     const props = defineProps({
@@ -19,8 +20,8 @@
             Hide near-instant sections (&lt;= 1 ms):
             <input type="checkbox" name="hide_instant_sections" v-model="hide_instant_sections">
         </label>
-        <widget-profiler-table :parent_duration="0" :nest_level="0" :profiler_sections="profiler_sections" :parent_id="null"
-                               :hide_instant_sections="hide_instant_sections"></widget-profiler-table>
+        <ProfilerTable :parent_duration="0" :nest_level="0" :profiler_sections="profiler_sections" :parent_id="null"
+                       :hide_instant_sections="hide_instant_sections"></ProfilerTable>
     </div>
 </template>
 

js/src/vue/Debug/Widget/ProfilerTable.vue

@@ -1,6 +1,6 @@
 <script setup>
+    /* global tinycolor */
     import {computed} from "vue";
-    import tinycolor from 'tinycolor2';
 
     const props = defineProps({
         parent_id: {
@@ -30,7 +30,7 @@
 
     function getProfilerCategoryColor(category) {
         const predefined_colors = {
-            core: '#526dad',
+            core: '#89a2e1',
             db: '#9252ad',
             twig: '#64ad52',
             plugins: '#a077a6',
@@ -132,7 +132,7 @@
                 <tr :data-profiler-section-id="section.id" v-show="!props.hide_instant_sections || (section.duration > instant_threshold)">
                     <td class="nesting-spacer" v-for="i in nest_level" :key="i" aria-hidden="true"></td>
                     <td data-prop="category">
-                        <span class="category-badge" :style="`background-color: ${section.bg_color}; color: ${section.text_color}`">
+                        <span class="category-badge fw-bold" :style="`background-color: ${section.bg_color}; color: ${section.text_color}`">
                             {{ section.category }}
                         </span>
                     </td>

js/src/vue/Debug/Widget/SQLRequests.vue

@@ -175,4 +175,7 @@
     #debug-sql-request-table::v-deep(span.mtk1) {
         color: var(--tblr-body-color);
     }
+    #debug-sql-request-table code {
+        color: var(--tblr-body-color);
+    }
 </style>

js/src/vue/Kanban/TeamBadgeProvider.js

@@ -31,8 +31,7 @@
  * ---------------------------------------------------------------------
  */
 
-import tinycolor from 'tinycolor2';
-
+/* global tinycolor */
 export class TeamBadgeProvider {
     constructor(display_initials, max_team_images = 3) {
         this.badges = {

js/src/vue/app.js

@@ -68,6 +68,11 @@ const component_context = import.meta.webpackContext('.', {
     mode: 'lazy',
     chunkName: '/vue-sfc/[request]'
 });
+
+/* global __webpack_public_path__ */
+// eslint-disable-next-line no-global-assign
+__webpack_public_path__ = CFG_GLPI.root_doc + __webpack_public_path__;
+
 const components = {};
 component_context.keys().forEach((f) => {
     // Ex: ./Debug/Toolbar.vue => DebugToolbar