Folder view matches look of job view

Author: strangelookingnerd

src/main/resources/com/cloudbees/hudson/plugins/folder/AbstractFolder/view-index-top.jelly

@@ -24,38 +24,46 @@ THE SOFTWARE.
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout"
          xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt" xmlns:this="this">
-  <j:set var="iconClass" value="${it.iconColor.getIconClassName()}"/>
-  <j:if test="${iconClass != null}">
-      <j:set var="iconClass" value="${iconClass} icon-xlg"/>
-  </j:if>
-  <h1>
+  <div class="jenkins-app-bar">
+    <div class="jenkins-app-bar__content jenkins-build-caption">
+      <j:set var="iconClass" value="${it.iconColor.getIconClassName()}"/>
+      <j:if test="${iconClass != null}">
+        <j:set var="iconClass" value="${iconClass} icon-lg"/>
+      </j:if>
+      <j:choose>
+        <j:when test="${iconClass != null}">
+          <l:icon class="${iconClass}" alt="${it.iconColor.description}" tooltip="${it.iconColor.description}" />
+        </j:when>
+        <j:otherwise>
+          <l:icon src="${it.iconColor.getImageOf('32x32')}" alt="${it.iconColor.description}" tooltip="${it.iconColor.description}" />
+        </j:otherwise>
+      </j:choose>
+      <h1 class="job-index-headline page-headline">
+        <l:breakable value="${it.displayName}"/>
+      </h1>
+    </div>
+    <div class="jenkins-app-bar__controls">
+      <t:editDescriptionButton description="${it.primaryView.description}" permission="${it.CONFIGURE}"/>
+    </div>
+  </div>
+  <j:if test="${(it.fullName!=it.fullDisplayName)}">
     <j:choose>
-      <j:when test="${iconClass != null}">
-        <l:icon class="${iconClass}" tooltip="${it.iconColor.description}" />
+      <j:when test="${it.parent!=app}">
+        ${%Full folder name}: ${it.fullName}
       </j:when>
       <j:otherwise>
-        <l:icon src="${it.iconColor.getImageOf('48x48')}" height="48" width="48" alt="${it.iconColor.description}" tooltip="${it.iconColor.description}" />
+        ${%Folder name}: ${it.fullName}
       </j:otherwise>
     </j:choose>
-    ${it.displayName}
-  </h1>
-  <j:if test="${it.name != it.displayName}">
-    ${%Folder name}: ${it.fullName}
   </j:if>
-  <div id="view-message">
-      <div id="systemmessage">
-          <j:out value="${app.systemMessage!=null ? app.markupFormatter.translate(app.systemMessage) : ''}"/>
-      </div>
-      <j:out value="${it.description!=null ? app.markupFormatter.translate(it.description) : ''}"/>
-  </div>
-  <this:description />
+  <t:editableDescription description="${it.primaryView.description}" permission="${it.CONFIGURE}" hideButton="true"/>
   <j:choose>
-    <j:when test="${!it.supportsMakeDisabled()}">
-      <!-- for now, quietly omit the option -->
-    </j:when>
-    <j:when test="${it.disabled}">
-      <div id="disabled-message" class="warning">${%disabled(it.pronoun)}</div>
-    </j:when>
+      <j:when test="${!it.supportsMakeDisabled()}">
+          <!-- for now, quietly omit the option -->
+      </j:when>
+      <j:when test="${it.disabled}">
+          <div id="disabled-message" class="warning">${%disabled(it.pronoun)}</div>
+      </j:when>
   </j:choose>
   <!-- give actions a chance to contribute summary item -->
   <j:forEach var="a" items="${it.allActions}">

src/main/resources/com/cloudbees/hudson/plugins/folder/AbstractFolder/view-index-top.properties

@@ -1,2 +1,4 @@
+Folder\ name=Folder name
+Full\ folder\ name=Full folder name
 disable=Disable {0}
 disabled=This {0} is currently disabled

src/main/resources/com/cloudbees/hudson/plugins/folder/AbstractFolder/view-index-top_ja.properties

@@ -1,6 +1,6 @@
 # The MIT License
 #
-# Copyright (c) 2016- Seiji Sogabe 
+# Copyright (c) 2016- Seiji Sogabe
 #
 # Permission is hereby granted, free of charge, to any person obtaining a copy
 # of this software and associated documentation files (the "Software"), to deal
@@ -21,3 +21,4 @@
 # THE SOFTWARE.
 
 Folder\ name=\u30d5\u30a9\u30eb\u30c0\u540d
+Full\ folder\ name=\u5b8c\u5168\u306a\u30d5\u30a9\u30eb\u30c0\u540d