DevTools: extract breakpoint condition editor

Bug: 700519
Change-Id: I85553324c653f7397ed538581dc62ac5260188fe
Reviewed-on: https://chromium-review.googlesource.com/c/1329900
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Commit-Position: refs/heads/master@{#610158}

third_party/blink/renderer/devtools/BUILD.gn

@@ -662,6 +662,8 @@ all_devtools_files = [
   "front_end/source_frame/xmlView.css",
   "front_end/source_frame/XMLView.js",
   "front_end/sources/AddSourceMapURLDialog.js",
+  "front_end/sources/breakpointEditDialog.css",
+  "front_end/sources/BreakpointEditDialog.js",
   "front_end/sources/callStackSidebarPane.css",
   "front_end/sources/CallStackSidebarPane.js",
   "front_end/sources/CSSPlugin.js",

third_party/blink/renderer/devtools/front_end/sources/BreakpointEditDialog.js

+/*
+ * Copyright 2018 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+Sources.BreakpointEditDialog = class extends UI.Widget {
+  /**
+   * @param {number} editorLineNumber
+   * @param {string} oldCondition
+   * @param {function({committed: boolean, condition: string})} onFinish
+   */
+  constructor(editorLineNumber, oldCondition, onFinish) {
+    super(true);
+    this.registerRequiredCSS('sources/breakpointEditDialog.css');
+    this._onFinish = onFinish;
+    this._finished = false;
+    /** @type {?UI.TextEditor} */
+    this._editor = null;
+
+    const labelElement = this.contentElement.createChild('label', 'source-frame-breakpoint-message');
+    labelElement.htmlFor = 'source-frame-breakpoint-condition';
+    labelElement.createTextChild(
+        Common.UIString('The breakpoint on line %d will stop only if this expression is true:', editorLineNumber + 1));
+
+    self.runtime.extension(UI.TextEditorFactory).instance().then(factory => {
+      this._editor =
+          factory.createEditor({lineNumbers: false, lineWrapping: true, mimeType: 'javascript', autoHeight: true});
+      this._editor.configureAutocomplete(ObjectUI.JavaScriptAutocompleteConfig.createConfigForEditor(this._editor));
+      if (oldCondition)
+        this._editor.setText(oldCondition);
+      this._editor.widget().show(this.contentElement);
+      this._editor.widget().element.id = 'source-frame-breakpoint-condition';
+      this._editor.setSelection(this._editor.fullRange());
+      this._editor.widget().focus();
+      this._editor.widget().element.addEventListener('keydown', this._onKeyDown.bind(this), true);
+      this._editor.widget().element.addEventListener('blur', event => {
+        if (event.relatedTarget && !event.relatedTarget.isSelfOrDescendant(this._editor.widget().element))
+          this._finishEditing(true);
+      }, true);
+    });
+  }
+
+  /**
+   * @param {boolean} committed
+   */
+  _finishEditing(committed) {
+    if (this._finished)
+      return;
+    this._finished = true;
+    this._editor.widget().detach();
+    const condition = this._editor.text();
+    this._onFinish({committed, condition});
+  }
+
+  /**
+   * @param {!Event} event
+   */
+  async _onKeyDown(event) {
+    if (isEnterKey(event) && !event.shiftKey) {
+      event.consume(true);
+      const expression = this._editor.text();
+      if (event.ctrlKey || await ObjectUI.JavaScriptAutocomplete.isExpressionComplete(expression))
+        this._finishEditing(true);
+      else
+        this._editor.newlineAndIndent();
+    }
+    if (isEscKey(event))
+      this._finishEditing(false);
+  }
+};

third_party/blink/renderer/devtools/front_end/sources/DebuggerPlugin.js

@@ -634,63 +634,22 @@ Sources.DebuggerPlugin = class extends Sources.UISourceCodeFrame.Plugin {
    * @param {?{lineNumber: number, columnNumber: number}} location
    */
   async _editBreakpointCondition(editorLineNumber, breakpoint, location) {
-    const conditionElement = createElementWithClass('div', 'source-frame-breakpoint-condition');
-
-    const labelElement = conditionElement.createChild('label', 'source-frame-breakpoint-message');
-    labelElement.htmlFor = 'source-frame-breakpoint-condition';
-    labelElement.createTextChild(
-        Common.UIString('The breakpoint on line %d will stop only if this expression is true:', editorLineNumber + 1));
-
-
-    this._textEditor.addDecoration(conditionElement, editorLineNumber);
-
-    /** @type {!UI.TextEditorFactory} */
-    const factory = await self.runtime.extension(UI.TextEditorFactory).instance();
-    const editor =
-        factory.createEditor({lineNumbers: false, lineWrapping: true, mimeType: 'javascript', autoHeight: true});
-    editor.widget().show(conditionElement);
-    if (breakpoint)
-      editor.setText(breakpoint.condition());
-    editor.setSelection(editor.fullRange());
-    editor.configureAutocomplete(ObjectUI.JavaScriptAutocompleteConfig.createConfigForEditor(editor));
-    editor.widget().element.addEventListener('keydown', async event => {
-      if (isEnterKey(event) && !event.shiftKey) {
-        event.consume(true);
-        const expression = editor.text();
-        if (event.ctrlKey || await ObjectUI.JavaScriptAutocomplete.isExpressionComplete(expression))
-          finishEditing.call(this, true);
-        else
-          editor.newlineAndIndent();
-      }
-      if (isEscKey(event))
-        finishEditing.call(this, false);
-    }, true);
-    editor.widget().focus();
-    editor.widget().element.id = 'source-frame-breakpoint-condition';
-    editor.widget().element.addEventListener('blur', event => {
-      if (event.relatedTarget && !event.relatedTarget.isSelfOrDescendant(editor.widget().element))
-        finishEditing.call(this, true);
-    }, true);
-    let finished = false;
-    /**
-     * @this {Sources.DebuggerPlugin}
-     */
-    function finishEditing(committed) {
-      if (finished)
+    const oldCondition = breakpoint ? breakpoint.condition() : '';
+    const decorationElement = createElement('div');
+    const dialog = new Sources.BreakpointEditDialog(editorLineNumber, oldCondition, result => {
+      dialog.detach();
+      this._textEditor.removeDecoration(decorationElement, editorLineNumber);
+      if (!result.committed)
         return;
-      finished = true;
-      editor.widget().detach();
-      this._textEditor.removeDecoration(/** @type {!Element} */ (conditionElement), editorLineNumber);
-      if (!committed)
-        return;
-
       if (breakpoint)
-        breakpoint.setCondition(editor.text().trim());
+        breakpoint.setCondition(result.condition);
       else if (location)
-        this._setBreakpoint(location.lineNumber, location.columnNumber, editor.text().trim(), true);
+        this._setBreakpoint(location.lineNumber, location.columnNumber, result.condition, true);
       else
-        this._createNewBreakpoint(editorLineNumber, editor.text().trim(), true);
-    }
+        this._createNewBreakpoint(editorLineNumber, result.condition, true);
+    });
+    this._textEditor.addDecoration(decorationElement, editorLineNumber);
+    dialog.show(decorationElement);
   }
 
   /**

third_party/blink/renderer/devtools/front_end/sources/breakpointEditDialog.css

+/*
+ * Copyright 2018 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+  z-index: 30;
+  padding: 4px;
+  background-color: #e6e6e6;
+  border-radius: 7px;
+  border: 2px solid #bababa;
+  width: 90%;
+  pointer-events: auto;
+}
+
+.source-frame-breakpoint-message {
+  background-color: transparent;
+  font-weight: normal;
+  text-align: left;
+  text-shadow: none;
+  color: rgb(85, 85, 85);
+  cursor: default;
+  margin: 0 0 2px 0;
+}
+
+#source-frame-breakpoint-condition {
+  margin: 0;
+  border: 1px inset rgb(190, 190, 190) !important;
+  width: 100%;
+  box-shadow: none !important;
+  outline: none !important;
+  background: white;
+}

third_party/blink/renderer/devtools/front_end/sources/module.json

@@ -834,6 +834,7 @@
     ],
     "scripts": [
         "AddSourceMapURLDialog.js",
+        "BreakpointEditDialog.js",
         "CallStackSidebarPane.js",
         "DebuggerPausedMessage.js",
         "SimpleHistoryManager.js",
@@ -867,6 +868,7 @@
         "ScriptOriginPlugin.js"
     ],
     "resources": [
+        "breakpointEditDialog.css",
         "callStackSidebarPane.css",
         "debuggerPausedMessage.css",
         "javaScriptBreakpointsSidebarPane.css",

third_party/blink/renderer/devtools/front_end/sources/sourcesView.css

@@ -59,35 +59,6 @@
     background-color: #444;
 }
 
-.source-frame-breakpoint-condition {
-    z-index: 30;
-    padding: 4px;
-    background-color: #e6e6e6;
-    border-radius: 7px;
-    border: 2px solid #bababa;
-    width: 90%;
-    pointer-events: auto;
-}
-
-.source-frame-breakpoint-message {
-    background-color: transparent;
-    font-weight: normal;
-    text-align: left;
-    text-shadow: none;
-    color: rgb(85, 85, 85);
-    cursor: default;
-    margin: 0 0 2px 0;
-}
-
-#source-frame-breakpoint-condition {
-    margin: 0;
-    border: 1px inset rgb(190, 190, 190) !important;
-    width: 100%;
-    box-shadow: none !important;
-    outline: none !important;
-    background: white;
-}
-
 @-webkit-keyframes source-frame-value-update-highlight-animation {
     from {
         background-color: inherit;