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

Command line interface for rapid qg-minigame development

import*as Common from"../../core/common/common.js";import*as Host from"../../core/host/host.js";import*as i18n from"../../core/i18n/i18n.js";import*as SDK from"../../core/sdk/sdk.js";import*as Logs from"../../models/logs/logs.js";import*as Components from"../../ui/legacy/components/utils/utils.js";import*as UI from"../../ui/legacy/legacy.js";import serviceWorkersViewStyles from"./serviceWorkersView.css.js";import serviceWorkerUpdateCycleViewStyles from"./serviceWorkerUpdateCycleView.css.js";import*as MobileThrottling from"../mobile_throttling/mobile_throttling.js";import*as NetworkForward from"../../panels/network/forward/forward.js";import{ServiceWorkerUpdateCycleView}from"./ServiceWorkerUpdateCycleView.js";const UIStrings={serviceWorkersFromOtherOrigins:"Service workers from other origins",updateOnReload:"Update on reload",onPageReloadForceTheService:"On page reload, force the `service worker` to update, and activate it",bypassForNetwork:"Bypass for network",bypassTheServiceWorkerAndLoad:"Bypass the `service worker` and load resources from the network",serviceWorkerForS:"`Service worker` for {PH1}",testPushMessageFromDevtools:"Test push message from DevTools.",networkRequests:"Network requests",update:"Update",unregisterServiceWorker:"Unregister service worker",unregister:"Unregister",source:"Source",status:"Status",clients:"Clients",pushString:"Push",pushData:"Push data",syncString:"Sync",syncTag:"Sync tag",periodicSync:"Periodic Sync",periodicSyncTag:"Periodic Sync tag",sRegistrationErrors:"{PH1} registration errors",receivedS:"Received {PH1}",sDeleted:"{PH1} - deleted",sActivatedAndIsS:"#{PH1} activated and is {PH2}",stopString:"stop",inspect:"inspect",startString:"start",sIsRedundant:"#{PH1} is redundant",sWaitingToActivate:"#{PH1} waiting to activate",sTryingToInstall:"#{PH1} trying to install",updateCycle:"Update Cycle",workerS:"Worker: {PH1}",focus:"focus",seeAllRegistrations:"See all registrations"},str_=i18n.i18n.registerUIStrings("panels/application/ServiceWorkersView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);let throttleDisabledForDebugging=!1;export const setThrottleDisabledForDebugging=e=>{throttleDisabledForDebugging=e};export class ServiceWorkersView extends UI.Widget.VBox{currentWorkersView;toolbar;sections;manager;securityOriginManager;sectionToRegistration;eventListeners;constructor(){super(!0),this.currentWorkersView=new UI.ReportView.ReportView(i18n.i18n.lockedString("Service workers")),this.currentWorkersView.setBodyScrollable(!1),this.contentElement.classList.add("service-worker-list"),this.currentWorkersView.show(this.contentElement),this.currentWorkersView.element.classList.add("service-workers-this-origin"),this.toolbar=this.currentWorkersView.createToolbar(),this.toolbar.makeWrappable(!0),this.sections=new Map,this.manager=null,this.securityOriginManager=null,this.sectionToRegistration=new WeakMap;const e=this.contentElement.createChild("div","service-workers-other-origin"),t=new UI.ReportView.ReportView;t.setHeaderVisible(!1),t.show(e);const i=t.appendSection(i18nString(UIStrings.serviceWorkersFromOtherOrigins)).appendRow(),r=UI.Fragment.html`<a class="devtools-link" role="link" tabindex="0" href="chrome://serviceworker-internals" target="_blank" style="display: inline; cursor: pointer;">${i18nString(UIStrings.seeAllRegistrations)}</a>`;self.onInvokeElement(r,(e=>{const t=SDK.TargetManager.TargetManager.instance().rootTarget();t&&t.targetAgent().invoke_createTarget({url:"chrome://serviceworker-internals?devtools"}),e.consume(!0)})),i.appendChild(r),this.toolbar.appendToolbarItem(MobileThrottling.ThrottlingManager.throttlingManager().createOfflineToolbarCheckbox());const s=Common.Settings.Settings.instance().createSetting("serviceWorkerUpdateOnReload",!1);s.setTitle(i18nString(UIStrings.updateOnReload));const n=new UI.Toolbar.ToolbarSettingCheckbox(s,i18nString(UIStrings.onPageReloadForceTheService));this.toolbar.appendToolbarItem(n);const o=Common.Settings.Settings.instance().createSetting("bypassServiceWorker",!1);o.setTitle(i18nString(UIStrings.bypassForNetwork));const a=new UI.Toolbar.ToolbarSettingCheckbox(o,i18nString(UIStrings.bypassTheServiceWorkerAndLoad));this.toolbar.appendToolbarItem(a),this.eventListeners=new Map,SDK.TargetManager.TargetManager.instance().observeModels(SDK.ServiceWorkerManager.ServiceWorkerManager,this),this.updateListVisibility();document.body.addEventListener(UI.InspectorView.Events.DrawerChange,(e=>{const t=e.detail&&e.detail.isDrawerOpen;if(this.manager&&!t){const{serviceWorkerNetworkRequestsPanelStatus:{isOpen:e,openedAt:t}}=this.manager;if(e){const e=UI.ViewManager.ViewManager.instance().locationNameForViewId("network");UI.ViewManager.ViewManager.instance().showViewInLocation("network",e,!1),Common.Revealer.reveal(NetworkForward.UIFilter.UIRequestFilter.filters([]));Date.now()-t<2e3&&Host.userMetrics.actionTaken(Host.UserMetrics.Action.ServiceWorkerNetworkRequestClosedQuickly),this.manager.serviceWorkerNetworkRequestsPanelStatus={isOpen:!1,openedAt:0}}}}))}modelAdded(e){if(e.target()===SDK.TargetManager.TargetManager.instance().primaryPageTarget()){this.manager=e,this.securityOriginManager=e.target().model(SDK.SecurityOriginManager.SecurityOriginManager);for(const e of this.manager.registrations().values())this.updateRegistration(e);this.eventListeners.set(e,[this.manager.addEventListener(SDK.ServiceWorkerManager.Events.RegistrationUpdated,this.registrationUpdated,this),this.manager.addEventListener(SDK.ServiceWorkerManager.Events.RegistrationDeleted,this.registrationDeleted,this),this.securityOriginManager.addEventListener(SDK.SecurityOriginManager.Events.SecurityOriginAdded,this.updateSectionVisibility,this),this.securityOriginManager.addEventListener(SDK.SecurityOriginManager.Events.SecurityOriginRemoved,this.updateSectionVisibility,this)])}}modelRemoved(e){this.manager&&this.manager===e&&(Common.EventTarget.removeEventListeners(this.eventListeners.get(e)||[]),this.eventListeners.delete(e),this.manager=null,this.securityOriginManager=null)}getTimeStamp(e){const t=e.versionsByMode();let i=0;const r=t.get(SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.Active),s=t.get(SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.Installing),n=t.get(SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.Waiting),o=t.get(SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.Redundant);return r?i=r.scriptResponseTime:n?i=n.scriptResponseTime:s?i=s.scriptResponseTime:o&&(i=o.scriptResponseTime),i||0}updateSectionVisibility(){let e=!1;const t=[];for(const i of this.sections.values()){const r=this.getReportViewForOrigin(i.registration.securityOrigin);e=e||r===this.currentWorkersView,i.section.parentWidget()!==r&&t.push(i)}for(const e of t){const t=e.registration;this.removeRegistrationFromList(t),this.updateRegistration(t,!0)}this.currentWorkersView.sortSections(((e,t)=>{const i=this.sectionToRegistration.get(e),r=this.sectionToRegistration.get(t),s=i?this.getTimeStamp(i):0;return(r?this.getTimeStamp(r):0)-s}));for(const e of this.sections.values())e.section.parentWidget()===this.currentWorkersView||this.isRegistrationVisible(e.registration)?e.section.showWidget():e.section.hideWidget();this.contentElement.classList.toggle("service-worker-has-current",Boolean(e)),this.updateListVisibility()}registrationUpdated(e){this.updateRegistration(e.data),this.gcRegistrations()}gcRegistrations(){if(!this.manager||!this.securityOriginManager)return;let e=!1;const t=new Set(this.securityOriginManager.securityOrigins());for(const i of this.manager.registrations().values())if((t.has(i.securityOrigin)||this.isRegistrationVisible(i))&&!i.canBeRemoved()){e=!0;break}if(e)for(const e of this.manager.registrations().values()){!(t.has(e.securityOrigin)||this.isRegistrationVisible(e))&&e.canBeRemoved()&&this.removeRegistrationFromList(e)}}getReportViewForOrigin(e){return this.securityOriginManager&&(this.securityOriginManager.securityOrigins().includes(e)||this.securityOriginManager.unreachableMainSecurityOrigin()===e)?this.currentWorkersView:null}updateRegistration(e,t){let i=this.sections.get(e);if(!i){const t=e.scopeURL,r=this.getReportViewForOrigin(e.securityOrigin);if(!r)return;const s=r.appendSection(t);s.setUiGroupTitle(i18nString(UIStrings.serviceWorkerForS,{PH1:t})),this.sectionToRegistration.set(s,e),i=new Section(this.manager,s,e),this.sections.set(e,i)}t||(this.updateSectionVisibility(),i.scheduleUpdate())}registrationDeleted(e){this.removeRegistrationFromList(e.data)}removeRegistrationFromList(e){const t=this.sections.get(e);t&&t.section.detach(),this.sections.delete(e),this.updateSectionVisibility()}isRegistrationVisible(e){return!e.scopeURL}updateListVisibility(){this.contentElement.classList.toggle("service-worker-list-empty",0===this.sections.size)}wasShown(){super.wasShown(),this.registerCSSFiles([serviceWorkersViewStyles])}}export class Section{manager;section;registration;fingerprint;pushNotificationDataSetting;syncTagNameSetting;periodicSyncTagNameSetting;toolbar;updateCycleView;networkRequests;updateButton;deleteButton;sourceField;statusField;clientsField;linkifier;clientInfoCache;throttler;updateCycleField;constructor(e,t,i){this.manager=e,this.section=t,this.registration=i,this.fingerprint=null,this.pushNotificationDataSetting=Common.Settings.Settings.instance().createLocalSetting("pushData",i18nString(UIStrings.testPushMessageFromDevtools)),this.syncTagNameSetting=Common.Settings.Settings.instance().createLocalSetting("syncTagName","test-tag-from-devtools"),this.periodicSyncTagNameSetting=Common.Settings.Settings.instance().createLocalSetting("periodicSyncTagName","test-tag-from-devtools"),this.toolbar=t.createToolbar(),this.toolbar.renderAsLinks(),this.updateCycleView=new ServiceWorkerUpdateCycleView(i),this.networkRequests=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.networkRequests),void 0,i18nString(UIStrings.networkRequests)),this.networkRequests.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,this.networkRequestsClicked,this),this.toolbar.appendToolbarItem(this.networkRequests),this.updateButton=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.update),void 0,i18nString(UIStrings.update)),this.updateButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,this.updateButtonClicked,this),this.toolbar.appendToolbarItem(this.updateButton),this.deleteButton=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.unregisterServiceWorker),void 0,i18nString(UIStrings.unregister)),this.deleteButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,this.unregisterButtonClicked,this),this.toolbar.appendToolbarItem(this.deleteButton),this.sourceField=this.wrapWidget(this.section.appendField(i18nString(UIStrings.source))),this.statusField=this.wrapWidget(this.section.appendField(i18nString(UIStrings.status))),this.clientsField=this.wrapWidget(this.section.appendField(i18nString(UIStrings.clients))),this.createSyncNotificationField(i18nString(UIStrings.pushString),this.pushNotificationDataSetting.get(),i18nString(UIStrings.pushData),this.push.bind(this)),this.createSyncNotificationField(i18nString(UIStrings.syncString),this.syncTagNameSetting.get(),i18nString(UIStrings.syncTag),this.sync.bind(this)),this.createSyncNotificationField(i18nString(UIStrings.periodicSync),this.periodicSyncTagNameSetting.get(),i18nString(UIStrings.periodicSyncTag),(e=>this.periodicSync(e))),this.createUpdateCycleField(),this.linkifier=new Components.Linkifier.Linkifier,this.clientInfoCache=new Map,this.throttler=new Common.Throttler.Throttler(500)}createSyncNotificationField(e,t,i,r){const s=this.wrapWidget(this.section.appendField(e)).createChild("form","service-worker-editor-with-button"),n=UI.UIUtils.createInput("source-code service-worker-notification-editor");s.appendChild(n);const o=UI.UIUtils.createTextButton(e);o.type="submit",s.appendChild(o),n.value=t,n.placeholder=i,UI.ARIAUtils.setLabel(n,e),s.addEventListener("submit",(e=>{r(n.value||""),e.consume(!0)}))}scheduleUpdate(){throttleDisabledForDebugging?this.update():this.throttler.schedule(this.update.bind(this))}targetForVersionId(e){const t=this.manager.findVersion(e);return t&&t.targetId?SDK.TargetManager.TargetManager.instance().targetById(t.targetId):null}addVersion(e,t,i){const r=e.createChild("div","service-worker-version");r.createChild("div",t);const s=r.createChild("span","service-worker-version-string");return s.textContent=i,UI.ARIAUtils.markAsAlert(s),r}updateClientsField(e){this.clientsField.removeChildren(),this.section.setFieldVisible(i18nString(UIStrings.clients),Boolean(e.controlledClients.length));for(const t of e.controlledClients){const e=this.clientsField.createChild("div","service-worker-client"),i=this.clientInfoCache.get(t);i&&this.updateClientInfo(e,i),this.manager.target().targetAgent().invoke_getTargetInfo({targetId:t}).then(this.onClientInfo.bind(this,e))}}updateSourceField(e){this.sourceField.removeChildren();const t=Common.ParsedURL.ParsedURL.extractName(e.scriptURL),i=this.sourceField.createChild("div","report-field-value-filename"),r=Components.Linkifier.Linkifier.linkifyURL(e.scriptURL,{text:t});if(r.tabIndex=0,i.appendChild(r),this.registration.errors.length){const e=UI.UIUtils.createIconLabel({title:String(this.registration.errors.length),iconName:"cross-circle-filled",color:"var(--icon-error)"});e.classList.add("devtools-link","link"),e.tabIndex=0,UI.ARIAUtils.setLabel(e,i18nString(UIStrings.sRegistrationErrors,{PH1:this.registration.errors.length})),self.onInvokeElement(e,(()=>Common.Console.Console.instance().show())),i.appendChild(e)}void 0!==e.scriptResponseTime&&(this.sourceField.createChild("div","report-field-value-subtitle").textContent=i18nString(UIStrings.receivedS,{PH1:new Date(1e3*e.scriptResponseTime).toLocaleString()}))}update(){const e=this.registration.fingerprint();if(e===this.fingerprint)return Promise.resolve();this.fingerprint=e,this.toolbar.setEnabled(!this.registration.isDeleted);const t=this.registration.versionsByMode(),i=this.registration.scopeURL,r=this.registration.isDeleted?i18nString(UIStrings.sDeleted,{PH1:i}):i;this.section.setTitle(r);const s=t.get(SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.Active),n=t.get(SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.Waiting),o=t.get(SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.Installing),a=t.get(SDK.ServiceWorkerManager.ServiceWorkerVersion.Modes.Redundant);this.statusField.removeChildren();const c=this.statusField.createChild("div","service-worker-version-stack");if(c.createChild("div","service-worker-version-stack-bar"),s){this.updateSourceField(s);const e=SDK.ServiceWorkerManager.ServiceWorkerVersion.RunningStatus[s.currentState.runningStatus](),t=this.addVersion(c,"service-worker-active-circle",i18nString(UIStrings.sActivatedAndIsS,{PH1:s.id,PH2:e}));s.isRunning()||s.isStarting()?(this.createLink(t,i18nString(UIStrings.stopString),this.stopButtonClicked.bind(this,s.id)),this.targetForVersionId(s.id)||this.createLink(t,i18nString(UIStrings.inspect),this.inspectButtonClicked.bind(this,s.id))):s.isStartable()&&this.createLink(t,i18nString(UIStrings.startString),this.startButtonClicked.bind(this)),this.updateClientsField(s)}else a&&(this.updateSourceField(a),this.addVersion(c,"service-worker-redundant-circle",i18nString(UIStrings.sIsRedundant,{PH1:a.id})),this.updateClientsField(a));if(n){const e=this.addVersion(c,"service-worker-waiting-circle",i18nString(UIStrings.sWaitingToActivate,{PH1:n.id}));this.createLink(e,i18n.i18n.lockedString("skipWaiting"),this.skipButtonClicked.bind(this)),void 0!==n.scriptResponseTime&&(e.createChild("div","service-worker-subtitle").textContent=i18nString(UIStrings.receivedS,{PH1:new Date(1e3*n.scriptResponseTime).toLocaleString()})),this.targetForVersionId(n.id)||!n.isRunning()&&!n.isStarting()||this.createLink(e,i18nString(UIStrings.inspect),this.inspectButtonClicked.bind(this,n.id))}if(o){const e=this.addVersion(c,"service-worker-installing-circle",i18nString(UIStrings.sTryingToInstall,{PH1:o.id}));void 0!==o.scriptResponseTime&&(e.createChild("div","service-worker-subtitle").textContent=i18nString(UIStrings.receivedS,{PH1:new Date(1e3*o.scriptResponseTime).toLocaleString()})),this.targetForVersionId(o.id)||!o.isRunning()&&!o.isStarting()||this.createLink(e,i18nString(UIStrings.inspect),this.inspectButtonClicked.bind(this,o.id))}return this.updateCycleView.refresh(),Promise.resolve()}createLink(e,t,i,r,s){const n=document.createElement("button");return r&&(n.className=r),n.classList.add("link","devtools-link"),n.textContent=t,n.tabIndex=0,n.addEventListener("click",i,s),e.appendChild(n),n}unregisterButtonClicked(){this.manager.deleteRegistration(this.registration.id)}createUpdateCycleField(){this.updateCycleField=this.wrapWidget(this.section.appendField(i18nString(UIStrings.updateCycle))),this.updateCycleField.appendChild(this.updateCycleView.tableElement)}updateButtonClicked(){this.manager.updateRegistration(this.registration.id)}networkRequestsClicked(){const e="drawer-view"===UI.ViewManager.ViewManager.instance().locationNameForViewId("resources")?"panel":"drawer-view";UI.ViewManager.ViewManager.instance().showViewInLocation("network",e),Common.Revealer.reveal(NetworkForward.UIFilter.UIRequestFilter.filters([{filterType:NetworkForward.UIFilter.FilterType.Is,filterValue:NetworkForward.UIFilter.IsFilterType.ServiceWorkerIntercepted}]));const t=Logs.NetworkLog.NetworkLog.instance().requests();let i=null;if(Array.isArray(t))for(const e of t)!i&&e.fetchedViaServiceWorker&&(i=e),e.fetchedViaServiceWorker&&i&&i.responseReceivedTime<e.responseReceivedTime&&(i=e);if(i){const e=NetworkForward.UIRequestLocation.UIRequestLocation.tab(i,NetworkForward.UIRequestLocation.UIRequestTabs.Timing,{clearFilter:!1});Common.Revealer.reveal(e)}this.manager.serviceWorkerNetworkRequestsPanelStatus={isOpen:!0,openedAt:Date.now()},Host.userMetrics.actionTaken(Host.UserMetrics.Action.ServiceWorkerNetworkRequestClicked)}push(e){this.pushNotificationDataSetting.set(e),this.manager.deliverPushMessage(this.registration.id,e)}sync(e){this.syncTagNameSetting.set(e),this.manager.dispatchSyncEvent(this.registration.id,e,!0)}periodicSync(e){this.periodicSyncTagNameSetting.set(e),this.manager.dispatchPeriodicSyncEvent(this.registration.id,e)}onClientInfo(e,t){const i=t.targetInfo;i&&(this.clientInfoCache.set(i.targetId,i),this.updateClientInfo(e,i))}updateClientInfo(e,t){if("page"!==t.type&&"iframe"===t.type){const i=e.createChild("span","service-worker-client-string");return void UI.UIUtils.createTextChild(i,i18nString(UIStrings.workerS,{PH1:t.url}))}e.removeChildren();const i=e.createChild("span","service-worker-client-string");UI.UIUtils.createTextChild(i,t.url),this.createLink(e,i18nString(UIStrings.focus),this.activateTarget.bind(this,t.targetId),"service-worker-client-focus-link")}activateTarget(e){this.manager.target().targetAgent().invoke_activateTarget({targetId:e})}startButtonClicked(){this.manager.startWorker(this.registration.scopeURL)}skipButtonClicked(){this.manager.skipWaiting(this.registration.scopeURL)}stopButtonClicked(e){this.manager.stopWorker(e)}inspectButtonClicked(e){this.manager.inspectWorker(e)}wrapWidget(e){const t=UI.Utils.createShadowRootWithCoreStyles(e,{cssFile:[serviceWorkersViewStyles,serviceWorkerUpdateCycleViewStyles],delegatesFocus:void 0}),i=document.createElement("div");return t.appendChild(i),i}}