UX: Enable 'viewport based mobile mode' by default (#35036)

https://meta.discourse.org/t/384280

Co-authored-by: Sérgio Saquetim <1108771+megothss@users.noreply.github.com>

app/assets/javascripts/discourse/app/models/site.js

@@ -121,9 +121,8 @@ export default class Site extends RestModel {
       }
 
       deprecated(
-        "Accessing `site.mobileView` or `site.desktopView` during the site initialization phase is deprecated. " +
-          "In future updates, the mobile mode will be determined by the viewport size and as consequence using " +
-          "these values during initialization can lead to errors and inconsistencies when the browser window is " +
+        "Accessing `site.mobileView` or `site.desktopView` during the site initialization " +
+          "can lead to errors and inconsistencies when the browser window is " +
           "resized. Please move these checks to a component, transformer, or API callback that executes during page" +
           " rendering.",
         {
@@ -134,6 +133,10 @@ export default class Site extends RestModel {
       );
     }
 
+    if (Mobile.mobileForced) {
+      return true;
+    }
+
     if (this.siteSettings.viewport_based_mobile_mode) {
       return withSilencedDeprecations(
         "discourse.static-viewport-initialization",

app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js

@@ -155,7 +155,11 @@ acceptance(
       assert.dom(".sidebar-container").exists("displays the sidebar");
     });
 
-    test("button to toggle between mobile and desktop view on touch devices ", async function (assert) {
+    test("button to toggle between legacy mobile and desktop view on touch devices", async function (assert) {
+      this.container.lookup(
+        "service:site-settings"
+      ).viewport_based_mobile_mode = false;
+
       const capabilities = this.container.lookup("service:capabilities");
       Sinon.stub(capabilities, "touch").value(true);
 

config/locales/server.en.yml

@@ -2760,7 +2760,7 @@ en:
     view_raw_email_allowed_groups: "Groups which can view the raw email content of a post if it was created by an incoming email. This includes email headers and other technical information."
     rich_editor: "Enable the rich editor for the composer so all users can switch between the current Markdown mode and the new rich text editor for more intuitive and user-friendly composition."
     default_composition_mode: "Set the default mode for your community's composer. Rich text mode provides a more modern, familiar writing experience for most users, while Markdown mode may be suitable for more technical audiences. Members can use a toggle in the composer toolbar to switch between modes."
-    viewport_based_mobile_mode: "EXPERIMENTAL: Disable the user-agent-based mobile/desktop modes and use viewport width instead."
+    viewport_based_mobile_mode: "Use viewport width to determine mobile/desktop modes. This setting will be removed soon. If you find the need to turn it off, please let us know <a href='https://meta.discourse.org/t/384280'>on Meta</a>."
     reviewable_ui_refresh: "Groups that can use the experimental new UI in the review queue."
     content_localization_enabled: "Displays localized content for users based on their browser or user language preferences. Such content may include categories, tags, posts, and topics. Supported locales are set in 'content localization supported locales'."
     content_localization_supported_locales: "List of supported locales that user content can be translated to. Requires 'content localization enabled'."

config/site_settings.yml

@@ -3037,7 +3037,7 @@ developer:
     hidden: true
     client: true
   viewport_based_mobile_mode:
-    default: false
+    default: true
     client: true
 
 navigation:

plugins/chat/spec/system/sidebars_spec.rb

@@ -33,9 +33,8 @@ RSpec.describe "Navigation", type: :system do
       expect(page).to have_no_css(".channels-list")
     end
 
-    context "when visiting on mobile" do
+    context "when visiting on mobile", mobile: true do
       it "has no sidebar" do
-        visit("/?mobile_view=1")
         chat_page.visit_channel(category_channel_2)
 
         expect(page).to have_no_css("#d-sidebar")
@@ -53,9 +52,8 @@ RSpec.describe "Navigation", type: :system do
     end
   end
 
-  context "when visiting on mobile" do
+  context "when visiting on mobile", mobile: true do
     it "has no sidebar" do
-      visit("/?mobile_view=1")
       chat_page.visit_channel(category_channel_2)
 
       expect(page).to have_no_css(".channels-list")

spec/system/user_page/user_preferences_navigation_spec.rb

@@ -7,7 +7,7 @@ describe "User preferences | Navigation menu", type: :system do
 
   describe "when visiting the user's preferences page" do
     it "should allow the user to scroll the horizontal navigation menu when window width is narrow" do
-      resize_window(width: 400) do
+      resize_window(width: 650) do # narrow enough to hide some links, but higher than 640px so we don't trigger mobile styling
         sign_in(user)
 
         user_preferences_page.visit(user)

spec/system/viewing_sidebar_mobile_spec.rb

@@ -59,6 +59,8 @@ describe "Viewing sidebar mobile", type: :system, mobile: true do
   end
 
   it "toggles to desktop view after clicking on the toggle to desktop view button" do
+    SiteSetting.viewport_based_mobile_mode = false
+
     visit("/latest")
 
     expect(page).to have_css(".mobile-view")