FIX: Allow reverting theme/text settings from cookie back to default

app/assets/javascripts/discourse/controllers/preferences/interface.js.es6

@@ -46,19 +46,12 @@ export default Ember.Controller.extend(PreferencesTabController, {
   },
 
   preferencesController: Ember.inject.controller("preferences"),
-  makeThemeDefault: true,
-  makeTextSizeDefault: true,
 
   @computed()
   availableLocales() {
     return JSON.parse(this.siteSettings.available_locales);
   },
 
-  @computed()
-  themeId() {
-    return currentThemeId();
-  },
-
   @computed
   textSizes() {
     return TEXT_SIZES.map(value => {
@@ -81,6 +74,16 @@ export default Ember.Controller.extend(PreferencesTabController, {
     previewTheme([id]);
   },
 
+  @computed("model.user_option.theme_ids", "themeId")
+  showThemeSetDefault(userOptionThemes, selectedTheme) {
+    return userOptionThemes[0] !== selectedTheme;
+  },
+
+  @computed("model.user_option.text_size", "textSize")
+  showTextSetDefault(userOptionTextSize, selectedTextSize) {
+    return userOptionTextSize !== selectedTextSize;
+  },
+
   homeChanged() {
     const siteHome = this.siteSettings.top_menu.split("|")[0].split(",")[0];
     const userHome = USER_HOMES[this.get("model.user_option.homepage_id")];
@@ -120,13 +123,17 @@ export default Ember.Controller.extend(PreferencesTabController, {
         .then(() => {
           this.set("saved", true);
 
-          if (!makeThemeDefault) {
+          if (makeThemeDefault) {
+            setLocalTheme([]);
+          } else {
             setLocalTheme(
               [this.get("themeId")],
               this.get("model.user_option.theme_key_seq")
             );
           }
-          if (!makeTextSizeDefault) {
+          if (makeTextSizeDefault) {
+            this.get("model").updateTextSizeCookie(null);
+          } else {
             this.get("model").updateTextSizeCookie(this.get("textSize"));
           }
 

app/assets/javascripts/discourse/models/user.js.es6

@@ -719,11 +719,15 @@ const User = RestModel.extend({
   },
 
   updateTextSizeCookie(newSize) {
-    const seq = this.get("user_option.text_size_seq");
-    $.cookie("text_size", `${newSize}|${seq}`, {
-      path: "/",
-      expires: 9999
-    });
+    if (newSize) {
+      const seq = this.get("user_option.text_size_seq");
+      $.cookie("text_size", `${newSize}|${seq}`, {
+        path: "/",
+        expires: 9999
+      });
+    } else {
+      $.removeCookie("text_size", { path: "/", expires: 1 });
+    }
   }
 });
 

app/assets/javascripts/discourse/routes/preferences-interface.js.es6

@@ -1,4 +1,5 @@
 import RestrictedUserRoute from "discourse/routes/restricted-user";
+import { currentThemeId } from "discourse/lib/theme-selector";
 
 export default RestrictedUserRoute.extend({
   showFooter: true,
@@ -6,7 +7,12 @@ export default RestrictedUserRoute.extend({
   setupController(controller, user) {
     controller.setProperties({
       model: user,
-      textSize: user.get("currentTextSize")
+      textSize: user.get("currentTextSize"),
+      themeId: currentThemeId(),
+      makeThemeDefault:
+        currentThemeId() === user.get("user_option.theme_ids")[0],
+      makeTextSizeDefault:
+        user.get("currentTextSize") === user.get("user_option.text_size")
     });
   }
 });

app/assets/javascripts/discourse/templates/preferences/interface.hbs

@@ -4,9 +4,11 @@
   <div class="controls">
     {{combo-box content=userSelectableThemes value=themeId}}
   </div>
-  <div class="controls">
-    {{preference-checkbox labelKey="user.theme_default_on_all_devices" checked=makeThemeDefault}}
-  </div>
+  {{#if showThemeSetDefault}}
+    <div class="controls">
+      {{preference-checkbox labelKey="user.theme_default_on_all_devices" checked=makeThemeDefault}}
+    </div>
+  {{/if}}
 </div>
 {{/if}}
 
@@ -15,9 +17,11 @@
   <div class="controls">
     {{combo-box valueAttribute="value" content=textSizes value=textSize onSelect=(action "selectTextSize")}}
   </div>
-  <div class="controls">
-    {{preference-checkbox labelKey="user.text_size_default_on_all_devices" checked=makeTextSizeDefault}}
-  </div>
+  {{#if showTextSetDefault}}
+    <div class="controls">
+      {{preference-checkbox labelKey="user.text_size_default_on_all_devices" checked=makeTextSizeDefault}}
+    </div>
+  {{/if}}
 </div>
 
 {{#if siteSettings.allow_user_locale}}

test/javascripts/acceptance/preferences-test.js.es6

@@ -141,7 +141,7 @@ QUnit.test("font size change", async assert => {
   await selectKitSelectRowByValue("largest", ".text-size .combobox");
 
   await savePreferences();
-  assert.equal($.cookie("text_size"), "larger|1", "cookie remains the same");
+  assert.equal($.cookie("text_size"), null, "cookie is removed");
 
   $.removeCookie("text_size");
 });