Bug 1558273 - For arrays and objects, highlight from token to end of line when paused.
authorMiriam <bmiriam1230@gmail.com>
Mon, 10 Jun 2019 20:40:04 +0000
changeset 478345 c2e033313872a346d6a34afc5d53ba864807ce63
parent 478344 6b3192ef9401d1f04be540641aeda20e9056b9ef
child 478346 36ceb8f15cb9fd797cced7f4f37c2691916b72d5
push id36140
push userdluca@mozilla.com
push dateWed, 12 Jun 2019 12:02:49 +0000
treeherdermozilla-central@6b172dc138ee [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1558273
milestone69.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 1558273 - For arrays and objects, highlight from token to end of line when paused. Differential Revision: https://phabricator.services.mozilla.com/D34392
devtools/client/debugger/src/components/Editor/DebugLine.js
devtools/client/debugger/src/components/Editor/Editor.css
devtools/client/debugger/src/components/Editor/tests/DebugLine.spec.js
devtools/client/debugger/src/utils/editor/index.js
--- a/devtools/client/debugger/src/components/Editor/DebugLine.js
+++ b/devtools/client/debugger/src/components/Editor/DebugLine.js
@@ -66,26 +66,30 @@ export class DebugLine extends PureCompo
   setDebugLine(why: Why, frame: Frame, source: ?SourceWithContent) {
     if (!isDocumentReady(source, frame)) {
       return;
     }
     const sourceId = frame.location.sourceId;
     const doc = getDocument(sourceId);
 
     let { line, column } = toEditorPosition(frame.location);
-    const { markTextClass, lineClass } = this.getTextClasses(why);
+    let { markTextClass, lineClass } = this.getTextClasses(why);
     doc.addLineClass(line, "line", lineClass);
 
     const lineText = doc.getLine(line);
     column = Math.max(column, getIndentation(lineText));
 
     // If component updates because user clicks on
     // another source tab, codeMirror will be null.
     const columnEnd = doc.cm ? getTokenEnd(doc.cm, line, column) : null;
 
+    if (columnEnd === null) {
+      markTextClass += " to-line-end";
+    }
+
     this.debugExpression = doc.markText(
       { ch: column, line },
       { ch: columnEnd, line },
       { className: markTextClass }
     );
   }
 
   clearDebugLine(why: Why, frame: Frame, source: ?SourceWithContent) {
--- a/devtools/client/debugger/src/components/Editor/Editor.css
+++ b/devtools/client/debugger/src/components/Editor/Editor.css
@@ -104,16 +104,20 @@ html[dir="rtl"] .editor-mount {
 .theme-dark .editor-wrapper .CodeMirror-line .cm-comment {
   color: var(--theme-comment);
 }
 
 .debug-expression {
   background-color: var(--debug-expression-background);
 }
 
+.to-line-end ~ .CodeMirror-widget {
+  background-color: var(--debug-expression-background);
+}
+
 .debug-expression-error {
   background-color: var(--debug-expression-error-background);
 }
 
 :not(.conditional-breakpoint-panel) .new-debug-line .CodeMirror-line {
   background-color: transparent !important;
   outline: var(--debug-line-border) solid 1px;
 }
--- a/devtools/client/debugger/src/components/Editor/tests/DebugLine.spec.js
+++ b/devtools/client/debugger/src/components/Editor/tests/DebugLine.spec.js
@@ -121,22 +121,22 @@ describe("DebugLine Component", () => {
           [toEditorLine("foo", firstLine), "line", "new-debug-line"],
           [toEditorLine("foo", secondLine), "line", "new-debug-line"],
         ]);
 
         expect(doc.markText.mock.calls).toEqual([
           [
             { ch: 2, line: toEditorLine("foo", firstLine) },
             { ch: null, line: toEditorLine("foo", firstLine) },
-            { className: "debug-expression" },
+            { className: "debug-expression to-line-end" },
           ],
           [
             { ch: 2, line: toEditorLine("foo", secondLine) },
             { ch: null, line: toEditorLine("foo", secondLine) },
-            { className: "debug-expression" },
+            { className: "debug-expression to-line-end" },
           ],
         ]);
 
         expect(clear.mock.calls).toEqual([[]]);
       });
     });
 
     describe("when there is no selected frame", () => {
--- a/devtools/client/debugger/src/utils/editor/index.js
+++ b/devtools/client/debugger/src/utils/editor/index.js
@@ -260,11 +260,12 @@ export function getCursorLine(codeMirror
   return codeMirror.getCursor().line;
 }
 
 export function getTokenEnd(codeMirror: Object, line: number, column: number) {
   const token = codeMirror.getTokenAt({
     line: line,
     ch: column + 1,
   });
+  const tokenString = token.string;
 
-  return token.end;
+  return tokenString === "{" || tokenString === "[" ? null : token.end;
 }