Add arrows to pan overlay.

guacamole/src/main/webapp/scripts/client-ui.js

@@ -260,6 +260,15 @@ GuacUI.Client.PanOverlay = function() {
      */
     var pan_overlay = GuacUI.createElement("div", "pan-overlay");
 
+    /*
+     * Add arrows
+     */
+
+    GuacUI.createChildElement(pan_overlay, "div", "indicator up");
+    GuacUI.createChildElement(pan_overlay, "div", "indicator down");
+    GuacUI.createChildElement(pan_overlay, "div", "indicator right");
+    GuacUI.createChildElement(pan_overlay, "div", "indicator left");
+
     this.show = function() {
         document.body.appendChild(pan_overlay);
     };

guacamole/src/main/webapp/styles/client.css

@@ -197,6 +197,59 @@ div.magnifier {
     top: 0;
     width: 100%;
     height: 100%;
+    z-index: 1;
+}
+
+.pan-overlay .indicator {
+    position: fixed;
+    background-size: 32px 32px;
+    background-position: center;
+    background-repeat: no-repeat;
+    opacity: 0.8;
+}
+
+.pan-overlay .indicator.up {
+
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 32px;
+
+    background-image: url('../images/arrows/arrows-u.png');
+    
+}
+
+.pan-overlay .indicator.down {
+
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 32px;
+
+    background-image: url('../images/arrows/arrows-d.png');
+    
+}
+
+.pan-overlay .indicator.left {
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 32px;
+
+    background-image: url('../images/arrows/arrows-l.png');
+    
+}
+
+.pan-overlay .indicator.right {
+
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 32px;
+
+    background-image: url('../images/arrows/arrows-r.png');
+    
 }
 
 /* Viewport Clone */