fix: Populate ActiveStyleSheetTracker during page load for CSS live reload without HotSwap Agent (#23603) (#23635)

ActiveStyleSheetTracker was only populated by StyleSheetHotswapper.onInit(),
which requires a HotSwap Agent. Without one, the tracker stayed empty and
PublicResourcesLiveUpdater's file watcher silently skipped all CSS updates.

Register active @Stylesheet URLs during normal dev-mode page loading:
- AppShellRegistry.createSettings() tracks AppShell stylesheets
- UIInternals.addComponentDependencies() tracks component stylesheets

Both paths are guarded by !isProductionMode() for zero production overhead.

Also simplify the live reload integration test to rely on the file watcher
instead of manually triggering reload via button clicks.

Fixes #23592

Author: mcollovati

flow-server/src/main/java/com/vaadin/flow/component/internal/UIInternals.java

@@ -56,6 +56,7 @@
 import com.vaadin.flow.dom.impl.BasicElementStateProvider;
 import com.vaadin.flow.function.DeploymentConfiguration;
 import com.vaadin.flow.function.SerializableConsumer;
+import com.vaadin.flow.internal.ActiveStyleSheetTracker;
 import com.vaadin.flow.internal.ConstantPool;
 import com.vaadin.flow.internal.JacksonCodec;
 import com.vaadin.flow.internal.StateNode;
@@ -1049,6 +1050,13 @@ public void addComponentDependencies(
         dependencies.getStyleSheets().forEach(styleSheet -> page
                 .addStyleSheet(styleSheet.value(), styleSheet.loadMode()));
 
+        VaadinService service = session.getService();
+        if (!service.getDeploymentConfiguration().isProductionMode()) {
+            dependencies.getStyleSheets()
+                    .forEach(styleSheet -> ActiveStyleSheetTracker.get(service)
+                            .trackAddForComponent(styleSheet.value()));
+        }
+
         warnForUnavailableBundledDependencies(componentClass, dependencies);
     }
 

flow-server/src/main/java/com/vaadin/flow/server/AppShellRegistry.java

@@ -42,6 +42,7 @@
 import com.vaadin.flow.component.page.TargetElement;
 import com.vaadin.flow.component.page.Viewport;
 import com.vaadin.flow.function.DeploymentConfiguration;
+import com.vaadin.flow.internal.ActiveStyleSheetTracker;
 import com.vaadin.flow.router.PageTitle;
 import com.vaadin.flow.shared.ApplicationConstants;
 import com.vaadin.flow.theme.Theme;
@@ -232,6 +233,13 @@ private AppShellSettings createSettings(VaadinRequest request) {
                 stylesheets.put(href, sheet.value());
             }
         }
+
+        if (!request.getService().getDeploymentConfiguration()
+                .isProductionMode()) {
+            ActiveStyleSheetTracker.get(request.getService())
+                    .trackForAppShell(stylesheets.values());
+        }
+
         addStyleSheets(request, stylesheets, settings);
         return settings;
     }

flow-tests/test-live-reload/src/main/java/com/vaadin/flow/uitest/ui/StylesheetLiveReloadView.java

@@ -15,103 +15,47 @@
  */
 package com.vaadin.flow.uitest.ui;
 
-import java.io.File;
-import java.nio.file.Paths;
-import java.util.List;
-
-import com.vaadin.base.devserver.PublicStyleSheetBundler;
 import com.vaadin.flow.component.dependency.StyleSheet;
 import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.html.NativeButton;
-import com.vaadin.flow.function.DeploymentConfiguration;
-import com.vaadin.flow.internal.BrowserLiveReloadAccessor;
 import com.vaadin.flow.router.Route;
-import com.vaadin.flow.server.VaadinRequest;
-import com.vaadin.flow.server.VaadinService;
 import com.vaadin.flow.uitest.servlet.ViewTestLayout;
 
 @Route(value = "com.vaadin.flow.uitest.ui.StylesheetLiveReloadView", layout = ViewTestLayout.class)
 @StyleSheet("context://css/view/view.css")
 @StyleSheet("context://css/view/for-deletion.css")
 public class StylesheetLiveReloadView extends AbstractLiveReloadView {
 
-    private final PublicStyleSheetBundler bundler;
-
     public StylesheetLiveReloadView() {
-        DeploymentConfiguration configuration = VaadinService.getCurrent()
-                .getDeploymentConfiguration();
-        File projectFolder = configuration.getProjectFolder();
-        String outputFolder = configuration.getBuildFolder() + "/classes";
-        File root = Paths.get(projectFolder.getAbsolutePath(), outputFolder,
-                "META-INF", "resources").toFile();
-        bundler = PublicStyleSheetBundler.forResourceLocations(List.of(root));
-
-        add(makeDiv("appshell-style", "css/styles.css", "css/styles.css"));
-        add(makeDiv("appshell-imported", "css/imported.css", "css/styles.css"));
+        add(makeDiv("appshell-style", "css/styles.css"));
+        add(makeDiv("appshell-imported", "css/imported.css"));
         add(makeDiv("appshell-nested-imported",
-                "css/nested/nested-imported.css", "css/styles.css"));
-        add(makeDiv("appshell-image", "css/images/gobo.png", "css/styles.css"));
-        add(makeDiv("view-style", "css/view/view.css", "css/view/view.css"));
-        add(makeDiv("view-imported", "css/view/imported.css",
-                "css/view/view.css"));
+                "css/nested/nested-imported.css"));
+        add(makeDiv("appshell-image", "css/images/gobo.png"));
+        add(makeDiv("view-style", "css/view/view.css"));
+        add(makeDiv("view-imported", "css/view/imported.css"));
         add(makeDiv("view-nested-imported",
-                "css/view/nested/nested-imported.css", "css/view/view.css"));
-        add(makeDiv("view-image", "css/images/viking.png",
-                "css/view/view.css"));
+                "css/view/nested/nested-imported.css"));
+        add(makeDiv("view-image", "css/images/viking.png"));
         add(makeDivForDelete());
     }
 
-    private Div makeDiv(String cssClass, String resourceFileToChange,
-            String mainCssFile) {
+    private Div makeDiv(String id, String resourceFilePath) {
         Div div = new Div();
-        div.setId(cssClass);
-        div.setText("Style defined in " + resourceFileToChange);
-        div.addClassName(cssClass);
-
-        // Simulate Flow Hotswapper handling of CSS change
-        NativeButton reloadButton = new NativeButton(
-                "Trigger Stylesheet live reload", ev -> {
-                    String bundledCssContent = getContentForFile(mainCssFile);
-                    BrowserLiveReloadAccessor
-                            .getLiveReloadFromService(
-                                    VaadinService.getCurrent())
-                            .ifPresent(reload -> reload.update(
-                                    "context://" + mainCssFile,
-                                    bundledCssContent));
-                });
-        reloadButton.setId("reload-" + cssClass);
-        reloadButton.getElement().setAttribute("test-resource-file-path",
-                resourceFileToChange);
-        div.add(reloadButton);
+        div.setId(id);
+        div.setText("Style defined in " + resourceFilePath);
+        div.addClassName(id);
+        div.getElement().setAttribute("test-resource-file-path",
+                resourceFilePath);
         return div;
     }
 
     private Div makeDivForDelete() {
-        // Separate element to test deletion of a stylesheet file
-        Div deleteDiv = new Div();
-        deleteDiv.setId("view-style-deleted");
-        deleteDiv.setText("Style defined in css/view/view.css (delete test)");
-        // Use the same class so initial style applies before deletion
-        deleteDiv.addClassName("view-style-deleted");
-
-        NativeButton deleteButton = new NativeButton(
-                "Trigger Stylesheet delete",
-                ev -> BrowserLiveReloadAccessor
-                        .getLiveReloadFromService(VaadinService.getCurrent())
-                        .ifPresent(reload -> reload.update(
-                                "context://css/view/for-deletion.css", null)));
-        deleteButton.setId("delete-view-style-deleted");
-        deleteButton.getElement().setAttribute("test-resource-file-path",
+        Div div = new Div();
+        div.setId("view-style-deleted");
+        div.setText("Style defined in css/view/for-deletion.css (delete test)");
+        div.addClassName("view-style-deleted");
+        div.getElement().setAttribute("test-resource-file-path",
                 "css/view/for-deletion.css");
-        deleteDiv.add(deleteButton);
-        return deleteDiv;
-    }
-
-    private String getContentForFile(String cssFile) {
-        String contextPath = VaadinRequest.getCurrent() != null
-                ? VaadinRequest.getCurrent().getContextPath()
-                : "";
-        return bundler.bundle(cssFile, contextPath)
-                .orElseThrow(AssertionError::new);
+        return div;
     }
 }

flow-tests/test-live-reload/src/test/java/com/vaadin/flow/uitest/ui/StylesheetLiveReloadIT.java

@@ -54,6 +54,7 @@ public class StylesheetLiveReloadIT extends AbstractLiveReloadIT {
     private static final String DIV_BG_COLOR_BEFORE_DELETE = "rgba(0, 255, 0, 1)";
 
     private Path resourcesPath;
+    private Path sourceResourcesPath;
     private Path updatedImagePath;
 
     @Before
@@ -67,6 +68,22 @@ public void detectStylesheetsLocation() throws URISyntaxException {
         resourcesPath = Paths.get(markerUrl.toURI()).getParent();
         updatedImagePath = resourcesPath
                 .resolve(Paths.get("css", "images", "vaadin-logo.png"));
+
+        // The file watcher monitors the source directory, not the build
+        // output. Walk up from the target path to find the Maven project
+        // root (containing both "src" and "pom.xml"), then resolve the
+        // source path.
+        Path projectDir = resourcesPath;
+        while (projectDir != null
+                && !(Files.isDirectory(projectDir.resolve("src")) && Files
+                        .isRegularFile(projectDir.resolve("pom.xml")))) {
+            projectDir = projectDir.getParent();
+        }
+        Assert.assertNotNull(
+                "Could not find project root from " + resourcesPath,
+                projectDir);
+        sourceResourcesPath = projectDir
+                .resolve("src/main/resources/META-INF/resources");
     }
 
     @After
@@ -186,12 +203,11 @@ private void triggerReloadStyleSheet(String styledDivID)
 
     private void triggerReload(String divId, ThrowingConsumer<Path> updater)
             throws IOException {
-        TestBenchElement button = $("button").id("reload-" + divId);
-        String resourceRelativePath = button
+        TestBenchElement div = $("div").id(divId);
+        String resourceRelativePath = div
                 .getDomAttribute("test-resource-file-path");
         Assert.assertNotNull(
-                "No test-resource-file-path attribute found for button "
-                        + button,
+                "No test-resource-file-path attribute found for div " + divId,
                 resourceRelativePath);
 
         Path resourcePath = resourcesPath
@@ -206,7 +222,15 @@ private void triggerReload(String divId, ThrowingConsumer<Path> updater)
         // Make sure the servlet container returns the updated content
         waitUntilContentMatches(
                 getRootURL() + "/context/" + resourceRelativePath, content);
-        button.click();
+
+        // Also update the source file so the file watcher detects the
+        // change and triggers a live CSS reload via the debug connection
+        Path sourcePath = sourceResourcesPath
+                .resolve(resourceRelativePath.replace('/', File.separatorChar));
+        if (Files.exists(sourcePath)) {
+            styleSheetRestore.put(sourcePath, Files.readAllBytes(sourcePath));
+            updater.accept(sourcePath);
+        }
     }
 
     private void triggerReloadImage(String styledDivID) throws IOException {
@@ -218,12 +242,12 @@ private void triggerReloadImage(String styledDivID) throws IOException {
     }
 
     private void triggerDelete() throws IOException {
-        TestBenchElement button = $("button").id("delete-view-style-deleted");
-        String resourceRelativePath = button
+        TestBenchElement div = $("div").id("view-style-deleted");
+        String resourceRelativePath = div
                 .getDomAttribute("test-resource-file-path");
         Assert.assertNotNull(
-                "No test-resource-file-path attribute found for button "
-                        + button,
+                "No test-resource-file-path attribute found for div "
+                        + "view-style-deleted",
                 resourceRelativePath);
 
         Path resourcePath = resourcesPath
@@ -235,7 +259,15 @@ private void triggerDelete() throws IOException {
         Files.delete(resourcePath);
 
         waitUntil(driver -> !Files.exists(resourcePath));
-        button.click();
+
+        // Also delete the source file so the file watcher detects the
+        // change and triggers a live CSS reload via the debug connection
+        Path sourcePath = sourceResourcesPath
+                .resolve(resourceRelativePath.replace('/', File.separatorChar));
+        if (Files.exists(sourcePath)) {
+            styleSheetRestore.put(sourcePath, Files.readAllBytes(sourcePath));
+            Files.delete(sourcePath);
+        }
     }
 
     private void waitUntilContentMatches(String url, byte[] expectedContent) {