@yuebai008/cli/dist/cli-server/client/front_end/panels/application/StorageView.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 IconButton from"../../ui/components/icon_button/icon_button.js";import*as PerfUI from"../../ui/legacy/components/perf_ui/perf_ui.js";import*as UI from"../../ui/legacy/legacy.js";import{DatabaseModel}from"./DatabaseModel.js";import{DOMStorageModel}from"./DOMStorageModel.js";import{IndexedDBModel}from"./IndexedDBModel.js";import storageViewStyles from"./storageView.css.js";const UIStrings={storageQuotaUsed:"{PH1} used out of {PH2} storage quota",storageQuotaUsedWithBytes:"{PH1} bytes used out of {PH2} bytes storage quota",storageWithCustomMarker:"{PH1} (custom)",storageTitle:"Storage",usage:"Usage",mb:"MB",learnMore:"Learn more",clearSiteData:"Clear site data",SiteDataCleared:"Site data cleared",application:"Application",unregisterServiceWorker:"Unregister service workers",localAndSessionStorage:"Local and session storage",indexDB:"IndexedDB",webSql:"Web SQL",cookies:"Cookies",cacheStorage:"Cache storage",includingThirdPartyCookies:"including third-party cookies",sFailedToLoad:"{PH1} (failed to load)",internalError:"Internal error",pleaseEnterANumber:"Please enter a number",numberMustBeNonNegative:"Number must be non-negative",numberMustBeSmaller:"Number must be smaller than {PH1}",clearing:"Clearing...",storageQuotaIsLimitedIn:"Storage quota is limited in Incognito mode",fileSystem:"File System",other:"Other",storageUsage:"Storage usage",serviceWorkers:"Service workers",simulateCustomStorage:"Simulate custom storage quota"},str_=i18n.i18n.registerUIStrings("panels/application/StorageView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class StorageView extends UI.ThrottledWidget.ThrottledWidget{pieColors;reportView;target;securityOrigin;storageKey;settings;includeThirdPartyCookiesSetting;quotaRow;quotaUsage;pieChart;previousOverrideFieldValue;quotaOverrideCheckbox;quotaOverrideControlRow;quotaOverrideEditor;quotaOverrideErrorMessage;clearButton;constructor(){super(!0,1e3),this.contentElement.classList.add("clear-storage-container"),this.pieColors=new Map([["appcache","rgb(110, 161, 226)"],["cache_storage","rgb(229, 113, 113)"],["cookies","rgb(239, 196, 87)"],["indexeddb","rgb(155, 127, 230)"],["local_storage","rgb(116, 178, 102)"],["service_workers","rgb(255, 167, 36)"],["websql","rgb(203, 220, 56)"]]),this.reportView=new UI.ReportView.ReportView(i18nString(UIStrings.storageTitle)),this.reportView.element.classList.add("clear-storage-header"),this.reportView.show(this.contentElement),this.target=null,this.securityOrigin=null,this.storageKey=null,this.settings=new Map;for(const e of AllStorageTypes)this.settings.set(e,Common.Settings.Settings.instance().createSetting("clear-storage-"+e,!0));this.includeThirdPartyCookiesSetting=Common.Settings.Settings.instance().createSetting("clear-storage-include-third-party-cookies",!1);const e=this.reportView.appendSection(i18nString(UIStrings.usage));this.quotaRow=e.appendSelectableRow(),this.quotaRow.classList.add("quota-usage-row");const t=e.appendRow(),r=UI.XLink.XLink.create("https://developer.chrome.com/docs/devtools/progressive-web-apps#opaque-responses",i18nString(UIStrings.learnMore));t.appendChild(r),this.quotaUsage=null,this.pieChart=new PerfUI.PieChart.PieChart,this.populatePieChart(0,[]);const i=e.appendRow();i.classList.add("usage-breakdown-row"),i.appendChild(this.pieChart),this.previousOverrideFieldValue="";const o=e.appendRow();o.classList.add("quota-override-row"),this.quotaOverrideCheckbox=UI.UIUtils.CheckboxLabel.create(i18nString(UIStrings.simulateCustomStorage),!1,""),o.appendChild(this.quotaOverrideCheckbox),this.quotaOverrideCheckbox.checkboxElement.addEventListener("click",this.onClickCheckbox.bind(this),!1),this.quotaOverrideControlRow=e.appendRow(),this.quotaOverrideEditor=this.quotaOverrideControlRow.createChild("input","quota-override-notification-editor"),this.quotaOverrideControlRow.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.mb))),this.quotaOverrideControlRow.classList.add("hidden"),this.quotaOverrideEditor.addEventListener("keyup",(e=>{"Enter"===e.key&&(this.applyQuotaOverrideFromInputField(),e.consume(!0))})),this.quotaOverrideEditor.addEventListener("focusout",(e=>{this.applyQuotaOverrideFromInputField(),e.consume(!0)}));const a=e.appendRow();this.quotaOverrideErrorMessage=a.createChild("div","quota-override-error");const s=this.reportView.appendSection("","clear-storage-button").appendRow();this.clearButton=UI.UIUtils.createTextButton(i18nString(UIStrings.clearSiteData),this.clear.bind(this)),this.clearButton.id="storage-view-clear-button",s.appendChild(this.clearButton);const n=UI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.includingThirdPartyCookies),this.includeThirdPartyCookiesSetting,!0);n.classList.add("include-third-party-cookies"),s.appendChild(n);const g=this.reportView.appendSection(i18nString(UIStrings.application));this.appendItem(g,i18nString(UIStrings.unregisterServiceWorker),"service_workers"),g.markFieldListAsGroup();const c=this.reportView.appendSection(i18nString(UIStrings.storageTitle));this.appendItem(c,i18nString(UIStrings.localAndSessionStorage),"local_storage"),this.appendItem(c,i18nString(UIStrings.indexDB),"indexeddb"),this.appendItem(c,i18nString(UIStrings.webSql),"websql"),this.appendItem(c,i18nString(UIStrings.cookies),"cookies"),this.appendItem(c,i18nString(UIStrings.cacheStorage),"cache_storage"),c.markFieldListAsGroup(),SDK.TargetManager.TargetManager.instance().observeTargets(this)}appendItem(e,t,r){const i=e.appendRow(),o=this.settings.get(r);o&&i.appendChild(UI.SettingsUI.createSettingCheckbox(t,o,!0))}targetAdded(e){if(e!==SDK.TargetManager.TargetManager.instance().primaryPageTarget())return;this.target=e;const t=e.model(SDK.SecurityOriginManager.SecurityOriginManager);this.updateOrigin(t.mainSecurityOrigin(),t.unreachableMainSecurityOrigin()),t.addEventListener(SDK.SecurityOriginManager.Events.MainSecurityOriginChanged,this.originChanged,this);const r=e.model(SDK.StorageKeyManager.StorageKeyManager);this.updateStorageKey(r.mainStorageKey()),r.addEventListener(SDK.StorageKeyManager.Events.MainStorageKeyChanged,this.storageKeyChanged,this)}targetRemoved(e){if(this.target!==e)return;e.model(SDK.SecurityOriginManager.SecurityOriginManager).removeEventListener(SDK.SecurityOriginManager.Events.MainSecurityOriginChanged,this.originChanged,this);e.model(SDK.StorageKeyManager.StorageKeyManager).removeEventListener(SDK.StorageKeyManager.Events.MainStorageKeyChanged,this.storageKeyChanged,this)}originChanged(e){const{mainSecurityOrigin:t,unreachableMainSecurityOrigin:r}=e.data;this.updateOrigin(t,r)}storageKeyChanged(e){const{mainStorageKey:t}=e.data;this.updateStorageKey(t)}updateOrigin(e,t){const r=this.securityOrigin;t?(this.securityOrigin=t,this.reportView.setSubtitle(i18nString(UIStrings.sFailedToLoad,{PH1:t}))):(this.securityOrigin=e,this.reportView.setSubtitle(e)),r!==this.securityOrigin&&(this.quotaOverrideControlRow.classList.add("hidden"),this.quotaOverrideCheckbox.checkboxElement.checked=!1,this.quotaOverrideErrorMessage.textContent=""),this.doUpdate()}updateStorageKey(e){const t=this.storageKey;this.storageKey=e,this.reportView.setSubtitle(e),t!==this.storageKey&&(this.quotaOverrideControlRow.classList.add("hidden"),this.quotaOverrideCheckbox.checkboxElement.checked=!1,this.quotaOverrideErrorMessage.textContent=""),this.doUpdate()}async applyQuotaOverrideFromInputField(){if(!this.target||!this.securityOrigin)return void(this.quotaOverrideErrorMessage.textContent=i18nString(UIStrings.internalError));this.quotaOverrideErrorMessage.textContent="";const e=this.quotaOverrideEditor.value;if(""===e)return await this.clearQuotaForOrigin(this.target,this.securityOrigin),void(this.previousOverrideFieldValue="");const t=parseFloat(e);if(!Number.isFinite(t))return void(this.quotaOverrideErrorMessage.textContent=i18nString(UIStrings.pleaseEnterANumber));if(t<0)return void(this.quotaOverrideErrorMessage.textContent=i18nString(UIStrings.numberMustBeNonNegative));const r=9e12;if(t>=r)return void(this.quotaOverrideErrorMessage.textContent=i18nString(UIStrings.numberMustBeSmaller,{PH1:r.toLocaleString()}));const i=1e6,o=Math.round(t*i),a=""+o/i;this.quotaOverrideEditor.value=a,this.previousOverrideFieldValue=a,await this.target.storageAgent().invoke_overrideQuotaForOrigin({origin:this.securityOrigin,quotaSize:o})}async clearQuotaForOrigin(e,t){await e.storageAgent().invoke_overrideQuotaForOrigin({origin:t})}async onClickCheckbox(){this.quotaOverrideControlRow.classList.contains("hidden")?(this.quotaOverrideControlRow.classList.remove("hidden"),this.quotaOverrideCheckbox.checkboxElement.checked=!0,this.quotaOverrideEditor.value=this.previousOverrideFieldValue,this.quotaOverrideEditor.focus()):this.target&&this.securityOrigin&&(this.quotaOverrideControlRow.classList.add("hidden"),this.quotaOverrideCheckbox.checkboxElement.checked=!1,await this.clearQuotaForOrigin(this.target,this.securityOrigin),this.quotaOverrideErrorMessage.textContent="")}clear(){if(!this.securityOrigin)return;const e=[];for(const t of this.settings.keys()){const r=this.settings.get(t);r&&r.get()&&e.push(t)}if(this.target){const t=this.includeThirdPartyCookiesSetting.get();StorageView.clear(this.target,this.storageKey,this.securityOrigin,e,t)}this.clearButton.disabled=!0;const t=this.clearButton.textContent;this.clearButton.textContent=i18nString(UIStrings.clearing),window.setTimeout((()=>{this.clearButton.disabled=!1,this.clearButton.textContent=t,this.clearButton.focus()}),500),UI.ARIAUtils.alert(i18nString(UIStrings.SiteDataCleared))}static clear(e,t,r,i,o){if(console.assert(Boolean(t)),!t)return;e.storageAgent().invoke_clearDataForStorageKey({storageKey:t,storageTypes:i.join(",")});const a=new Set(i),s=a.has("all");if(a.has("local_storage")||s){const r=e.model(DOMStorageModel);r&&r.clearForStorageKey(t)}if(a.has("indexeddb")||s)for(const e of SDK.TargetManager.TargetManager.instance().targets()){const r=e.model(IndexedDBModel);r&&r.clearForStorageKey(t)}if(r&&(a.has("cookies")||s)){e.storageAgent().invoke_clearDataForOrigin({origin:r,storageTypes:"cookies"});const t=e.model(SDK.CookieModel.CookieModel);t&&t.clear(void 0,o?void 0:r)}if(a.has("websql")||s){const t=e.model(DatabaseModel);t&&(t.disable(),t.enable())}if(a.has("cache_storage")||s){const e=SDK.TargetManager.TargetManager.instance().primaryPageTarget(),r=e&&e.model(SDK.ServiceWorkerCacheModel.ServiceWorkerCacheModel);r&&r.clearForStorageKey(t)}}async doUpdate(){if(!this.securityOrigin||!this.target)return this.quotaRow.textContent="",void this.populatePieChart(0,[]);const e=this.securityOrigin,t=await this.target.storageAgent().invoke_getUsageAndQuota({origin:e});if(this.quotaRow.textContent="",t.getError())return void this.populatePieChart(0,[]);const r=t.overrideActive,i=Platform.NumberUtilities.bytesToString(t.quota),o=Platform.NumberUtilities.bytesToString(t.usage),a=i18nString(UIStrings.storageWithCustomMarker,{PH1:i}),s=r?UI.Fragment.Fragment.build`<b>${a}</b>`.element():i,n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.storageQuotaUsed,{PH1:o,PH2:s});if(this.quotaRow.appendChild(n),UI.Tooltip.Tooltip.install(this.quotaRow,i18nString(UIStrings.storageQuotaUsedWithBytes,{PH1:t.usage.toLocaleString(),PH2:t.quota.toLocaleString()})),!t.overrideActive&&t.quota<125829120){const e=new IconButton.Icon.Icon;e.data={iconName:"info",color:"var(--icon-info)",width:"14px",height:"14px"},UI.Tooltip.Tooltip.install(this.quotaRow,i18nString(UIStrings.storageQuotaIsLimitedIn)),this.quotaRow.appendChild(e)}if(null===this.quotaUsage||this.quotaUsage!==t.usage){this.quotaUsage=t.usage;const e=[];for(const r of t.usageBreakdown.sort(((e,t)=>t.usage-e.usage))){const t=r.usage;if(!t)continue;const i=this.getStorageTypeName(r.storageType),o=this.pieColors.get(r.storageType)||"#ccc";e.push({value:t,color:o,title:i})}this.populatePieChart(t.usage,e)}this.update()}populatePieChart(e,t){this.pieChart.data={chartName:i18nString(UIStrings.storageUsage),size:110,formatter:Platform.NumberUtilities.bytesToString,showLegend:!0,total:e,slices:t}}getStorageTypeName(e){switch(e){case"file_systems":return i18nString(UIStrings.fileSystem);case"websql":return i18nString(UIStrings.webSql);case"appcache":return i18nString(UIStrings.application);case"indexeddb":return i18nString(UIStrings.indexDB);case"cache_storage":return i18nString(UIStrings.cacheStorage);case"service_workers":return i18nString(UIStrings.serviceWorkers);default:return i18nString(UIStrings.other)}}wasShown(){super.wasShown(),this.reportView.registerCSSFiles([storageViewStyles]),this.registerCSSFiles([storageViewStyles])}}export const AllStorageTypes=["appcache","cache_storage","cookies","indexeddb","local_storage","service_workers","websql"];let actionDelegateInstance;export class ActionDelegate{static instance(e={forceNew:null}){const{forceNew:t}=e;return actionDelegateInstance&&!t||(actionDelegateInstance=new ActionDelegate),actionDelegateInstance}handleAction(e,t){switch(t){case"resources.clear":return this.handleClear(!1);case"resources.clear-incl-third-party-cookies":return this.handleClear(!0)}return!1}handleClear(e){const t=SDK.TargetManager.TargetManager.instance().primaryPageTarget();if(!t)return!1;const r=t.model(SDK.ResourceTreeModel.ResourceTreeModel);if(!r)return!1;const i=r.getMainSecurityOrigin();return r.getMainStorageKey().then((r=>{StorageView.clear(t,r,i,AllStorageTypes,e)}),(e=>{})),!0}}