@yuebai008/cli/dist/cli-server/client/front_end/panels/application/ServiceWorkerUpdateCycleView.js

Command line interface for rapid qg-minigame development

import*as i18n from"../../core/i18n/i18n.js";import*as SDK from"../../core/sdk/sdk.js";import*as UI from"../../ui/legacy/legacy.js";const UIStrings={version:"Version",updateActivity:"Update Activity",timeline:"Timeline",startTimeS:"Start time: {PH1}",endTimeS:"End time: {PH1}"},str_=i18n.i18n.registerUIStrings("panels/application/ServiceWorkerUpdateCycleView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class ServiceWorkerUpdateCycleView{registration;rows;selectedRowIndex;tableElement;constructor(e){this.registration=e,this.rows=[],this.selectedRowIndex=-1,this.tableElement=document.createElement("table"),this.createTimingTable()}calculateServiceWorkerUpdateRanges(){function e(e,t){t.start<Number.MAX_VALUE&&t.start<=t.end&&e.push(t)}function t(t){let i=t.currentState,s=0,r=0,a=0,n=0;const o=i.status;if("new"===o)return[];for(;i;)"activated"===i.status?s=i.last_updated_timestamp:"activating"===i.status?(0===s&&(s=i.last_updated_timestamp),r=i.last_updated_timestamp):"installed"===i.status?a=i.last_updated_timestamp:"installing"===i.status&&(0===a&&(a=i.last_updated_timestamp),n=i.last_updated_timestamp),i=i.previousState;const d=[];return function(t,i,s,r,a,n,o){e(t,{id:i,phase:"Install",start:s,end:r}),"activating"!==o&&"activated"!==o&&"redundant"!==o||(e(t,{id:i,phase:"Wait",start:r,end:a}),e(t,{id:i,phase:"Activate",start:a,end:n}))}(d,t.id,n,a,r,s,o),d}const i=this.registration.versionsByMode(),s=[SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.Active,SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.Waiting,SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.Installing,SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.Redundant];for(const e of s){const s=i.get(e);if(s){return t(s)}}return[]}createTimingTable(){this.tableElement.classList.add("service-worker-update-timing-table");const e=this.calculateServiceWorkerUpdateRanges();this.updateTimingTable(e)}createTimingTableHead(){const e=this.tableElement.createChild("tr","service-worker-update-timing-table-header");UI.UIUtils.createTextChild(e.createChild("td"),i18nString(UIStrings.version)),UI.UIUtils.createTextChild(e.createChild("td"),i18nString(UIStrings.updateActivity)),UI.UIUtils.createTextChild(e.createChild("td"),i18nString(UIStrings.timeline))}removeRows(){const e=this.tableElement.getElementsByTagName("tr");for(;e[0];)e[0].parentNode&&e[0].parentNode.removeChild(e[0]);this.rows=[]}updateTimingTable(e){this.selectedRowIndex=-1,this.removeRows(),this.createTimingTableHead();const t=e;if(0===t.length)return;const i=t.map((e=>e.start)),s=t.map((e=>e.end)),r=i.reduce(((e,t)=>Math.min(e,t))),a=s.reduce(((e,t)=>Math.max(e,t))),n=100/(a-r);for(const e of t){const t=e.phase,i=n*(e.start-r),s=n*(a-e.end),o=this.tableElement.createChild("tr","service-worker-update-timeline");this.rows.push(o);const d=o.createChild("td");UI.UIUtils.createTextChild(d,"#"+e.id),d.classList.add("service-worker-update-timing-bar-clickable"),d.setAttribute("tabindex","0"),d.setAttribute("role","switch"),d.addEventListener("focus",(e=>{this.onFocus(e)})),UI.ARIAUtils.setChecked(d,!1);const c=o.createChild("td");UI.UIUtils.createTextChild(c,t);const l=o.createChild("td").createChild("div","service-worker-update-timing-row").createChild("span","service-worker-update-timing-bar "+t.toLowerCase());l.style.left=i+"%",l.style.right=s+"%",l.textContent="​",this.constructUpdateDetails(o,e)}}constructUpdateDetails(e,t){const i=this.tableElement.createChild("tr","service-worker-update-timing-bar-details");i.classList.add("service-worker-update-timing-bar-details-collapsed");const s=i.createChild("td");s.colSpan=3;const r=new Date(t.start).toISOString();UI.UIUtils.createTextChild(s.createChild("span"),i18nString(UIStrings.startTimeS,{PH1:r})),i.tabIndex=0;const a=this.tableElement.createChild("tr","service-worker-update-timing-bar-details");a.classList.add("service-worker-update-timing-bar-details-collapsed");const n=a.createChild("td");n.colSpan=3;const o=new Date(t.end).toISOString();UI.UIUtils.createTextChild(n.createChild("span"),i18nString(UIStrings.endTimeS,{PH1:o})),a.tabIndex=0,e.addEventListener("keydown",(e=>{this.onKeydown(e,i,a)})),e.addEventListener("click",(e=>{this.onClick(e,i,a)}))}toggle(e,t,i,s){i.classList.contains("service-worker-update-timing-bar-clickable")&&(e.classList.toggle("service-worker-update-timing-bar-details-collapsed"),e.classList.toggle("service-worker-update-timing-bar-details-expanded"),t.classList.toggle("service-worker-update-timing-bar-details-collapsed"),t.classList.toggle("service-worker-update-timing-bar-details-expanded"),UI.ARIAUtils.setChecked(i,!s))}onFocus(e){const t=e.target;if(!t)return;const i=t.parentElement;i&&(this.selectedRowIndex=this.rows.indexOf(i))}onKeydown(e,t,i){if(!e.target)return;const s=e.target,r=e,a="true"===s.getAttribute("aria-checked");return"Enter"===r.key||" "===r.key||!a&&"ArrowRight"===r.key||a&&"ArrowLeft"===r.key?(this.toggle(t,i,s,a),void e.preventDefault()):("ArrowDown"===r.key&&(this.selectedRowIndex>=0?this.selectNextRow():this.selectFirstRow(),e.preventDefault()),void("ArrowUp"===r.key&&(this.selectedRowIndex>=0?this.selectPreviousRow():this.selectLastRow(),e.preventDefault())))}focusRow(e){e.cells[0].focus()}blurRow(e){e.cells[0].blur()}selectFirstRow(){0!==this.rows.length&&(this.selectedRowIndex=0,this.focusRow(this.rows[0]))}selectLastRow(){0!==this.rows.length&&(this.selectedRowIndex=this.rows.length-1,this.focusRow(this.rows[this.selectedRowIndex]))}selectNextRow(){if(0===this.rows.length)return;const e=this.selectedRowIndex;this.selectedRowIndex++,this.selectedRowIndex>=this.rows.length&&(this.selectedRowIndex=0),this.blurRow(this.rows[e]),this.focusRow(this.rows[this.selectedRowIndex])}selectPreviousRow(){if(0===this.rows.length)return;const e=this.selectedRowIndex;this.selectedRowIndex--,this.selectedRowIndex<0&&(this.selectedRowIndex=this.rows.length-1),this.blurRow(this.rows[e]),this.focusRow(this.rows[this.selectedRowIndex])}onClick(e,t,i){const s=e.target;if(!s)return;const r="true"===s.getAttribute("aria-checked");this.toggle(t,i,s,r),e.preventDefault()}refresh(){const e=this.calculateServiceWorkerUpdateRanges();this.updateTimingTable(e)}}