ChangeScreen: Add icon for adding reviewer

Replace 'Add' button with an icon. This is consistent with editing the
topic which is also done by clicking on an icon.

The user_add icon is taken from the silk icons [1].

[1] http://famfamfam.com/lab/icons/silk/

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

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

@@ -24,6 +24,9 @@ public interface Resources extends ClientBundle {
   @Source("note_add.png")
   ImageResource addFileComment();
 
+  @Source("user_add.png")
+  ImageResource addUser();
+
   // derived from resultset_next.png
   @Source("resultset_down_gray.png")
   ImageResource arrowDown();

gerrit-gwtui/src/main/java/com/google/gerrit/client/change/Reviewers.java

@@ -35,6 +35,7 @@ import com.google.gwt.core.client.JavaScriptObject;
 import com.google.gwt.core.client.JsArray;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.event.logical.shared.CloseEvent;
 import com.google.gwt.event.logical.shared.CloseHandler;
 import com.google.gwt.event.logical.shared.SelectionEvent;
@@ -46,6 +47,7 @@ import com.google.gwt.user.client.rpc.StatusCodeException;
 import com.google.gwt.user.client.ui.Button;
 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.safehtml.client.SafeHtml;
 import com.google.gwtexpui.safehtml.client.SafeHtmlBuilder;
@@ -60,7 +62,7 @@ public class Reviewers extends Composite {
   private static final Binder uiBinder = GWT.create(Binder.class);
 
   @UiField Element reviewersText;
-  @UiField Button openForm;
+  @UiField Image addReviewerIcon;
   @UiField Button addMe;
   @UiField Element form;
   @UiField Element error;
@@ -92,6 +94,14 @@ public class Reviewers extends Composite {
     });
 
     initWidget(uiBinder.createAndBindUi(this));
+    addReviewerIcon.addDomHandler(
+        new ClickHandler() {
+          @Override
+          public void onClick(ClickEvent event) {
+            onOpenForm();
+          }
+        },
+        ClickEvent.getType());
   }
 
   void init(ChangeScreen.Style style, Element ccText) {
@@ -103,18 +113,13 @@ public class Reviewers extends Composite {
     this.changeId = info.legacyId();
     display(info);
     reviewerSuggestOracle.setChange(changeId);
-    openForm.setVisible(Gerrit.isSignedIn());
+    addReviewerIcon.setVisible(Gerrit.isSignedIn());
-  }
-
-  @UiHandler("openForm")
-  void onOpenForm(@SuppressWarnings("unused") ClickEvent e) {
-    onOpenForm();
   }
 
   void onOpenForm() {
     UIObject.setVisible(form, true);
     UIObject.setVisible(error, false);
-    openForm.setVisible(false);
+    addReviewerIcon.setVisible(false);
     suggestBox.setFocus(true);
   }
 
@@ -131,7 +136,7 @@ public class Reviewers extends Composite {
 
   @UiHandler("cancel")
   void onCancel(@SuppressWarnings("unused") ClickEvent e) {
-    openForm.setVisible(true);
+    addReviewerIcon.setVisible(true);
     UIObject.setVisible(form, false);
     suggestBox.setFocus(false);
   }

gerrit-gwtui/src/main/java/com/google/gerrit/client/change/Reviewers.ui.xml

@@ -19,26 +19,9 @@ limitations under the License.
     xmlns:c='urn:import:com.google.gwtexpui.globalkey.client'
     xmlns:g='urn:import:com.google.gwt.user.client.ui'
     xmlns:u='urn:import:com.google.gerrit.client.ui'>
+  <ui:with field='ico' type='com.google.gerrit.client.GerritResources'/>
   <ui:with field='res' type='com.google.gerrit.client.change.Resources'/>
   <ui:style gss='false'>
-    button.openAdd {
-      margin: 3px 3px 0 0;
-      float: right;
-      color: rgba(0, 0, 0, 0.15);
-      background-color: #f5f5f5;
-      background-image: none;
-      -webkit-border-radius: 2px;
-      -moz-border-radius: 2px;
-      border-radius: 2px;
-      -webkit-box-sizing: content-box;
-      -moz-box-sizing: content-box;
-      box-sizing: content-box;
-    }
-    button.openAdd div {
-      width: auto;
-      color: #444;
-    }
-
     .suggestBox {
       margin-bottom: 2px;
     }
@@ -48,6 +31,7 @@ limitations under the License.
       font-weight: bold;
     }
 
+    .addReviewer,
     .cancel {
       float: right;
     }
@@ -55,14 +39,10 @@ limitations under the License.
   <g:HTMLPanel>
     <div>
       <span ui:field='reviewersText'/>
-      <g:Button ui:field='openForm'
+      <g:Image ui:field='addReviewerIcon'
-         title='Add reviewers to this change'
+          resource='{ico.addUser}'
-         styleName='{res.style.button}'
+          styleName='{style.addReviewer}'
-         addStyleNames='{style.openAdd}'
+          title='Add Reviewer'/>
-         visible='false'>
-       <ui:attribute name='title'/>
-       <div><ui:msg>Add&#8230;</ui:msg></div>
-      </g:Button>
     </div>
     <div ui:field='form' style='display: none' aria-hidden='true'>
       <u:RemoteSuggestBox ui:field='suggestBox' styleName='{style.suggestBox}'/>