💻 Remove developer mode (#6039)

Removes: - the developer's mode toggle under the code editor - the mandatory developer's mode option in the class customization Fixes #5987 **How to test** - As a user, you should not be able to see the toggle for programmer's mode. Even if you are part of a class that has this a mandatory developer's mode customization. Whatever combination of adventure/quiz/puzzle sequence you open, the editor should have correct size. Use the parson puzzle on level 6 because it has 5 blocks which makes it higher than usual. - If you are a teacher, you should not be able to see the mandatory developer's mode option in the class customization.
hedyorg · Dec 13, 2024 · b14e163 · b14e163
1 parent 6e1c05e
commit b14e163
Show file tree

Hide file tree

Showing 70 changed files with 426 additions and 665 deletions.
diff --git a/app.py b/app.py
@@ -1323,10 +1323,6 @@ def hour_of_code(level, program_id=None):
 
     adventures_map = {a.short_name: a for a in adventures}
 
-    enforce_developers_mode = False
-    if 'other_settings' in customizations and 'developers_mode' in customizations['other_settings']:
-        enforce_developers_mode = True
-
     hide_cheatsheet = False
     if 'other_settings' in customizations and 'hide_cheatsheet' in customizations['other_settings']:
         hide_cheatsheet = True
@@ -1359,7 +1355,6 @@ def hour_of_code(level, program_id=None):
         HOC_tracking_pixel=True,
         customizations=customizations,
         hide_cheatsheet=hide_cheatsheet,
-        enforce_developers_mode=enforce_developers_mode,
         loaded_program=loaded_program,
         adventures=adventures,
         initial_tab=initial_tab,
@@ -1382,7 +1377,6 @@ def hour_of_code(level, program_id=None):
             adventures=adventures,
             initial_tab=initial_tab,
             current_user_name=current_user()['username'],
-            enforce_developers_mode=enforce_developers_mode,
         ))
 
 
@@ -1535,9 +1529,6 @@ def index(level, program_id):
 
     adventures_map = {a.short_name: a for a in adventures}
 
-    enforce_developers_mode = False
-    if 'other_settings' in customizations and 'developers_mode' in customizations['other_settings']:
-        enforce_developers_mode = True
     hide_cheatsheet = False
     if 'other_settings' in customizations and 'hide_cheatsheet' in customizations['other_settings']:
         hide_cheatsheet = True
@@ -1593,7 +1584,6 @@ def index(level, program_id):
         next_level=next_level,
         customizations=customizations,
         hide_cheatsheet=hide_cheatsheet,
-        enforce_developers_mode=enforce_developers_mode,
         loaded_program=loaded_program,
         adventures=adventures,
         initial_tab=initial_tab,
@@ -1613,7 +1603,6 @@ def index(level, program_id):
         adventures_for_index=adventures_for_index,
         # See initialize.ts
         javascript_page_options=dict(
-            enforce_developers_mode=enforce_developers_mode,
             page='code',  # change to tryit
             level=level_number,
             lang=g.lang,
@@ -1766,9 +1755,6 @@ def tryit(level, program_id):
 
     adventures_map = {a.short_name: a for a in adventures}
 
-    enforce_developers_mode = False
-    if 'other_settings' in customizations and 'developers_mode' in customizations['other_settings']:
-        enforce_developers_mode = True
     hide_cheatsheet = False
     if 'other_settings' in customizations and 'hide_cheatsheet' in customizations['other_settings']:
         hide_cheatsheet = True
@@ -1824,7 +1810,6 @@ def tryit(level, program_id):
         next_level=next_level,
         customizations=customizations,
         hide_cheatsheet=hide_cheatsheet,
-        enforce_developers_mode=enforce_developers_mode,
         loaded_program=loaded_program,
         adventures=adventures,
         initial_tab=initial_tab,
@@ -1844,7 +1829,6 @@ def tryit(level, program_id):
         adventures_for_index=adventures_for_index,
         # See initialize.ts
         javascript_page_options=dict(
-            enforce_developers_mode=enforce_developers_mode,
             page='tryit',
             level=level_number,
             lang=g.lang,
@@ -2084,7 +2068,6 @@ def get_specific_adventure(name, level, mode):
                            max_level=hedy.HEDY_MAX_LEVEL,
                            customizations=customizations,
                            hide_cheatsheet=None,
-                           enforce_developers_mode=None,
                            teacher_adventures=[],
                            adventures=adventures,
                            initial_tab=initial_tab,

diff --git a/messages.pot b/messages.pot
@@ -524,9 +524,6 @@ msgstr ""
 msgid "destroy_profile"
 msgstr ""
 
-msgid "developers_mode"
-msgstr ""
-
 msgid "directly_available"
 msgstr ""
 
@@ -968,9 +965,6 @@ msgstr ""
 msgid "male"
 msgstr ""
 
-msgid "mandatory_mode"
-msgstr ""
-
 msgid "more_info"
 msgstr ""
 

diff --git a/static/js/app.ts b/static/js/app.ts
@@ -193,7 +193,6 @@ export interface InitializeCodePageOptions {
   readonly initial_tab: string;
   readonly current_user_name?: string;
   readonly suppress_save_and_load_for_slides?: boolean;
-  readonly enforce_developers_mode?: boolean;
 }
 
 /**
@@ -266,7 +265,7 @@ export function initializeCodePage(options: InitializeCodePageOptions) {
         adventure.save_info = 'local-storage';
       }
     }
-    reconfigurePageBasedOnTab(options.enforce_developers_mode);
+    reconfigurePageBasedOnTab();
     checkNow();
     theLocalSaveWarning.switchTab();
   });
@@ -1442,40 +1441,6 @@ function createModal(level:number ){
   modal.repair(editor, 0, title);
 }
 
-export function setDevelopersMode(event='click', enforceDevMode: boolean) {
-  let enable: boolean = false;
-  switch (event) {
-    case 'load':
-      const lastSelection = window.localStorage.getItem('developer_mode') === 'true';
-      enable = enforceDevMode || lastSelection;
-      $('#developers_toggle').prop('checked', enable);
-      break;
-
-    case 'click':
-      // Toggled
-      enable = $('#developers_toggle').prop('checked');
-      break;
-  }
-  if (!enforceDevMode) window.localStorage.setItem('developer_mode', `${enable}`)
-  toggleDevelopersMode(!!enforceDevMode)
-}
-
-function toggleDevelopersMode(enforceDevMode: boolean) {
-  const enable = window.localStorage.getItem('developer_mode') === 'true' || enforceDevMode;
-  // DevMode hides the tabs and makes resizable elements track the appropriate size.
-  // (Driving from HTML attributes is more flexible on what gets resized, and avoids duplicating
-  // size literals between HTML and JavaScript).
-  $('#adventures_tab').toggle(!enable || currentTab === 'quiz' || currentTab === 'parsons');
-  // this is for the new design, it needs to be removed once we ship it
-  $('#adventures').toggle(!enable || currentTab === 'quiz' || currentTab === 'parsons');
-  // Parsons dont need a fixed height
-  if (currentTab === 'parsons') return
-  $('[data-devmodeheight]').each((_, el) => {
-    const heights = $(el).data('devmodeheight').split(',') as string[];
-    $(el).css('height', heights[enable ? 1 : 0]);
-  });
-}
-
 export function saveForTeacherTable(table: string) {
   let show_table = window.localStorage.getItem(table);
   window.localStorage.setItem(table, (show_table !== 'true').toString())
@@ -1709,16 +1674,16 @@ function resetWindow() {
  * Update page element visibilities/states based on the state of the current tab
  */
 function updatePageElements() {
-  const isCodeTab = !(currentTab === 'quiz' || currentTab === 'parsons');
-
+  const isParsonsTab = currentTab === 'parsons'
+  const isCodeTab = !(currentTab === 'quiz' || isParsonsTab);
   // .toggle(bool) sets visibility based on the boolean
 
-  // Explanation area is visible for non-code tabs, or when we are NOT in developer's mode
-  $('#adventures_tab').toggle(!(isCodeTab && $('#developers_toggle').is(":checked")));
-  $('#developers_toggle_container').toggle(isCodeTab);
+  $('#adventures_tab').toggle(true);
+  // this is for the new design, it needs to be removed once we ship it
+  $('#adventures').toggle(true);
   $('#level_header input').toggle(isCodeTab);
-  $('#parsons_code_container').toggle(currentTab === 'parsons');
-  $('#editor_area').toggle(isCodeTab || currentTab === 'parsons');
+  $('#parsons_code_container').toggle(isParsonsTab);
+  $('#editor_area').toggle(isCodeTab || isParsonsTab);
   $('#editor').toggle(isCodeTab);
   $('#debug_container').toggle(isCodeTab);
   $('#program_name_container').toggle(isCodeTab);
@@ -1762,7 +1727,9 @@ function updatePageElements() {
     $('#commands_dropdown_container').show()
     $('#hand_in_button').show()
   }
-  if (currentTab === 'parsons'){    
+  if (currentTab === 'parsons'){
+    $('[data-view="if-submitted"]').toggle(false);
+    $('[data-view="if-not-submitted"]').toggle(true);
     $('#share_program_button').hide()
     $('#read_outloud_button_container').hide()
     $('#cheatsheet_dropdown_container').hide()
@@ -1782,23 +1749,36 @@ function updatePageElements() {
 /**
  * After switching tabs, show/hide elements
  */
-function reconfigurePageBasedOnTab(enforceDevMode?: boolean) {
+function reconfigurePageBasedOnTab() {
   resetWindow();
 
   updatePageElements();
-  toggleDevelopersMode(!!enforceDevMode);
+
   if (currentTab === 'parsons') {
     loadParsonsExercise(theLevel, 1);
-    // remove the fixed height from the editor
+    // parsons could have 5 lines to arrange which requires more space, so remove the fixed height from the editor
     document.getElementById('code_editor')!.style.height = '100%'
     document.getElementById('code_output')!.style.height = '100%'
-    return;
-  }
 
-  const adventure = theAdventures[currentTab];
-  if (adventure) {
-    $ ('#program_name').val(adventure.save_name);
-    theGlobalEditor.contents = adventure.editor_contents;
+    // only relevant for the old hedy page; remove lines below when we migrate to tryit
+    show_editor();
+    $('#fold_in_toggle_container').hide();
+  } else {
+    // deriving from HTML attributes is more flexible on what gets resized, and avoids duplicating
+    // size literals between HTML and JavaScript.
+    $('[data-editorheight]').each((_, el) => {
+      const height = $(el).data('editorheight');
+      $(el).css('height', height);
+    });
+
+    // only relevant for the old hedy page; remove lines below when we migrate to tryit
+    $('#fold_in_toggle_container').show();
+
+    const adventure = theAdventures[currentTab];
+    if (adventure) {
+      $ ('#program_name').val(adventure.save_name);
+      theGlobalEditor.contents = adventure.editor_contents;
+    }
   }
 }
 

diff --git a/static/js/appbundle.js b/static/js/appbundle.js
@@ -60650,7 +60650,6 @@ ${o3}` : i3;
     save_customizations: () => save_customizations,
     select_profile_image: () => select_profile_image,
     setDateLevelInputColor: () => setDateLevelInputColor,
-    setDevelopersMode: () => setDevelopersMode,
     set_explore_favourite: () => set_explore_favourite,
     set_favourite_program: () => set_favourite_program,
     show_doc_section: () => show_doc_section,
@@ -120738,7 +120737,7 @@ def note_with_error(value, err):
           adventure.save_info = "local-storage";
         }
       }
-      reconfigurePageBasedOnTab(options.enforce_developers_mode);
+      reconfigurePageBasedOnTab();
       checkNow();
       theLocalSaveWarning.switchTab();
     });
@@ -121637,33 +121636,6 @@ def note_with_error(value, err):
     let title = ClientMessages["Program_repair"];
     modal.repair(editor, 0, title);
   }
-  function setDevelopersMode(event2 = "click", enforceDevMode) {
-    let enable = false;
-    switch (event2) {
-      case "load":
-        const lastSelection = window.localStorage.getItem("developer_mode") === "true";
-        enable = enforceDevMode || lastSelection;
-        $("#developers_toggle").prop("checked", enable);
-        break;
-      case "click":
-        enable = $("#developers_toggle").prop("checked");
-        break;
-    }
-    if (!enforceDevMode)
-      window.localStorage.setItem("developer_mode", `${enable}`);
-    toggleDevelopersMode(!!enforceDevMode);
-  }
-  function toggleDevelopersMode(enforceDevMode) {
-    const enable = window.localStorage.getItem("developer_mode") === "true" || enforceDevMode;
-    $("#adventures_tab").toggle(!enable || currentTab === "quiz" || currentTab === "parsons");
-    $("#adventures").toggle(!enable || currentTab === "quiz" || currentTab === "parsons");
-    if (currentTab === "parsons")
-      return;
-    $("[data-devmodeheight]").each((_, el3) => {
-      const heights = $(el3).data("devmodeheight").split(",");
-      $(el3).css("height", heights[enable ? 1 : 0]);
-    });
-  }
   function saveForTeacherTable(table) {
     let show_table = window.localStorage.getItem(table);
     window.localStorage.setItem(table, (show_table !== "true").toString());
@@ -121853,12 +121825,13 @@ def note_with_error(value, err):
   }
   function updatePageElements() {
     var _a3;
-    const isCodeTab = !(currentTab === "quiz" || currentTab === "parsons");
-    $("#adventures_tab").toggle(!(isCodeTab && $("#developers_toggle").is(":checked")));
-    $("#developers_toggle_container").toggle(isCodeTab);
+    const isParsonsTab = currentTab === "parsons";
+    const isCodeTab = !(currentTab === "quiz" || isParsonsTab);
+    $("#adventures_tab").toggle(true);
+    $("#adventures").toggle(true);
     $("#level_header input").toggle(isCodeTab);
-    $("#parsons_code_container").toggle(currentTab === "parsons");
-    $("#editor_area").toggle(isCodeTab || currentTab === "parsons");
+    $("#parsons_code_container").toggle(isParsonsTab);
+    $("#editor_area").toggle(isCodeTab || isParsonsTab);
     $("#editor").toggle(isCodeTab);
     $("#debug_container").toggle(isCodeTab);
     $("#program_name_container").toggle(isCodeTab);
@@ -121886,6 +121859,8 @@ def note_with_error(value, err):
       $("#hand_in_button").show();
     }
     if (currentTab === "parsons") {
+      $('[data-view="if-submitted"]').toggle(false);
+      $('[data-view="if-not-submitted"]').toggle(true);
       $("#share_program_button").hide();
       $("#read_outloud_button_container").hide();
       $("#cheatsheet_dropdown_container").hide();
@@ -121901,20 +121876,26 @@ def note_with_error(value, err):
       $("#hand_in_button").hide();
     }
   }
-  function reconfigurePageBasedOnTab(enforceDevMode) {
+  function reconfigurePageBasedOnTab() {
     resetWindow();
     updatePageElements();
-    toggleDevelopersMode(!!enforceDevMode);
     if (currentTab === "parsons") {
       loadParsonsExercise(theLevel, 1);
       document.getElementById("code_editor").style.height = "100%";
       document.getElementById("code_output").style.height = "100%";
-      return;
-    }
-    const adventure = theAdventures[currentTab];
-    if (adventure) {
-      $("#program_name").val(adventure.save_name);
-      theGlobalEditor.contents = adventure.editor_contents;
+      show_editor();
+      $("#fold_in_toggle_container").hide();
+    } else {
+      $("[data-editorheight]").each((_, el3) => {
+        const height = $(el3).data("editorheight");
+        $(el3).css("height", height);
+      });
+      $("#fold_in_toggle_container").show();
+      const adventure = theAdventures[currentTab];
+      if (adventure) {
+        $("#program_name").val(adventure.save_name);
+        theGlobalEditor.contents = adventure.editor_contents;
+      }
     }
   }
   function closeContainingModal(target) {

diff --git a/static/js/appbundle.js.map b/static/js/appbundle.js.map
diff --git a/templates/customize-class.html b/templates/customize-class.html
@@ -67,13 +67,6 @@ <h3 class="px-4"><u>{{_('other_settings')}}</u></h3>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr>
-                                <td class="text-left border-t border-r border-gray-400">{{_('mandatory_mode')}}</td>
-                                <td class="border-t border-gray-400">
-                                    <input class="other_settings_checkbox" id="developers_mode" data-cy="developers_mode" type="checkbox" {%
-                                        if "developers_mode" in customizations['other_settings'] %}checked{% endif %}>
-                                </td>
-                            </tr>
                             <tr>
                                 <td class="text-left border-t border-r border-gray-400">{{_('all_class_highscores')}}
                                 </td>