[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

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:

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

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}`) ||

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()

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%,