@react-native/debugger-frontend
Version:
Debugger frontend for React Native based on Chrome DevTools
91 lines • 55.2 kB
JavaScript
import"../../ui/components/cards/cards.js";import*as e from"../../core/common/common.js";import*as t from"../../core/host/host.js";import*as s from"../../core/i18n/i18n.js";import*as i from"../../core/root/root.js";import*as n from"../../ui/components/buttons/buttons.js";import*as o from"../../ui/components/icon_button/icon_button.js";import*as r from"../../ui/legacy/components/utils/utils.js";import*as a from"../../ui/legacy/legacy.js";import*as l from"../../ui/lit/lit.js";import{render as d,html as c}from"../../ui/lit/lit.js";import*as g from"../../ui/visual_logging/visual_logging.js";import{PanelUtils as h}from"../utils/utils.js";import*as p from"./components/components.js";import*as u from"../../ui/components/input/input.js";import*as m from"../../ui/components/legacy_wrapper/legacy_wrapper.js";import*as y from"../../ui/components/switch/switch.js";import*as b from"../../core/platform/platform.js";var v={cssText:`.settings-window-main{color:var(--sys-color-on-surface);background-color:var(--sys-color-cdt-base-container)}.settings-content{overflow:hidden auto;margin:8px 8px 8px 0;padding:0 4px;flex:auto}.settings-experiments-block{padding:0 var(--sys-size-6) var(--sys-size-5) var(--sys-size-4)}fieldset{margin:0;padding:0;border:none}label{padding-right:8px}.experiments-filter{width:100%;padding:0 var(--sys-size-9) 0 var(--sys-size-8);max-width:var(--sys-size-35);> devtools-toolbar{min-width:var(--sys-size-31)}}.settings-select{align-items:center;display:grid;row-gap:var(--sys-size-3);margin:var(--sys-size-4) 0}div:has(.settings-select) + div:has(.settings-select){padding-top:var(--sys-size-5)}.settings-window-label-element{flex:none}.settings-window-title{display:flex;align-items:center;font-size:var(--sys-size-9);color:var(--sys-color-on-surface);margin:var(--sys-size-8) var(--sys-size-7);&::before{content:"";width:var(--sys-size-9);height:var(--sys-size-9);margin-right:var(--sys-size-6);background-image:var(--image-file-devtools)}}.settings-card-container-wrapper{scrollbar-gutter:stable;padding:var(--sys-size-8) 0;overflow:auto;position:absolute;inset:var(--sys-size-8) 0 0;container-type:inline-size;container-name:settings-content}.settings-card-container,\n.settings-multicolumn-card-container{display:flex;flex-direction:column;align-items:center;gap:var(--sys-size-9);> devtools-button{min-width:var(--sys-size-31);max-width:var(--sys-size-35);width:calc(100% - var(--sys-size-5));margin-left:var(--sys-size-5)}}@container settings-content (min-width: 850px){.settings-multicolumn-card-container{display:block;column-width:var(--sys-size-32);column-gap:var(--sys-size-11);margin:0 var(--sys-size-9);> * + *{margin-top:var(--sys-size-8)}> devtools-button{align-self:start}}}.settings-card-container-wrapper select{margin-left:10px;width:var(--sys-size-28)}.settings-card-container-wrapper setting-checkbox{min-height:var(--sys-size-13);position:relative;left:calc(var(--sys-size-4) * -1)}.settings-experiment{margin:0;min-height:var(--sys-size-13);display:grid;grid-template-columns:auto min-content auto 1fr;& .devtools-link{display:flex!important;align-items:center}}devtools-button.link-icon{cursor:pointer}.experiment-label{margin:var(--sys-size-3) var(--sys-size-2) var(--sys-size-3) 0;white-space:normal}.settings-experiment-unstable{color:var(--sys-color-token-subtle)}.settings-experiment .feedback-link{color:var(--sys-color-primary);text-decoration-line:underline;margin-left:4px}.tabbed-pane-content slot::slotted(.widget){overflow:visible!important}.experiments-warning-subsection{display:flex;align-items:center;> devtools-icon{color:var(--sys-color-orange-bright);margin-right:var(--sys-size-4)}}@media (forced-colors: active){.settings-window-title{color:canvastext}.tabbed-pane-header-tab{background:ButtonFace}.tabbed-pane-header-tab-title{color:canvastext}}@media (forced-colors: active) and (prefers-color-scheme: dark){.tabbed-pane-header-tab.selected{background:ButtonFace}.tabbed-pane-header-tab.selected .tabbed-pane-header-tab-title{color:HighlightText}}\n/*# sourceURL=${import.meta.resolve("./settingsScreen.css")} */\n`};const S={unstableExperiments:"Unstable experiments",settings:"Settings",shortcuts:"Shortcuts",restoreDefaultsAndReload:"Restore defaults and reload",experiments:"Experiments",theseExperimentsCouldBeUnstable:"Warning: These experiments could be unstable or unreliable.",theseExperimentsAreParticularly:"Warning: These experiments are particularly unstable. Enable at your own risk.",oneOrMoreSettingsHaveChanged:"One or more settings have changed which requires a reload to take effect",noResults:"No experiments match the filter",learnMore:"Learn more",sendFeedback:"Send feedback",searchExperiments:"Search experiments"},f=s.i18n.registerUIStrings("panels/settings/SettingsScreen.ts",S),x=s.i18n.getLocalizedString.bind(void 0,f);let w;function k(e,...t){const s=document.createElement("devtools-card");return s.heading=e,s.append(...t),s}class A extends a.Widget.VBox{tabbedLocation;keybindsTab;reportTabOnReveal;constructor(){super(!0),this.registerRequiredCSS(v),this.contentElement.classList.add("settings-window-main"),this.contentElement.classList.add("vbox");const e=document.createElement("div");e.classList.add("settings-window-label-element");const t=a.UIUtils.createShadowRootWithCoreStyles(e,{cssFile:v}).createChild("div","settings-window-title");a.ARIAUtils.markAsHeading(t,1),t.textContent=x(S.settings),this.tabbedLocation=a.ViewManager.ViewManager.instance().createTabbedLocation((()=>A.revealSettingsScreen()),"settings-view");const s=this.tabbedLocation.tabbedPane();s.registerRequiredCSS(v),s.headerElement().prepend(e),s.setShrinkableTabs(!1),s.makeVerticalTabLayout();const i=a.ViewManager.ViewManager.instance().view("keybinds");i&&i.widget().then((e=>{this.keybindsTab=e})),s.show(this.contentElement),s.selectTab("preferences"),s.addEventListener(a.TabbedPane.Events.TabInvoked,this.tabInvoked,this),this.reportTabOnReveal=!1}static instance(e={forceNew:null}){const{forceNew:t}=e;return w&&!t||(w=new A),w}static revealSettingsScreen(){const e=A.instance();if(e.isShowing())return e;e.reportTabOnReveal=!0;const t=new a.Dialog.Dialog("settings");return t.contentElement.removeAttribute("aria-modal"),t.contentElement.tabIndex=-1,t.addCloseButton(),t.setOutsideClickCallback((()=>{})),t.setPointerEventsBehavior("PierceGlassPane"),t.setOutsideTabIndexBehavior("PreserveMainViewTabIndex"),e.show(t.contentElement),t.setEscapeKeyCallback(e.onEscapeKeyPressed.bind(e)),t.setMarginBehavior("NoMargin"),t.show(),e}static async showSettingsScreen(e={name:void 0,focusTabHeader:void 0}){const{name:t,focusTabHeader:s}=e,i=A.revealSettingsScreen();i.selectTab(t||"preferences");const n=i.tabbedLocation.tabbedPane();await n.waitForTabElementUpdate(),s?n.focusSelectedTabHeader():n.focus()}resolveLocation(e){return this.tabbedLocation}selectTab(e){this.tabbedLocation.tabbedPane().selectTab(e,!0)}tabInvoked(e){const t=e.data;if(!t.isUserGesture)return;const s=t.prevTabId,i=t.tabId;!this.reportTabOnReveal&&s&&s===i||(this.reportTabOnReveal=!1,this.reportSettingsPanelShown(i))}reportSettingsPanelShown(e){e!==x(S.shortcuts)?t.userMetrics.settingsPanelShown(e):t.userMetrics.settingsPanelShown("shortcuts")}onEscapeKeyPressed(e){"keybinds"===this.tabbedLocation.tabbedPane().selectedTabId&&this.keybindsTab&&this.keybindsTab.onEscapeKeyPressed(e)}}class C extends a.Widget.VBox{containerElement;constructor(e){super(),this.element.classList.add("settings-tab-container"),e&&(this.element.id=e),this.containerElement=this.contentElement.createChild("div","settings-card-container-wrapper").createChild("div")}}class I extends C{syncSection=new p.SyncSection.SyncSection;settingToControl=new Map;constructor(){super("preferences-tab-content"),this.element.setAttribute("jslog",`${g.pane("preferences")}`),this.containerElement.classList.add("settings-multicolumn-card-container");const t=["","APPEARANCE","SOURCES","ELEMENTS","NETWORK","PERFORMANCE","MEMORY","CONSOLE","EXTENSIONS","PERSISTENCE","DEBUGGER","GLOBAL","SYNC"],s=e.Settings.Settings.instance().getRegisteredSettings().sort(((e,t)=>e.order&&t.order?e.order-t.order:e.order?-1:t.order?1:0));for(const e of t){const t=s.filter((t=>t.category===e&&I.isSettingVisible(t)));this.createSectionElement(e,t)}const i=a.UIUtils.createTextButton(x(S.restoreDefaultsAndReload),(function(){e.Settings.Settings.instance().clearAll(),r.Reload.reload()}),{jslogContext:"settings.restore-defaults-and-reload"});this.containerElement.appendChild(i)}static isSettingVisible(e){return Boolean(e.title?.())&&Boolean(e.category)}wasShown(){a.Context.Context.instance().setFlavor(I,this),super.wasShown(),this.updateSyncSection()}willHide(){super.willHide(),a.Context.Context.instance().setFlavor(I,null)}updateSyncSection(){t.InspectorFrontendHost.InspectorFrontendHostInstance.getSyncInformation((t=>{this.syncSection.data={syncInfo:t,syncSetting:e.Settings.moduleSetting("sync-preferences")}}))}createExtensionSection(e){const t=r.Linkifier.LinkHandlerSettingUI.instance().settingElement();t&&this.createStandardSectionElement("EXTENSIONS",e,t)}createSectionElement(t,s){if("EXTENSIONS"===t)this.createExtensionSection(s);else if("SYNC"===t&&s.length>0){const t=k(e.SettingRegistration.getLocalizedSettingsCategory("SYNC"),this.syncSection);this.containerElement.appendChild(t)}else s.length>0&&this.createStandardSectionElement(t,s)}createStandardSectionElement(t,s,i){const n=e.Settings.getLocalizedSettingsCategory(t),o=document.createElement("div");for(const t of s){const s=e.Settings.Settings.instance().moduleSetting(t.settingName),i=a.SettingsUI.createControlForSetting(s);i&&(this.settingToControl.set(s,i),o.appendChild(i))}i&&o.appendChild(i);const r=k(n,o);this.containerElement.appendChild(r)}highlightObject(t){if(t instanceof e.Settings.Setting){const e=this.settingToControl.get(t);e&&h.highlightElement(e)}}}class E extends C{#e;#t;experimentToControl=new Map;constructor(){super("experiments-tab-content"),this.containerElement.classList.add("settings-card-container"),this.element.setAttribute("jslog",`${g.pane("experiments")}`);const e=this.containerElement.createChild("div");e.classList.add("experiments-filter"),d(c`
<devtools-toolbar>
<devtools-toolbar-input type="filter" placeholder=${x(S.searchExperiments)} style="flex-grow:1" @change=${this.#s.bind(this)}></devtools-toolbar-input>
</devtools-toolbar>
`,e),this.renderExperiments("");const t=e.querySelector("devtools-toolbar-input");this.setDefaultFocusedElement(t)}#s(e){this.renderExperiments(e.detail.toLowerCase())}renderExperiments(e){this.experimentToControl.clear(),this.#e&&this.#e.remove(),this.#t&&this.#t.remove();const t=i.Runtime.experiments.allConfigurableExperiments().sort(),s=t.filter((t=>t.unstable&&t.title.toLowerCase().includes(e))),n=t.filter((t=>!t.unstable&&t.title.toLowerCase().includes(e)));if(n.length){const e=document.createElement("div");e.classList.add("settings-experiments-block");const t=x(S.theseExperimentsCouldBeUnstable),s=this.createExperimentsWarningSubsection(t);for(const t of n)e.appendChild(this.createExperimentCheckbox(t));this.#e=k(x(S.experiments),s,e),this.containerElement.appendChild(this.#e)}if(s.length){const e=document.createElement("div");e.classList.add("settings-experiments-block");const t=x(S.theseExperimentsAreParticularly);for(const t of s)e.appendChild(this.createExperimentCheckbox(t));this.#t=k(x(S.unstableExperiments),this.createExperimentsWarningSubsection(t),e),this.containerElement.appendChild(this.#t)}if(!n.length&&!s.length){const e=document.createElement("span");e.textContent=x(S.noResults),a.ARIAUtils.alert(e.textContent),this.#e=k(x(S.experiments),e),this.containerElement.appendChild(this.#e)}}createExperimentsWarningSubsection(e){const t=document.createElement("div");t.classList.add("experiments-warning-subsection");const s=o.Icon.create("warning");t.appendChild(s);return t.createChild("span").textContent=e,t}createExperimentCheckbox(e){const s=a.UIUtils.CheckboxLabel.createWithStringLiteral(e.title,e.isEnabled(),void 0,e.name);s.classList.add("experiment-label");const i=s.checkboxElement;i.name=e.name,i.addEventListener("click",(function(){e.setEnabled(i.checked),t.userMetrics.experimentChanged(e.name,e.isEnabled()),a.InspectorView.InspectorView.instance().displayReloadRequiredWarning(x(S.oneOrMoreSettingsHaveChanged))}),!1);const o=document.createElement("p");this.experimentToControl.set(e,o),o.classList.add("settings-experiment"),e.unstable&&!e.isEnabled()&&o.classList.add("settings-experiment-unstable"),o.appendChild(s);const r=e.docLink;if(r){const t=new n.Button.Button;t.data={iconName:"help",variant:"icon",size:"SMALL",jslogContext:`${e.name}-documentation`,title:x(S.learnMore)},t.addEventListener("click",(()=>a.UIUtils.openInNewTab(r))),t.classList.add("link-icon"),o.appendChild(t)}if(e.feedbackLink){const t=a.XLink.XLink.create(e.feedbackLink,void 0,void 0,void 0,`${e.name}-feedback`);t.textContent=x(S.sendFeedback),t.classList.add("feedback-link"),o.appendChild(t)}return o}highlightObject(e){if(e instanceof i.Runtime.Experiment){const t=this.experimentToControl.get(e);t&&h.highlightElement(t)}}wasShown(){a.Context.Context.instance().setFlavor(E,this),super.wasShown()}willHide(){super.willHide(),a.Context.Context.instance().setFlavor(E,null)}}var L=Object.freeze({__proto__:null,ActionDelegate:class{handleAction(e,t){switch(t){case"settings.show":return A.showSettingsScreen({focusTabHeader:!0}),!0;case"settings.documentation":return a.UIUtils.openInNewTab("https://developer.chrome.com/docs/devtools/"),!0;case"settings.shortcuts":return A.showSettingsScreen({name:"keybinds",focusTabHeader:!0}),!0}return!1}},ExperimentsSettingsTab:E,GenericSettingsTab:I,Revealer:class{async reveal(s){const n=a.Context.Context.instance();if(s instanceof i.Runtime.Experiment){t.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront(),await A.showSettingsScreen({name:"experiments"});const e=n.flavor(E);null!==e&&e.highlightObject(s)}else{for(const i of e.Settings.Settings.instance().getRegisteredSettings())if(I.isSettingVisible(i)&&i.settingName===s.name){t.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront(),await A.showSettingsScreen();const e=n.flavor(I);return void(null!==e&&e.highlightObject(s))}for(const e of a.ViewManager.getRegisteredViewExtensions()){const i=e.viewId();if("settings-view"!==e.location())continue;const n=e.settings();if(n&&-1!==n.indexOf(s.name)){t.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront(),await A.showSettingsScreen({name:i});const n=await e.widget();return void(n instanceof C&&n.highlightObject(s))}}}}},SettingsScreen:A}),T={cssText:`.ignore-list-option{flex:none;display:flex;align-items:center;height:var(--sys-size-13)}.ignore-list-option devtools-button{cursor:pointer;position:relative;top:var(--sys-size-2);margin-left:var(--sys-size-2)}.add-button{padding:var(--sys-size-5) var(--sys-size-6);align-self:flex-start;flex:none}.ignore-list{flex:0 1 auto}.enable-ignore-listing,\n.ignore-list-item,\n.general-exclusion-group{padding-left:var(--sys-size-4)}.custom-exclusion-group{padding-left:0;padding-right:0}.ignore-list-item{height:var(--sys-size-13);display:flex;align-items:center;position:relative;flex:auto 1 1}.ignore-list-pattern{flex:auto}.ignore-list-item > dt-checkbox{width:100%}.ignore-list-item .ignore-list-pattern{white-space:nowrap;text-overflow:ellipsis;user-select:none;color:var(--sys-color-on-surface);overflow:hidden}.ignore-list-edit-row{flex:none;display:flex;flex-direction:row;margin:6px 5px;align-items:center}.ignore-list-edit-row input,\n.ignore-list-edit-row select{width:100%;text-align:inherit}.ignore-listing-disabled .ignore-list-options{opacity:30%}.list:has(.ignore-list-empty),\n.list:has(.ignore-list-edit-row),\n.list:has(.ignore-list-item){border:none}.editor-container:has(.ignore-list-edit-row){background:var(--sys-color-surface1);border-radius:10px}.ignore-list.list-editing ~ .add-button{display:none}.devtools-link:has(devtools-icon){margin-left:6px}\n/*# sourceURL=${import.meta.resolve("./frameworkIgnoreListSettingsTab.css")} */\n`};const R={frameworkIgnoreList:"Ignore listing",ignoreListingDescription:"When enabled, the debugger will skip over ignore-listed scripts and will ignore exceptions that only affect them and the Performance panel will collapse matching flamechart items.",ignoreListContentScripts:"Content scripts injected by extensions",ignoreListAnonymousScripts:"Anonymous scripts from eval or console",automaticallyIgnoreListKnownThirdPartyScripts:"Known third-party scripts from source maps",enableIgnoreListing:"Enable ignore listing",enableIgnoreListingTooltip:"Uncheck to disable all ignore listing",generalExclusionRules:"General exclusion rules",customExclusionRules:"Custom exclusion rules",addPattern:"Add regex rule",addFilenamePattern:"Add a regular expression rule for the script's URL",ignoreScriptsWhoseNamesMatchS:"Ignore scripts whose names match ''{PH1}''",pattern:"Add a regular expression rule for the script's URL",patternCannotBeEmpty:"Rule can't be empty",patternAlreadyExists:"Rule already exists",patternMustBeAValidRegular:"Rule must be a valid regular expression",learnMore:"Learn more"},z=s.i18n.registerUIStrings("panels/settings/FrameworkIgnoreListSettingsTab.ts",R),U=s.i18n.getLocalizedString.bind(void 0,z);class N extends a.Widget.VBox{list;setting;editor;constructor(){super(!0),this.registerRequiredCSS(T,v),this.element.setAttribute("jslog",`${g.pane("blackbox")}`);const t=this.contentElement.createChild("div","settings-card-container-wrapper").createChild("div");t.classList.add("settings-card-container","ignore-list-settings");const s=document.createElement("span");s.textContent=U(R.ignoreListingDescription);const i=e.Settings.Settings.instance().moduleSetting("enable-ignore-listing"),o=this.contentElement.createChild("div","enable-ignore-listing");o.appendChild(a.SettingsUI.createSettingCheckbox(U(R.enableIgnoreListing),i)),a.Tooltip.Tooltip.install(o,U(R.enableIgnoreListingTooltip));const r=t.createChild("devtools-card");r.heading=U(R.frameworkIgnoreList),r.append(s,o);const l=this.createSettingGroup();l.classList.add("general-exclusion-group");l.createChild("div","ignore-list-option").appendChild(a.SettingsUI.createSettingCheckbox(U(R.ignoreListContentScripts),e.Settings.Settings.instance().moduleSetting("skip-content-scripts")));const d=l.createChild("div","ignore-list-option");d.appendChild(a.SettingsUI.createSettingCheckbox(U(R.automaticallyIgnoreListKnownThirdPartyScripts),e.Settings.Settings.instance().moduleSetting("automatically-ignore-list-known-third-party-scripts")));const c=new n.Button.Button;c.data={iconName:"help",variant:"icon",size:"SMALL",jslogContext:"learn-more",title:U(R.learnMore)},c.addEventListener("click",(()=>a.UIUtils.openInNewTab("https://developer.chrome.com/docs/devtools/settings/ignore-list/#skip-third-party"))),d.appendChild(c);l.createChild("div","ignore-list-option").appendChild(a.SettingsUI.createSettingCheckbox(U(R.ignoreListAnonymousScripts),e.Settings.Settings.instance().moduleSetting("skip-anonymous-scripts")));const h=t.createChild("devtools-card","ignore-list-options");h.heading=U(R.generalExclusionRules),h.append(l);const p=this.createSettingGroup();p.classList.add("custom-exclusion-group");const u=t.createChild("devtools-card","ignore-list-options");u.heading=U(R.customExclusionRules),u.append(p),this.list=new a.ListWidget.ListWidget(this),this.list.element.classList.add("ignore-list"),this.list.registerRequiredCSS(T);const m=document.createElement("div");m.classList.add("ignore-list-empty"),this.list.setEmptyPlaceholder(m),this.list.show(p);const y=a.UIUtils.createTextButton(U(R.addPattern),this.addButtonClicked.bind(this),{className:"add-button",jslogContext:"settings.add-ignore-list-pattern"});function b(){i.get()?t.classList.remove("ignore-listing-disabled"):t.classList.add("ignore-listing-disabled")}a.ARIAUtils.setLabel(y,U(R.addFilenamePattern)),p.appendChild(y),this.setting=e.Settings.Settings.instance().moduleSetting("skip-stack-frames-pattern"),this.setting.addChangeListener(this.settingUpdated,this),i.addChangeListener(b),b()}wasShown(){super.wasShown(),this.settingUpdated()}settingUpdated(){this.list.clear();const e=this.setting.getAsArray();for(let t=0;t<e.length;++t)this.list.appendItem(e[t],!0)}addButtonClicked(){this.list.addNewItem(this.setting.getAsArray().length,{pattern:"",disabled:!1})}createSettingGroup(){const e=document.createElement("div");return e.classList.add("ignore-list-option-group"),a.ARIAUtils.markAsGroup(e),e}renderItem(e,t){const s=document.createElement("div"),i=this.setting,n=a.UIUtils.CheckboxLabel.createWithStringLiteral(e.pattern,!e.disabled,void 0,"settings.ignore-list-pattern"),o=U(R.ignoreScriptsWhoseNamesMatchS,{PH1:e.pattern});return a.Tooltip.Tooltip.install(n,o),n.checkboxElement.ariaLabel=o,n.checkboxElement.addEventListener("change",(function(){const t=!n.checkboxElement.checked;e.disabled!==t&&(e.disabled=t,e.disabledForUrl=void 0,i.setAsArray(i.getAsArray()))}),!1),s.appendChild(n),s.classList.add("ignore-list-item"),s}removeItemRequested(e,t){const s=this.setting.getAsArray();s.splice(t,1),this.setting.setAsArray(s)}commitEdit(e,t,s){e.pattern=t.control("pattern").value.trim();const i=this.setting.getAsArray();s&&i.push(e),this.setting.setAsArray(i)}beginEdit(e){const t=this.createEditor();return t.control("pattern").value=e.pattern,t}createEditor(){if(this.editor)return this.editor;const e=new a.ListWidget.Editor;this.editor=e;const t=e.contentElement();t.createChild("div","ignore-list-edit-row").createChild("div","ignore-list-pattern").textContent=U(R.pattern);const s=t.createChild("div","ignore-list-edit-row"),i=e.createInput("pattern","text","/framework\\.js$",function(e,t,s){const i=s.value.trim(),n=this.setting.getAsArray();if(!i.length)return{valid:!1,errorMessage:U(R.patternCannotBeEmpty)};for(let e=0;e<n.length;++e)if(e!==t&&n[e].pattern===i)return{valid:!1,errorMessage:U(R.patternAlreadyExists)};let o;try{o=new RegExp(i)}catch{}if(!o)return{valid:!1,errorMessage:U(R.patternMustBeAValidRegular)};return{valid:!0,errorMessage:void 0}}.bind(this));return a.ARIAUtils.setLabel(i,U(R.pattern)),s.createChild("div","ignore-list-pattern").appendChild(i),e}}var F=Object.freeze({__proto__:null,FrameworkIgnoreListSettingsTab:N}),P={cssText:`*{box-sizing:border-box}:host{container-type:inline-size;container-name:ai-settings}.shared-disclaimer{background:linear-gradient(135deg,var(--sys-color-gradient-primary),var(--sys-color-gradient-tertiary));border-radius:var(--sys-size-5);padding:var(--sys-size-9) var(--sys-size-11);max-width:var(--sys-size-35);min-width:var(--sys-size-28);h2{font:var(--sys-typescale-headline5);margin:0 0 var(--sys-size-6)}}.disclaimer-list-header{font:var(--sys-typescale-body5-medium);margin:0}.disclaimer-list{padding:var(--sys-size-6) 0 0;display:grid;grid-template-columns:var(--sys-size-12) auto;gap:var(--sys-size-6) 0;line-height:var(--sys-typescale-body5-line-height)}.settings-container{display:grid;grid-template-columns:1fr auto auto;border-radius:var(--sys-size-5);box-shadow:var(--sys-elevation-level2);margin:var(--sys-size-11) 0 var(--sys-size-4);line-height:var(--sys-typescale-body5-line-height);min-width:var(--sys-size-28);max-width:var(--sys-size-35);background-color:var(--app-color-card-background)}.accordion-header{display:grid;grid-template-columns:auto 1fr auto;&:hover{background-color:var(--sys-color-state-hover-on-subtle)}}.icon-container,\n.dropdown{padding:0 var(--sys-size-8)}.toggle-container{padding:0 var(--sys-size-8) 0 var(--sys-size-9);&:hover{background-color:var(--sys-color-state-hover-on-subtle)}}.expansion-grid{padding:var(--sys-size-4) var(--sys-size-8) var(--sys-size-6);display:grid;grid-template-columns:var(--sys-size-9) auto;gap:var(--sys-size-6) var(--sys-size-8);line-height:var(--sys-typescale-body5-line-height);color:var(--sys-color-on-surface-subtle)}.expansion-grid-whole-row{grid-column:span 2;font-weight:var(--ref-typeface-weight-medium);color:var(--sys-color-on-surface);padding-top:var(--sys-size-4);margin:0;font-size:inherit}.setting-description{color:var(--sys-color-on-surface-subtle)}.centered{display:grid;place-content:center}.setting-card{padding:var(--sys-size-6) 0;h2{margin:0;font:inherit}}.divider{margin:var(--sys-size-5) 0;border-left:var(--sys-size-1) solid var(--sys-color-divider)}.accordion-header ~ .accordion-header,\n.divider ~ .divider,\n.toggle-container ~ .toggle-container{border-top:var(--sys-size-1) solid var(--sys-color-divider)}.whole-row{grid-column:span 5;overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--sys-motion-duration-short4) ease-in}.whole-row.open{grid-template-rows:1fr}.overflow-hidden{overflow:hidden}.link,\n.devtools-link{color:var(--sys-color-primary);text-decoration:underline;cursor:pointer;outline-offset:var(--sys-size-2);padding:0;font-weight:var(--ref-typeface-weight-regular)}.padded{padding:var(--sys-size-2) 0}.settings-container-wrapper{position:absolute;inset:var(--sys-size-8) 0 0;overflow:auto;padding:var(--sys-size-3) var(--sys-size-6) var(--sys-size-6);display:flex;flex-direction:column}@container ai-settings (min-width: 480px){.settings-container-wrapper{align-items:center}}header{font-size:var(--sys-typescale-headline3-size);font-weight:var(--ref-typeface-weight-regular)}.disabled-explainer{background-color:var(--sys-color-surface-yellow);border-radius:var(--sys-shape-corner-medium-small);margin-top:var(--sys-size-11);padding:var(--sys-size-6) var(--sys-size-11) var(--sys-size-8);width:100%;max-width:var(--sys-size-35);min-width:var(--sys-size-28);color:var(--sys-color-yellow)}.disabled-explainer-row{display:flex;gap:var(--sys-size-6);margin-top:var(--sys-size-4)}\n/*# sourceURL=${import.meta.resolve("./aiSettingsTab.css")} */\n`};const M=new CSSStyleSheet;M.replaceSync(P.cssText);const{html:D,Directives:{ifDefined:K,classMap:B}}=l,O={boostYourProductivity:"Boost your productivity with AI",thingsToConsider:"Things to consider",experimentalFeatures:"These features use generative AI and may provide inaccurate or offensive information that doesn’t represent Google’s views",sendsDataToGoogle:"These features send relevant data to Google. Google collects this data and feedback to improve its products and services with the help of human reviewers. Avoid sharing sensitive or personal information.",sendsDataToGoogleNoLogging:"Your content will not be used by human reviewers to improve AI. Your organization may change these settings at any time.",dataCollection:"Depending on your region, Google may refrain from data collection",dataCollectionNoLogging:"Depending on your Google account management and/or region, Google may refrain from data collection",helpUnderstandConsole:"Helps you understand and fix console warnings and errors",getAIAnnotationsSuggestions:"Get AI suggestions for performance panel annotations",showMore:"Show more",showLess:"Show less",whenOn:"When on",explainConsole:"Get explanations for console warnings and errors",receiveSuggestions:"Receive suggestions and code samples to address these issues",consoleInsightsSendsData:"The console message, associated stack trace, related source code, and the associated network headers are sent to Google to generate explanations. This data may be seen by human reviewers to improve this feature.",consoleInsightsSendsDataNoLogging:"The console message, associated stack trace, related source code, and the associated network headers are sent to Google to generate explanations. This data will not be used to improve Google’s AI models.",termsOfServicePrivacyNotice:"Use of these features is subject to the {PH1} and {PH2}",helpUnderstandStyling:"Get help with understanding CSS styles",helpUnderstandStylingAndNetworkRequest:"Get help with understanding CSS styles, and network requests",helpUnderstandStylingNetworkAndFile:"Get help with understanding CSS styles, network requests, and files",helpUnderstandStylingNetworkPerformanceAndFile:"Get help with understanding CSS styles, network requests, performance, and files",learnMore:"Learn more",explainStyling:"Understand CSS styles with AI-powered insights",explainStylingAndNetworkRequest:"Understand CSS styles, and network activity with AI-powered insights",explainStylingNetworkAndFile:"Understand CSS styles, network activity, and file origins with AI-powered insights",explainStylingNetworkPerformanceAndFile:"Understand CSS styles, network activity, performance bottlenecks, and file origins with AI-powered insights",receiveStylingSuggestions:"Improve your development workflow with contextual explanations and suggestions",freestylerSendsData:"Any user query and data the inspected page can access via Web APIs, network requests, files, and performance traces are sent to Google to generate explanations. This data may be seen by human reviewers to improve this feature. Don’t use on pages with personal or sensitive information.",freestylerSendsDataNoLogging:"Any user query and data the inspected page can access via Web APIs, network requests, files, and performance traces are sent to Google to generate explanations. This data will not be used to improve Google’s AI models.",generatedAiAnnotationsSendData:"Your performance trace is sent to Google to generate an explanation. This data will be used to improve Google’s AI models.",generatedAiAnnotationsSendDataNoLogging:"Your performance trace is sent to Google to generate an explanation. This data will not be used to improve Google’s AI models.",termsOfService:"Google Terms of Service",privacyNotice:"Google Privacy Policy",enableConsoleInsights:"Enable `Console insights`",enableAiAssistance:"Enable AI assistance",enableAiSuggestedAnnotations:"Enable AI suggestions for performance panel annotations",ageRestricted:"This feature is only available to users who are 18 years of age or older.",notLoggedIn:"This feature is only available when you sign into Chrome with your Google account.",offline:"This feature is only available with an active internet connection.",notAvailableInIncognitoMode:"AI assistance is not available in Incognito mode or Guest mode"},$=s.i18n.registerUIStrings("panels/settings/AISettingsTab.ts",O),j=s.i18n.getLocalizedString.bind(void 0,$);class G extends m.LegacyWrapper.WrappableComponent{#i=this.attachShadow({mode:"open"});#n;#o;#r;#a;#l="no-account-email";#d;#c=new Map;constructor(){super();try{this.#n=e.Settings.Settings.instance().moduleSetting("console-insights-enabled")}catch{this.#n=void 0}try{this.#r=e.Settings.Settings.instance().moduleSetting("ai-assistance-enabled")}catch{this.#r=void 0}try{this.#a=e.Settings.Settings.instance().moduleSetting("ai-assistance-history-entries")}catch{this.#a=void 0}i.Runtime.hostConfig.devToolsAiGeneratedTimelineLabels?.enabled&&(this.#o=e.Settings.Settings.instance().createSetting("ai-annotations-enabled",!1)),this.#d=this.#g.bind(this),this.#h()}connectedCallback(){this.#i.adoptedStyleSheets=[u.checkboxStyles,M],t.AidaClient.HostConfigTracker.instance().addEventListener("aidaAvailabilityChanged",this.#d),this.#g()}disconnectedCallback(){t.AidaClient.HostConfigTracker.instance().removeEventListener("aidaAvailabilityChanged",this.#d)}#h(){const e=i.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue===i.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;if(this.#n){const t={settingName:s.i18n.lockedString("Console Insights"),iconName:"lightbulb-spark",settingDescription:j(O.helpUnderstandConsole),enableSettingText:j(O.enableConsoleInsights),settingItems:[{iconName:"lightbulb",text:j(O.explainConsole)},{iconName:"code",text:j(O.receiveSuggestions)}],toConsiderSettingItems:[{iconName:"google",text:j(e?O.consoleInsightsSendsDataNoLogging:O.consoleInsightsSendsData)}],learnMoreLink:{url:"https://goo.gle/devtools-console-messages-ai",linkJSLogContext:"learn-more.console-insights"},settingExpandState:{isSettingExpanded:!1,expandSettingJSLogContext:"console-insights.accordion"}};this.#c.set(this.#n,t)}if(this.#r){const t={settingName:s.i18n.lockedString("AI assistance"),iconName:"smart-assistant",settingDescription:this.#p(),enableSettingText:j(O.enableAiAssistance),settingItems:[{iconName:"info",text:this.#u()},{iconName:"pen-spark",text:j(O.receiveStylingSuggestions)}],toConsiderSettingItems:[{iconName:"google",text:j(e?O.freestylerSendsDataNoLogging:O.freestylerSendsData)}],learnMoreLink:{url:"https://goo.gle/devtools-ai-assistance",linkJSLogContext:"learn-more.ai-assistance"},settingExpandState:{isSettingExpanded:!1,expandSettingJSLogContext:"freestyler.accordion"}};this.#c.set(this.#r,t)}if(this.#o){const t={settingName:s.i18n.lockedString("Auto annotations"),iconName:"pen-spark",settingDescription:j(O.getAIAnnotationsSuggestions),enableSettingText:j(O.enableAiSuggestedAnnotations),settingItems:[{iconName:"pen-spark",text:j(O.getAIAnnotationsSuggestions)}],toConsiderSettingItems:[{iconName:"google",text:j(e?O.generatedAiAnnotationsSendDataNoLogging:O.generatedAiAnnotationsSendData)}],learnMoreLink:{url:"https://developer.chrome.com/docs/devtools/performance/reference#auto-annotations",linkJSLogContext:"learn-more.auto-annotations"},settingExpandState:{isSettingExpanded:!1,expandSettingJSLogContext:"freestyler.accordion"}};this.#c.set(this.#o,t)}}async#g(){const e=await t.AidaClient.AidaClient.checkAccessPreconditions();e!==this.#l&&(this.#l=e,this.render())}#p(){const{hostConfig:e}=i.Runtime;return e.devToolsAiAssistancePerformanceAgent?.enabled?j(O.helpUnderstandStylingNetworkPerformanceAndFile):e.devToolsAiAssistanceFileAgent?.enabled?j(O.helpUnderstandStylingNetworkAndFile):e.devToolsAiAssistanceNetworkAgent?.enabled?j(O.helpUnderstandStylingAndNetworkRequest):j(O.helpUnderstandStyling)}#u(){const{hostConfig:e}=i.Runtime;return e.devToolsAiAssistancePerformanceAgent?.enabled?j(O.explainStylingNetworkPerformanceAndFile):e.devToolsAiAssistanceFileAgent?.enabled?j(O.explainStylingNetworkAndFile):e.devToolsAiAssistanceNetworkAgent?.enabled?j(O.explainStylingAndNetworkRequest):j(O.explainStyling)}#m(e){const t=this.#c.get(e);t&&(t.settingExpandState.isSettingExpanded=!t.settingExpandState.isSettingExpanded,this.render())}#y(t,s){if(s.target instanceof y.Switch.Switch&&s.type!==y.Switch.SwitchChangeEvent.eventName)return;const i=this.#c.get(t);if(!i)return;const n=t.get();t.set(!n),n||i.settingExpandState.isSettingExpanded||(i.settingExpandState.isSettingExpanded=!0),"console-insights-enabled"===t.name?n?e.Settings.Settings.instance().createLocalSetting("console-insights-onboarding-finished",!1).set(!1):e.Settings.Settings.instance().createSetting("console-insights-skip-reminder",!0,"Session").set(!0):"ai-assistance-enabled"===t.name&&this.#a&&!t.get()&&this.#a.set([]),this.render()}#b(e,t){return D`
<div>
<devtools-icon .data=${{iconName:e,color:"var(--icon-default)",width:"var(--sys-size-8)",height:"var(--sys-size-8)"}}>
</devtools-icon>
</div>
<div>${t}</div>
`}#v(){const e=a.XLink.XLink.create("https://policies.google.com/terms",j(O.termsOfService),void 0,void 0,"terms-of-service"),t=a.XLink.XLink.create("https://policies.google.com/privacy",j(O.privacyNotice),void 0,void 0,"privacy-notice"),n=i.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue===i.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING,o=[{icon:"psychiatry",text:j(O.experimentalFeatures)},{icon:"google",text:j(n?O.sendsDataToGoogleNoLogging:O.sendsDataToGoogle)},{icon:"corporate-fare",text:j(n?O.dataCollectionNoLogging:O.dataCollection)},{icon:"policy",text:D`${s.i18n.getFormatLocalizedString($,O.termsOfServicePrivacyNotice,{PH1:e,PH2:t})}`}];return D`
<div class="shared-disclaimer">
<h2>${j(O.boostYourProductivity)}</h2>
<h3 class="disclaimer-list-header">${j(O.thingsToConsider)}</h3>
<div class="disclaimer-list">
${o.map((e=>this.#b(e.icon,e.text)))}
</div>
</div>
`}#S(e){return D`
<div>
<devtools-icon .data=${{iconName:e.iconName,width:"var(--sys-size-9)",height:"var(--sys-size-9)"}}>
</devtools-icon>
</div>
<div class="padded">${e.text}</div>
`}#f(){const e=[];switch(i.Runtime.hostConfig.isOffTheRecord&&e.push(j(O.notAvailableInIncognitoMode)),this.#l){case"no-account-email":case"sync-is-paused":e.push(j(O.notLoggedIn));break;case"no-internet":e.push(j(O.offline));case"available":!0===i.Runtime.hostConfig?.aidaAvailability?.blockedByAge&&e.push(j(O.ageRestricted))}const t=this.#n?.disabledReasons()||[];return e.push(...t),e}#x(e){const t=this.#c.get(e);if(!t)return l.nothing;const s=this.#f(),i=s.length>0,n=s.join("\n")||void 0,o={"whole-row":!0,open:t.settingExpandState.isSettingExpanded},r=t.settingExpandState.isSettingExpanded?"0":"-1";return D`
<div class="accordion-header" @click=${this.#m.bind(this,e)}>
<div class="icon-container centered">
<devtools-icon name=${t.iconName}></devtools-icon>
</div>
<div class="setting-card">
<h2>${t.settingName}</h2>
<div class="setting-description">${t.settingDescription}</div>
</div>
<div class="dropdown centered">
<devtools-button
.data=${{title:t.settingExpandState.isSettingExpanded?j(O.showLess):j(O.showMore),size:"SMALL",iconName:t.settingExpandState.isSettingExpanded?"chevron-up":"chevron-down",variant:"icon",jslogContext:t.settingExpandState.expandSettingJSLogContext}}
></devtools-button>
</div>
</div>
<div class="divider"></div>
<div class="toggle-container centered"
title=${K(n)}
@click=${this.#y.bind(this,e)}
>
<devtools-switch
.checked=${Boolean(e.get())&&!i}
.jslogContext=${e.name||""}
.disabled=${i}
@switchchange=${this.#y.bind(this,e)}
aria-label=${n||t.enableSettingText}
></devtools-switch>
</div>
<div class=${B(o)}>
<div class="overflow-hidden">
<div class="expansion-grid">
<h3 class="expansion-grid-whole-row">${j(O.whenOn)}</h3>
${t.settingItems.map((e=>this.#S(e)))}
<h3 class="expansion-grid-whole-row">${j(O.thingsToConsider)}</h3>
${t.toConsiderSettingItems.map((e=>this.#S(e)))}
<div class="expansion-grid-whole-row">
<x-link
href=${t.learnMoreLink.url}
class="link"
tabindex=${r}
jslog=${g.link(t.learnMoreLink.linkJSLogContext).track({click:!0})}
>${j(O.learnMore)}</x-link>
</div>
</div>
</div>
</div>
`}#w(e){return D`
<div class="disabled-explainer">
${e.map((e=>D`
<div class="disabled-explainer-row">
<devtools-icon .data=${{iconName:"warning",color:"var(--sys-color-orange)",width:"var(--sys-size-8)",height:"var(--sys-size-8)"}}>
</devtools-icon>
${e}
</div>
`))}
</div>
`}async render(){const e=this.#f();l.render(D`
<div class="settings-container-wrapper" jslog=${g.pane("chrome-ai")}>
${this.#v()}
${this.#c.size>0?D`
${e.length?this.#w(e):l.nothing}
<div class="settings-container">
${this.#c.keys().map((e=>this.#x(e)))}
</div>
`:l.nothing}
</div>
`,this.#i,{host:this})}}customElements.define("devtools-settings-ai-settings-tab",G);var H=Object.freeze({__proto__:null,AISettingsTab:G}),W={cssText:`.shortcut-list{padding-left:0;padding-right:0}.keybinds-key{display:flex;align-items:center;justify-content:center;height:var(--sys-size-11);min-width:var(--sys-size-11);font:var(--sys-typescale-body5-medium);white-space:nowrap;border-radius:var(--sys-shape-corner-small);background:var(--sys-color-tonal-container);padding:0 var(--sys-size-4)}.keybinds-list-item{margin:0 var(--sys-size-6);padding:var(--sys-size-4) 0;display:grid;grid-template-rows:1fr;grid-template-columns:1fr 30px 2fr 30px 30px;border-top:var(--sys-size-1) solid var(--app-color-card-divider)}.keybinds-list-item:focus-visible{background-color:var(--sys-color-tonal-container)}.keybinds-list-item.keybinds-editing{background-color:var(--sys-color-neutral-container)}.keybinds-list-text.keybinds-action-name{grid-row:1/1}.keybinds-shortcut,\n.keybinds-info{grid-row:auto;grid-column:3/span 1}.keybinds-error{color:var(--sys-color-error)}.keybinds-shortcut{gap:var(--sys-size-4)}.keybinds-list-item.keybinds-editing .keybinds-shortcut{display:flex}.keybinds-modified{grid-column:2/span 1;margin-top:var(--sys-size-3)}.keybinds-list-item button[disabled]{opacity:40%}.keybinds-cancel-button{grid-column:-1/span 1}.keybinds-edit-button{display:none;grid-row:1/span 1;grid-column:5/span 1}.keybinds-list-item:not(.keybinds-editing):hover .keybinds-edit-button,\n.keybinds-list-item:not(.keybinds-editing):focus-within .keybinds-edit-button{display:inline-block}.keybinds-list-text{min-height:var(--sys-size-12);display:flex;align-items:center;user-select:none;color:var(--sys-color-on-surface);text-align:start;position:relative;margin-right:0}.keybinds-category-header{display:flex;align-items:center;font:var(--sys-typescale-body4-bold);height:var(--sys-size-13);padding:var(--sys-size-4) var(--sys-size-7);white-space:nowrap;+ .keybinds-list-item-wrapper > .keybinds-list-item{border-top:unset}}.keybinds-list-item-wrapper:has(.keybinds-list-item:hover),\n.keybinds-list-item-wrapper:has(\n .keybinds-list-item:not(.keybinds-editing)):focus-within{background:var(--sys-color-state-hover-on-subtle)}.keybinds-set-select label p{display:inline;color:var(--sys-color-on-surface)}button.text-button{width:fit-content;align-self:flex-end}.keybinds-list-text input{margin:0 2px}.keybinds-set-select{margin:0;padding:var(--sys-size-5) var(--sys-size-7);& .settings-select{display:flex;justify-content:space-between;& label{padding:0}}}.keybinds-list-text:has(.keybinds-delete-button){grid-column:3/-1}.docs-link.devtools-link{align-self:flex-start;min-height:2em;line-height:2em;margin-bottom:4px}.keybinds-footer{padding:var(--sys-size-5) var(--sys-size-7);display:flex;flex-wrap:wrap;justify-content:space-between;min-height:fit-content;margin-top:10px}\n/*# sourceURL=${import.meta.resolve("./keybindsSettingsTab.css")} */\n`};const _={shortcuts:"Shortcuts",matchShortcutsFromPreset:"Shortcut preset",keyboardShortcutsList:"Keyboard shortcuts list",shortcutModified:"Shortcut modified",noShortcutForAction:"No shortcut for action",addAShortcut:"Add a shortcut",confirmChanges:"Confirm changes",discardChanges:"Discard changes",removeShortcut:"Remove shortcut",editShortcut:"Edit shortcut",shortcutsCannotContainOnly:"Shortcuts cannot contain only modifier keys.",thisShortcutIsInUseByS:"This shortcut is in use by {PH1}: {PH2}.",RestoreDefaultShortcuts:"Restore default shortcuts",FullListOfDevtoolsKeyboard:"Full list of DevTools keyboard shortcuts and gestures",ResetShortcutsForAction:"Reset shortcuts for action",shortcutRemoved:"{PH1} Shortcut removed",shortcutChangesRestored:"Changes to shortcut restored to default",shortcutChangesApplied:"Changes to shortcut applied",shortcutChangesDiscared:"Changes to shortcut discarded"},V=s.i18n.registerUIStrings("panels/settings/KeybindsSettingsTab.ts",_),q=s.i18n.getLocalizedString.bind(void 0,V);class X extends a.Widget.VBox{items;list;editingItem;editingRow;constructor(){super(!0),this.registerRequiredCSS(W,v),this.element.setAttribute("jslog",`${g.pane("keybinds")}`);const t=this.contentElement.createChild("div","settings-card-container-wrapper").createChild("div");t.classList.add("settings-card-container");const s=e.Settings.Settings.instance().moduleSetting("active-keybind-set"),i=e.Settings.Settings.instance().moduleSetting("user-shortcuts");s.addChangeListener(this.update,this);const n=a.SettingsUI.createControlForSetting(s,q(_.matchShortcutsFromPreset)),o=t.createChild("devtools-card");o.heading=q(_.shortcuts),n&&n.classList.add("keybinds-set-select"),this.items=new a.ListModel.ListModel,this.list=new a.ListControl.ListControl(this.items,this,a.ListControl.ListMode.NonViewport),this.list.element.classList.add("shortcut-list"),this.items.replaceAll(this.createListItems()),a.ARIAUtils.markAsList(this.list.element),a.ARIAUtils.setLabel(this.list.element,q(_.keyboardShortcutsList));const r=document.createElement("div");r.classList.add("keybinds-footer");const l=a.XLink.XLink.create("https://developer.chrome.com/docs/devtools/shortcuts/",q(_.FullListOfDevtoolsKeyboard),void 0,void 0,"learn-more");l.classList.add("docs-link"),r.appendChild(l);const d=a.UIUtils.createTextButton(q(_.RestoreDefaultShortcuts),(()=>{i.set([]),s.set(a.ShortcutRegistry.DefaultShortcutSetting)}),{jslogContext:"restore-default-shortcuts"});r.appendChild(d),this.editingItem=null,this.editingRow=null,n&&o.append(n),o.append(this.list.element,r),this.update()}createElementForItem(e){const t=document.createElement("div");let s;if("string"==typeof e)s=t,s.classList.add("keybinds-category-header"),s.textContent=a.ActionRegistration.getLocalizedActionCategory(e),a.ARIAUtils.setLevel(s,1);else{const i=new Y(e,this,e===this.editingItem);s=i.element,a.ARIAUtils.setLevel(s,2),e===this.editingItem&&(this.editingRow=i),s.classList.add("keybinds-list-item"),t.classList.add("keybinds-list-item-wrapper"),t.appendChild(s)}return a.ARIAUtils.markAsListitem(s),s.tabIndex=e===this.list.selectedItem()&&e!==this.editingItem?0:-1,t}commitChanges(e,s){for(const[e,i]of s)"UnsetShortcut"!==e.type&&(a.ShortcutRegistry.ShortcutRegistry.instance().removeShortcut(e),i||t.userMetrics.actionTaken(t.UserMetrics.Action.ShortcutRemoved)),i&&(a.ShortcutRegistry.ShortcutRegistry.instance().registerUserShortcut(e.changeKeys(i).changeType("UserShortcut")),"UnsetShortcut"===e.type?t.userMetrics.actionTaken(t.UserMetrics.Action.UserShortcutAdded):t.userMetrics.actionTaken(t.UserMetrics.Action.ShortcutModified));this.stopEditing(e)}heightForItem(e){return 0}isItemSelectable(e){return!0}selectedItemChanged(e,t,s,i){s&&(s.tabIndex=-1),i&&(t===this.editingItem&&this.editingRow?this.editingRow.focus():(i.tabIndex=0,this.list.element.hasFocus()&&i.focus()),this.setDefaultFocusedElement(i))}updateSelectedItemARIA(e,t){return!0}startEditing(e){this.list.selectItem(e),this.editingItem&&this.stopEditing(this.editingItem),a.UIUtils.markBeingEdited(this.list.element,!0),this.editingItem=e,this.list.refreshItem(e)}stopEditing(e){a.UIUtils.markBeingEdited(this.list.element,!1),this.editingItem=null,this.editingRow=null,this.list.refreshItem(e),this.focus()}createListItems(){const e=a.ActionRegistry.ActionRegistry.instance().actions().sort(((e,t)=>e.category()<t.category()?-1:e.category()>t.category()?1:e.id()<t.id()?-1:e.id()>t.id()?1:0)),t=[];let s;return e.forEach((e=>{"elements.toggle-element-search"!==e.id()&&(s!==e.category()&&t.push(e.category()),t.push(e),s=e.category())})),t}onEscapeKeyPressed(e){const t=b.DOMUtilities.deepActiveElement(document);this.editingRow&&t&&"INPUT"===t.nodeName&&this.editingRow.onEscapeKeyPressed(e)}update(){this.editingItem&&this.stopEditing(this.editingItem),this.list.refreshAllItems(),this.list.selectedItem()||this.list.selectItem(this.items.at(0))}willHide(){super.willHide(),this.editingItem&&this.stopEditing(this.editingItem)}}class Y{isEditing;settingsTab;item;element;editedShortcuts;shortcutInputs;shortcuts;elementToFocus;confirmButton;addShortcutLinkContainer;errorMessageElement;secondKeyTimeout;constructor(e,t,s){this.isEditing=Boolean(s),this.settingsTab=t,this.item=e,this.element=document.createElement("div"),this.element.setAttribute("jslog",`${g.item().context(e.id()).track({keydown:"Escape"})}`),this.editedShortcuts=new Map,this.shortcutInputs=new Map,this.shortcuts=a.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction(e.id()),this.elementToFocus=null,this.confirmButton=null,this.addShortcutLinkContainer=null,this.errorMessageElement=null,this.secondKeyTimeout=null,this.update()}focus(){this.elementToFocus&&this.elementToFocus.focus()}update(){this.element.removeChildren(),this.elementToFocus=null,this.shortcutInputs.clear(),this.element.classList.toggle("keybinds-editing",this.isEditing),this.element.createChild("div","keybinds-action-name keybinds-list-text").textContent=this.item.title(),this.shortcuts.forEach(this.createShortcutRow,this),0===this.shortcuts.length&&this.createEmptyInfo(),this.isEditing&&this.setupEditor()}createEmptyInfo(){if(a.ShortcutRegistry.ShortcutRegistry.instance().actionHasDefaultShortcut(this.item.id())){const e=o.Icon.create("keyboard-pen","keybinds-modified");a.ARIAUtils.setLabel(e,q(_.shortcutModified)),this.element.appendChild(e)}if(!this.isEditing){const e=this.element.createChild("div","keybinds-shortcut keybinds-list-text");a.ARIAUtils.setLabel(e,q(_.noShortcutForAction)),this.element.appendChild(this.createEditButton())}}setupEditor(){this.addShortcutLinkContainer=this.element.createChild("div","keybinds-shortcut");const e=a.UIUtils.createTextButton(q(_.addAShortcut),this.addShortcut.bind(this),{jslogContext:"add-shortcut"});this.addShortcutLinkContainer.appendChild(e),this.elementToFocus||(this.elementToFocus=e),this.errorMessageElement=this.element.createChild("div","keybinds-info keybinds-error hidden"),a.ARIAUtils.markAsAlert(this.errorMessageElement),this.element.appendChild(this.createIconButton(q(_.ResetShortcutsForAction),"undo","","undo",this.resetShortcutsToDefaults.bind(this))),this.confirmButton=this.createIconButton(q(_.confirmChanges),"checkmark","keybinds-confirm-button","confirm",(()=>{this.settingsTab.commitChanges(this.item,this.editedShortcuts),a.ARIAUtils.alert(q(_.shortcutChangesApplied,{PH1:this.item.title()}))})),this.element.appendChild(this.confirmButton),this.element.appendChild(this.createIconButton(q(_.discardChanges),"cross","keybinds-cancel-button","cancel",(()=>{this.settingsTab.stopEditing(this.item),a.ARIAUt