Bug 1562249 - Improve perceived performance of column breakpoints by rendering offscreen breakpoints r=jlast
authorDavid Walsh <dwalsh@mozilla.com>
Fri, 28 Jun 2019 21:41:43 +0000
changeset 540463 0176f11e448f372c7d45dcff967d6773efda9ed5
parent 540462 f0a0c088686da33cd3a23748cc3d9d338507e513
child 540464 e908f503555192f9eb1f51e603d67a84618b626f
child 540522 b7ea2e7247cf4e414db111b644b14104aec8ba19
push id11529
push userarchaeopteryx@coole-files.de
push dateThu, 04 Jul 2019 15:22:33 +0000
treeherdermozilla-beta@ebb510a784b8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjlast
bugs1562249
milestone69.0a1
first release with
nightly linux32
0176f11e448f / 69.0a1 / 20190701215217 / files
nightly linux64
0176f11e448f / 69.0a1 / 20190701215217 / files
nightly mac
0176f11e448f / 69.0a1 / 20190701215217 / files
nightly win64
0176f11e448f / 69.0a1 / 20190701215217 / files
nightly win32
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
releases
nightly linux32
nightly linux64
nightly mac
nightly win64
Bug 1562249 - Improve perceived performance of column breakpoints by rendering offscreen breakpoints r=jlast Differential Revision: https://phabricator.services.mozilla.com/D36343
devtools/client/debugger/src/utils/editor/index.js
--- a/devtools/client/debugger/src/utils/editor/index.js
+++ b/devtools/client/debugger/src/utils/editor/index.js
@@ -158,42 +158,53 @@ function isVisible(codeMirror: any, top:
     top,
     scrollTop,
     scrollTop + scrollArea.clientHeight - fontHeight
   );
 
   return inXView && inYView;
 }
 
-export function getLocationsInViewport({ codeMirror }: Object) {
+export function getLocationsInViewport(
+  { codeMirror }: Object,
+  // Offset represents an allowance of characters or lines offscreen to improve
+  // perceived performance of column breakpoint rendering
+  offsetHorizontalCharacters: number = 100,
+  offsetVerticalLines: number = 20
+) {
   // Get scroll position
   if (!codeMirror) {
     return {
       start: { line: 0, column: 0 },
       end: { line: 0, column: 0 },
     };
   }
   const charWidth = codeMirror.defaultCharWidth();
   const scrollArea = codeMirror.getScrollInfo();
   const { scrollLeft } = codeMirror.doc;
   const rect = codeMirror.getWrapperElement().getBoundingClientRect();
-  const topVisibleLine = codeMirror.lineAtHeight(rect.top, "window");
-  const bottomVisibleLine = codeMirror.lineAtHeight(rect.bottom, "window");
+  const topVisibleLine =
+    codeMirror.lineAtHeight(rect.top, "window") - offsetVerticalLines;
+  const bottomVisibleLine =
+    codeMirror.lineAtHeight(rect.bottom, "window") + offsetVerticalLines;
 
-  const leftColumn = Math.floor(scrollLeft > 0 ? scrollLeft / charWidth : 0);
+  const leftColumn = Math.floor(
+    scrollLeft > 0 ? scrollLeft / charWidth - offsetHorizontalCharacters : 0
+  );
   const rightPosition = scrollLeft + (scrollArea.clientWidth - 30);
-  const rightCharacter = Math.floor(rightPosition / charWidth);
+  const rightCharacter =
+    Math.floor(rightPosition / charWidth) + offsetHorizontalCharacters;
 
   return {
     start: {
-      line: topVisibleLine,
-      column: leftColumn,
+      line: topVisibleLine || 0,
+      column: leftColumn || 0,
     },
     end: {
-      line: bottomVisibleLine,
+      line: bottomVisibleLine || 0,
       column: rightCharacter,
     },
   };
 }
 
 export function markText(
   { codeMirror }: Object,
   className: string,