Shorten the names of the tabs

plugin/src/main/resources/coverage/coverage-table.jelly

@@ -25,15 +25,15 @@
         <div class="col-12 d-xxl-none">
           <bs:card title="${title}" symbol="${symbol}" class="flex-fill h-100" >
             <j:if test="${showChangedToggle}">
-              <f:toggleSwitch name="changed" title="Show only changed files" />
+              <f:toggleSwitch id="changed-${id + '-table'}" title="${%changed.files}" />
             </j:if>
             <dt:table model="${it.getTableModel(id + '-table')}"/>
           </bs:card>
         </div>
         <div class="col-xxl-6 d-none d-xxl-block">
           <bs:card title="${title}" symbol="${symbol}" class="flex-fill h-100">
             <j:if test="${showChangedToggle}">
-              <f:toggleSwitch name="changed" title="Show only changed files" />
+              <f:toggleSwitch id="changed-${id + '-table-inline'}" title="${%changed.files}" />
             </j:if>
             <dt:table model="${it.getTableModel(id + '-table-inline')}"/>
           </bs:card>
@@ -50,15 +50,15 @@
                 <fa:svg-icon name="hand-point-left" class="no-selection-banner"/>
               </div>
               <div class="text-center">
-                <h5 class="card-title">${%Please select a file in the table to open the source code}</h5>
+                <h5 class="card-title">${%select.row}</h5>
               </div>
             </div>
             <div id="${id}-no-source">
               <div class="text-center">
                 <fa:svg-icon name="ban" class="no-selection-banner"/>
               </div>
               <div class="text-center">
-                <h5 class="card-title">${%No source code available for this file}</h5>
+                <h5 class="card-title">${%no.sourcecode}</h5>
               </div>
             </div>
           </bs:card>
@@ -67,7 +67,7 @@
       <j:otherwise>
         <div class="col-12">
           <j:if test="${showChangedToggle}">
-            <f:toggleSwitch name="changed" title="Show only changed files" />
+            <f:toggleSwitch id="changed-${id + '-table'}" title="${%changed.files}" />
           </j:if>
           <bs:card title="${title}" symbol="${symbol}" class="flex-fill h-100">
             <dt:table model="${it.getTableModel(id + '-table')}"/>

plugin/src/main/resources/coverage/coverage-table.properties

@@ -0,0 +1,3 @@
+changed.files=Show only changed files
+select.row=Please select a file in the table to open the source code
+no.sourcecode=No source code available for this file

plugin/src/main/resources/io/jenkins/plugins/coverage/metrics/steps/CoverageViewModel/index.jelly

@@ -21,24 +21,24 @@
     <div class="tabBarFrame">
       <ul class="flex-wrap tabBar" role="tablist" id="tab-details">
         <li class="nav-item tab" role="presentation">
-          <a class="nav-link" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="false">Overview</a>
+          <a class="nav-link" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="false">${%tab.name.overview}</a>
         </li>
         <j:forEach var="metric" items="${it.treeMetrics}">
           <li class="nav-item tab" role="presentation">
             <a class="nav-link" id="${metric.toTagName()}-tab" data-bs-toggle="tab" data-bs-target="#${metric.toTagName()}" type="button" role="tab" aria-controls="${metric.toTagName()}" aria-selected="false">${formatter.getDisplayName(metric)}</a>
           </li>
         </j:forEach>
         <li class="nav-item tab" role="presentation">
-          <a class="nav-link" id="fileCoverage-tab" data-bs-toggle="tab" data-bs-target="#fileCoverage" type="button" role="tab" aria-controls="fileCoverage" aria-selected="false">File Coverage</a>
+          <a class="nav-link" id="fileCoverage-tab" data-bs-toggle="tab" data-bs-target="#fileCoverage" type="button" role="tab" aria-controls="fileCoverage" aria-selected="false">${%tab.name.files}</a>
         </li>
         <j:if test="${hasModifiedLinesCoverage}">
           <li class="nav-item tab" role="presentation">
-            <a class="nav-link" id="changeCoverage-tab" data-bs-toggle="tab" data-bs-target="#changeCoverage" type="button" role="tab" aria-controls="changeCoverage" aria-selected="false">Modified Lines Coverage</a>
+            <a class="nav-link" id="changeCoverage-tab" data-bs-toggle="tab" data-bs-target="#changeCoverage" type="button" role="tab" aria-controls="changeCoverage" aria-selected="false">${%tab.name.lines}</a>
           </li>
         </j:if>
         <j:if test="${hasIndirectCoverageChanges}">
           <li class="nav-item tab" role="presentation">
-            <a class="nav-link" id="indirectCoverage-tab" data-bs-toggle="tab" data-bs-target="#indirectCoverage" type="button" role="tab" aria-controls="indirectCoverage" aria-selected="false">Indirect Coverage Changes</a>
+            <a class="nav-link" id="indirectCoverage-tab" data-bs-toggle="tab" data-bs-target="#indirectCoverage" type="button" role="tab" aria-controls="indirectCoverage" aria-selected="false">${%tab.name.indirect}</a>
           </li>
         </j:if>
       </ul>

plugin/src/main/resources/io/jenkins/plugins/coverage/metrics/steps/CoverageViewModel/index.properties

@@ -1,7 +1,4 @@
-coverage.details.title=Coverage details by {0}
-reason.1=\
-  You did not enable storing of source files (see parameter 'sourceFiles').
-reason.2=\
-  Code Coverage API plugin did not find the source files.
-reason.3=\
-  You do not have sufficient permissions to view source files.
+tab.name.overview=Overview
+tab.name.files=Files
+tab.name.lines=Modified Lines
+tab.name.indirect=Indirect Changes

plugin/src/main/webapp/js/view-model.js

@@ -462,7 +462,7 @@ const CoverageChartGenerator = function ($) {
             initializeSourceCodeSelection('change-coverage');
             initializeSourceCodeSelection('indirect-coverage');
 
-            $('input[name="changed"]').on('change', function () {
+            $('input[id ^= "changed"]').on('change', function () {
                 const showChanged = $(this).prop('checked');
                 $('table.data-table').each(function () {
                     const table = $(this).DataTable();