From 16dcf5fff96a2a4ee98a8054dd0260e606c915fa Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Mon, 14 Feb 2022 11:18:40 +0000
Subject: [PATCH] [web] [cm6] Add a source editor toggle (#6674)

* Add a source editor toggle
* Only show the toggle if in split test variant (or query param override)
* Change labels
* Add check for this.editor
* Update toolbar.pug

GitOrigin-RevId: ee00e31db334fc562b00d28a8c2de5d03456f749
---
 .../web/app/src/Features/Project/ProjectController.js     | 4 ++--
 services/web/app/views/project/editor/editor-pane.pug     | 4 ++--
 services/web/frontend/js/ide/editor/EditorManager.js      | 8 ++++++++
 .../aceEditor/track-changes/TrackChangesManager.js        | 3 +++
 services/web/frontend/stylesheets/app/editor/toolbar.less | 7 ++++---
 5 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js
index a61a257d02..c6f9a27a68 100644
--- a/services/web/app/src/Features/Project/ProjectController.js
+++ b/services/web/app/src/Features/Project/ProjectController.js
@@ -946,7 +946,7 @@ const ProjectController = {
               detachRole = req.params.detachRole
             }
 
-            const showNewSourceEditor =
+            const showNewSourceEditorOption =
               (newSourceEditorAssignment &&
                 newSourceEditorAssignment.variant === 'codemirror') ||
               shouldDisplayFeature('new_source_editor', false) // also allow override via ?new_source_editor=true
@@ -1012,7 +1012,7 @@ const ProjectController = {
               showPdfDetach,
               debugPdfDetach,
               showNewPdfPreview,
-              showNewSourceEditor,
+              showNewSourceEditorOption,
               trackPdfDownload: partOfPdfCachingRollout('collect-metrics'),
               enablePdfCaching: partOfPdfCachingRollout('enable-caching'),
               resetServiceWorker:
diff --git a/services/web/app/views/project/editor/editor-pane.pug b/services/web/app/views/project/editor/editor-pane.pug
index 0444e56fff..a8464852fb 100644
--- a/services/web/app/views/project/editor/editor-pane.pug
+++ b/services/web/app/views/project/editor/editor-pane.pug
@@ -46,10 +46,10 @@
 					.multi-selection-message
 						h4 {{ multiSelectedCount }} #{translate('files_selected')}
 
-				if showNewSourceEditor
+				div(ng-if="editor.newSourceEditor")
 					if moduleIncludesAvailable('editor:source-editor')
 						!= moduleIncludes('editor:source-editor', locals)
-				else
+				div(ng-if="!editor.newSourceEditor")
 					include ./source-editor
 
 				if !isRestrictedTokenMember
diff --git a/services/web/frontend/js/ide/editor/EditorManager.js b/services/web/frontend/js/ide/editor/EditorManager.js
index 8f198ccfcb..0a19ab4621 100644
--- a/services/web/frontend/js/ide/editor/EditorManager.js
+++ b/services/web/frontend/js/ide/editor/EditorManager.js
@@ -41,6 +41,7 @@ export default EditorManager = (function () {
         trackChanges: false,
         wantTrackChanges: false,
         showRichText: this.showRichText(),
+        newSourceEditor: this.newSourceEditor(),
         showSymbolPalette: false,
         toggleSymbolPalette: () => {
           const newValue = !this.$scope.editor.showSymbolPalette
@@ -136,6 +137,13 @@ export default EditorManager = (function () {
       )
     }
 
+    newSourceEditor() {
+      return (
+        this.localStorage(`editor.source_editor.${this.$scope.project_id}`) ===
+        'cm6'
+      )
+    }
+
     autoOpenDoc() {
       const open_doc_id =
         this.ide.localStorage(`doc.open_id.${this.$scope.project_id}`) ||
diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.js b/services/web/frontend/js/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.js
index a51ee00bb0..f3002b1142 100644
--- a/services/web/frontend/js/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.js
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.js
@@ -574,6 +574,9 @@ class TrackChangesManager {
   }
 
   recalculateReviewEntriesScreenPositions() {
+    if (!this.editor) {
+      return
+    }
     const session = this.editor.getSession()
     const { renderer } = this.editor
     const entries = this._getCurrentDocEntries()
diff --git a/services/web/frontend/stylesheets/app/editor/toolbar.less b/services/web/frontend/stylesheets/app/editor/toolbar.less
index ece6c0b2e7..d9607b23d7 100644
--- a/services/web/frontend/stylesheets/app/editor/toolbar.less
+++ b/services/web/frontend/stylesheets/app/editor/toolbar.less
@@ -252,14 +252,15 @@
 ***************************************/
 
 .toggle-wrapper {
-  min-width: 200px;
+  white-space: nowrap;
   height: 24px;
 }
 
 .toggle-switch {
+  display: inline-flex;
   align-items: center;
   height: 24px;
-  width: 100%;
+  margin-right: 5px;
   background-color: @toggle-switch-bg;
   border: 2px solid @toggle-switch-bg;
   border-radius: @btn-border-radius-base;
@@ -271,7 +272,6 @@
   float: left;
   font-weight: normal;
   height: 100%;
-  width: 50%;
   text-align: center;
   margin: 0;
   cursor: pointer;
@@ -285,6 +285,7 @@
     height: 100%;
     line-height: 20px; // parent height minus border
     width: 100%;
+    padding: 0 15px;
     background: linear-gradient(
       to right,
       @toggle-switch-bg 50%,