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
 

pom.xml

@@ -4,7 +4,7 @@
   <parent>
     <groupId>org.jenkins-ci.plugins</groupId>
     <artifactId>plugin</artifactId>
-    <version>4.31</version>
+    <version>4.34</version>
     <relativePath />
   </parent>
   <groupId>io.jenkins.plugins</groupId>
@@ -14,10 +14,10 @@
   <properties>
     <revision>0.7</revision>
     <changelist>-SNAPSHOT</changelist>
-    <jenkins.version>2.222.4</jenkins.version>
+    <jenkins.version>2.336-rc32081.db_eed62c0c0e</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>

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

@@ -15,13 +15,14 @@
 @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
@@ -37,6 +38,29 @@ 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', 'neo2'
+   *
+   * <p>Used in the html dataset namespace for the theme.
+   * @return the theme key
+   */
+  public abstract String getThemeKey();
+
+  /**
+   * If the theme's CSS will only be selected under the '[data-theme=theme-id]' selector
+   *
+   * It will be served on all pages even if not activated, ensure all selectors are behind the dataset id.
+   *
+   * 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,9 +1,54 @@
 <?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">
   <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}"/>
+
+    <st:adjunct includes="io.jenkins.plugins.thememanager.style.main" />
+
+    <st:adjunct includes="lib.form.radioBlock.radioBlock"/>
+
+    <f:entry title="${%Theme}" field="theme">
+      <div class="app-theme-picker">
+        <j:set var="currentInstance" value="${instance['theme']}" />
+        <j:set var="currentDescriptor" value="${currentInstance.descriptor}" />
+        <j:set var="uniqueId" value="${h.generateId()}" />
+
+        <j:forEach var="theme" items="${descriptors}" varStatus="loop">
+          <div class="radioBlock-container">
+            <!-- this ID marks the beginning -->
+            <div class="tr help-sibling radio-block-start row-group-start row-set-start" hasHelp="false">
+              <div class="app-theme-picker__item">
+                <input type="radio"
+                       name="${uniqueId}.theme"
+                       id="${uniqueId}.theme-${loop.index}"
+                       value="${loop.index}"
+                       class="radio-block-control block-control"
+                       data-theme="${theme.themeKey}"
+                       checked="${currentDescriptor == theme ? 'true' : null}"/>
+                <label for="${uniqueId}.theme-${loop.index}">
+                  <div class="app-theme-picker__picker" data-theme="${theme.themeKey}">
+                    <svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                        <rect fill="var(--background)" x="0" y="0" width="320" height="180"/>
+                        <rect fill="var(--panel-border-color)" x="20" y="50" width="66" height="75" rx="5"/>
+                        <rect fill="var(--panel-border-color)" x="20" y="135" width="66" height="75" rx="5"/>
+                        <rect fill="var(--header-bg-classic)" x="0" y="0" width="320" height="30"/>
+                        <rect fill="var(--text-color)" x="106" y="50" width="90" height="20" rx="5"/>
+                        <rect fill="var(--text-color-secondary)" x="106" y="80" width="60" height="20" rx="5"/>
+                        <rect fill="var(--text-color-secondary)" x="106" y="110" width="30" height="20" rx="5"/>
+                      </g>
+                    </svg>
+                  </div>
+                  <span>${theme.displayName}</span>
+                </label>
+              </div>
+            </div>
+            <f:class-entry descriptor="${theme}" />
+            <!-- end marker -->
+            <div class="tr row-set-end radio-block-end row-group-end" style="display:none"/>
+          </div>
+        </j:forEach>
+      </div>
     </f:entry>
 
     <f:entry field="disableUserThemes">

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/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
+}