Bug 1532482 - Improve “new changes since” indicator UX

diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
index 9e66c3bc98fd88bc862e80920655b82953e6caa7..1844c7f506012e171172a3743beb8f951dcad7f1 100644 (file)
--- a/extensions/BugModal/web/bug_modal.css
+++ b/extensions/BugModal/web/bug_modal.css
@@ -509,14 +509,28 @@ td.flag-requestee {
 }
 
 .new-changes-link {
-    margin: 8px 0;
+    position: sticky;
+    top: 8px;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    overflow: hidden;
+    margin: 8px -8px;
     border-radius: 4px;
     padding: 4px;
     font-size: 12px;
     text-align: center;
     color: #FFF;
     background: #277AC1;
+    opacity: 1;
     cursor: pointer;
+    transition: all .2s 2s;
+    will-change: transform; /* for performance */
+}
+
+.new-changes-link[hidden] {
+    display: block;
+    opacity: 0;
 }
 
 .new-changes-separator {

diff --git a/extensions/BugModal/web/bug_modal.js b/extensions/BugModal/web/bug_modal.js
index 7d5f093cc9c665ce0841e9b827bfdeba88c1cb6d..598c8c252f2d0089296f4b4b46909a2be5fa4e22 100644 (file)
--- a/extensions/BugModal/web/bug_modal.js
+++ b/extensions/BugModal/web/bug_modal.js
@@ -1438,7 +1438,8 @@ function show_new_changes_indicator() {
             const observer = new IntersectionObserver(entries => entries.forEach(entry => {
                 if (entry.intersectionRatio > 0) {
                     observer.unobserve($separator);
-                    $link.remove();
+                    $link.addEventListener('transitionend', () => $link.remove(), { once: true });
+                    $link.hidden = true;
                 }
             }), { root: document.querySelector('#bugzilla-body') });