Add settings screen for global diff preferences

The account preferences are available under the Settings menu, but not
the diff preferences. The diff preferences are only accessible from
the diff screen by clicking on the gear icon. It's confusing to users
that they cannot find all preferences under the Settings menu. This is
why it makes sense to make the diff preferences available in the
Settings menu too.

There are a few diff settings which are only applicable when looking
at a concrete file diff and which are not stored on server side
(show/hide left side, language). These settings are not available when
the diff preferences are accessed from the Settings menu.

The diff preferences in the Settings menu are rendered with the same
style as the diff preferences in the popup. This makes it easy for
users to see that these are actually the same settings, just accessed
through different paths.

Change-Id: I35f45a4784592b9ce2fe35d86fd6974acc14f5c6
Signed-off-by: Edwin Kempin <ekempin@google.com>

gerrit-common/src/main/java/com/google/gerrit/common/PageLinks.java

@@ -25,6 +25,7 @@ import com.google.gwtorm.client.KeyUtil;
 public class PageLinks {
   public static final String SETTINGS = "/settings/";
   public static final String SETTINGS_PREFERENCES = "/settings/preferences";
+  public static final String SETTINGS_DIFF_PREFERENCES = "/settings/diff-preferences";
   public static final String SETTINGS_SSHKEYS = "/settings/ssh-keys";
   public static final String SETTINGS_GPGKEYS = "/settings/gpg-keys";
   public static final String SETTINGS_HTTP_PASSWORD = "/settings/http-password";

gerrit-gwtui/src/main/java/com/google/gerrit/client/Dispatcher.java

@@ -28,6 +28,7 @@ import static com.google.gerrit.common.PageLinks.REGISTER;
 import static com.google.gerrit.common.PageLinks.SETTINGS;
 import static com.google.gerrit.common.PageLinks.SETTINGS_AGREEMENTS;
 import static com.google.gerrit.common.PageLinks.SETTINGS_CONTACT;
+import static com.google.gerrit.common.PageLinks.SETTINGS_DIFF_PREFERENCES;
 import static com.google.gerrit.common.PageLinks.SETTINGS_EXTENSION;
 import static com.google.gerrit.common.PageLinks.SETTINGS_GPGKEYS;
 import static com.google.gerrit.common.PageLinks.SETTINGS_HTTP_PASSWORD;
@@ -41,6 +42,7 @@ import static com.google.gerrit.common.PageLinks.toChangeQuery;
 
 import com.google.gerrit.client.account.MyAgreementsScreen;
 import com.google.gerrit.client.account.MyContactInformationScreen;
+import com.google.gerrit.client.account.MyDiffPreferencesScreen;
 import com.google.gerrit.client.account.MyGpgKeysScreen;
 import com.google.gerrit.client.account.MyGroupsScreen;
 import com.google.gerrit.client.account.MyIdentitiesScreen;
@@ -527,6 +529,10 @@ public class Dispatcher {
           return new MyPreferencesScreen();
         }
 
+        if (matchExact(SETTINGS_DIFF_PREFERENCES, token)) {
+          return new MyDiffPreferencesScreen();
+        }
+
         if (matchExact(SETTINGS_PROJECTS, token)) {
           return new MyWatchedProjectsScreen();
         }

gerrit-gwtui/src/main/java/com/google/gerrit/client/account/AccountConstants.java

@@ -52,6 +52,7 @@ public interface AccountConstants extends Constants {
   String tabAccountSummary();
   String tabAgreements();
   String tabContactInformation();
+  String tabDiffPreferences();
   String tabGpgKeys();
   String tabHttpAccess();
   String tabMyGroups();

gerrit-gwtui/src/main/java/com/google/gerrit/client/account/AccountConstants.properties

@@ -38,6 +38,7 @@ changeScreenNewUi = New Screen
 tabAccountSummary = Profile
 tabAgreements = Agreements
 tabContactInformation = Contact Information
+tabDiffPreferences = Diff Preferences
 tabGpgKeys = GPG Public Keys
 tabHttpAccess = HTTP Password
 tabMyGroups = Groups

gerrit-gwtui/src/main/java/com/google/gerrit/client/account/MyDiffPreferencesScreen.java

@@ -0,0 +1,40 @@
+// Copyright (C) 2015 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.gerrit.client.account;
+
+import com.google.gerrit.client.Gerrit;
+import com.google.gerrit.client.diff.PreferencesBox;
+import com.google.gwt.user.client.ui.FlowPanel;
+
+public class MyDiffPreferencesScreen extends SettingsScreen {
+
+  @Override
+  protected void onInitUI() {
+    super.onInitUI();
+
+    PreferencesBox pb = new PreferencesBox(null);
+    pb.set(DiffPreferences.create(Gerrit.getAccountDiffPreference()));
+    FlowPanel p = new FlowPanel();
+    p.setStyleName(pb.getStyle().dialog());
+    p.add(pb);
+    add(p);
+  }
+
+  @Override
+  protected void onLoad() {
+    super.onLoad();
+    display();
+  }
+}

gerrit-gwtui/src/main/java/com/google/gerrit/client/account/SettingsScreen.java

@@ -37,6 +37,7 @@ public abstract class SettingsScreen extends MenuScreen {
 
     linkByGerrit(Util.C.tabAccountSummary(), PageLinks.SETTINGS);
     linkByGerrit(Util.C.tabPreferences(), PageLinks.SETTINGS_PREFERENCES);
+    linkByGerrit(Util.C.tabDiffPreferences(), PageLinks.SETTINGS_DIFF_PREFERENCES);
     linkByGerrit(Util.C.tabWatchedProjects(), PageLinks.SETTINGS_PROJECTS);
     linkByGerrit(Util.C.tabContactInformation(), PageLinks.SETTINGS_CONTACT);
     if (Gerrit.info().hasSshd()) {

gerrit-gwtui/src/main/java/com/google/gerrit/client/diff/PreferencesBox.java

@@ -35,6 +35,8 @@ import com.google.gerrit.reviewdb.client.AccountDiffPreference.Whitespace;
 import com.google.gerrit.reviewdb.client.Patch;
 import com.google.gerrit.reviewdb.client.Patch.ChangeType;
 import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.Style.Visibility;
 import com.google.gwt.event.dom.client.ChangeEvent;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.KeyDownEvent;
@@ -54,6 +56,7 @@ import com.google.gwt.user.client.ui.HTMLPanel;
 import com.google.gwt.user.client.ui.ListBox;
 import com.google.gwt.user.client.ui.PopupPanel;
 import com.google.gwt.user.client.ui.ToggleButton;
+import com.google.gwt.user.client.ui.UIObject;
 
 import net.codemirror.mode.ModeInfo;
 import net.codemirror.mode.ModeInjector;
@@ -62,11 +65,11 @@ import net.codemirror.theme.ThemeLoader;
 import java.util.Objects;
 
 /** Displays current diff preferences. */
-class PreferencesBox extends Composite {
+public class PreferencesBox extends Composite {
   interface Binder extends UiBinder<HTMLPanel, PreferencesBox> {}
   private static final Binder uiBinder = GWT.create(Binder.class);
 
-  interface Style extends CssResource {
+  public interface Style extends CssResource {
     String dialog();
   }
 
@@ -76,6 +79,7 @@ class PreferencesBox extends Composite {
   private Timer updateContextTimer;
 
   @UiField Style style;
+  @UiField Element header;
   @UiField Anchor close;
   @UiField ListBox ignoreWhitespace;
   @UiField NpIntTextBox tabWidth;
@@ -87,6 +91,7 @@ class PreferencesBox extends Composite {
   @UiField ToggleButton whitespaceErrors;
   @UiField ToggleButton showTabs;
   @UiField ToggleButton lineNumbers;
+  @UiField Element leftSideLabel;
   @UiField ToggleButton leftSide;
   @UiField ToggleButton emptyPane;
   @UiField ToggleButton topMenu;
@@ -95,17 +100,24 @@ class PreferencesBox extends Composite {
   @UiField ToggleButton expandAllComments;
   @UiField ToggleButton renderEntireFile;
   @UiField ListBox theme;
+  @UiField Element modeLabel;
   @UiField ListBox mode;
   @UiField Button apply;
   @UiField Button save;
 
-  PreferencesBox(SideBySide view) {
+  public PreferencesBox(SideBySide view) {
     this.view = view;
 
     initWidget(uiBinder.createAndBindUi(this));
     initIgnoreWhitespace();
     initTheme();
-    initMode();
+
+    if (view != null) {
+      initMode();
+    } else {
+      UIObject.setVisible(header, false);
+      apply.getElement().getStyle().setVisibility(Visibility.HIDDEN);
+    }
   }
 
   @Override
@@ -113,40 +125,47 @@ class PreferencesBox extends Composite {
     super.onLoad();
 
     save.setVisible(Gerrit.isSignedIn());
-    addDomHandler(new KeyDownHandler() {
-      @Override
-      public void onKeyDown(KeyDownEvent event) {
-        if (event.getNativeKeyCode() == KEY_ESCAPE
-            || event.getNativeKeyCode() == ',') {
-          close();
-        }
-      }
-    }, KeyDownEvent.getType());
 
-    updateContextTimer = new Timer() {
-      @Override
-      public void run() {
-        if (prefs.context() == WHOLE_FILE_CONTEXT) {
-          contextEntireFile.setValue(true);
+    if (view != null) {
+      addDomHandler(new KeyDownHandler() {
+        @Override
+        public void onKeyDown(KeyDownEvent event) {
+          if (event.getNativeKeyCode() == KEY_ESCAPE
+              || event.getNativeKeyCode() == ',') {
+            close();
+          }
         }
-        if (view.canRenderEntireFile(prefs)) {
-          renderEntireFile.setEnabled(true);
-          renderEntireFile.setValue(prefs.renderEntireFile());
-        } else {
-          renderEntireFile.setValue(false);
-          renderEntireFile.setEnabled(false);
+      }, KeyDownEvent.getType());
+
+      updateContextTimer = new Timer() {
+        @Override
+        public void run() {
+          if (prefs.context() == WHOLE_FILE_CONTEXT) {
+            contextEntireFile.setValue(true);
+          }
+          if (view.canRenderEntireFile(prefs)) {
+            renderEntireFile.setEnabled(true);
+            renderEntireFile.setValue(prefs.renderEntireFile());
+          } else {
+            renderEntireFile.setValue(false);
+            renderEntireFile.setEnabled(false);
+          }
+          view.setContext(prefs.context());
         }
-        view.setContext(prefs.context());
-      }
-    };
+      };
+    }
   }
 
-  void set(DiffPreferences prefs) {
+  public Style getStyle() {
+    return style;
+  }
+
+  public void set(DiffPreferences prefs) {
     this.prefs = prefs;
 
     setIgnoreWhitespace(prefs.ignoreWhitespace());
     tabWidth.setIntValue(prefs.tabSize());
-    if (Patch.COMMIT_MSG.equals(view.getPath())) {
+    if (view != null && Patch.COMMIT_MSG.equals(view.getPath())) {
       lineLength.setEnabled(false);
       lineLength.setIntValue(72);
     } else {
@@ -157,17 +176,22 @@ class PreferencesBox extends Composite {
     whitespaceErrors.setValue(prefs.showWhitespaceErrors());
     showTabs.setValue(prefs.showTabs());
     lineNumbers.setValue(prefs.showLineNumbers());
-    leftSide.setValue(view.diffTable.isVisibleA());
     emptyPane.setValue(!prefs.hideEmptyPane());
-    leftSide.setEnabled(!(prefs.hideEmptyPane()
-        && view.diffTable.getChangeType() == ChangeType.ADDED));
+    if (view != null) {
+      leftSide.setValue(view.diffTable.isVisibleA());
+      leftSide.setEnabled(!(prefs.hideEmptyPane()
+          && view.diffTable.getChangeType() == ChangeType.ADDED));
+    } else {
+      UIObject.setVisible(leftSideLabel, false);
+      leftSide.setVisible(false);
+    }
     topMenu.setValue(!prefs.hideTopMenu());
     autoHideDiffTableHeader.setValue(!prefs.autoHideDiffTableHeader());
     manualReview.setValue(prefs.manualReview());
     expandAllComments.setValue(prefs.expandAllComments());
     setTheme(prefs.theme());
 
-    if (view.canRenderEntireFile(prefs)) {
+    if (view == null || view.canRenderEntireFile(prefs)) {
       renderEntireFile.setValue(prefs.renderEntireFile());
       renderEntireFile.setEnabled(true);
     } else {
@@ -175,22 +199,31 @@ class PreferencesBox extends Composite {
       renderEntireFile.setEnabled(false);
     }
 
-    mode.setEnabled(prefs.syntaxHighlighting());
-    if (prefs.syntaxHighlighting()) {
-      setMode(view.getCmFromSide(DisplaySide.B).getStringOption("mode"));
+    if (view != null) {
+      mode.setEnabled(prefs.syntaxHighlighting());
+      if (prefs.syntaxHighlighting()) {
+        setMode(view.getCmFromSide(DisplaySide.B).getStringOption("mode"));
+      }
+    } else {
+      UIObject.setVisible(modeLabel, false);
+      mode.setVisible(false);
     }
 
-    switch (view.getIntraLineStatus()) {
-      case OFF:
-      case OK:
-        intralineDifference.setValue(prefs.intralineDifference());
-        break;
+    if (view != null) {
+      switch (view.getIntraLineStatus()) {
+        case OFF:
+        case OK:
+          intralineDifference.setValue(prefs.intralineDifference());
+          break;
 
-      case TIMEOUT:
-      case FAILURE:
-        intralineDifference.setValue(false);
-        intralineDifference.setEnabled(false);
-        break;
+        case TIMEOUT:
+        case FAILURE:
+          intralineDifference.setValue(false);
+          intralineDifference.setEnabled(false);
+          break;
+      }
+    } else {
+      intralineDifference.setValue(prefs.intralineDifference());
     }
 
     if (prefs.context() == WHOLE_FILE_CONTEXT) {
@@ -207,13 +240,17 @@ class PreferencesBox extends Composite {
   void onIgnoreWhitespace(@SuppressWarnings("unused") ChangeEvent e) {
     prefs.ignoreWhitespace(Whitespace.valueOf(
         ignoreWhitespace.getValue(ignoreWhitespace.getSelectedIndex())));
-    view.reloadDiffInfo();
+    if (view != null) {
+      view.reloadDiffInfo();
+    }
   }
 
   @UiHandler("intralineDifference")
   void onIntralineDifference(ValueChangeEvent<Boolean> e) {
     prefs.intralineDifference(e.getValue());
-    view.setShowIntraline(prefs.intralineDifference());
+    if (view != null) {
+      view.setShowIntraline(prefs.intralineDifference());
+    }
   }
 
   @UiHandler("context")
@@ -239,7 +276,9 @@ class PreferencesBox extends Composite {
       return;
     }
     prefs.context(c);
-    updateContextTimer.schedule(200);
+    if (view != null) {
+      updateContextTimer.schedule(200);
+    }
   }
 
   @UiHandler("contextEntireFile")
@@ -257,7 +296,9 @@ class PreferencesBox extends Composite {
       context.setFocus(true);
       context.setSelectionRange(0, context.getText().length());
     }
-    updateContextTimer.schedule(200);
+    if (view != null) {
+      updateContextTimer.schedule(200);
+    }
   }
 
   @UiHandler("tabWidth")
@@ -265,14 +306,16 @@ class PreferencesBox extends Composite {
     String v = e.getValue();
     if (v != null && v.length() > 0) {
       prefs.tabSize(Math.max(1, Integer.parseInt(v)));
-      view.operation(new Runnable() {
-        @Override
-        public void run() {
-          int v = prefs.tabSize();
-          view.getCmFromSide(DisplaySide.A).setOption("tabSize", v);
-          view.getCmFromSide(DisplaySide.B).setOption("tabSize", v);
-        }
-      });
+      if (view != null) {
+        view.operation(new Runnable() {
+          @Override
+          public void run() {
+            int v = prefs.tabSize();
+            view.getCmFromSide(DisplaySide.A).setOption("tabSize", v);
+            view.getCmFromSide(DisplaySide.B).setOption("tabSize", v);
+          }
+        });
+      }
     }
   }
 
@@ -281,30 +324,38 @@ class PreferencesBox extends Composite {
     String v = e.getValue();
     if (v != null && v.length() > 0) {
       prefs.lineLength(Math.max(1, Integer.parseInt(v)));
-      view.operation(new Runnable() {
-        @Override
-        public void run() {
-          view.setLineLength(prefs.lineLength());
-        }
-      });
+      if (view != null) {
+        view.operation(new Runnable() {
+          @Override
+          public void run() {
+            view.setLineLength(prefs.lineLength());
+          }
+        });
+      }
     }
   }
   @UiHandler("expandAllComments")
   void onExpandAllComments(ValueChangeEvent<Boolean> e) {
     prefs.expandAllComments(e.getValue());
-    view.getCommentManager().setExpandAllComments(prefs.expandAllComments());
+    if (view != null) {
+      view.getCommentManager().setExpandAllComments(prefs.expandAllComments());
+    }
   }
 
   @UiHandler("showTabs")
   void onShowTabs(ValueChangeEvent<Boolean> e) {
     prefs.showTabs(e.getValue());
-    view.setShowTabs(prefs.showTabs());
+    if (view != null) {
+      view.setShowTabs(prefs.showTabs());
+    }
   }
 
   @UiHandler("lineNumbers")
   void onLineNumbers(ValueChangeEvent<Boolean> e) {
     prefs.showLineNumbers(e.getValue());
-    view.setShowLineNumbers(prefs.showLineNumbers());
+    if (view != null) {
+      view.setShowLineNumbers(prefs.showLineNumbers());
+    }
   }
 
   @UiHandler("leftSide")
@@ -315,29 +366,35 @@ class PreferencesBox extends Composite {
   @UiHandler("emptyPane")
   void onHideEmptyPane(ValueChangeEvent<Boolean> e) {
     prefs.hideEmptyPane(!e.getValue());
-    view.diffTable.setHideEmptyPane(prefs.hideEmptyPane());
-    if (prefs.hideEmptyPane()) {
-      if (view.diffTable.getChangeType() == ChangeType.ADDED) {
-        leftSide.setValue(false);
-        leftSide.setEnabled(false);
+    if (view != null) {
+      view.diffTable.setHideEmptyPane(prefs.hideEmptyPane());
+      if (prefs.hideEmptyPane()) {
+        if (view.diffTable.getChangeType() == ChangeType.ADDED) {
+          leftSide.setValue(false);
+          leftSide.setEnabled(false);
+        }
+      } else {
+        leftSide.setValue(view.diffTable.isVisibleA());
+        leftSide.setEnabled(true);
       }
-    } else {
-      leftSide.setValue(view.diffTable.isVisibleA());
-      leftSide.setEnabled(true);
     }
   }
 
   @UiHandler("topMenu")
   void onTopMenu(ValueChangeEvent<Boolean> e) {
     prefs.hideTopMenu(!e.getValue());
-    Gerrit.setHeaderVisible(!prefs.hideTopMenu());
-    view.resizeCodeMirror();
+    if (view != null) {
+      Gerrit.setHeaderVisible(!prefs.hideTopMenu());
+      view.resizeCodeMirror();
+    }
   }
 
   @UiHandler("autoHideDiffTableHeader")
   void onAutoHideDiffTableHeader(ValueChangeEvent<Boolean> e) {
     prefs.autoHideDiffTableHeader(!e.getValue());
-    view.setAutoHideDiffHeader(!e.getValue());
+    if (view != null) {
+      view.setAutoHideDiffHeader(!e.getValue());
+    }
   }
 
   @UiHandler("manualReview")
@@ -348,11 +405,13 @@ class PreferencesBox extends Composite {
   @UiHandler("syntaxHighlighting")
   void onSyntaxHighlighting(ValueChangeEvent<Boolean> e) {
     prefs.syntaxHighlighting(e.getValue());
-    mode.setEnabled(prefs.syntaxHighlighting());
-    if (prefs.syntaxHighlighting()) {
-      setMode(view.getContentType());
+    if (view != null) {
+      mode.setEnabled(prefs.syntaxHighlighting());
+      if (prefs.syntaxHighlighting()) {
+        setMode(view.getContentType());
+      }
+      view.setSyntaxHighlighting(prefs.syntaxHighlighting());
     }
-    view.setSyntaxHighlighting(prefs.syntaxHighlighting());
   }
 
   @UiHandler("mode")
@@ -386,42 +445,48 @@ class PreferencesBox extends Composite {
   @UiHandler("whitespaceErrors")
   void onWhitespaceErrors(ValueChangeEvent<Boolean> e) {
     prefs.showWhitespaceErrors(e.getValue());
-    view.operation(new Runnable() {
-      @Override
-      public void run() {
-        boolean s = prefs.showWhitespaceErrors();
-        view.getCmFromSide(DisplaySide.A).setOption("showTrailingSpace", s);
-        view.getCmFromSide(DisplaySide.B).setOption("showTrailingSpace", s);
-      }
-    });
+    if (view != null) {
+      view.operation(new Runnable() {
+        @Override
+        public void run() {
+          boolean s = prefs.showWhitespaceErrors();
+          view.getCmFromSide(DisplaySide.A).setOption("showTrailingSpace", s);
+          view.getCmFromSide(DisplaySide.B).setOption("showTrailingSpace", s);
+        }
+      });
+    }
   }
 
   @UiHandler("renderEntireFile")
   void onRenderEntireFile(ValueChangeEvent<Boolean> e) {
     prefs.renderEntireFile(e.getValue());
-    view.updateRenderEntireFile();
+    if (view != null) {
+      view.updateRenderEntireFile();
+    }
   }
 
   @UiHandler("theme")
   void onTheme(@SuppressWarnings("unused") ChangeEvent e) {
     final Theme newTheme = getSelectedTheme();
     prefs.theme(newTheme);
-    ThemeLoader.loadTheme(newTheme, new GerritCallback<Void>() {
-      @Override
-      public void onSuccess(Void result) {
-        view.operation(new Runnable() {
-          @Override
-          public void run() {
-            if (getSelectedTheme() == newTheme && isAttached()) {
-              String t = newTheme.name().toLowerCase();
-              view.getCmFromSide(DisplaySide.A).setOption("theme", t);
-              view.getCmFromSide(DisplaySide.B).setOption("theme", t);
-              view.setThemeStyles(newTheme.isDark());
+    if (view != null) {
+      ThemeLoader.loadTheme(newTheme, new GerritCallback<Void>() {
+        @Override
+        public void onSuccess(Void result) {
+          view.operation(new Runnable() {
+            @Override
+            public void run() {
+              if (getSelectedTheme() == newTheme && isAttached()) {
+                String t = newTheme.name().toLowerCase();
+                view.getCmFromSide(DisplaySide.A).setOption("theme", t);
+                view.getCmFromSide(DisplaySide.B).setOption("theme", t);
+                view.setThemeStyles(newTheme.isDark());
+              }
             }
-          }
-        });
-      }
-    });
+          });
+        }
+      });
+    }
   }
 
   private Theme getSelectedTheme() {
@@ -446,7 +511,9 @@ class PreferencesBox extends Composite {
         Gerrit.setAccountDiffPreference(p);
       }
     });
-    close();
+    if (view != null) {
+      close();
+    }
   }
 
   @UiHandler("close")

gerrit-gwtui/src/main/java/com/google/gerrit/client/diff/PreferencesBox.ui.xml

@@ -155,15 +155,17 @@ limitations under the License.
   </ui:style>
 
   <g:HTMLPanel styleName='{style.box}'>
-    <table style='width: 100%'>
-      <tr>
-        <td><ui:msg>Diff Preferences</ui:msg></td>
-        <td style='text-align: right'>
-          <g:Anchor ui:field='close' href='javascript:;'><ui:msg>Close</ui:msg></g:Anchor>
-        </td>
-      </tr>
-    </table>
-    <hr/>
+    <div ui:field='header'>
+      <table style='width: 100%'>
+        <tr>
+          <td><ui:msg>Diff Preferences</ui:msg></td>
+          <td style='text-align: right'>
+            <g:Anchor ui:field='close' href='javascript:;'><ui:msg>Close</ui:msg></g:Anchor>
+          </td>
+        </tr>
+      </table>
+      <hr/>
+    </div>
     <table class='{style.table}'>
       <tr>
         <th><ui:msg>Theme</ui:msg></th>
@@ -208,7 +210,7 @@ limitations under the License.
         </g:ToggleButton></td>
       </tr>
       <tr>
-        <th><ui:msg>Language</ui:msg></th>
+        <th><div ui:field='modeLabel'><ui:msg>Language</ui:msg></div></th>
         <td><g:ListBox ui:field='mode'/></td>
       </tr>
       <tr>
@@ -240,7 +242,7 @@ limitations under the License.
         </g:ToggleButton></td>
       </tr>
       <tr>
-        <th><ui:msg>Left Side</ui:msg></th>
+        <th><div ui:field='leftSideLabel'><ui:msg>Left Side</ui:msg></div></th>
         <td><g:ToggleButton ui:field='leftSide'>
           <g:upFace><ui:msg>Hide</ui:msg></g:upFace>
           <g:downFace><ui:msg>Show</ui:msg></g:downFace>