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

Command line interface for rapid qg-minigame development

import*as Common from"../../core/common/common.js";import*as i18n from"../../core/i18n/i18n.js";import*as Platform from"../../core/platform/platform.js";import*as SDK from"../../core/sdk/sdk.js";import*as DataGrid from"../../ui/legacy/components/data_grid/data_grid.js";import*as UI from"../../ui/legacy/legacy.js";import*as ApplicationComponents from"./components/components.js";import serviceWorkerCacheViewsStyles from"./serviceWorkerCacheViews.css.js";import*as Network from"../network/network.js";const UIStrings={cache:"Cache",refresh:"Refresh",deleteSelected:"Delete Selected",filterByPath:"Filter by Path",selectACacheEntryAboveToPreview:"Select a cache entry above to preview",name:"Name",timeCached:"Time Cached",varyHeaderWarning:"⚠️ Set ignoreVary to true when matching this entry",serviceWorkerCache:"`Service Worker` Cache",matchingEntriesS:"Matching entries: {PH1}",totalEntriesS:"Total entries: {PH1}",headers:"Headers",preview:"Preview"},str_=i18n.i18n.registerUIStrings("panels/application/ServiceWorkerCacheViews.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class ServiceWorkerCacheView extends UI.View.SimpleView{model;entriesForTest;splitWidget;previewPanel;preview;cache;dataGrid;refreshThrottler;refreshButton;deleteSelectedButton;entryPathFilter;returnCount;summaryBarElement;loadingPromise;metadataView=new ApplicationComponents.StorageMetadataView.StorageMetadataView;constructor(e,t){super(i18nString(UIStrings.cache)),this.model=e,this.entriesForTest=null,this.element.classList.add("service-worker-cache-data-view"),this.element.classList.add("storage-view");const r=new UI.Toolbar.Toolbar("data-view-toolbar",this.element);this.element.appendChild(this.metadataView),this.splitWidget=new UI.SplitWidget.SplitWidget(!1,!1),this.splitWidget.show(this.element),this.previewPanel=new UI.Widget.VBox;const i=this.previewPanel.element.createChild("div","cache-preview-panel-resizer");this.splitWidget.setMainWidget(this.previewPanel),this.splitWidget.installResizer(i),this.preview=null,this.cache=t;const a=this.model.target().model(SDK.StorageBucketsModel.StorageBucketsModel)?.getBucketByName(t.storageBucket.storageKey,t.storageBucket.name);a?this.metadataView.setStorageBucket(a):t.storageKey&&this.metadataView.setStorageKey(t.storageKey),this.dataGrid=null,this.refreshThrottler=new Common.Throttler.Throttler(300),this.refreshButton=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.refresh),"refresh"),this.refreshButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,this.refreshButtonClicked,this),r.appendToolbarItem(this.refreshButton),this.deleteSelectedButton=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.deleteSelected),"cross"),this.deleteSelectedButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,(e=>{this.deleteButtonClicked(null)})),r.appendToolbarItem(this.deleteSelectedButton);const s=new UI.Toolbar.ToolbarInput(i18nString(UIStrings.filterByPath),"",1);r.appendToolbarItem(s);const n=new Common.Throttler.Throttler(300);this.entryPathFilter="",s.addEventListener(UI.Toolbar.ToolbarInput.Event.TextChanged,(()=>{n.schedule((()=>(this.entryPathFilter=s.value(),this.updateData(!0))))})),this.returnCount=null,this.summaryBarElement=null,this.loadingPromise=null,this.update(t)}resetDataGrid(){this.dataGrid&&this.dataGrid.asWidget().detach(),this.dataGrid=this.createDataGrid();const e=this.dataGrid.asWidget();this.splitWidget.setSidebarWidget(e),e.setMinimumSize(0,250)}wasShown(){this.model.addEventListener(SDK.ServiceWorkerCacheModel.Events.CacheStorageContentUpdated,this.cacheContentUpdated,this),this.registerCSSFiles([serviceWorkerCacheViewsStyles]),this.updateData(!0)}willHide(){this.model.removeEventListener(SDK.ServiceWorkerCacheModel.Events.CacheStorageContentUpdated,this.cacheContentUpdated,this)}showPreview(e){e&&this.preview===e||(this.preview&&this.preview.detach(),e||(e=new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.selectACacheEntryAboveToPreview))),this.preview=e,this.preview.show(this.previewPanel.element))}createDataGrid(){const e=[{id:"number",title:"#",sortable:!1,width:"3px"},{id:"name",title:i18nString(UIStrings.name),weight:4,sortable:!0},{id:"responseType",title:i18n.i18n.lockedString("Response-Type"),weight:1,align:DataGrid.DataGrid.Align.Right,sortable:!0},{id:"contentType",title:i18n.i18n.lockedString("Content-Type"),weight:1,sortable:!0},{id:"contentLength",title:i18n.i18n.lockedString("Content-Length"),weight:1,align:DataGrid.DataGrid.Align.Right,sortable:!0},{id:"responseTime",title:i18nString(UIStrings.timeCached),width:"12em",weight:1,align:DataGrid.DataGrid.Align.Right,sortable:!0},{id:"varyHeader",title:i18n.i18n.lockedString("Vary Header"),weight:1,sortable:!0}],t=new DataGrid.DataGrid.DataGridImpl({displayName:i18nString(UIStrings.serviceWorkerCache),columns:e,deleteCallback:this.deleteButtonClicked.bind(this),refreshCallback:this.updateData.bind(this,!0),editCallback:void 0});return t.addEventListener(DataGrid.DataGrid.Events.SortingChanged,this.sortingChanged,this),t.addEventListener(DataGrid.DataGrid.Events.SelectedNode,(e=>{this.previewCachedResponse(e.data.data)}),this),t.setStriped(!0),t}sortingChanged(){if(!this.dataGrid)return;const e=this.dataGrid,t=e.isSortOrderAscending(),r=e.sortColumnId();let i;"name"===r?i=(e,t)=>e.name.localeCompare(t.name):"contentType"===r?i=(e,t)=>e.data.mimeType.localeCompare(t.data.mimeType):"contentLength"===r?i=(e,t)=>e.data.resourceSize-t.data.resourceSize:"responseTime"===r?i=(e,t)=>e.data.endTime-t.data.endTime:"responseType"===r?i=(e,t)=>e.responseType.localeCompare(t.responseType):"varyHeader"===r&&(i=(e,t)=>e.varyHeader.localeCompare(t.varyHeader));const a=e.rootNode().children.slice();e.rootNode().removeChildren(),a.sort(((e,r)=>{const a=i(e,r);return t?a:-a})),a.forEach((t=>e.rootNode().appendChild(t)))}async deleteButtonClicked(e){(e||(e=this.dataGrid&&this.dataGrid.selectedNode))&&(await this.model.deleteCacheEntry(this.cache,e.data.url()),e.remove())}update(e){this.cache=e,this.resetDataGrid(),this.updateData(!0)}updateSummaryBar(){this.summaryBarElement||(this.summaryBarElement=this.element.createChild("div","cache-storage-summary-bar")),this.summaryBarElement.removeChildren();const e=this.summaryBarElement.createChild("span");this.entryPathFilter?e.textContent=i18nString(UIStrings.matchingEntriesS,{PH1:String(this.returnCount)}):e.textContent=i18nString(UIStrings.totalEntriesS,{PH1:String(this.returnCount)})}updateDataCallback(e,t,r){if(!this.dataGrid)return;const i=this.dataGrid.selectedNode&&this.dataGrid.selectedNode.data.url();this.refreshButton.setEnabled(!0),this.entriesForTest=t,this.returnCount=r,this.updateSummaryBar();const a=new Map,s=this.dataGrid.rootNode();for(const e of s.children)a.set(e.data.url,e);s.removeChildren();let n=null;for(let e=0;e<t.length;++e){const r=t[e];let o=a.get(r.requestURL);o&&o.data.responseTime===r.responseTime?o.data.number=e:(o=new DataGridNode(e,this.createRequest(r),r.responseType),o.selectable=!0),s.appendChild(o),r.requestURL===i&&(n=o)}n?n.revealAndSelect():this.showPreview(null),this.updatedForTest()}async updateData(e){if(!e&&this.loadingPromise)return this.loadingPromise;if(this.refreshButton.setEnabled(!1),this.loadingPromise)return this.loadingPromise;this.loadingPromise=new Promise((e=>{this.model.loadAllCacheData(this.cache,this.entryPathFilter,((t,r)=>{e({entries:t,returnCount:r})}))}));const{entries:t,returnCount:r}=await this.loadingPromise;this.updateDataCallback(0,t,r),this.loadingPromise=null}refreshButtonClicked(){this.updateData(!0)}cacheContentUpdated(e){const{cacheName:t,storageBucket:r}=e.data;this.cache.inBucket(r)&&this.cache.cacheName===t&&this.refreshThrottler.schedule((()=>Promise.resolve(this.updateData(!0))),!0)}async previewCachedResponse(e){let t=networkRequestToPreview.get(e);t||(t=new RequestView(e),networkRequestToPreview.set(e,t)),this.dataGrid&&this.dataGrid.selectedNode&&e===this.dataGrid.selectedNode.data&&this.showPreview(t)}createRequest(e){const t=SDK.NetworkRequest.NetworkRequest.createWithoutBackendRequest("cache-storage-"+e.requestURL,e.requestURL,Platform.DevToolsPath.EmptyUrlString,null);t.requestMethod=e.requestMethod,t.setRequestHeaders(e.requestHeaders),t.statusCode=e.responseStatus,t.statusText=e.responseStatusText,t.protocol=new Common.ParsedURL.ParsedURL(e.requestURL).scheme,t.responseHeaders=e.responseHeaders,t.setRequestHeadersText(""),t.endTime=e.responseTime;let r=e.responseHeaders.find((e=>"content-type"===e.name.toLowerCase()));const i=r?r.value:SDK.NetworkRequest.MIME_TYPE.PLAIN;t.mimeType=i,r=e.responseHeaders.find((e=>"content-length"===e.name.toLowerCase())),t.resourceSize=r&&Number(r.value)||0;let a=Common.ResourceType.ResourceType.fromMimeType(i);return a||(a=Common.ResourceType.ResourceType.fromURL(e.requestURL)||Common.ResourceType.resourceTypes.Other),t.setResourceType(a),t.setContentDataProvider(this.requestContent.bind(this,t)),t}async requestContent(e){const t=e.resourceType().isTextType(),r={error:null,content:null,encoded:!t},i=await this.cache.requestCachedResponse(e.url(),e.requestHeaders());return i&&(r.content=t?window.atob(i.body):i.body),r}updatedForTest(){}static previewSymbol=Symbol("preview")}const networkRequestToPreview=new WeakMap;export class DataGridNode extends DataGrid.DataGrid.DataGridNode{number;name;request;responseType;varyHeader;constructor(e,t,r){super(t),this.number=e;const i=new Common.ParsedURL.ParsedURL(t.url());i.isValid?this.name=Platform.StringUtilities.trimURL(t.url(),i.domain()):this.name=t.url(),this.request=t,this.responseType=r,this.varyHeader=t.responseHeaders.find((e=>"vary"===e.name.toLowerCase()))?.value||""}createCell(e){const t=this.createTD(e);let r,i=this.request.url();"number"===e?r=String(this.number):"name"===e?r=this.name:"responseType"===e?r="opaqueResponse"===this.responseType?"opaque":"opaqueRedirect"===this.responseType?"opaqueredirect":this.responseType:"contentType"===e?r=this.request.mimeType:"contentLength"===e?r=(0|this.request.resourceSize).toLocaleString("en-US"):"responseTime"===e?r=new Date(1e3*this.request.endTime).toLocaleString():"varyHeader"===e&&(r=this.varyHeader,this.varyHeader&&(i=i18nString(UIStrings.varyHeaderWarning)));const a=t.parentElement;let s;return a&&this.dataGrid&&(s=this.dataGrid.elementToDataGridNode.get(a)),DataGrid.DataGrid.DataGridImpl.setElementText(t,r||"",!0,s),UI.Tooltip.Tooltip.install(t,i),t}}export class RequestView extends UI.Widget.VBox{tabbedPane;resourceViewTabSetting;constructor(e){super(),this.tabbedPane=new UI.TabbedPane.TabbedPane,this.tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected,this.tabSelected,this),this.resourceViewTabSetting=Common.Settings.Settings.instance().createSetting("cacheStorageViewTab","preview"),this.tabbedPane.appendTab("headers",i18nString(UIStrings.headers),new Network.RequestHeadersView.RequestHeadersView(e)),this.tabbedPane.appendTab("preview",i18nString(UIStrings.preview),new Network.RequestPreviewView.RequestPreviewView(e)),this.tabbedPane.show(this.element)}wasShown(){super.wasShown(),this.selectTab()}selectTab(e){e||(e=this.resourceViewTabSetting.get()),e&&!this.tabbedPane.selectTab(e)&&this.tabbedPane.selectTab("headers")}tabSelected(e){e.data.isUserGesture&&this.resourceViewTabSetting.set(e.data.tabId)}}