settings: Add a development-only setting for less dense mode.

This should make it easier for us to iterate on a less-dense Zulip.

We create two classes on body, less_dense_mode and more_dense_mode, so
that it's easy as we refactor to separate the two concepts from things
like colors that are independent.

static/js/server_events_dispatch.js

@@ -320,6 +320,7 @@ exports.dispatch_normal_event = function dispatch_normal_event(event) {
     case 'update_display_settings':
         var user_display_settings = [
             'default_language',
+            'dense_mode',
             'emojiset',
             'high_contrast_mode',
             'night_mode',
@@ -345,6 +346,10 @@ exports.dispatch_normal_event = function dispatch_normal_event(event) {
         if (event.setting_name === 'high_contrast_mode') {
             $("body").toggleClass("high-contrast");
         }
+        if (event.setting_name === 'dense_mode') {
+            $("body").toggleClass("less_dense_mode");
+            $("body").toggleClass("more_dense_mode");
+        }
         if (event.setting_name === 'night_mode') {
             $("body").fadeOut(300);
             setTimeout(function () {

static/js/settings.js

@@ -84,9 +84,10 @@ function setup_settings_label() {
         realm_name_in_notifications: i18n.t("Include organization name in subject of missed message emails"),
 
         // display settings
-        night_mode: i18n.t("Night mode"),
+        dense_mode: i18n.t("Dense mode"),
         high_contrast_mode: i18n.t("High contrast mode"),
         left_side_userlist: i18n.t("User list on left sidebar in narrow windows"),
+        night_mode: i18n.t("Night mode"),
         twenty_four_hour_time: i18n.t("24-hour time (17:00 instead of 5:00 PM)"),
         translate_emoticons: i18n.t("Translate emoticons (convert <code>:)</code> to 😃 in messages)"),
     };

static/js/settings_display.js

@@ -70,6 +70,13 @@ exports.set_up = function () {
         change_display_setting(data, '#display-settings-status');
     });
 
+    $("#dense_mode").change(function () {
+        var dense_mode = this.checked;
+        var data = {};
+        data.dense_mode = JSON.stringify(dense_mode);
+        change_display_setting(data, '#display-settings-status');
+    });
+
     $("#night_mode").change(function () {
         exports.set_night_mode(this.checked);
     });

static/js/ui_init.js

@@ -125,6 +125,12 @@ function initialize_kitchen_sink_stuff() {
         $("body").addClass("high-contrast");
     }
 
+    if (!page_params.dense_mode) {
+        $("body").addClass("less_dense_mode");
+    } else {
+        $("body").addClass("more_dense_mode");
+    }
+
     $("#main_div").on("mouseover", ".message_row", function () {
         var row = $(this).closest(".message_row");
         message_hover(row);

static/templates/settings/display-settings.handlebars

@@ -23,6 +23,13 @@
             <h3 class="inline-block">{{t "Display settings" }}</h3>
             <div class="alert-notification" id="display-settings-status"></div>
 
+            {{#if page_params.development_environment}}
+            {{partial "settings_checkbox"
+              "setting_name" "dense_mode"
+              "is_checked" page_params.dense_mode
+              "label" settings_label.dense_mode}}
+            {{/if}}
+
             {{partial "settings_checkbox"
               "setting_name" "night_mode"
               "is_checked" page_params.night_mode

zerver/migrations/0171_userprofile_dense_mode.py

@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11.11 on 2018-05-24 18:45
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('zerver', '0170_submessage'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userprofile',
+            name='dense_mode',
+            field=models.BooleanField(default=True),
+        ),
+    ]

zerver/models.py

@@ -663,6 +663,7 @@ class UserProfile(AbstractBaseUser, PermissionsMixin):
     high_contrast_mode = models.BooleanField(default=False)  # type: bool
     night_mode = models.BooleanField(default=False)  # type: bool
     translate_emoticons = models.BooleanField(default=False)  # type: bool
+    dense_mode = models.BooleanField(default=True)  # type: bool
 
     # Hours to wait before sending another email to a user
     EMAIL_REMINDER_WAITPERIOD = 24
@@ -719,6 +720,7 @@ class UserProfile(AbstractBaseUser, PermissionsMixin):
     # Define the types of the various automatically managed properties
     property_types = dict(
         default_language=str,
+        dense_mode=bool,
         emojiset=str,
         left_side_userlist=bool,
         timezone=str,

zerver/tests/test_events.py

@@ -1483,7 +1483,6 @@ class EventsRegisterTest(ZulipTestCase):
     def do_set_user_display_settings_test(self, setting_name: str) -> None:
         """Test updating each setting in UserProfile.property_types dict."""
 
-        bool_change = [True, False, True]  # type: List[bool]
         test_changes = dict(
             emojiset = [u'apple', u'twitter'],
             default_language = [u'es', u'de', u'en'],
@@ -1503,7 +1502,10 @@ class EventsRegisterTest(ZulipTestCase):
             num_events = 2
         values = test_changes.get(setting_name)
         if property_type is bool:
-            values = bool_change
+            if getattr(self.user_profile, setting_name) is False:
+                values = [True, False, True]
+            else:
+                values = [False, True, False]
         if values is None:
             raise AssertionError('No test created for %s' % (setting_name))
 

zerver/tests/test_home.py

@@ -57,6 +57,7 @@ class HomeTest(ZulipTestCase):
             "debug_mode",
             "default_language",
             "default_language_name",
+            "dense_mode",
             "development_environment",
             "email",
             "emojiset",

zerver/views/user_settings.py

@@ -111,6 +111,7 @@ def json_change_settings(request: HttpRequest, user_profile: UserProfile,
 def update_display_settings_backend(
         request: HttpRequest, user_profile: UserProfile,
         twenty_four_hour_time: Optional[bool]=REQ(validator=check_bool, default=None),
+        dense_mode: Optional[bool]=REQ(validator=check_bool, default=None),
         high_contrast_mode: Optional[bool]=REQ(validator=check_bool, default=None),
         night_mode: Optional[bool]=REQ(validator=check_bool, default=None),
         translate_emoticons: Optional[bool]=REQ(validator=check_bool, default=None),