Add classes and ID's for common elements

This should aid theme developers in developing plugins for Jenkins by adding
CSS classes and ID's to the dom. Developers can then use these to more
specifically target elements that they want.

For example, the "Console Output" was a raw <pre> tag embedded in a <table>.
Styling it required CSS like so:

    #main-panel > pre {

Sadly this will apply to any <pre> elements nested directly under the
"#main-panel" ID; there's no way to get more specific to the console output.

With this change you can style the console output by writing:

    .console-output {

Which is much more direct (and more efficient for browsers to render).

A similar treatment is applied to a number of elements in the jenkins UI.

core/src/main/resources/hudson/matrix/MatrixProject/index.jelly

@@ -27,7 +27,7 @@ THE SOFTWARE.
   <l:layout title="${it.name}">
     <st:include page="sidepanel.jelly" />
     <l:main-panel>
-      <h1>${%Project} <l:breakable value="${it.displayName}"/></h1>
+      <h1 class="matrix-project-headline page-headline">${%Project} <l:breakable value="${it.displayName}"/></h1>
       <j:if test="${it.name!=it.displayName}">
         ${%Project name}: ${it.fullName}
       </j:if>

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

@@ -78,7 +78,7 @@ THE SOFTWARE.
                       <j:choose>
                         <j:when test="${dep.from!=null}">
                           <a href="${rootURL}/${dep.from.url}" class="model-link inside">
-                            <img src="${imagesURL}/16x16/${dep.from.buildStatusUrl}"
+                            <img class="model-link-icon" src="${imagesURL}/16x16/${dep.from.buildStatusUrl}"
                                  alt="${dep.from.iconColor.description}" height="16" width="16" />${dep.from.displayName}</a>
                         </j:when>
                         <j:otherwise>
@@ -89,7 +89,7 @@ THE SOFTWARE.
                       &#x2192; <!-- right arrow -->
 
                       <a href="${rootURL}/${dep.to.url}" class="model-link inside">
-                        <img src="${imagesURL}/16x16/${dep.to.buildStatusUrl}"
+                        <img class="model-link-icon" src="${imagesURL}/16x16/${dep.to.buildStatusUrl}"
                              alt="${dep.to.iconColor.description}" height="16" width="16" />${dep.to.displayName}</a>
 
                       (<a href="${rootURL}/${dep.project.url}changes?from=${dep.fromId}&amp;to=${dep.toId}">${%detail}</a>)

core/src/main/resources/hudson/model/Job/index.jelly

@@ -27,7 +27,7 @@ THE SOFTWARE.
   <l:layout title="${it.displayName}${not empty it.parent.fullDisplayName?' ['+it.parent.fullDisplayName+']':''}">
     <st:include page="sidepanel.jelly" />
     <l:main-panel>
-      <h1>${it.pronoun} <l:breakable value="${it.displayName}"/></h1>
+      <h1 class="job-index-headline page-headline">${it.pronoun} <l:breakable value="${it.displayName}"/></h1>
       <j:if test="${(it.name!=it.displayName) and (it.class.name!='hudson.matrix.MatrixConfiguration')}">
         ${%Project name}: ${it.fullName}
       </j:if>

core/src/main/resources/hudson/model/Job/permalinks.jelly

@@ -25,8 +25,8 @@ THE SOFTWARE.
 <!-- display permalinks of the page -->
 <?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:p="/lib/hudson/project">
-  <h2>${%Permalinks}</h2>
-  <ul>
+  <h2 class="permalinks-header">${%Permalinks}</h2>
+  <ul class="permalinks-list">
     <j:set var="job" value="${it}" />
     <j:forEach var="p" items="${it.permalinks}">
       <st:include page="link.jelly" it="${p}"/>

core/src/main/resources/hudson/model/PermalinkProjectAction/Permalink/link.jelly

@@ -31,8 +31,8 @@ THE SOFTWARE.
 <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:p="/lib/hudson/project">
   <j:set var="b" value="${it.resolve(job)}"/>
   <j:if test="${b!=null}">
-    <li>
-      <a class="model-link inside tl-tr" href="${it.id}/">${%format(it.displayName,b.displayName,b.timestampString)}</a>
+    <li class="permalink-item">
+      <a class="permalink-link model-link inside tl-tr" href="${it.id}/">${%format(it.displayName,b.displayName,b.timestampString)}</a>
     </li>
   </j:if>
 </j:jelly>

core/src/main/resources/hudson/model/Run/console.jelly

@@ -60,7 +60,7 @@ THE SOFTWARE.
         </j:when>
         <!-- output is completed now. -->
         <j:otherwise>
-          <pre>
+          <pre class="console-output">
             <st:getOutput var="output" />
             <j:whitespace>${it.writeLogTo(offset,output)}</j:whitespace>
           </pre>

core/src/main/resources/hudson/tasks/test/MatrixTestResult/index.jelly

@@ -27,7 +27,7 @@ THE SOFTWARE.
   <l:layout title="Test">
     <st:include page="sidepanel.jelly" it="${it.owner}"/>
     <l:main-panel>
-      <h1>Test Result</h1>
+      <h1 class="matrix-test-result-headline page-headline">Test Result</h1>
       <test:bar/>
 
       <table class="pane sortable">

core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly

@@ -31,7 +31,7 @@ THE SOFTWARE.
   <j:set var="transitive" value="${(it.firstTransientBuildKey!=null and (it.adapter.compare(build,it.firstTransientBuildKey) ge 0)) ? 'transitive' : null}" />
   <tr class="build-row no-wrap ${transitive}">
     <td>
-      <a href="${link}console"><img width="16" height="16" src="${imagesURL}/16x16/${build.buildStatusUrl}" alt="${build.iconColor.description} &gt; ${%Console Output}" tooltip="${build.iconColor.description} &gt; ${%Console Output}" /></a><st:nbsp/>
+      <a class="build-status-link" href="${link}console"><img class="build-status-icon" width="16" height="16" src="${imagesURL}/16x16/${build.buildStatusUrl}" alt="${build.iconColor.description} &gt; ${%Console Output}" tooltip="${build.iconColor.description} &gt; ${%Console Output}" /></a><st:nbsp/>
       ${build.displayName}
     </td>
     <td style="padding-right:0">
@@ -51,7 +51,7 @@ THE SOFTWARE.
   </tr>
   <j:if test="${build.building}">
     <j:set target="${it}" property="nextBuildNumberToFetch" value="${build.number}"/>
-    <tr class="transitive"><td></td><td colspan="2" style="padding:0">
+    <tr class="transitive build-progress-bar"><td></td><td colspan="2" style="padding:0">
       <table class="middle-align">
         <tr><td>
           <t:buildProgressBar build="${build}"/>

core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly

@@ -86,15 +86,15 @@ THE SOFTWARE.
     <!--
       RSS link
     -->
-    <tr class="build-row">
+    <tr class="build-row build-rss-links">
       <td colspan="3" align="right">
-        <a href="${it.baseUrl}/rssAll"><img src="${imagesURL}/atom.gif" border="0" alt="Feed" height="16" width="16"/></a>
+        <a class="build-rss-all-icon" href="${it.baseUrl}/rssAll"><img src="${imagesURL}/atom.gif" border="0" alt="Feed" height="16" width="16"/></a>
         <st:nbsp/>
-        <a href="${it.baseUrl}/rssAll">RSS ${%for all}</a>
+        <a class="build-rss-all-link" href="${it.baseUrl}/rssAll">RSS ${%for all}</a>
         <st:nbsp/>
-        <a href="${it.baseUrl}/rssFailed"><img src="${imagesURL}/atom.gif" border="0" alt="Feed" height="16" width="16"/></a>
+        <a class="build-rss-failed-icon" href="${it.baseUrl}/rssFailed"><img src="${imagesURL}/atom.gif" border="0" alt="Feed" height="16" width="16"/></a>
         <st:nbsp/>
-        <a href="${it.baseUrl}/rssFailed">RSS ${%for failures}</a>
+        <a class="build-rss-failed-link" href="${it.baseUrl}/rssFailed">RSS ${%for failures}</a>
       </td>
     </tr>
   </l:pane>

core/src/main/resources/lib/hudson/buildCaption.jelly

@@ -27,13 +27,13 @@ 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">
-	<h1>
+	<h1 class="build-caption page-headline">
 	  <j:if test="${it.building}">
-	    <div style="float:right">
+	    <div class="build-caption-progress-container" style="float:right">
 	      <table class="middle-align"><tr>
 	        <td>
 	          ${%Progress}:
-	        </td><td>
+	        </td><td class="build-caption-progress-bar">
 	          <t:buildProgressBar build="${it}"/>
 	        </td><td>
             <j:if test="${it.parent.hasAbortPermission()}">
@@ -44,7 +44,7 @@ THE SOFTWARE.
 	    </div>
 	  </j:if>
 	  
-	  <img src="${imagesURL}/48x48/${it.buildStatusUrl}" width="48" height="48" alt="${it.iconColor.description}" tooltip="${it.iconColor.description}" />
+	  <img class="build-caption-status-icon" src="${imagesURL}/48x48/${it.buildStatusUrl}" width="48" height="48" alt="${it.iconColor.description}" tooltip="${it.iconColor.description}" />
 	  <d:invokeBody />
 	</h1>
 </j:jelly>

core/src/main/resources/lib/hudson/buildHealth.jelly

@@ -42,14 +42,16 @@ THE SOFTWARE.
         <j:if test="${buildHealth!=null}">
             <j:choose>
               <j:when  test="${!empty(healthReports)}">
-                <a href="${empty(link)?'#':link}" style="${attrs.style}">
+                <a class="build-health-link" href="${empty(link)?'#':link}" 
+                    style="${attrs.style}">
                     <img src="${rootURL}${buildHealth.getIconUrl(iconSize)}"
-                         alt="${buildHealth.score}%" class="icon${iconSize}"/>
+                         alt="${buildHealth.score}%" 
+                         class="build-health-icon icon${iconSize}"/>
                 </a>
               </j:when>
               <j:otherwise>
                  <img src="${rootURL}${buildHealth.getIconUrl(iconSize)}"
-                      alt="${buildHealth.score}%" class="icon${iconSize}"/>
+                      alt="${buildHealth.score}%" class="build-health-icon icon${iconSize}"/>
                </j:otherwise>
              </j:choose>  
         </j:if>

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

@@ -140,7 +140,7 @@ ${h.initPageVariables(context)}
       <st:include it="${pd}" page="header.jelly" optional="true" />
     </j:forEach>
   </head>
-  <body class="yui-skin-sam">
+  <body id="jenkins jenkins-${h.version}" class="yui-skin-sam">
     <!-- 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>
 
@@ -149,7 +149,7 @@ ${h.initPageVariables(context)}
         <td id="top-panel" colspan="2">
           <table cellpadding="0" cellspacing="0" width="100%" border="0">
             <tr><td style="font-weight:bold; font-size: 2em;">
-              <a href="${rootURL}/"><img src="${imagesURL}/title.png" alt="title" width="139" height="34" /></a>
+              <a id="jenkins-home-link" href="${rootURL}/"><img id="jenkins-home-icon" src="${imagesURL}/title.png" alt="title" width="139" height="34" /></a>
             </td><td style="vertical-align: middle; text-align: right; padding-right: 1em;">
 
               <!-- search box -->

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

@@ -26,7 +26,7 @@ THE SOFTWARE.
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:i="jelly:fmt">
     <st:documentation>
-        Creates a clickable “Stop” button.
+        Creates a clickable "Stop" button.
         <st:attribute name="href" use="required">
             Link target. Relative to the current page.
         </st:attribute>
@@ -34,7 +34,7 @@ THE SOFTWARE.
             Alt text for image.
         </st:attribute>
     </st:documentation>
-    <a href="${href}" onclick="new Ajax.Request(this.href); return false">
-        <img src="${imagesURL}/16x16/stop.png" alt="${alt}" height="16" width="16"/>
+    <a class="stop-button-link" href="${href}" onclick="new Ajax.Request(this.href); return false">
+        <img class="stop-button-icon" src="${imagesURL}/16x16/stop.png" alt="${alt}" height="16" width="16"/>
     </a>
 </j:jelly>

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

@@ -129,12 +129,12 @@ THE SOFTWARE.
           <j:choose>
             <j:when test="${requiresConfirmation and not attrs.onClick}">
               <l:confirmationLink href="${href}" post="${post}" message="${confirmationMessage ?: title}">
-                <img width="24" height="24" style="margin: 2px;" alt="" src="${icon}"/>
+                <img class="task-icon" width="24" height="24" style="margin: 2px;" alt="" src="${icon}"/>
               </l:confirmationLink>
             </j:when>
             <j:otherwise>
-              <a href="${href}" onclick="${attrs.onclick ?: (post ? 'postRequest_' + id + '(this)' : null)}">
-                <img width="24" height="24" style="margin: 2px;" alt="" src="${icon}"/>
+              <a href="${href}" class="task-icon-link" onclick="${attrs.onclick ?: (post ? 'postRequest_' + id + '(this)' : null)}">
+                <img class="task-icon" width="24" height="24" style="margin: 2px;" alt="" src="${icon}"/>
               </a>
             </j:otherwise>
           </j:choose>
@@ -154,7 +154,7 @@ THE SOFTWARE.
               </l:confirmationLink>
             </j:when>
             <j:otherwise>
-              <a href="${href}" onclick="${attrs.onclick ?: (post ? 'postRequest_' + id + '(this)' : null)}">
+              <a href="${href}" class="task-link" onclick="${attrs.onclick ?: (post ? 'postRequest_' + id + '(this)' : null)}">
                 <j:choose>
                   <j:when test="${match}">
                     <b>${title}</b>