SideBySide2: Add preferences button in header

Replace the unicode arrows for previous/up/next with arrows from the
Tango Icon Library[1].  These are green arrows 16x16 and are installed
into the DOM using CSS sprites managed by GWT.

Add to the right of the navigation cluster a new gear icon that opens
the panel.  This icon lets mouse driven users adjust values quickly.

[1] http://tango.freedesktop.org/Tango_Icon_Library

Bug: issue 2225
Change-Id: Iaaea288990ed80431a4e44374530facffac4b842

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

@@ -80,3 +80,16 @@
   white-space: nowrap;
   color: #fff;
 }
+
+@sprite .go_prev {
+  gwt-image: "go_prev";
+  display: inline-block;
+}
+@sprite .go_next {
+  gwt-image: "go_next";
+  display: inline-block;
+}
+@sprite .go_up {
+  gwt-image: "go_up";
+  display: inline-block;
+}

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

@@ -34,6 +34,7 @@ import com.google.gwt.core.client.JsArray;
 import com.google.gwt.core.client.JsArrayString;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.Style.Visibility;
+import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.KeyPressEvent;
 import com.google.gwt.event.logical.shared.ValueChangeEvent;
 import com.google.gwt.uibinder.client.UiBinder;
@@ -43,6 +44,7 @@ import com.google.gwt.user.client.rpc.AsyncCallback;
 import com.google.gwt.user.client.ui.CheckBox;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.HTMLPanel;
+import com.google.gwt.user.client.ui.Image;
 import com.google.gwt.user.client.ui.UIObject;
 import com.google.gwtexpui.globalkey.client.KeyCommand;
 import com.google.gwtexpui.globalkey.client.KeyCommandSet;
@@ -52,6 +54,9 @@ import com.google.gwtexpui.safehtml.client.SafeHtmlBuilder;
 class Header extends Composite {
   interface Binder extends UiBinder<HTMLPanel, Header> {}
   private static final Binder uiBinder = GWT.create(Binder.class);
+  static {
+    Resources.I.style().ensureInjected();
+  }
 
   @UiField CheckBox reviewed;
   @UiField Element project;
@@ -62,6 +67,7 @@ class Header extends Composite {
   @UiField InlineHyperlink prev;
   @UiField InlineHyperlink up;
   @UiField InlineHyperlink next;
+  @UiField Image preferences;
 
   private final KeyCommandSet keys;
   private final PatchSet.Id base;
@@ -70,6 +76,7 @@ class Header extends Composite {
   private boolean hasPrev;
   private boolean hasNext;
   private String nextPath;
+  private PreferencesAction prefsAction;
 
   Header(KeyCommandSet keys, PatchSet.Id base, PatchSet.Id patchSetId,
       String path) {
@@ -151,10 +158,15 @@ class Header extends Composite {
     }
   }
 
-  void set(ChangeInfo info) {
+  void setChangeInfo(ChangeInfo info) {
     project.setInnerText(info.project());
   }
 
+  void init(PreferencesAction pa) {
+    prefsAction = pa;
+    prefsAction.setPartner(preferences);
+  }
+
   void setReviewed(boolean r) {
     reviewed.setValue(r, true);
   }
@@ -176,6 +188,11 @@ class Header extends Composite {
     }
   }
 
+  @UiHandler("preferences")
+  void onPreferences(ClickEvent e) {
+    prefsAction.show();
+  }
+
   private String url(FileInfo info) {
     return info.binary()
       ? Dispatcher.toUnified(base, patchSetId, info.path())

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

@@ -18,9 +18,12 @@ limitations under the License.
     xmlns:ui='urn:ui:com.google.gwt.uibinder'
     xmlns:g='urn:import:com.google.gwt.user.client.ui'
     xmlns:x='urn:import:com.google.gerrit.client.ui'>
+  <ui:with field='res' type='com.google.gerrit.client.diff.Resources'/>
   <ui:style>
   .header {
     position: relative;
+    height: 16px;
+    line-height: 16px;
     max-width: 1484px;
   }
   .reviewed input {
@@ -35,6 +38,7 @@ limitations under the License.
     position: absolute;
     top: 0;
     right: 15px;
+    height: 16px;
     font-family: Arial Unicode MS, sans-serif;
   }
   .nodiff {
@@ -56,12 +60,18 @@ limitations under the License.
     </span>
 
     <div class='{style.navigation}'>
-      <x:InlineHyperlink ui:field='prev'>&#x21e6;</x:InlineHyperlink>
-      <x:InlineHyperlink ui:field='up' title='Up to change (Shortcut: u)'>
+      <x:InlineHyperlink ui:field='prev' styleName='{res.style.go_prev}'/>
+      <x:InlineHyperlink ui:field='up'
+          styleName='{res.style.go_up}'
+          title='Up to change (Shortcut: u)'>
         <ui:attribute name='title'/>
-        &#x21e7;
       </x:InlineHyperlink>
-      <x:InlineHyperlink ui:field='next'>&#x21e8;</x:InlineHyperlink>
+      <x:InlineHyperlink ui:field='next' styleName='{res.style.go_next}'/>
+      <g:Image ui:field='preferences'
+           resource='{res.gear}'
+           title='Diff preferences (Shortcut: ,)'>
+         <ui:attribute name='title'/>
+      </g:Image>
     </div>
   </g:HTMLPanel>
 </ui:UiBinder>

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

@@ -19,12 +19,14 @@ import com.google.gwt.event.logical.shared.CloseEvent;
 import com.google.gwt.event.logical.shared.CloseHandler;
 import com.google.gwt.user.client.ui.PopupPanel;
 import com.google.gwt.user.client.ui.PopupPanel.PositionCallback;
+import com.google.gwt.user.client.ui.Widget;
 
 class PreferencesAction {
   private final SideBySide2 view;
   private final DiffPreferences prefs;
   private PopupPanel popup;
   private PreferencesBox current;
+  private Widget partner;
 
   PreferencesAction(SideBySide2 view, DiffPreferences prefs) {
     this.view = view;
@@ -50,6 +52,7 @@ class PreferencesAction {
     popup = new PopupPanel(true, false);
     popup.setStyleName(current.style.dialog());
     popup.add(current);
+    popup.addAutoHidePartner(partner.getElement());
     popup.addCloseHandler(new CloseHandler<PopupPanel>() {
       @Override
       public void onClose(CloseEvent<PopupPanel> event) {
@@ -74,4 +77,8 @@ class PreferencesAction {
       current = null;
     }
   }
+
+  void setPartner(Widget w) {
+    partner = w;
+  }
 }

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

@@ -17,12 +17,17 @@ package com.google.gerrit.client.diff;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.resources.client.ClientBundle;
 import com.google.gwt.resources.client.CssResource;
+import com.google.gwt.resources.client.ImageResource;
 
 /** Resources used by diff. */
 interface Resources extends ClientBundle {
   static final Resources I = GWT.create(Resources.class);
 
   @Source("CommentBoxUi.css") Style style();
+  @Source("go-prev.png") ImageResource go_prev();
+  @Source("go-next.png") ImageResource go_next();
+  @Source("go-up.png") ImageResource go_up();
+  @Source("gear.png") ImageResource gear();
 
   interface Style extends CssResource {
     String commentBox();
@@ -30,5 +35,9 @@ interface Resources extends ClientBundle {
     String header();
     String summary();
     String date();
+
+    String go_prev();
+    String go_next();
+    String go_up();
   }
 }

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

@@ -226,7 +226,7 @@ public class SideBySide2 extends Screen {
         JsArray<RevisionInfo> list = info.revisions().values();
         RevisionInfo.sortRevisionInfoByNumber(list);
         diffTable.setUpPatchSetNav(list, diff);
-        header.set(info);
+        header.setChangeInfo(info);
       }}));
 
     ConfigInfoCache.get(changeId, group.addFinal(
@@ -533,6 +533,7 @@ public class SideBySide2 extends Screen {
     prefsAction = new PreferencesAction(this, prefs);
     scrollingGlue = GWT.create(ScrollSynchronizer.class);
     scrollingGlue.init(diffTable, cmA, cmB, mapper);
+    header.init(prefsAction);
     resizeHandler = Window.addResizeHandler(new ResizeHandler() {
       @Override
       public void onResize(ResizeEvent event) {