Move experimental run sidepanel to overflow (#11127)

Author: janfaracik

core/src/main/resources/hudson/model/AbstractBuild/sidepanel.jelly

@@ -30,17 +30,29 @@ THE SOFTWARE.
   <l:header />
   <l:side-panel>
     <l:tasks>
+      <l:userExperimentalFlag var="newBuildPage" flagClassName="jenkins.model.experimentalflags.NewBuildPageUserExperimentalFlag" />
       <j:set var="buildUrl" value="${h.decompose(request2)}" />
-      <st:include page="tasks.jelly"/>
-      <st:include page="delete.jelly" />
-      <st:include page="actions.jelly" />
-      <t:actions actions="${it.transientActions}"/>
-      <j:if test="${it.previousBuild!=null}">
-        <l:task contextMenu="false" href="${buildUrl.previousBuildUrl}" icon="icon-previous icon-md" title="${%Previous Build}"/>
-      </j:if>
-      <j:if test="${it.nextBuild!=null}">
-        <l:task contextMenu="false" href="${buildUrl.nextBuildUrl}" icon="icon-next icon-md" title="${%Next Build}"/>
-      </j:if>
+
+      <j:choose>
+        <j:when test="${newBuildPage}">
+          <st:include page="tasks.jelly"/>
+          <st:include page="actions.jelly" />
+          <t:actions actions="${it.transientActions}"/>
+          <st:include page="delete.jelly" />
+        </j:when>
+        <j:otherwise>
+          <st:include page="tasks.jelly"/>
+          <st:include page="delete.jelly" />
+          <st:include page="actions.jelly" />
+          <t:actions actions="${it.transientActions}"/>
+          <j:if test="${it.previousBuild!=null}">
+            <l:task contextMenu="false" href="${buildUrl.previousBuildUrl}" icon="icon-previous icon-md" title="${%Previous Build}"/>
+          </j:if>
+          <j:if test="${it.nextBuild!=null}">
+            <l:task contextMenu="false" href="${buildUrl.nextBuildUrl}" icon="icon-next icon-md" title="${%Next Build}"/>
+          </j:if>
+        </j:otherwise>
+      </j:choose>
     </l:tasks>
   </l:side-panel>
 </j:jelly>

core/src/main/resources/hudson/model/AbstractBuild/tasks.jelly

@@ -27,15 +27,31 @@ THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:p="/lib/hudson/project">
+  <j:choose>
+    <j:when test="${newBuildPage}">
+      <l:task href="${buildUrl.baseUrl}/changes" icon="symbol-changes" title="${%Changes}"/>
+      <p:console-link/>
+      <j:choose>
+        <j:when test="${h.hasPermission(it,it.UPDATE)}">
+          <l:task icon="symbol-edit-note" href="${buildUrl.baseUrl}/configure" title="${%Edit Build Information}"/>
+        </j:when>
+        <j:otherwise>
+          <l:task icon="symbol-view" href="${buildUrl.baseUrl}/configure" title="${%View Build Information}"/>
+        </j:otherwise>
+      </j:choose>
+    </j:when>
+    <j:otherwise>
       <l:task contextMenu="false" href="${buildUrl.baseUrl}/" icon="symbol-details" title="${%Status}"/>
       <l:task href="${buildUrl.baseUrl}/changes" icon="symbol-changes" title="${%Changes}"/>
       <p:console-link/>
       <j:choose>
-          <j:when test="${h.hasPermission(it,it.UPDATE)}">
-              <l:task icon="symbol-edit-note" href="${buildUrl.baseUrl}/configure" title="${%Edit Build Information}"/>
-          </j:when>
-          <j:otherwise>
-              <l:task icon="symbol-view" href="${buildUrl.baseUrl}/configure" title="${%View Build Information}"/>
-           </j:otherwise>
+        <j:when test="${h.hasPermission(it,it.UPDATE)}">
+          <l:task icon="symbol-edit-note" href="${buildUrl.baseUrl}/configure" title="${%Edit Build Information}"/>
+        </j:when>
+        <j:otherwise>
+          <l:task icon="symbol-view" href="${buildUrl.baseUrl}/configure" title="${%View Build Information}"/>
+        </j:otherwise>
       </j:choose>
+    </j:otherwise>
+  </j:choose>
 </j:jelly>

core/src/main/resources/hudson/model/Run/new-build-page.jelly

@@ -24,18 +24,23 @@ THE SOFTWARE.
 -->
 
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:x="jelly:xml">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:dd="/lib/layout/dropdowns">
   <l:layout title="${it.fullDisplayName}">
-    <st:include page="sidepanel.jelly" />
 
     <!-- no need for additional breadcrumb here as we're on an index page already including breadcrumb -->
     <l:main-panel>
-      <script src="${resURL}/jsbundles/pages/job.js" type="text/javascript" defer="true" />
-
       <j:set var="controls">
         <l:hasPermission permission="${it.UPDATE}">
           <st:include page="logKeep.jelly" />
         </l:hasPermission>
+        <l:overflowButton>
+          <dd:custom>
+            <div class="app-build-overflow">
+              <j:set var="mode" value="side-panel" />
+              <st:include page="sidepanel.jelly" />
+            </div>
+          </dd:custom>
+        </l:overflowButton>
       </j:set>
 
       <t:buildCaption controls="${controls}">${it.displayName}</t:buildCaption>

src/main/scss/pages/_build.scss

@@ -94,6 +94,20 @@
   }
 }
 
+.app-build-overflow {
+  #side-panel {
+    width: 250px !important;
+
+    #tasks {
+      margin: 0;
+
+      .task {
+        margin-left: unset !important;
+      }
+    }
+  }
+}
+
 .app-console-output-widget {
   overflow-y: auto;
   margin: 0 -1rem -1rem;