WORK IN PROGRESS

src/static/js/ace2_inner.js

@@ -56,8 +56,25 @@ function Ace2Inner(editorInfo, cssManagers) {
 
   let disposed = false;
 
-  const focus = () => {
+  const focus = (line = null) => {
     window.focus();
+    if (line == null) return;
+    const lines = $(document.body).children();
+    if (lines.length === 0) return;
+    if (line > lines.length - 1) line = lines.length - 1;
+    window.console.log(`scrolling to line ${line}`);
+    const node = lines[line];
+    window.console.log('node.offsetTop', node.offsetTop);
+    window.console.log('node.getBoundingClientRect().top', node.getBoundingClientRect().top);
+    window.console.log(rep);
+    //const scrollAmount = node.getBoundingClientRect().top + iframe
+    outerWin.document.documentElement.scrollTop = node.getBoundingClientRect().top;
+    window.console.log('document.body',
+        'scrollTop', document.body.scrollTop,
+        'clientHeight', document.body.clientHeight,
+        'scrollHeight', document.body.scrollHeight);
+    const point = {index: 0, focusAtStart: true, maxIndex: 1, node};
+    setSelection({startPoint: point, endPoint: point});
   };
 
   const outerWin = window.parent;

src/static/js/pad.js

@@ -491,9 +491,6 @@ const pad = {
       $('#chatloadmessagesbutton').css('display', 'none');
     }
 
-    setTimeout(() => {
-      padeditor.ace.focus();
-    }, 0);
     // if we have a cookie for always showing chat then show it
     if (padcookie.getPref('chatAlwaysVisible')) {
       chat.stickToScreen(true); // stick it to the screen

src/static/js/pad_editor.js

@@ -46,9 +46,16 @@ const padeditor = (() => {
       $outerdoc.find('#sidedivinner').on('click', 'div', function () {
         const targetLineNumber = $(this).index() + 1;
         window.location.hash = `L${targetLineNumber}`;
-        focusOnLine(self.ace);
       });
-      focusOnLine(self.ace);
+      const focusOnHash = () => {
+        const lstr = window.location.hash.substr(1);
+        if (!lstr || lstr[0] !== 'L') return;
+        const line = parseInt(lstr.substr(1));
+        if (!line) return;
+        self.ace.focus(line - 1);
+      };
+      $(window).on('hashchange', focusOnHash);
+      setTimeout(focusOnHash, 500);
       self.ace.setProperty('wraps', true);
       self.initViewOptions();
       self.setViewOptions(initialViewOptions);
@@ -162,45 +169,3 @@ const padeditor = (() => {
 })();
 
 exports.padeditor = padeditor;
-
-const focusOnLine = (ace) => {
-  // If a number is in the URI IE #L124 go to that line number
-  const lineNumber = window.location.hash.substr(1);
-  if (!lineNumber || lineNumber[0] !== 'L') return;
-  const $outerdoc = $('iframe[name="ace_outer"]').contents().find('#outerdocbody');
-  const lineNumberInt = parseInt(lineNumber.substr(1));
-  if (!lineNumberInt) return;
-  const $inner = $('iframe[name="ace_outer"]').contents().find('iframe')
-      .contents().find('#innerdocbody');
-  const line = $inner.find(`div:nth-child(${lineNumberInt})`);
-  if (line.length === 0) return;
-  let offsetTop = line.offset().top;
-  offsetTop += parseInt($outerdoc.css('padding-top').replace('px', ''));
-  const hasMobileLayout = $('body').hasClass('mobile-layout');
-  if (!hasMobileLayout) {
-    offsetTop += parseInt($inner.css('padding-top').replace('px', ''));
-  }
-  const $outerdocHTML = $('iframe[name="ace_outer"]').contents()
-      .find('#outerdocbody').parent();
-  $outerdoc.css({top: `${offsetTop}px`}); // Chrome
-  $outerdocHTML.animate({scrollTop: offsetTop}); // needed for FF
-  const node = line[0];
-  ace.callWithAce((ace) => {
-    const selection = {
-      startPoint: {
-        index: 0,
-        focusAtStart: true,
-        maxIndex: 1,
-        node,
-      },
-      endPoint: {
-        index: 0,
-        focusAtStart: true,
-        maxIndex: 1,
-        node,
-      },
-    };
-    ace.ace_setSelection(selection);
-  });
-  // End of setSelection / set Y position of editor
-};

src/static/js/scroll.js

@@ -19,6 +19,10 @@ function Scroll(outerWin) {
   this.rootDocument = parent.parent.document;
 }
 
+Scroll.prototype.scrollToLine = function (line) {
+
+};
+
 Scroll.prototype.scrollWhenCaretIsInTheLastLineOfViewportWhenNecessary =
   function (rep, isScrollableEvent, innerHeight) {
   // are we placing the caret on the line at the bottom of viewport?

src/tests/frontend/specs/inner_height.js

@@ -16,14 +16,7 @@ describe('height regression after ace.js refactoring', function () {
 
   it('client height should be less than scrollHeight with many lines', async function () {
     await helper.clearPad();
-    await helper.edit('Test line\n' +
-      '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
-      '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
-      '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
-      '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
-      '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
-      '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
-      '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n');
+    await helper.edit(`Test line${'\n'.repeat(281)}`);
     const outerHtml = helper.padChrome$('iframe')[0].contentDocument.documentElement;
     // Need to poll because the heights take some time to settle.
     await helper.waitForPromise(() => outerHtml.clientHeight < outerHtml.scrollHeight);