Isolate out tooltip changes

janfaracik · May 13, 2022 · 8d1112d · 8d1112d
1 parent 76fc089
commit 8d1112d
Show file tree

Hide file tree

Showing 16 changed files with 124 additions and 179 deletions.
diff --git a/core/src/main/resources/hudson/model/Run/KeepLogBuildBadge/badge.jelly b/core/src/main/resources/hudson/model/Run/KeepLogBuildBadge/badge.jelly
@@ -23,4 +23,4 @@ THE SOFTWARE.
 -->
 
 <?jelly escape-by-default='true'?>
-<l:icon class="icon-lock icon-sm" tooltip="${%Keep this build forever}:\n${h.xmlEscape(build.whyKeepLog)}" xmlns:l="/lib/layout"/>
+<l:icon class="icon-lock icon-sm" tooltip="${%Keep this build forever}:&lt;br/&gt;${h.xmlEscape(build.whyKeepLog)}" xmlns:l="/lib/layout"/>
diff --git a/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly b/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
@@ -38,9 +38,7 @@ THE SOFTWARE.
     <td class="build-row-cell">
       <div class="pane build-name">
         <div class="build-icon">
-          <a class="build-status-link" href="${link}console" tooltip="${build.iconColor.description} > ${%Console Output}">
-            <l:icon class="${build.buildStatusIconClassName} icon-sm" />
-          </a>
+          <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>
         </div>
         <a class="model-link inside build-link display-name" update-parent-class=".build-row" href="${link}">${build.displayName}</a>
       </div>

diff --git a/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/footer.jelly b/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/footer.jelly
@@ -39,7 +39,7 @@ THE SOFTWARE.
                    class="am-button"
                    href="#"
                    data-href="${rootURL}/administrativeMonitorsApi/nonSecurityPopupContent"
-                   tooltip="${%tooltip(activeNonSecurityAMCount)}">
+                   title="${%tooltip(activeNonSecurityAMCount)}">
                     <l:svgIcon
                             href="${resURL}/images/material-icons/svg-sprite-social-symbol.svg#ic_notifications_24px"/>
                     <div class="am-monitor__indicator-mobile"/>
@@ -57,7 +57,7 @@ THE SOFTWARE.
                    class="am-button security-am"
                    href="#"
                    data-href="${rootURL}/administrativeMonitorsApi/securityPopupContent"
-                   tooltip="${%tooltipSec(activeSecurityAMCount)}">
+                   title="${%tooltipSec(activeSecurityAMCount)}">
                     <l:svgIcon
                             href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_warning_shield_24px"/>
                     <div class="am-monitor__indicator-mobile"/>

diff --git a/core/src/main/resources/lib/hudson/buildHealth.jelly b/core/src/main/resources/lib/hudson/buildHealth.jelly
@@ -36,36 +36,8 @@ THE SOFTWARE.
     <j:set var="buildHealth" value="${empty(healthReports) ? emptyHealthReport : healthReports[0]}"/>
     <j:if test="${td}"><j:set var="useTdElement" value="x"/></j:if>
     <x:element name="${useTdElement!=null?'td':'div'}">
-      <x:attribute name="data">${buildHealth.score}</x:attribute>
-      <x:attribute name="class">jenkins-table__cell--tight jenkins-table__icon</x:attribute>
-      <j:if test="${!empty(healthReports)}">
-        <x:attribute name="html-tooltip">
-          <div class="jenkins-tooltip--table-wrapper">
-            <table class="jenkins-table">
-              <thead>
-                <tr>
-                  <th align="left">W</th>
-                  <th align="left">${%Description}</th>
-                  <th align="right">%</th>
-                </tr>
-              </thead>
-              <tbody>
-                <j:forEach var="rpt" items="${healthReports}">
-                  <tr>
-                    <td align="left" class="jenkins-table__cell--tight jenkins-table__icon">
-                      <div class="jenkins-table__cell__button-wrapper">
-                        <l:icon class="${rpt.iconClassName} icon-sm" />
-                      </div>
-                    </td>
-                    <td>${rpt.localizableDescription}</td>
-                    <td align="right">${rpt.score}</td>
-                  </tr>
-                </j:forEach>
-              </tbody>
-            </table>
-          </div>
-        </x:attribute>
-      </j:if>
+        <x:attribute name="data">${buildHealth.score}</x:attribute>
+        <x:attribute name="class">jenkins-table__cell--tight jenkins-table__icon healthReport</x:attribute>
         <j:if test="${buildHealth!=null}">
             <div class="jenkins-table__cell__button-wrapper">
                 <j:if test="${iconSizeClass == null}">
@@ -90,5 +62,29 @@ THE SOFTWARE.
                 </j:choose>
             </div>
         </j:if>
+        <j:if test="${!empty(healthReports)}">
+            <div class="jenkins-tooltip healthReportDetails">
+                <table class="jenkins-table">
+                    <thead>
+                        <tr>
+                            <th align="left">W</th>
+                            <th align="left">${%Description}</th>
+                            <th align="right">%</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <j:forEach var="rpt" items="${healthReports}">
+                            <tr>
+                                <td align="left">
+                                    <l:icon class="${rpt.iconClassName} icon-sm" />
+                                </td>
+                                <td align="left">${rpt.localizableDescription}</td>
+                                <td align="right">${rpt.score}</td>
+                            </tr>
+                        </j:forEach>
+                    </tbody>
+                </table>
+            </div>
+        </j:if>
     </x:element>
 </j:jelly>
diff --git a/core/src/main/resources/lib/hudson/queue.jelly b/core/src/main/resources/lib/hudson/queue.jelly
@@ -74,7 +74,7 @@ THE SOFTWARE.
               <j:set var="stuck" value="${item.isStuck()}"/>
               <j:choose>
                 <j:when test="${h.hasPermission(item.task,item.task.READ)}">
-                  <a href="${rootURL}/${item.task.url}" class="model-link inside tl-tr" tooltip="${h.escape(item.causesDescription)}${h.escape(item.why)}${h.escape(item.params)}\n${%WaitingFor(item.inQueueForString)}">
+                  <a href="${rootURL}/${item.task.url}" class="model-link inside tl-tr" tooltip="${h.escape(item.causesDescription)}${h.escape(item.why)}${h.escape(item.params)}&lt;br&gt;${%WaitingFor(item.inQueueForString)}">
                     <l:breakable value="${item.task.fullDisplayName}"/>
                   </a>
                   <!-- TODO include estimated number as in BuildHistoryWidget/entries.jelly if possible -->

diff --git a/core/src/main/resources/lib/layout/layout.jelly b/core/src/main/resources/lib/layout/layout.jelly
@@ -243,7 +243,6 @@ THE SOFTWARE.
     </j:if>
 
     <script src="${resURL}/jsbundles/keyboard-shortcuts.js" type="text/javascript"/>
-    <script src="${resURL}/jsbundles/tooltips.js" type="text/javascript" />
   </body>
 </html>
 </l:view>

diff --git a/core/src/main/resources/lib/layout/progressiveRendering/progressiveRendering.js b/core/src/main/resources/lib/layout/progressiveRendering/progressiveRendering.js
@@ -28,7 +28,6 @@ function progressivelyRender(handler, callback, statusId) {
         if (r.status == 'done') {
             callback(r.data);
             $(statusId).style.display = 'none';
-            registerTooltips();
         } else if (r.status == 'canceled') {
             // TODO ugly; replace with single tr of class=unknown?
             $$('#' + statusId + ' .progress-bar-done')[0].innerHTML = 'Aborted.';
@@ -41,7 +40,6 @@ function progressivelyRender(handler, callback, statusId) {
             $$('#' + statusId + ' .progress-bar-done')[0].style.width = (100 * r.status) + '%';
             $$('#' + statusId + ' .progress-bar-left')[0].style.width = (100 - 100 * r.status) + '%';
             checkNewsLater(500);
-            registerTooltips();
         }
     }
     function checkNewsLater(timeout) {

diff --git a/war/package.json b/war/package.json
@@ -59,7 +59,6 @@
     "lodash": "^4.17.20",
     "regenerator-runtime": "^0.13.9",
     "sortablejs": "^1.13.0",
-    "tippy.js": "^6.3.7",
     "window-handle": "^1.0.0"
   },
   "browserslist": [

diff --git a/war/src/main/js/tooltips.js b/war/src/main/js/tooltips.js
diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less
@@ -186,9 +186,9 @@
   --link-font-weight: 600;
 
   // Tooltips
-  --tooltip-background: rgba(white, 0.55);
-  --tooltip-color: var(--text-color);
-  --tooltip-box-shadow: 0 0 8px 2px rgba(0, 0, 30, 0.05), 0 0 1px 1px rgba(0, 0, 20, 0.025), 0 10px 20px rgba(0, 0, 20, 0.15);
+  --tooltip-background-color: var(--background);
+  --tooltip-foreground-color: var(--text-color);
+  --tooltip-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.2);
 
   // Dark link
   --link-dark-color: var(--text-color);

diff --git a/war/src/main/less/base/layout-commons.less b/war/src/main/less/base/layout-commons.less
@@ -1,6 +1,7 @@
 @import '../abstracts/theme.less';
 
 html {
+  position: relative;
   height: 100%;
   box-sizing: border-box;
 }

diff --git a/war/src/main/less/modules/table.less b/war/src/main/less/modules/table.less
@@ -45,12 +45,6 @@
           color: var(--table-header-foreground);
           font-weight: 700;
         }
-
-        svg {
-          vertical-align: middle;
-          width: 0.8rem;
-          height: 0.8rem;
-        }
       }
     }
   }

diff --git a/war/src/main/less/modules/tooltips.less b/war/src/main/less/modules/tooltips.less
@@ -1,46 +1,12 @@
-.tippy-box[data-theme~='tooltip'] {
-  background: var(--tooltip-background);
-  color: var(--tooltip-color);
-  padding: 0.55rem 0.8rem;
+.jenkins-tooltip {
+  position: absolute;
+  padding: 5px 10px;
   border-radius: 10px;
-  box-shadow: var(--tooltip-box-shadow);
-  font-weight: 500;
-  font-size: 0.75rem;
-  backdrop-filter: saturate(2) blur(15px);
-  max-width: unset !important;
-  white-space: pre-line;
-
-  .tippy-content {
-    padding: 0;
-  }
-
-  // We style tables as they have additional margin/border radius when in tooltips
-  .jenkins-tooltip--table-wrapper {
-    background-color: rgba(black, 0.05);
-    margin: -0.55rem -0.8rem;
-    border-radius: 10px;
-  }
-
-  .jenkins-table {
-    --table-background: transparent;
-    --table-border-radius: 8px;
-
-    margin: 0;
-    width: 450px;
-  }
-}
-
-.tippy-box[data-animation='tooltip'][data-state='hidden'] {
-  opacity: 0;
-  transform: scale(0.995);
-
-  &[data-placement^="top"] {
-    transform-origin: bottom;
-    transform: translateY(2px) scale(0.995);
-  }
-
-  &[data-placement^="bottom"] {
-    transform-origin: top;
-    transform: translateY(-2px) scale(0.995);
-  }
+  background: var(--tooltip-background-color);
+  box-shadow: var(--tooltip-shadow);
+  color: var(--tooltip-foreground-color);
+  font-size: 0.8rem;
+  z-index: 1001 !important;
+  overflow: hidden;
+  max-width: none !important;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -243,7 +243,6 @@ THE SOFTWARE. @@
         </j:if>
         <script src="${resURL}/jsbundles/keyboard-shortcuts.js" type="text/javascript"/>
-        <script src="${resURL}/jsbundles/tooltips.js" type="text/javascript" />
       </body>
     </html>
     </l:view>
@@ Expand Down @@