Improve cache buster for user backgrounds

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

Author: PVince81

apps/theming/lib/Controller/UserThemeController.php

@@ -156,7 +156,7 @@ public function getBackground(): Http\Response {
 	 * @NoAdminRequired
 	 */
 	public function setBackground(string $type = 'default', string $value = ''): JSONResponse {
-		$currentVersion = (int)$this->config->getUserValue($this->userId, Application::APP_ID, 'backgroundVersion', '0');
+		$currentVersion = (int)$this->config->getUserValue($this->userId, Application::APP_ID, 'userCacheBuster', '0');
 
 		try {
 			switch ($type) {
@@ -182,7 +182,7 @@ public function setBackground(string $type = 'default', string $value = ''): JSO
 		}
 
 		$currentVersion++;
-		$this->config->setUserValue($this->userId, Application::APP_ID, 'backgroundVersion', (string)$currentVersion);
+		$this->config->setUserValue($this->userId, Application::APP_ID, 'userCacheBuster', (string)$currentVersion);
 
 		return new JSONResponse([
 			'type' => $type,

apps/theming/lib/Listener/BeforeTemplateRenderedListener.php

@@ -89,11 +89,6 @@ public function handle(Event $event): void {
 				$this->config->getUserValue($userId, Application::APP_ID, 'background', 'default'),
 			);
 
-			$this->initialState->provideInitialState(
-				'backgroundVersion',
-				(int)$this->config->getUserValue($userId, Application::APP_ID, 'backgroundVersion', '0'),
-			);
-
 			$this->initialState->provideInitialState(
 				'themingDefaultBackground',
 				 $this->config->getAppValue('theming', 'backgroundMime', ''),

apps/theming/lib/Service/ThemeInjectionService.php

@@ -22,22 +22,35 @@
  */
 namespace OCA\Theming\Service;
 
+use OCA\Theming\AppInfo\Application;
 use OCA\Theming\Themes\DefaultTheme;
+use OCP\IConfig;
 use OCP\IURLGenerator;
+use OCP\IUserSession;
 use OCP\Util;
 
 class ThemeInjectionService {
 
 	private IURLGenerator $urlGenerator;
 	private ThemesService $themesService;
 	private DefaultTheme $defaultTheme;
+	private IConfig $config;
+	private ?string $userId;
 
 	public function __construct(IURLGenerator $urlGenerator,
 								ThemesService $themesService,
-								DefaultTheme $defaultTheme) {
+								DefaultTheme $defaultTheme,
+								IConfig $config,
+								IUserSession $userSession) {
 		$this->urlGenerator = $urlGenerator;
 		$this->themesService = $themesService;
 		$this->defaultTheme = $defaultTheme;
+		$this->config = $config;
+		if ($userSession->getUser() !== null) {
+			$this->userId = $userSession->getUser()->getUID();
+		} else {
+			$this->userId = null;
+		}
 	}
 
 	public function injectHeaders() {
@@ -50,13 +63,13 @@ public function injectHeaders() {
 
 		// Default theme fallback
 		$this->addThemeHeader($defaultTheme->getId());
-		
+
 		// Themes applied by media queries
 		foreach($mediaThemes as $theme) {
 			$this->addThemeHeader($theme->getId(), true, $theme->getMediaQuery());
 		}
 
-		// Themes 
+		// Themes
 		foreach($this->themesService->getThemes() as $theme) {
 			// Ignore default theme as already processed first
 			if ($theme->getId() === $this->defaultTheme->getId()) {
@@ -68,15 +81,24 @@ public function injectHeaders() {
 
 	/**
 	 * Inject theme header into rendered page
-	 * 
+	 *
 	 * @param string $themeId the theme ID
 	 * @param bool $plain request the :root syntax
 	 * @param string $media media query to use in the <link> element
 	 */
 	private function addThemeHeader(string $themeId, bool $plain = true, string $media = null) {
+		$cacheBuster = $this->config->getAppValue('theming', 'cachebuster', '0');
+		if ($this->userId !== null) {
+			// need to bust the cache for the CSS file when the user background changed as its
+			// URL is served in those files
+			$userCacheBuster = $this->config->getUserValue($this->userId, Application::APP_ID, 'userCacheBuster', '0');
+			$cacheBuster .= $this->userId . '_' . $userCacheBuster;
+		}
+
 		$linkToCSS = $this->urlGenerator->linkToRoute('theming.Theming.getThemeStylesheet', [
 			'themeId' => $themeId,
 			'plain' => $plain,
+			'v' => substr(sha1($cacheBuster), 0, 8),
 		]);
 		Util::addHeader('link', [
 			'rel' => 'stylesheet',

apps/theming/lib/Themes/DefaultTheme.php

@@ -239,10 +239,11 @@ public function getCSSVariables(): array {
 		$user = $this->userSession->getUser();
 		if ($appManager->isEnabledForUser(Application::APP_ID) && $user !== null) {
 			$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default');
-			$currentVersion = (int)$this->config->getUserValue($user->getUID(), Application::APP_ID, 'backgroundVersion', '0');
+			$currentVersion = (int)$this->config->getUserValue($user->getUID(), Application::APP_ID, 'userCacheBuster', '0');
 
 			if ($themingBackground === 'custom') {
-				$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkToRouteAbsolute('theming.userTheme.getBackground') . "?v=$currentVersion')";
+				$cacheBuster = substr(sha1($user->getUID() . '_' . $currentVersion), 0, 8);
+				$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkToRouteAbsolute('theming.userTheme.getBackground') . "?v=$cacheBuster')";
 			} elseif (isset(BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground])) {
 				$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "/img/background/$themingBackground") . "')";
 			} elseif (substr($themingBackground, 0, 1) === '#') {

apps/theming/src/UserThemes.vue

@@ -88,7 +88,6 @@ const enforceTheme = loadState('theming', 'enforceTheme', '')
 const shortcutsDisabled = loadState('theming', 'shortcutsDisabled', false)
 
 const background = loadState('theming', 'background')
-const backgroundVersion = loadState('theming', 'backgroundVersion')
 const themingDefaultBackground = loadState('theming', 'themingDefaultBackground')
 const shippedBackgroundList = loadState('theming', 'shippedBackgrounds')
 
@@ -109,7 +108,6 @@ export default {
 			enforceTheme,
 			shortcutsDisabled,
 			background,
-			backgroundVersion,
 			themingDefaultBackground,
 		}
 	},
@@ -169,7 +167,6 @@ export default {
 	methods: {
 		updateBackground(data) {
 			this.background = (data.type === 'custom' || data.type === 'default') ? data.type : data.value
-			this.backgroundVersion = data.version
 			this.updateGlobalStyles()
 			this.$emit('update:background')
 		},