Bug 1527122 - [release 125] [Breakpoints] Add syntax highlighting to conditional panel (#7911). r=dwalsh
authorAnthony X <ravefalcon92@yahoo.com>
Mon, 11 Feb 2019 17:01:43 -0800
changeset 458686 05720cbd2a93
parent 458685 7dee5f1a75b4
child 458687 d73a4f61cf59
push id35544
push userccoroiu@mozilla.com
push dateTue, 12 Feb 2019 16:29:08 +0000
treeherdermozilla-central@c849fb69e2e7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdwalsh
bugs1527122
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1527122 - [release 125] [Breakpoints] Add syntax highlighting to conditional panel (#7911). r=dwalsh
devtools/client/debugger/new/dist/debugger.css
devtools/client/debugger/new/src/components/Editor/ConditionalPanel.css
devtools/client/debugger/new/src/components/Editor/ConditionalPanel.js
devtools/client/debugger/new/src/utils/editor/source-editor.js
devtools/client/debugger/new/test/mochitest/helpers.js
--- a/devtools/client/debugger/new/dist/debugger.css
+++ b/devtools/client/debugger/new/dist/debugger.css
@@ -3034,32 +3034,18 @@ menuseparator {
   color: var(--theme-conditional-breakpoint-color);
   padding-left: 3px;
   padding-right: 3px;
   padding-bottom: 3px;
   text-align: right;
   width: 30px;
 }
 
-.conditional-breakpoint-panel input {
-  margin: 5px 10px;
-  width: calc(100% - 4em);
-  border: none;
-  background: var(--theme-toolbar-background);
-  font-size: 14px;
-  color: var(--theme-conditional-breakpoint-color);
-  line-height: 30px;
-}
-
-.conditional-breakpoint-panel input:not(:placeholder-shown) {
-  font-family: var(--monospace-font-family);
-}
-
-.conditional-breakpoint-panel input:focus {
-  outline-width: 0;
+.conditional-breakpoint-panel .CodeMirror {
+  margin: 6px 10px;
 }
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 .editor-wrapper {
   --debug-line-border: rgb(145, 188, 219);
   --debug-expression-background: rgba(202, 227, 255, 0.5);
--- a/devtools/client/debugger/new/src/components/Editor/ConditionalPanel.css
+++ b/devtools/client/debugger/new/src/components/Editor/ConditionalPanel.css
@@ -18,25 +18,11 @@
   color: var(--theme-conditional-breakpoint-color);
   padding-left: 3px;
   padding-right: 3px;
   padding-bottom: 3px;
   text-align: right;
   width: 30px;
 }
 
-.conditional-breakpoint-panel input {
-  margin: 5px 10px;
-  width: calc(100% - 4em);
-  border: none;
-  background: var(--theme-toolbar-background);
-  font-size: 14px;
-  color: var(--theme-conditional-breakpoint-color);
-  line-height: 30px;
+.conditional-breakpoint-panel .CodeMirror {
+  margin: 6px 10px;
 }
-
-.conditional-breakpoint-panel input:not(:placeholder-shown) {
-  font-family: var(--monospace-font-family);
-}
-
-.conditional-breakpoint-panel input:focus {
-  outline-width: 0;
-}
--- a/devtools/client/debugger/new/src/components/Editor/ConditionalPanel.js
+++ b/devtools/client/debugger/new/src/components/Editor/ConditionalPanel.js
@@ -114,17 +114,17 @@ export class ConditionalPanel extends Pu
     const { location, editor } = props;
 
     const editorLine = toEditorLine(location.sourceId, location.line || 0);
     this.cbPanel = editor.codeMirror.addLineWidget(
       editorLine,
       this.renderConditionalPanel(props),
       {
         coverGutter: true,
-        noHScroll: false
+        noHScroll: true
       }
     );
     if (this.input) {
       let parent: ?Node = this.input.parentNode;
       while (parent) {
         if (
           parent instanceof HTMLElement &&
           parent.classList.contains("CodeMirror-scroll")
@@ -138,42 +138,53 @@ export class ConditionalPanel extends Pu
       if (this.scrollParent) {
         this.scrollParent.addEventListener("scroll", this.repositionOnScroll);
         this.repositionOnScroll();
       }
     }
   }
 
   renderConditionalPanel(props: Props) {
-    const { breakpoint, log } = props;
+    const { breakpoint, log, editor } = props;
     const options = (breakpoint && breakpoint.options) || {};
     const condition = log ? options.logValue : options.condition;
 
     const panel = document.createElement("div");
     ReactDOM.render(
       <div
         className={classNames("conditional-breakpoint-panel", {
           "log-point": log
         })}
         onClick={() => this.keepFocusOnInput()}
         onBlur={this.props.closeConditionalPanel}
         ref={node => (this.panelNode = node)}
       >
         <div className="prompt">ยป</div>
         <input
           defaultValue={condition}
-          placeholder={L10N.getStr(
-            log
-              ? "editor.conditionalPanel.logPoint.placeholder"
-              : "editor.conditionalPanel.placeholder"
-          )}
-          onKeyDown={this.onKey}
           ref={input => {
+            const codeMirror = editor.CodeMirror.fromTextArea(input, {
+              mode: "javascript",
+              theme: "mozilla",
+              placeholder: L10N.getStr(
+                log
+                  ? "editor.conditionalPanel.logPoint.placeholder"
+                  : "editor.conditionalPanel.placeholder"
+              )
+            });
+            const codeMirrorWrapper = codeMirror.getWrapperElement();
+
+            codeMirrorWrapper.addEventListener("keydown", e => {
+              codeMirror.save();
+              this.onKey(e);
+            });
+
             this.input = input;
-            this.keepFocusOnInput();
+            codeMirror.focus();
+            codeMirror.setCursor(codeMirror.lineCount(), 0);
           }}
         />
       </div>,
       panel
     );
     return panel;
   }
 
--- a/devtools/client/debugger/new/src/utils/editor/source-editor.js
+++ b/devtools/client/debugger/new/src/utils/editor/source-editor.js
@@ -23,16 +23,17 @@ require("codemirror/mode/haxe/haxe");
 require("codemirror/addon/search/searchcursor");
 require("codemirror/addon/fold/foldcode");
 require("codemirror/addon/fold/brace-fold");
 require("codemirror/addon/fold/indent-fold");
 require("codemirror/addon/fold/foldgutter");
 require("codemirror/addon/runmode/runmode");
 require("codemirror/addon/selection/active-line");
 require("codemirror/addon/edit/matchbrackets");
+require("codemirror/addon/display/placeholder");
 require("codemirror/mode/clike/clike");
 require("codemirror/mode/rust/rust");
 
 require("./source-editor.css");
 
 // NOTE: we should eventually use debugger-html context type mode
 type Mode = string | Object;
 export type AlignOpts = "top" | "center" | "bottom";
--- a/devtools/client/debugger/new/test/mochitest/helpers.js
+++ b/devtools/client/debugger/new/test/mochitest/helpers.js
@@ -1142,17 +1142,17 @@ const selectors = {
   resultItems: ".result-list .result-item",
   fileMatch: ".project-text-search .line-value",
   popup: ".popover",
   tooltip: ".tooltip",
   previewPopup: ".preview-popup",
   outlineItem: i =>
     `.outline-list__element:nth-child(${i}) .function-signature`,
   outlineItems: ".outline-list__element",
-  conditionalPanelInput: ".conditional-breakpoint-panel input",
+  conditionalPanelInput: ".conditional-breakpoint-panel textarea",
   searchField: ".search-field",
   blackbox: ".action.black-box",
   projectSearchCollapsed: ".project-text-search .arrow:not(.expanded)",
   projectSerchExpandedResults: ".project-text-search .result",
   CodeMirrorLines: ".CodeMirror-lines"
 };
 
 function getSelector(elementName, ...args) {