Break-words on build history

Using zero-width spaces to break words over a configured len
jenkinsci · Nov 18, 2014 · 122d12c · 122d12c
1 parent c6eefe5
commit 122d12c
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 6 deletions.
diff --git a/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly b/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
@@ -32,7 +32,7 @@ THE SOFTWARE.
   <tr class="build-row ${transitive}" buildTimeMillis="${build.timestamp.time.time}">
     <td class="pane build-name">
       <a class="build-status-link" href="${link}console"><l:icon alt="${build.iconColor.description} &gt; ${%Console Output}" class="${build.buildStatusIconClassName} icon-sm" tooltip="${build.iconColor.description} &gt; ${%Console Output}"/></a><st:nbsp/>
-      ${build.displayName}
+      <span class="break-words" breakAfter="3">${build.displayName}</span>
     </td>
     <td class="pane build-details">
       <a class="tip model-link inside" href="${link}">
@@ -43,7 +43,7 @@ THE SOFTWARE.
         <t:buildProgressBar build="${build}"/>
       </j:if>
       <j:if test="${!empty build.description}">
-        <div class="desc">
+        <div class="desc break-words" breakAfter="15">
           <j:out value="${app.markupFormatter.translate(build.truncatedDescription)}"/>
         </div>
       </j:if>

diff --git a/war/src/main/webapp/css/style.css b/war/src/main/webapp/css/style.css
@@ -961,13 +961,13 @@ table.parameters > tbody:hover {
 }
 
 #buildHistory .build-name {
-  width: 30%;
+  width: 25%;
 }
 #buildHistory .build-details {
-  width: 50%;
+  width: 45%;
 }
 #buildHistory .build-stop, #buildHistory .build-badge {
-  width: 10%;
+  width: 15%;
 }
 
 /* ========================= editable combobox style ========================= */

diff --git a/war/src/main/webapp/scripts/hudson-behavior.js b/war/src/main/webapp/scripts/hudson-behavior.js
@@ -1552,6 +1552,40 @@ Form.findMatchingInput = function(base, name) {
     return null;        // not found
 }
 
+function breakWords(container) {
+    container.getElementsBySelector(".break-words").each(function(element) {
+        if (Element.hasClassName(element, 'words-broken')) {
+            // already done.
+            return;
+        }
+
+        var maxWordSize = element.getAttribute('breakAfter');
+        var words = element.textContent.split(/\s+/);
+        var newTextContent = '';
+
+        var splitRegex = new RegExp('.{1,' + maxWordSize + '}', 'g');
+        for (var i = 0; i < words.length; i++) {
+            var word = words[i];
+            var wordTokens = word.match(splitRegex);
+            if (wordTokens) {
+                for (var ii = 0; ii < wordTokens.length; ii++) {
+                    if (newTextContent.length === 0) {
+                        newTextContent += wordTokens[ii];
+                    } else {
+                        newTextContent += String.fromCharCode(8203) + wordTokens[ii];
+                    }
+                }
+            } else {
+                newTextContent += word;
+            }
+            newTextContent += ' ';
+        }
+
+        element.textContent = newTextContent;
+        Element.addClassName(element, 'words-broken');
+    });
+}
+
 function updateBuildHistory(ajaxUrl,nBuild) {
     if(isRunAsTest) return;
 
@@ -1654,7 +1688,7 @@ function updateBuildHistory(ajaxUrl,nBuild) {
     }
 
     insertDateSeparatorRows();
-
+    breakWords($(bh));
 
     function updateBuilds() {
         if(isPageVisible()){
@@ -1697,6 +1731,7 @@ function updateBuildHistory(ajaxUrl,nBuild) {
                     removeDateSeparatorRows();
                     updateBuildRows();
                     insertDateSeparatorRows();
+                    breakWords($(bh));
                 }
             });
         } else {