Merge changes Ia6823f9d,I549e570f,Ibcac9d5e,I75c48a1c into stable-3.12

* changes:
  Resize CodeMirror dynamically
  Remove outline on textbox
  Display cursor position in the bottom
  Fix going to line

web/element/codemirror-element.ts

diff --git a/web/element/codemirror-element.ts b/web/element/codemirror-element.ts
index d608598..27c6ef2 100644
--- a/web/element/codemirror-element.ts
+++ b/web/element/codemirror-element.ts
@@ -57,8 +57,13 @@
   @query('#wrapper')
   wrapper!: HTMLElement;
 
+  @query('#result')
+  result!: HTMLElement;
+
   private initialized = false;
 
+  private onResize: (() => void) | null = null;
+
   static override get styles() {
     return [
       css`
@@ -75,12 +80,36 @@
           font-family: 'Roboto Mono', 'SF Mono', 'Lucida Console', Monaco,
             monospace;
         }
+        #statusLine {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          background-color: #f7f7f7;
+          border-top: 1px solid #ddd;
+          border-right: 1px solid #ddd;
+        }
+        #statusLine div {
+          height: inherit;
+        }
+        .cursorPosition {
+          display: inline-block;
+          margin: 0 5px 0 35px;
+          white-space: nowrap;
+        }
       `,
     ];
   }
 
   override render() {
-    return html`<div id="wrapper"></div>`;
+    return html`
+      <div id="wrapper"></div>
+      <div class="statusLine">
+        <div class="cursorPosition">
+          <span id="result"></span>
+        </div>
+      </div>
+    `;
   }
 
   override updated() {
@@ -93,20 +122,12 @@
     if (this.initialized) return;
     this.initialized = true;
 
-    const offsetTop = this.getBoundingClientRect().top;
-    const clientHeight = window.innerHeight ?? document.body.clientHeight;
-    // We are setting a fixed height, because for large files we want to
-    // benefit from CodeMirror's virtual scrolling.
-    // 80px is roughly the size of the bottom margins plus the footer height.
-    // This ensures the height of the textarea doesn't push out of screen.
-    const height = clientHeight - offsetTop - 80;
-
     const editor = new EditorView({
       state: EditorState.create({
         doc: this.fileContent ?? '',
         extensions: [
           ...extensions(
-            height,
+            this.calculateHeight(),
             this.prefs,
             this.fileType,
             this.fileContent ?? '',
@@ -154,6 +175,11 @@
               }
             },
           }),
+          EditorView.updateListener.of(update => {
+            if (update.selectionSet) {
+              this.updateCursorPosition(update.view);
+            }
+          }),
         ],
       }),
       parent: this.wrapper as Element,
@@ -162,9 +188,65 @@
     editor.focus();
 
     if (this.lineNum) {
-      // We have to take away one from the line number,
-      // ... because CodeMirror's line count is zero-based.
-      editor.dispatch({selection: {anchor: this.lineNum - 1}});
+      this.setCursorToLine(editor, this.lineNum);
+    }
+
+    // Makes sure to show line number and column number on initial
+    // load.
+    this.updateCursorPosition(editor);
+
+    this.onResize = () => this.updateEditorHeight(editor);
+    window.addEventListener('resize', this.onResize);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.onResize) {
+      window.removeEventListener('resize', this.onResize);
+      this.onResize = null;
+    }
+  }
+
+  setCursorToLine(view: EditorView, lineNum: number) {
+    const totalLines = view.state.doc.lines;
+    // If you try going to a line that does not exist
+    // codemirror will error out. Instead lets just log.
+    // Line 1 will be selected automatically.
+    if (lineNum < 1 || lineNum > totalLines) {
+      console.warn(`Line number ${lineNum} is out of bounds (valid range: 1 - ${totalLines}).`);
+      return;
+    }
+
+    const line = view.state.doc.line(lineNum);
+    view.dispatch({
+      selection: { anchor: line.from },
+      scrollIntoView: true
+    });
+    view.focus();
+  }
+
+  private updateCursorPosition(view: EditorView) {
+    const cursor = view.state.selection.main.head;
+    const line = view.state.doc.lineAt(cursor);
+    if (this.result) {
+      this.result.textContent = `Line: ${line.number}, Column: ${cursor - line.from + 1}`;
+    }
+  }
+
+  private calculateHeight() {
+    const offsetTop = this.getBoundingClientRect().top;
+    const clientHeight = window.innerHeight ?? document.body.clientHeight;
+    // We take offsetTop twice to ensure the height of the texarea doesn't push
+    // out of screen. We no longer do a hardcore value which was 80 before.
+    // offsetTop seems to be what we've been looking for to do it dynamically.
+    return Math.max(0, clientHeight - offsetTop - offsetTop);
+  }
+
+  private updateEditorHeight(editor: EditorView) {
+    const height = this.calculateHeight();
+    const editorElement = editor.dom;
+    if (editorElement) {
+      editorElement.style.height = `${height}px`;
     }
   }
 }

web/element/extensions.ts

diff --git a/web/element/extensions.ts b/web/element/extensions.ts
index 64b998c..6c2be75 100644
--- a/web/element/extensions.ts
+++ b/web/element/extensions.ts
@@ -47,6 +47,9 @@
         color: 'var(--deemphasized-text-color)',
         'background-color': 'var(--background-color-secondary)',
       },
+      '&.cm-editor.cm-focused': {
+        outline: 'none'
+      },
     },
     {dark}
   );