@yuebai008/cli/dist/cli-server/client/front_end/panels/sources/BreakpointEditDialog.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 SDK from"../../core/sdk/sdk.js";import*as CodeMirror from"../../third_party/codemirror.next/codemirror.next.js";import*as IconButton from"../../ui/components/icon_button/icon_button.js";import*as TextEditor from"../../ui/components/text_editor/text_editor.js";import*as UI from"../../ui/legacy/legacy.js";import breakpointEditDialogStyles from"./breakpointEditDialog.css.js";const{Direction:Direction}=TextEditor.TextEditorHistory,UIStrings={breakpointType:"Breakpoint type",breakpoint:"Breakpoint",closeDialog:"Close edit dialog and save changes",conditionalBreakpoint:"Conditional breakpoint",logpoint:"Logpoint",expressionToCheckBeforePausingEg:"Expression to check before pausing, e.g. x > 5",pauseOnlyWhenTheConditionIsTrue:"Pause only when the condition is true",learnMoreOnBreakpointTypes:"Learn more: Breakpoint Types",logMessageEgXIsX:"Log message, e.g. `'x is', x`",logAMessageToConsoleDoNotBreak:"Log a message to Console, do not break"},str_=i18n.i18n.registerUIStrings("panels/sources/BreakpointEditDialog.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class BreakpointEditDialog extends UI.Widget.Widget{onFinish;finished;editor;typeSelector;placeholderCompartment;#t;#e;constructor(t,e,i,o){super(!0);const n=[CodeMirror.javascript.javascriptLanguage,TextEditor.Config.baseConfiguration(e||""),TextEditor.Config.closeBrackets,TextEditor.Config.autocompletion.instance(),CodeMirror.EditorView.lineWrapping,TextEditor.Config.showCompletionHint,TextEditor.Config.conservativeCompletion,CodeMirror.javascript.javascriptLanguage.data.of({autocomplete:t=>this.#e.historyCompletions(t)}),CodeMirror.autocompletion(),TextEditor.JavaScript.argumentHints()];this.onFinish=o,this.finished=!1,this.element.tabIndex=-1,this.element.classList.add("sources-edit-breakpoint-dialog");const r=this.contentElement.createChild("div","dialog-header"),s=new UI.Toolbar.Toolbar("source-frame-breakpoint-toolbar",r);s.appendText(`Line ${t+1}:`),this.typeSelector=new UI.Toolbar.ToolbarComboBox(this.onTypeChanged.bind(this),i18nString(UIStrings.breakpointType)),this.typeSelector.createOption(i18nString(UIStrings.breakpoint),"REGULAR_BREAKPOINT");const a=this.typeSelector.createOption(i18nString(UIStrings.conditionalBreakpoint),"CONDITIONAL_BREAKPOINT"),d=this.typeSelector.createOption(i18nString(UIStrings.logpoint),"LOGPOINT");this.typeSelector.select(i?d:a),s.appendToolbarItem(this.typeSelector);const p=e||"",l=t=>(TextEditor.JavaScript.isExpressionComplete(t.state.doc.toString()).then((e=>{e?this.finishEditing(!0,this.editor.state.doc.toString()):CodeMirror.insertNewlineAndIndent(t)})),!0),c=[{key:"ArrowUp",run:()=>this.#e.moveHistory(-1)},{key:"ArrowDown",run:()=>this.#e.moveHistory(1)},{mac:"Ctrl-p",run:()=>this.#e.moveHistory(-1,!0)},{mac:"Ctrl-n",run:()=>this.#e.moveHistory(1,!0)},{key:"Mod-Enter",run:l},{key:"Enter",run:l},{key:"Shift-Enter",run:CodeMirror.insertNewlineAndIndent},{key:"Escape",run:()=>(this.finishEditing(!1,""),!0)}];this.placeholderCompartment=new CodeMirror.Compartment;const h=this.contentElement.appendChild(document.createElement("div"));h.classList.add("condition-editor"),this.editor=new TextEditor.TextEditor.TextEditor(CodeMirror.EditorState.create({doc:p,selection:{anchor:0,head:p.length},extensions:[this.placeholderCompartment.of(this.getPlaceholder()),CodeMirror.keymap.of(c),n]})),h.appendChild(this.editor);const g=new IconButton.Icon.Icon;g.data={iconName:"cross",color:"var(--icon-default)",width:"20px",height:"20px"},g.title=i18nString(UIStrings.closeDialog),g.onclick=()=>this.finishEditing(!0,this.editor.state.doc.toString()),r.appendChild(g),this.#t=new TextEditor.AutocompleteHistory.AutocompleteHistory(Common.Settings.Settings.instance().createLocalSetting("breakpointConditionHistory",[])),this.#e=new TextEditor.TextEditorHistory.TextEditorHistory(this.editor,this.#t);const m=this.contentElement.appendChild(document.createElement("div"));m.classList.add("link-wrapper");const T=UI.Fragment.html`<x-link class="link devtools-link" tabindex="0" href='https://goo.gle/devtools-loc'>${i18nString(UIStrings.learnMoreOnBreakpointTypes)}</x-link>`,y=new IconButton.Icon.Icon;y.data={iconName:"open-externally",color:"var(--icon-link)",width:"16px",height:"16px"},y.classList.add("link-icon"),T.prepend(y),m.appendChild(T),this.updateTooltip()}saveAndFinish(){this.finishEditing(!0,this.editor.state.doc.toString())}focusEditor(){this.editor.editor.focus()}onTypeChanged(){"REGULAR_BREAKPOINT"!==this.breakpointType?(this.editor.dispatch({effects:this.placeholderCompartment.reconfigure(this.getPlaceholder())}),this.updateTooltip()):this.finishEditing(!0,"")}get breakpointType(){const t=this.typeSelector.selectedOption();return t?t.value:null}getPlaceholder(){const t=this.breakpointType;return"CONDITIONAL_BREAKPOINT"===t?CodeMirror.placeholder(i18nString(UIStrings.expressionToCheckBeforePausingEg)):"LOGPOINT"===t?CodeMirror.placeholder(i18nString(UIStrings.logMessageEgXIsX)):[]}updateTooltip(){const t=this.breakpointType;"CONDITIONAL_BREAKPOINT"===t?UI.Tooltip.Tooltip.install(this.typeSelector.element,i18nString(UIStrings.pauseOnlyWhenTheConditionIsTrue)):"LOGPOINT"===t&&UI.Tooltip.Tooltip.install(this.typeSelector.element,i18nString(UIStrings.logAMessageToConsoleDoNotBreak))}finishEditing(t,e){if(this.finished)return;this.finished=!0,this.editor.remove(),this.#t.pushHistoryItem(e);const i="LOGPOINT"===this.breakpointType;this.onFinish({committed:t,condition:e,isLogpoint:i})}wasShown(){super.wasShown(),this.registerCSSFiles([breakpointEditDialogStyles])}get editorForTest(){return this.editor}}