Show a popup with user information as tooltip on avatar images

Hovering over an avatar image opens a popup that shows information for
this user. At the moment only the image, the name and the email address
are shown, but this can be extended further. The popup is shown only
after a short delay when keeping the mouse over the image (similar to
how tooltips appear with a delay). By this it's avoided that popups are
unwantedly shown when moving the mouse cursor over the screen. The
popup automatically disappears when the mouse cursor is moved away from
the avatar image, but the popup stays open if the mouse cursor is moved
over the popup to allow text selection for copy & paste or clicking on
links in the popup if we add any later.

Change-Id: I0c17f8bd9c76a05d2c7562579018a4dac3a337e8

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

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+Copyright (C) 2012 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.
+-->
+<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
+<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
+  xmlns:g='urn:import:com.google.gwt.user.client.ui'
+  xmlns:gerrit='urn:import:com.google.gerrit.client'>
+  <ui:with field='constants' type='com.google.gerrit.client.GerritConstants'/>
+
+  <ui:style>
+    .panel {
+      padding: 8px;
+    }
+    .avatar {
+      padding-right: 4px;
+      width: 100px;
+      height: 100px;
+    }
+    .infoCell {
+      vertical-align: top;
+    }
+    .userName {
+      font-weight: bold;
+    }
+    .email {
+      padding-bottom: 6px;
+    }
+    .logout {
+      padding-left: 16px;
+      float: right;
+    }
+  </ui:style>
+
+  <g:HTMLPanel styleName='{style.panel}'>
+    <table><tr><td>
+      <gerrit:AvatarImage ui:field='avatar' styleName='{style.avatar}' />
+    </td><td class='{style.infoCell}'>
+      <g:Label ui:field='userName' styleName="{style.userName}" />
+      <g:Label ui:field='userEmail' styleName="{style.email}" />
+    </td></tr></table>
+    <g:Anchor ui:field='settings'>
+      <ui:text from='{constants.menuSettings}' />
+    </g:Anchor>
+    <g:Anchor ui:field='logout' styleName="{style.logout}">
+      <ui:text from='{constants.menuSignOut}' />
+    </g:Anchor>
+  </g:HTMLPanel>
+</ui:UiBinder>