[JENKINS 60920] header breadcrumbs CSS update

core/src/main/java/hudson/Functions.java

@@ -493,6 +493,18 @@ public static String getSystemProperty(String key) {
         return SystemProperties.getString(key);
     }
 
+    /**
+     * Gets the boolean system property indicated by the specific key.
+     * 
+     * Delegates to {@link SystemProperties#getBoolean(java.lang.String)}
+     *
+     * @since TODO
+     */
+    @Restricted(DoNotUse.class)
+    public static boolean isSystemPropertyEnabled(String key) {
+        return SystemProperties.getBoolean(key);
+    }
+
     public static Map getEnvVars() {
         return new TreeMap<>(EnvVars.masterEnvVars);
     }

core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/footer.jelly

@@ -27,7 +27,11 @@ THE SOFTWARE.
         <st:adjunct includes="jenkins.management.AdministrativeMonitorsDecorator.resources"/>
         <div id="visible-am-container">
             <a id="visible-am-button" href="#" onclick="toggleVisibleAmList(event)" title="${%tooltip(it.activeAdministrativeMonitorsCount)}">
-                ${it.activeAdministrativeMonitorsCount}
+                <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-social-symbol.svg#ic_notifications_24px" />
+                <span class="hidden-xs hidden-sm">${%monitors(it.activeAdministrativeMonitorsCount)}</span>
+                <span class="am-monitor__count">
+                    ${it.activeAdministrativeMonitorsCount}
+                </span>
             </a>
             <div id="visible-am-list">
                 <j:forEach var="am" items="${it.activeAdministrativeMonitors}">
@@ -41,7 +45,14 @@ THE SOFTWARE.
             </div>
         </div>
         <script type="text/javascript">
-            document.getElementById("header").appendChild(document.getElementById("visible-am-container"));
+            (function() {
+                var amContainer = document.getElementById("visible-am-container");
+                var amInsertion = document.getElementById("visible-am-insertion");
+
+                if (amInsertion) {
+                    amInsertion.appendChild(amContainer);
+                }
+            })();
         </script>
     </j:if>
 </j:jelly>

core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/footer.properties

@@ -1 +1,2 @@
-tooltip=There are {0} active administrative monitors.
+tooltip=There are {0} active administrative monitors.
+monitors={0,choice,0#monitors|1#monitor|1<monitors}

core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/footer_de.properties

@@ -22,3 +22,4 @@
 
 Manage\ Jenkins=Jenkins verwalten
 tooltip={0,choice,0#Keine Administrator-Warnungen sind|1#{0} Administrator-Warnung ist|1<{0} Administrator-Warnungen sind} aktiv.
+monitors={0,choice,0#Warnungen|1#Warnung|1<Warnungen}

core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.css

@@ -1,29 +1,28 @@
 #visible-am-container {
-    float: right;
+    height: 100%;
 }
+
 #visible-am-button {
-    text-align: center;
-    font-size: 20px;
-    font-weight: bold;
-    background-color: #e01716;
-    color: #fff;
-    margin: 0;
-    line-height: 40px;
-    text-decoration: none;
-    min-width: 2em;
-    display: inline-block;
     position: relative;
-    transition: all .1s;
-}
-#visible-am-button:hover, #visible-am-button:focus, #visible-am-button:active {
-    background: #e23635;
 }
-#visible-am-container.visible #visible-am-button {
-    box-shadow: inset 0px 1px 14px rgba(0,0,0,.5);
+
+#visible-am-button .am-monitor__count {
+    display: inline-block;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    height: 20px;
+    min-width: 20px;
+
+    color:#F94B4E;
+    background-color: #fff;
+    font-weight: bold;
+
+    border-radius: 4px;
 }
 #visible-am-container div#visible-am-list {
     position: absolute;
-    top: 35px;
+    top: 48px;
     right: 2%;
     height: auto;
     z-index: 0;
@@ -32,7 +31,10 @@
     display: block;
     background-color: #fff;
     border-radius: 5px;
-    box-shadow: 0 7px 20px rgba(0,0,0,.1);
+
+    /* Darken the box shadow to make the popup visible over the search box  */
+    box-shadow: 0 1px 7px 0 rgba(0,0,0,0.3);
+
     transition: all .15s cubic-bezier(.84,.03,.21,.96);
     opacity: 0;
     transform: scale(0);
@@ -46,7 +48,7 @@
     content: '';
     display: inline-block;
     position: absolute;
-    bottom: -5px;
+    bottom: 0;
     left: 32%;
     width: 0;
     height: 0;
@@ -55,10 +57,10 @@
     border-bottom: 7px solid #fff;
     opacity: 0;
     transition: all .05s;
+    z-index: 1001;
 }
 #visible-am-container.visible #visible-am-button:after {
     opacity: 1;
-    bottom: 4px;
     transition: all .25s;
 }
 #visible-am-container .am-message {
@@ -85,3 +87,23 @@
 #visible-am-container .am-message dl dt::after {
     content: ": ";
 }
+
+/* Restore hyperlink style overriden by the page header */
+#visible-am-container #visible-am-list a:link {
+    display: inline-block;
+    color: #204A87;
+    text-decoration: underline;
+    padding: 0;
+    font-weight: normal;
+}
+#visible-am-container #visible-am-list a:visited {
+    color: #5c3566;
+}
+#visible-am-container #visible-am-list a:hover,
+#visible-am-container #visible-am-list a:focus,
+#visible-am-container #visible-am-list a:active {
+    color: #5c3566;
+    text-decoration-color: #5c3566;
+    background-color: transparent;
+    text-decoration: underline;
+}

core/src/main/resources/lib/layout/breadcrumbBar.jelly

@@ -39,49 +39,48 @@ THE SOFTWARE.
       <st:adjunct includes="lib.layout.breadcrumbs" />
       <div class="top-sticker noedge">
         <div class="top-sticker-inner">
-          <div id="right-top-nav">
-            <j:if test="${norefresh==null or norefresh==false}">
-              <div id="right-top-nav">
-                <div class="smallfont">
+          <div class="breadcrumbs__wrapper">
+            <ul id="breadcrumbs">
+              <j:forEach var="anc" items="${request.ancestors}">
+                <j:if test="${h.isModel(anc.object) and anc.prev.url!=anc.url}">
+                  <li class="item">
+                    <a href="${anc.url}/" class="${h.isModelWithContextMenu(anc.object)?'model-link':null} inside">
+                      ${anc.object.displayName}
+                    </a>
+                  </li>
                   <j:choose>
-                    <j:when test="${h.isAutoRefresh(request)}">
-                      <a href="?auto_refresh=false">${%DISABLE AUTO REFRESH}</a>
+                    <j:when test="${h.isModelWithChildren(anc.object)}">
+                      <li class="children" href="${anc.url}/">
+                        <!-- shows '>' for rendering children -->
+                      </li>
                     </j:when>
                     <j:otherwise>
-                      <a href="?auto_refresh=true">${%ENABLE AUTO REFRESH}</a>
+                      <li class="separator">
+                      </li>
                     </j:otherwise>
                   </j:choose>
-                </div>
-              </div>
-            </j:if>
-          </div>
-          <ul id="breadcrumbs">
-            <j:forEach var="anc" items="${request.ancestors}">
-              <j:if test="${h.isModel(anc.object) and anc.prev.url!=anc.url}">
-                <li class="item">
-                  <a href="${anc.url}/" class="${h.isModelWithContextMenu(anc.object)?'model-link':null} inside">
-                    ${anc.object.displayName}
-                  </a>
-                </li>
+                </j:if>
+              </j:forEach>
+
+              <!-- render additional breadcrumb items -->
+              <d:invokeBody />
+            </ul>
+
+            <j:if test="${norefresh==null or norefresh==false}">
+              <div id="right-top-nav">
                 <j:choose>
-                  <j:when test="${h.isModelWithChildren(anc.object)}">
-                    <li class="children" href="${anc.url}/">
-                      <!-- shows '>' for rendering children -->
-                    </li>
+                  <j:when test="${h.isAutoRefresh(request)}">
+                    <a href="?auto_refresh=false" class="breadcrumbs__auto-refresh">${%DISABLE AUTO REFRESH}</a>
                   </j:when>
                   <j:otherwise>
-                    <li class="separator">
-                    </li>
+                    <a href="?auto_refresh=true" class="breadcrumbs__auto-refresh">${%ENABLE AUTO REFRESH}</a>
                   </j:otherwise>
                 </j:choose>
-              </j:if>
-            </j:forEach>
-
-            <!-- render additional breadcrumb items -->
-            <d:invokeBody />
-          </ul>
+              </div>
+            </j:if>
 
-          <div id="breadcrumb-menu-target"/><!-- this is where the menu gets rendered -->
+            <div id="breadcrumb-menu-target"/><!-- this is where the menu gets rendered -->
+          </div>
         </div>
       </div>
     </td>