Add previews of the themes to the config page

README.md

@@ -1,15 +1,11 @@
-# Theme Manager plugin for Jenkins (Incubating)
+# Theme Manager plugin for Jenkins
 
 [![Build Status](https://ci.jenkins.io/job/Plugins/job/theme-manager-plugin/job/master/badge/icon)](https://ci.jenkins.io/job/Plugins/job/theme-manager-plugin/job/master/)
 [![Contributors](https://img.shields.io/github/contributors/jenkinsci/theme-manager-plugin.svg)](https://github.com/jenkinsci/theme-manager-plugin/graphs/contributors)
 [![Jenkins Plugin](https://img.shields.io/jenkins/plugin/v/theme-manager.svg)](https://plugins.jenkins.io/theme-manager)
 [![GitHub release](https://img.shields.io/github/release/jenkinsci/theme-manager-plugin.svg?label=changelog)](https://github.com/jenkinsci/theme-manager-plugin/releases/latest)
 [![Jenkins Plugin Installs](https://img.shields.io/jenkins/plugin/i/theme-manager.svg?color=blue)](https://plugins.jenkins.io/theme-manager)
 
-:exclamation: **Incubation Stage**: Currently this plugin is in the incubation stage.
-It's possible there will be some breaking changes as it evolves.
-You are welcome to try out this plugin and to provide your feedback.
-Contributions are welcome!
 
 ## Introduction
 
@@ -39,15 +35,13 @@ Manage Jenkins → Configure System → Built-in Themes
 
 ![Global configuration](docs/images/global-theme-manager.png)
 
-You can stop users from being able to change their theme by selecting the:
-'Disable user theme override' option
+You can stop users from being able to change their theme by selecting the 
+'Do not allow users to select a different theme' checkbox
 
 ### User
 
 'Your name' profile link (in top right) → Configure → Built-in Themes
 
-![User configuration](docs/images/user-theme-manager.png)
-
 ### Configuration as Code example
 
 ```yaml

pom.xml

@@ -4,7 +4,7 @@
   <parent>
     <groupId>org.jenkins-ci.plugins</groupId>
     <artifactId>plugin</artifactId>
-    <version>4.31</version>
+    <version>4.36</version>
     <relativePath />
   </parent>
   <groupId>io.jenkins.plugins</groupId>
@@ -14,17 +14,17 @@
   <properties>
     <revision>0.7</revision>
     <changelist>-SNAPSHOT</changelist>
-    <jenkins.version>2.222.4</jenkins.version>
+    <jenkins.version>2.336</jenkins.version>
     <java.level>8</java.level>
   </properties>
-  <name>Theme Manager (Incubating)</name>
+  <name>Theme Manager</name>
   <url>https://github.com/jenkinsci/${project.artifactId}-plugin</url>
   <dependencyManagement>
     <dependencies>
       <dependency>
         <groupId>io.jenkins.tools.bom</groupId>
-        <artifactId>bom-2.222.x</artifactId>
-        <version>887.vae9c8ac09ff7</version>
+        <artifactId>bom-2.303.x</artifactId>
+        <version>1155.v77b_fd92a_26fc</version>
         <scope>import</scope>
         <type>pom</type>
       </dependency>

src/main/java/io/jenkins/plugins/thememanager/ThemeManagerFactoryDescriptor.java

@@ -15,16 +15,17 @@
 @Restricted(Beta.class)
 public abstract class ThemeManagerFactoryDescriptor extends Descriptor<ThemeManagerFactory> {
 
-  /** Unused */
-  @Deprecated
-  @Restricted(DoNotUse.class)
   public ThemeManagerFactory getInstance() {
-    return null;
+    try {
+      //noinspection deprecation
+      return this.clazz.newInstance();
+    } catch (InstantiationException | IllegalAccessException e) {
+      throw new IllegalStateException("Failed to instantiate " + clazz.getName(), e);
+    }
   }
-  ;
 
   /**
-   * A unique name for a theme plugin
+   * A name for a theme plugin
    *
    * <p>This should be all lower case and URL safe, i.e. 'dark', 'neo2'
    *
@@ -37,6 +38,31 @@ public ThemeManagerFactory getInstance() {
    */
   public abstract String getThemeId();
 
+  /**
+   * A unique key for a theme plugin
+   *
+   * <p>This should be all lower case and URL safe, i.e. 'dark-system', 'neo2'
+   *
+   * <p>Used in the html dataset namespace for the theme.
+   * @return the theme key
+   */
+  public String getThemeKey() {
+    return getThemeId();
+  }
+
+  /**
+   * If the theme's CSS will only be selected under the '[data-theme=theme-key]' selector
+   *
+   * It will be served on all pages even if not activated, ensure all selectors are behind the dataset selector.
+   *
+   * All new themes should be namespaced
+   *
+   * @return if it's namespaced.
+   */
+  public boolean isNamespaced() {
+    return false;
+  }
+
   /**
    * Name of the theme resource file.
    *

src/main/java/io/jenkins/plugins/thememanager/ThemeManagerPageDecorator.java

@@ -1,12 +1,15 @@
 package io.jenkins.plugins.thememanager;
 
 import edu.umd.cs.findbugs.annotations.CheckForNull;
+import hudson.DescriptorExtensionList;
 import hudson.Extension;
 import hudson.ExtensionList;
 import hudson.model.PageDecorator;
+import hudson.util.ListBoxModel;
 import java.util.LinkedHashSet;
 import java.util.List;
 import java.util.Set;
+import java.util.stream.Collectors;
 import net.sf.json.JSONObject;
 import org.apache.commons.lang.StringUtils;
 import org.jenkinsci.Symbol;
@@ -78,16 +81,50 @@ public Theme findTheme() {
     return null;
   }
 
+  @CheckForNull
+  public ThemeManagerFactory findThemeFactory() {
+    if (!disableUserThemes) {
+      ThemeManagerFactory userTheme = ThemeUserProperty.forCurrentUserFactory();
+      if (userTheme != null) {
+        return userTheme;
+      }
+    }
+
+    if (theme != null) {
+      return theme;
+    }
+    return null;
+  }
+
   /** Get the complete header HTML for all configured theme elements. */
   public String getHeaderHtml() {
-    Theme theme = findTheme();
-    if (theme != null) {
-      boolean injectCss = shouldInjectCss();
-      Set<String> data = new LinkedHashSet<>(theme.generateHeaderElements(injectCss));
+    boolean injectCss = shouldInjectCss();
+    Set<String> namespacedThemes = ThemeManagerFactoryDescriptor.all()
+            .stream()
+            .filter(ThemeManagerFactoryDescriptor::isNamespaced)
+            .map(desc -> desc.getInstance().getTheme().generateHeaderElements(injectCss))
+            .flatMap(Set::stream)
+            .collect(Collectors.toSet());
+
+    ThemeManagerFactory themeManagerFactory = findThemeFactory();
+    if (themeManagerFactory != null && !themeManagerFactory.getDescriptor().isNamespaced()) {
+      Set<String> data = new LinkedHashSet<>(themeManagerFactory.getTheme().generateHeaderElements(injectCss));
+      data.addAll(namespacedThemes);
       return StringUtils.join(data, "\n");
     }
 
-    return null;
+    return StringUtils.join(namespacedThemes, "\n");
+  }
+
+  @SuppressWarnings("unused") // called by jelly
+  public String getThemeKey() {
+    ThemeManagerFactory themeFactory = findThemeFactory();
+
+    if (themeFactory == null) {
+      return null;
+    }
+
+    return themeFactory.getDescriptor().getThemeKey();
   }
 
   /**

src/main/java/io/jenkins/plugins/thememanager/ThemeUserProperty.java

@@ -30,6 +30,15 @@ public void setTheme(ThemeManagerFactory theme) {
 
   @CheckForNull
   public static Theme forCurrentUser() {
+    ThemeManagerFactory factory = forCurrentUserFactory();
+    if (factory == null) {
+      return null;
+    }
+    return factory.getTheme();
+  }
+
+  @CheckForNull
+  public static ThemeManagerFactory forCurrentUserFactory() {
     final User current = User.current();
     if (current == null) {
       return null;
@@ -40,7 +49,7 @@ public static Theme forCurrentUser() {
       return null;
     }
 
-    return property.getTheme().getTheme();
+    return property.getTheme();
   }
 
   @Extension

src/main/java/io/jenkins/plugins/thememanager/none/NoOpThemeManagerFactory.java

@@ -34,5 +34,10 @@ public String getDisplayName() {
     public String getThemeId() {
       return "none";
     }
+
+    @Override
+    public String getThemeKey() {
+      return "none";
+    }
   }
 }

src/main/resources/io/jenkins/plugins/thememanager/ThemeManagerPageDecorator/global.jelly

@@ -1,11 +1,9 @@
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:f="/lib/form">
+<j:jelly xmlns:j="jelly:core" xmlns:f="/lib/form" xmlns:st="jelly:stapler" xmlns:th="/lib/theme-manager">
   <f:section title="${%Built-in Themes}">
-    <j:invokeStatic var="descriptors" className="io.jenkins.plugins.thememanager.ThemeManagerFactoryDescriptor" method="all"/>
-    <f:entry title="${%Theme}">
-      <f:hetero-radio field="theme" descriptors="${descriptors}"/>
-    </f:entry>
-
+
+    <th:selector />
+
     <f:entry field="disableUserThemes">
       <f:checkbox title="${%Do not allow users to select a different theme}" />
     </f:entry>

src/main/resources/io/jenkins/plugins/thememanager/ThemeManagerPageDecorator/header.jelly

@@ -1,4 +1,6 @@
 <?jelly escape-by-default='false'?>
-<j:jelly xmlns:j="jelly:core">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
+  <script id="theme-manager-theme" type="application/json">{ "id": "${it.themeKey}" }</script>
+  <st:adjunct includes="io.jenkins.plugins.thememanager.header.main" />
   ${it.getHeaderHtml()}
 </j:jelly>

src/main/resources/io/jenkins/plugins/thememanager/ThemeUserProperty/config.jelly

@@ -1,8 +1,4 @@
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:f="/lib/form">
-  <j:invokeStatic var="descriptors" className="io.jenkins.plugins.thememanager.ThemeManagerFactoryDescriptor"
-                  method="all"/>
-  <f:entry title="${%Theme}">
-    <f:hetero-radio field="theme" descriptors="${descriptors}"/>
-  </f:entry>
+<j:jelly xmlns:j="jelly:core" xmlns:f="/lib/form" xmlns:th="/lib/theme-manager">
+  <th:selector />
 </j:jelly>

src/main/resources/io/jenkins/plugins/thememanager/header/main.js

@@ -0,0 +1,6 @@
+const themeJson = document.getElementById('theme-manager-theme').text
+const theme = JSON.parse(themeJson);
+
+if (theme.id && theme.id !== '') {
+    document.documentElement.dataset.theme = theme.id
+}