Display cursor position in the bottom

The line number the cursor is on and column number will be displayed.

The column number is more important as it means users don't
have to copy the line into a text editor to find the column number.

We did this in GWTUI [1] but we never did this for the new UI.

Screenshot: https://imgur.com/a/mkwOeAu

[1] If9090a893631077349a6ccf4f065f580dc778b08

Change-Id: Ibcac9d5e4283c8c7bd642420627d44eaac4d4f44
(cherry picked from commit 47b6a5819969363a25914f60ffcbcec7abbb8232)

web/element/codemirror-element.ts

diff --git a/web/element/codemirror-element.ts b/web/element/codemirror-element.ts
index 597fa99..038bf1d 100644
--- a/web/element/codemirror-element.ts
+++ b/web/element/codemirror-element.ts
@@ -57,6 +57,9 @@
   @query('#wrapper')
   wrapper!: HTMLElement;
 
+  @query('#result')
+  result!: HTMLElement;
+
   private initialized = false;
 
   static override get styles() {
@@ -75,12 +78,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() {
@@ -154,6 +181,11 @@
               }
             },
           }),
+          EditorView.updateListener.of(update => {
+            if (update.selectionSet) {
+              this.updateCursorPosition(update.view);
+            }
+          }),
         ],
       }),
       parent: this.wrapper as Element,
@@ -164,6 +196,10 @@
     if (this.lineNum) {
       this.setCursorToLine(editor, this.lineNum);
     }
+
+    // Makes sure to show line number and column number on initial
+    // load.
+    this.updateCursorPosition(editor);
   }
 
   setCursorToLine(view: EditorView, lineNum: number) {
@@ -183,4 +219,12 @@
     });
     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}`;
+    }
+  }
 }