Merge pull request #2445 from recena/JENKINS-34670

[JENKINS-34670] Add support for a new full screen layout

core/src/main/resources/jenkins/install/SetupWizard/authenticate-security-token.jelly

 <?jelly escape-by-default='true'?>
-<l:html norefresh="true" title="${app.instance.displayName}" xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:s="/lib/form">
+
+  <l:layout norefresh="true" type="full-screen" title="${app.instance.displayName}">
     <l:main-panel>
-    <st:include page="client-scripts" />
-    <form action="${app.instance.securityRealm.authenticationGatewayUrl}" method="POST">
+      <st:include page="client-scripts" />
+      <form action="${app.instance.securityRealm.authenticationGatewayUrl}" method="POST">
         <input type="hidden" name="from" value="${request.getParameter('from')}" />
         <div class="plugin-setup-wizard bootstrap-3">
           <div class="modal fade in" style="display: block;">
             <div class="modal-dialog">
               <div class="modal-content">
-                
                 <div class="modal-header">
                   <h4 class="modal-title">${%authenticate-security-token.getting.started}</h4>
                 </div>
                 <div class="modal-body">
                   <i class="water-mark icon-service"></i>
                   <div class="jumbotron welcome-panel offline">
-                  
                     <h1>${%authenticate-security-token.unlock.jenkins}</h1>
-                    <p>
-                        ${%jenkins.install.findSecurityTokenMessage(it.initialAdminPasswordFile)}
-                    </p>
+                    <p>${%jenkins.install.findSecurityTokenMessage(it.initialAdminPasswordFile)}</p>
                     <p>${%authenticate-security-token.copy.password}</p>
                     <j:if test="${error}">
                         <div class="alert alert-danger">
-                          <strong>${%authenticate-security-token.error} </strong>
-                          ${%authenticate-security-token.password.incorrect}
+                          <strong>${%authenticate-security-token.error}</strong> ${%authenticate-security-token.password.incorrect}
                         </div>
                     </j:if>
                     <div class="form-group ${error ? 'has-error' : ''}">
-                    <label class="control-label" for="security-token">${%authenticate-security-token.password.administrator}</label>
-                    <input name="j_username" value="${app.setupWizard.initialSetupAdminUserName}" type="hidden"/>
-                    <input id="security-token" class="form-control" type="password" name="j_password"/>
+                      <label class="control-label" for="security-token">${%authenticate-security-token.password.administrator}</label>
+                      <input name="j_username" value="${app.setupWizard.initialSetupAdminUserName}" type="hidden"/>
+                      <input id="security-token" class="form-control" type="password" name="j_password"/>
                     </div>
-                    
                   </div>
                 </div>
                 <div class="modal-footer">
@@ -42,6 +38,8 @@
             </div>
           </div>
         </div>
-    </form>
-  </l:main-panel>
-</l:html>
+      </form>
+    </l:main-panel>
+  </l:layout>
+
+</j:jelly>
\ No newline at end of file

core/src/main/resources/jenkins/install/SetupWizard/index.jelly

 <?jelly escape-by-default='true'?>
-<l:html norefresh="true" title="${it.displayName}" xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
-  <l:main-panel>
-    <div class="plugin-setup-wizard-container"></div>
-    <st:include page="wizard-ui"/>
-  </l:main-panel>
-</l:html>
+<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">
+
+  <l:layout norefresh="true" type="full-screen" title="${it.displayName}">
+    <l:main-panel>
+      <div class="plugin-setup-wizard-container"></div>
+      <st:include page="wizard-ui"/>
+    </l:main-panel>
+  </l:layout>
+
+</j:jelly>

core/src/main/resources/jenkins/install/SetupWizard/proxy-configuration.jelly

 <?jelly escape-by-default='true'?>
-<l:html norefresh="true" title="${it.displayName}" xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
-  <l:main-panel>
-      <h1>${%HTTP Proxy Configuration}</h1>
-      <f:form method="post" action="/pluginManager/proxyConfigure" name="proxyConfigure">
-        <j:scope>
-          <j:set var="instance" value="${app.proxy}"/>
-          <j:set var="descriptor" value="${app.pluginManager.proxyDescriptor}"/>
-          <st:include from="${descriptor}" page="${descriptor.configPage}" />
-        </j:scope>
-      </f:form>
-  </l:main-panel>
-</l:html>
+<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">
+
+  <l:layout norefresh="true" type="full-screen" title="${it.displayName}">
+    <l:main-panel>
+      <style type="text/css">
+
+        #proxy-configuration {
+          margin: 8px;
+        }
+
+      </style>
+
+      <div id="proxy-configuration">
+        <h1>${%HTTP Proxy Configuration}</h1>
+        <f:form method="post" action="/pluginManager/proxyConfigure" name="proxyConfigure">
+          <j:scope>
+            <j:set var="instance" value="${app.proxy}"/>
+            <j:set var="descriptor" value="${app.pluginManager.proxyDescriptor}"/>
+            <st:include from="${descriptor}" page="${descriptor.configPage}" />
+          </j:scope>
+        </f:form>
+      </div>
+    </l:main-panel>
+  </l:layout>
+
+</j:jelly>

core/src/main/resources/jenkins/install/SetupWizard/setupWizardFirstUser.jelly

-<!--
-  This is used to create the first user.
--->
 <?jelly escape-by-default='true'?>
-<l:html norefresh="true" title="${it.displayName}" xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:s="/lib/form">
 
-  <l:main-panel>
+  <l:layout norefresh="true" type="full-screen" title="${it.displayName}">
+    <l:main-panel>
+      <link rel="stylesheet" href="${resURL}/css/google-fonts/roboto/css/roboto.css" type="text/css" />
+      <style type="text/css">
 
-    <link rel="stylesheet" href="${resURL}/css/google-fonts/roboto/css/roboto.css" type="text/css" />
-
-    <style type="text/css">
-
-      #main-panel {
-          margin: 0;
-          padding: 0;
-      }
-      tr td {
-          padding-bottom: 2px;
-      }
-      body {
+        #create-admin-user {
           padding: 20px 20px 20px 100px;
-          font-family: 'roboto';
-      }
-      form > div {
+          margin: 8px;
+        }
+
+        #create-admin-user form > div {
           margin: 0 !important;
-      }
-      h1 {
+        }
+
+        #create-admin-user h1 {
           font-family: 'roboto', sans-serif;
           font-size: 48px;
           margin-top: 30px;
           font-weight: 500;
-      }
-      h1 img {
-          position: absolute;
-          right: -80px;
-          top: 38px;
-      }
-      tr td, input {
+        }
+
+        #create-admin-user tr td {
+          padding-bottom: 2px;
+        }
+
+        #create-admin-user tr td, #create-admin-user input {
           line-height: 25px;
           margin-bottom: 6px;
-      }
-      input[type=text], input[type=password] {
+        }
+
+        #create-admin-user input[type=text], input[type=password] {
           border: 1px solid #ddd;
           border-radius: 2px;
           padding: 1px 8px;
-      }
-    </style>
-    <form action="${rootURL}/setupWizard/createAdminUser" method="post">
-      <local:_entryForm it="${app.securityRealm}" host="${app.securityRealm}" title="${%Create First Admin User}" captcha="${false}" xmlns:local="/hudson/security/HudsonPrivateSecurityRealm" />
-      <script>
-        $('username').focus();
-      </script>
-    </form>
-  </l:main-panel>
-</l:html>
+        }
+      </style>
+
+     <div id="create-admin-user">
+       <form action="${rootURL}/setupWizard/createAdminUser" method="post">
+          <local:_entryForm it="${app.securityRealm}" host="${app.securityRealm}" title="${%Create First Admin User}" captcha="${false}" xmlns:local="/hudson/security/HudsonPrivateSecurityRealm" />
+          <script>
+            $('username').focus();
+          </script>
+        </form>
+     </div>
+    </l:main-panel>
+  </l:layout>
+
+</j:jelly>
\ No newline at end of file

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

@@ -26,6 +26,9 @@ 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:i="jelly:fmt" xmlns:x="jelly:xml">
   <st:documentation>
+
+    This Jelly tag is deprecated, use <l:layout /> tag instead. Defined on layout.jelly.
+
     Outer-most tag for a normal (non-AJAX) HTML rendering.
     This is used with nested &lt;header>, &lt;side-panel>, and &lt;main-panel>
     to form Jenkins's basic HTML layout.

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

@@ -53,7 +53,7 @@ THE SOFTWARE.
       (The permission will be checked against the "it" object.)
     </st:attribute>
     <st:attribute name="type" use="optional">
-      Available values: two-column (by default) or one-column (full-width size).
+      Available values: two-column (by default), one-column (full-width size) or full-screen (since TODO).
     </st:attribute>
   </st:documentation>
 <st:setHeader name="Expires" value="0" />
@@ -69,9 +69,14 @@ ${h.initPageVariables(context)}
   this also allows us to configure HttpSessionContextIntegrationFilter not to create sessions,
   which I suspect can end up creating sessions for wrong resource types (such as static resources.)
 -->
+
 <j:if test="${attrs.type==null}">
   <j:set var="layoutType" value="two-column"/>
 </j:if>
+<j:if test="${attrs.type!=null}">
+  <j:set var="layoutType" value="${attrs.type}"/>
+</j:if>
+
 <j:set var="isMSIE" value="${userAgent.contains('MSIE')}"/>
 <j:set var="_" value="${request.getSession()}"/>
 <j:set var="_" value="${h.configureAutoRefresh(request, response, attrs.norefresh!=null and !attrs.norefresh.equals(false))}"/>
@@ -169,7 +174,9 @@ ${h.initPageVariables(context)}
     <script src="${resURL}/jsbundles/page-init.js" type="text/javascript"/>
 
   </head>
-  <body id="jenkins" class="yui-skin-sam jenkins-${h.version} ${layoutType}" data-version="${h.version}" data-model-type="${it.class.name}">
+  <body id="jenkins" class="yui-skin-sam ${layoutType} jenkins-${h.version}" data-version="${h.version}" data-model-type="${it.class.name}">
+
+    <j:if test="${layoutType!='full-screen'}">
     <!-- for accessibility, skip the entire navigation bar and etc and go straight to the head of the content -->
     <a href="#skip2content" class="skiplink">Skip to content</a>
 
@@ -235,6 +242,7 @@ ${h.initPageVariables(context)}
         </l:breadcrumbBar>
       </div>
     </div>
+    </j:if>
 
     <div id="page-body" class="clear">
       <j:if test="${layoutType=='two-column'}">
@@ -260,6 +268,7 @@ ${h.initPageVariables(context)}
       </div>
     </div>
 
+    <j:if test="${layoutType!='full-screen'}">
     <footer>
       <div class="container-fluid">
         <div class="row">
@@ -279,6 +288,7 @@ ${h.initPageVariables(context)}
         </div>
       </div>
     </footer>
+    </j:if>
 
   </body>
 </html>

war/src/main/webapp/css/layout-common.css

@@ -95,6 +95,14 @@ body.two-column #main-panel {
   margin-left: 320px;
 }
 
+body.full-screen {
+  padding: 0;
+}
+
+body.full-screen #main-panel {
+  padding: 0;
+}
+
 @media (max-width: 970px) {
   body.two-column #side-panel {
     width: 100%;