Bug 1537740 highlight from location to end of current token when paused on breakpoint
authorMiriam <bmiriam1230@gmail.com>
Thu, 09 May 2019 21:19:54 +0000
changeset 532224 840bfd02106371c14080e27d0e4820cbc42c63be
parent 532223 3fd55231ce6209c899c30443afbbe04984ad335e
child 532225 c30426096b2734fe2aa49fb6fd45129327bdfe04
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1537740
milestone68.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 1537740 highlight from location to end of current token when paused on breakpoint With the changes I made, any time the debugger is paused, only the token directly after the column breakpoint is highlighted. My commit also changes highlighting rules for debug lines without column breakpoints. I collected examples in the document below demonstrating cases with and without column breakpoints. https://docs.google.com/document/d/1w9kaAzVgns5oQnONTPuPiREyhaq6NGd4mp6yvVUEU1Y/edit?usp=sharing I changed one CSS file because without that change, the next column breakpoint after the token would also be highlighted which was misleading. I would appreciate any feedback on these changes. Thank you! Differential Revision: https://phabricator.services.mozilla.com/D30089
devtools/client/debugger/src/components/Editor/DebugLine.js
devtools/client/debugger/src/components/Editor/Editor.css
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
@@ -4,17 +4,18 @@
 
 // @flow
 import { PureComponent } from "react";
 import {
   toEditorPosition,
   getDocument,
   hasDocument,
   startOperation,
-  endOperation
+  endOperation,
+  getTokenEnd
 } from "../../utils/editor";
 import { isException } from "../../utils/pause";
 import { getIndentation } from "../../utils/indentation";
 import { connect } from "../../utils/connect";
 import {
   getVisibleSelectedFrame,
   getPauseReason,
   getSourceWithContent,
@@ -71,19 +72,23 @@ export class DebugLine extends PureCompo
 
     let { line, column } = toEditorPosition(frame.location);
     const { 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;
+
     this.debugExpression = doc.markText(
       { ch: column, line },
-      { ch: null, line },
+      { ch: columnEnd, line },
       { className: markTextClass }
     );
   }
 
   clearDebugLine(why: Why, frame: Frame, source: ?SourceWithContent) {
     if (!isDocumentReady(source, frame)) {
       return;
     }
--- a/devtools/client/debugger/src/components/Editor/Editor.css
+++ b/devtools/client/debugger/src/components/Editor/Editor.css
@@ -100,18 +100,17 @@ html[dir="rtl"] .editor-mount {
 .new-breakpoint .CodeMirror-gutter-elt:nth-child(2) {
   z-index: 0;
 }
 
 .theme-dark .editor-wrapper .CodeMirror-line .cm-comment {
   color: var(--theme-comment);
 }
 
-.debug-expression,
-.debug-expression ~ .CodeMirror-widget {
+.debug-expression {
   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 {
--- a/devtools/client/debugger/src/utils/editor/index.js
+++ b/devtools/client/debugger/src/utils/editor/index.js
@@ -254,8 +254,17 @@ export function clearLineClass(codeMirro
 
 export function getTextForLine(codeMirror: Object, line: number): string {
   return codeMirror.getLine(line - 1).trim();
 }
 
 export function getCursorLine(codeMirror: Object): number {
   return codeMirror.getCursor().line;
 }
+
+export function getTokenEnd(codeMirror: Object, line: number, column: number) {
+  const token = codeMirror.getTokenAt({
+    line: line,
+    ch: column + 1
+  });
+
+  return token.end;
+}