improve log group auto-scrolling

Author: wxiaoguang

web_src/js/components/RepoActionView.vue

@@ -2,7 +2,7 @@
 import {SvgIcon} from '../svg.ts';
 import ActionRunStatus from './ActionRunStatus.vue';
 import {defineComponent, type PropType} from 'vue';
-import {createElementFromAttrs, toggleElem} from '../utils/dom.ts';
+import {addDelegatedEventListener, createElementFromAttrs, toggleElem} from '../utils/dom.ts';
 import {formatDatetime} from '../utils/time.ts';
 import {renderAnsi} from '../render/ansi.ts';
 import {POST, DELETE} from '../modules/fetch.ts';
@@ -188,6 +188,19 @@ export default defineComponent({
     // load job data and then auto-reload periodically
     // need to await first loadJob so this.currentJobStepsStates is initialized and can be used in hashChangeListener
     await this.loadJob();
+
+    // auto-scroll to the bottom of the log group when it is opened
+    // "toggle" event doesn't bubble, so we need to use 'click' event delegation to handle it
+    addDelegatedEventListener(this.elStepsContainer(), 'click', 'summary.job-log-group-summary', (el, _) => {
+      if (!this.optionAlwaysAutoScroll) return;
+      const elJobLogGroup = el.closest('details.job-log-group') as HTMLDetailsElement;
+      setTimeout(() => {
+        if (elJobLogGroup.open && !isLogElementInViewport(elJobLogGroup)) {
+          elJobLogGroup.scrollIntoView({behavior: 'smooth', block: 'end'});
+        }
+      }, 0);
+    });
+
     this.intervalID = setInterval(() => this.loadJob(), 1000);
     document.body.addEventListener('click', this.closeDropdown);
     this.hashChangeListener();
@@ -424,9 +437,13 @@ export default defineComponent({
       if (this.menuVisible) this.menuVisible = false;
     },
 
+    elStepsContainer(): HTMLElement {
+      return this.$refs.stepsContainer as HTMLElement;
+    },
+
     toggleTimeDisplay(type: 'seconds' | 'stamp') {
       this.timeVisible[`log-time-${type}`] = !this.timeVisible[`log-time-${type}`];
-      for (const el of (this.$refs.steps as HTMLElement).querySelectorAll(`.log-time-${type}`)) {
+      for (const el of this.elStepsContainer().querySelectorAll(`.log-time-${type}`)) {
         toggleElem(el, this.timeVisible[`log-time-${type}`]);
       }
     },
@@ -448,7 +465,7 @@ export default defineComponent({
         // so logline can be selected by querySelector
         await this.loadJob();
       }
-      const logLine = (this.$refs.steps as HTMLElement).querySelector(selectedLogStep);
+      const logLine = this.elStepsContainer().querySelector(selectedLogStep);
       if (!logLine) return;
       logLine.querySelector<HTMLAnchorElement>('.line-num').click();
     },
@@ -583,7 +600,7 @@ export default defineComponent({
             </div>
           </div>
         </div>
-        <div class="job-step-container" ref="steps" v-if="currentJob.steps.length">
+        <div class="job-step-container" ref="stepsContainer" v-if="currentJob.steps.length">
           <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i">
             <div class="job-step-summary" @click.stop="isExpandable(jobStep.status) && toggleStepLogs(i)" :class="[currentJobStepsStates[i].expanded ? 'selected' : '', isExpandable(jobStep.status) && 'step-expandable']">
               <!-- If the job is done and the job step log is loaded for the first time, show the loading icon