From e73c47e3c6d4a4c538bddbe4aad45cf4b116a71e Mon Sep 17 00:00:00 2001
From: Antoine Martin <totaam@xpra.org>
Date: Tue, 25 Oct 2016 09:47:06 +0000
Subject: [PATCH] #1341: * add notification support * move css to a dedicated
 client.css file * expand server dbus and control channel for testing
 notifications: support notification id and close requests

git-svn-id: https://xpra.org/svn/Xpra/trunk@14281 3bb7dfac-3a0b-4e04-842a-767bc560f471
---
 src/html5/css/client.css            | 211 ++++++++++++++++++++++++++++
 src/html5/css/signin.css            |  42 +++---
 src/html5/index.html                | 129 +----------------
 src/html5/js/Client.js              |  37 ++++-
 src/html5/js/Notifications.js       |  55 ++++++++
 src/xpra/server/dbus/dbus_server.py |  12 +-
 src/xpra/server/server_base.py      |  25 +++-
 7 files changed, 354 insertions(+), 157 deletions(-)
 create mode 100644 src/html5/css/client.css
 create mode 100644 src/html5/js/Notifications.js

diff --git a/src/html5/css/client.css b/src/html5/css/client.css
new file mode 100644
index 0000000000..8f37a93a22
--- /dev/null
+++ b/src/html5/css/client.css
@@ -0,0 +1,211 @@
+html, body {
+	height: 100%;
+	width: 100%;
+	padding: 0;
+	margin: 0;
+	overflow: hidden;
+}
+div#connect_form {
+	display: none;
+}
+div#disconnect_form {
+	display: none;
+}
+canvas {
+	border: none;
+	padding: 0;
+	margin: 0;
+}
+#pasteboard {
+	position: fixed;
+	top: -30px;
+	left: 1px;
+}
+.undecorated {
+	position: absolute;
+	padding: 0;
+	overflow: hidden;
+}
+.override-redirect {
+	z-index: 15000;
+}
+.window {
+	border: 1px;
+	position: absolute;
+	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.5);
+	padding: 0;
+	overflow: hidden; /* required for radius clip */
+}
+.window-NORMAL {
+	border-radius: 6px;
+}
+.window-DROPDOWN_MENU {
+	z-index: 20000;
+}
+.window-TOOLTIP {
+	z-index: 20000;
+}
+.window-POPUP_MENU {
+	z-index: 20000;
+}
+.window-MENU {
+	z-index: 20000;
+}
+.window-COMBO {
+	z-index: 20000;
+}
+.window-UTILITY {
+	z-index: 15000;
+}
+.window-DIALOG {
+	z-index: 15000;
+}
+.windowhead {
+	height: 30px;
+	color: #000000;
+	background-color: #c0c0c0;
+}
+.windowicon {
+	display: inline-block;
+	float: left;
+	width: 30px;
+	height: 30px;
+	overflow: hidden;
+	cursor: default;
+}
+.windowtitle {
+	display: inline-block;
+	float: left;
+	width: 70%;
+	overflow: hidden;
+	text-overflow:ellipsis;
+	white-space: nowrap;
+	padding: 5px;
+	cursor: default;
+}
+.windowbuttons {
+	display: inline-block;
+	float: right;
+	padding-right: 5px;
+	cursor: pointer;
+	padding-top: 7px;
+}
+.windowinfocus {
+	z-index: 10000;
+}
+.spinneroverlay {
+	width: 100%;
+	height: 100%;
+	display: none;
+	background-color: black;
+	opacity: 0.5;
+	position: absolute;
+}
+.spinnermiddle {
+	display: table-cell;
+	vertical-align: middle;
+}
+.ui-resizable-helper {
+	border: 2px dotted #00F;
+	z-index: 30000 !important;
+}
+.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
+.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
+.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
+.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
+.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
+.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
+.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
+.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
+.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
+.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
+
+
+.notifications {
+	position: absolute;
+	left: auto;
+	right: 0;
+	top: 0;
+	bottom: auto;
+	width: 600px;
+	height: auto;
+	z-index: 10001;
+	transition: height 0.5s, opacity 0.5s, top 0.5s, box-shadow 0.5s, bottom 0.5s;
+	box-shadow: 0 1rem 2rem rgba(21, 36, 48, 0.75);
+	overflow: hidden;
+}
+@media screen and (max-width: 600px) {
+	.notifications {
+		bottom: 0;
+		box-shadow: none;
+		padding-top: 5rem;
+	}
+}
+@media screen {
+	.notifications .alert {
+		border-radius: 10;
+		text-align: center;
+		padding: .5rem;
+		opacity: 1;
+		margin-top: -2rem;
+		position: relative;
+		transform: translateY(2rem);
+		transition: left 0.5s, margin 0.5s, opacity 0.5s, transform 0.5s;
+	}
+}
+@media screen and (max-width: 600px) {
+	.notifications .alert {
+		opacity: 0;
+		margin-top: 0;
+		transform: translateY(0);
+	}
+}
+.notifications .alert span {
+	display: block;
+	padding: 0;
+	margin: 0 3rem;
+	font-weight: 300;
+	font-size: .9rem;
+	text-overflow: ellipsis;
+	line-height: 1rem;
+	max-height: 2rem;
+	overflow: hidden;
+}
+.notifications .alert span.title{
+	margin: 1rem;
+	font-weight: 600;
+	font-size: 1.3rem;
+}
+.notifications .alert span a {
+	text-decoration: none;
+}
+.notifications .alert .dismiss {
+	width: 2rem;
+	position: absolute;
+	right: 1rem;
+	top: 50%;
+	transform: scale(1, 1) translateY(-50%);
+	font-size: 1.5rem;
+	transition: margin 0.5s, opacity 0.5s, transform 0.5s;
+	text-align: center;
+	cursor: pointer;
+	color: inherit;
+	font-weight: 300;
+	transform-origin: center center;
+}
+@media screen {
+	.notifications .alert.visible {
+		margin-top: 0;
+		opacity: 1;
+		transform: translateY(0);
+	}
+	.notifications .alert.hidden {
+		margin-top: -2.125rem;
+		z-index: -1;
+	}
+}
+@media screen and (max-width: 600px) {
+	.notifications .alert.hidden {
+		transform: translateY(0) translateX(-10rem);
+	}
+}
diff --git a/src/html5/css/signin.css b/src/html5/css/signin.css
index aa3db84208..25eb01e364 100644
--- a/src/html5/css/signin.css
+++ b/src/html5/css/signin.css
@@ -1,43 +1,43 @@
 body {
-  padding-top: 40px;
-  padding-bottom: 40px;
-  background-color: #eee;
+	padding-top: 40px;
+	padding-bottom: 40px;
+	background-color: #eee;
 }
 
 .form-signin {
-  max-width: 530px;
-  padding: 15px;
-  margin: 0 auto;
+	max-width: 530px;
+	padding: 15px;
+	margin: 0 auto;
 }
 .form-or-heading {
-  text-align: center;
+	text-align: center;
 }
 .form-signin .form-signin-heading,
 .form-signin .checkbox {
-  margin-bottom: 10px;
+	margin-bottom: 10px;
 }
 .form-signin .checkbox, .form-signin .radiobox {
-  font-weight: normal;
+	font-weight: normal;
 }
 .form-signin .form-control {
-  position: relative;
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 10px;
-  font-size: 16px;
+	position: relative;
+	-webkit-box-sizing: border-box;
+	   -moz-box-sizing: border-box;
+	        box-sizing: border-box;
+	padding: 10px;
+	font-size: 16px;
 }
 .form-signin .form-control:focus {
-  z-index: 2;
+	z-index: 2;
 }
 .form-signin .panel-group {
-  padding-top:8px;
+	padding-top:8px;
 }
 
 .form-signin .list-style-none {
-  list-style-type:none;
+	list-style-type:none;
 }
 .form-signin .action input {
-  font-size: 12px;
-  padding: 2px;
-}
\ No newline at end of file
+	font-size: 12px;
+	padding: 2px;
+}
diff --git a/src/html5/index.html b/src/html5/index.html
index d29ae55f71..df1aa293af 100644
--- a/src/html5/index.html
+++ b/src/html5/index.html
@@ -14,130 +14,7 @@
 		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
 		<link rel="icon" type="image/png" href="/favicon.png">
 
-		<style>
-			html, body {
-			    height: 100%;
-			    width: 100%;
-			    padding: 0;
-			    margin: 0;
-			    overflow: hidden;
-			}
-			div#connect_form {
-				display: none;
-			}
-			div#disconnect_form {
-				display: none;
-			}
-			canvas {
-				border: none;
-				padding: 0;
-				margin: 0;
-			}
-			#pasteboard {
-				position: fixed;
-				top: -30px;
-				left: 1px;
-			}
-			.undecorated {
-				position: absolute;
-				padding: 0;
-				overflow: hidden;
-			}
-			.override-redirect {
-				z-index: 15000;
-			}
-			.window {
-				border: 1px;
-				position: absolute;
-				box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.5);
-				padding: 0;
-				overflow: hidden; /* required for radius clip */
-			}
-			.window-NORMAL {
-				border-radius: 6px;
-			}
-			.window-DROPDOWN_MENU {
-				z-index: 20000;
-			}
-			.window-TOOLTIP {
-				z-index: 20000;
-			}
-			.window-POPUP_MENU {
-				z-index: 20000;
-			}
-			.window-MENU {
-				z-index: 20000;
-			}
-			.window-COMBO {
-				z-index: 20000;
-			}
-			.window-UTILITY {
-				z-index: 15000;
-			}
-			.window-DIALOG {
-				z-index: 15000;
-			}
-			.windowhead {
-				height: 30px;
-				color: #000000;
-				background-color: #c0c0c0;
-			}
-			.windowicon {
-				display: inline-block;
-				float: left;
-				width: 30px;
-				height: 30px;
-				overflow: hidden;
-				cursor: default;
-			}
-			.windowtitle {
-				display: inline-block;
-				float: left;
-				width: 70%;
-				overflow: hidden;
-				text-overflow:ellipsis;
-				white-space: nowrap;
-				padding: 5px;
-				cursor: default;
-			}
-			.windowbuttons {
-			    display: inline-block;
-			    float: right;
-			    padding-right: 5px;
-			    cursor: pointer;
-			    padding-top: 7px;
-			}
-			.windowinfocus {
-				z-index: 10000;
-			}
-			.spinneroverlay {
-				width: 100%;
-				height: 100%;
-				display: none;
-				background-color: black;
-				opacity: 0.5;
-				position: absolute;
-			}
-			.spinnermiddle {
-				display: table-cell;
-				vertical-align: middle;
-			}
-			.ui-resizable-helper {
-				border: 2px dotted #00F;
-				z-index: 30000 !important;
-			}
-			.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
-			.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
-			.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
-			.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
-			.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
-			.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
-			.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
-			.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
-			.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
-			.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
-		</style>
-		
+		<link rel="stylesheet" href="css/client.css">
 		<link rel="stylesheet" href="css/spinner.css">
 
 		<script type="text/javascript" src="js/lib/jquery.min.js"></script>
@@ -158,6 +35,7 @@
 		<script type="text/javascript" src="js/Client.js"></script>
 		<script type="text/javascript" src="js/Protocol.js"></script>
 		<script type="text/javascript" src="js/Window.js"></script>
+		<script type="text/javascript" src="js/Notifications.js"></script>
 	        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 
 	<body>
@@ -167,6 +45,9 @@
 		<div id="screen" style="width: 100%; height:100%;">
 		</div>
 
+		<div class="notifications">
+		</div>
+
 		<input id="pasteboard" onblur="this.focus()" autofocus />
 
 		<script>
diff --git a/src/html5/js/Client.js b/src/html5/js/Client.js
index 8dfc064cf9..a50ffb66e3 100644
--- a/src/html5/js/Client.js
+++ b/src/html5/js/Client.js
@@ -103,6 +103,8 @@ function XpraClient(container) {
 		'draw': this._process_draw,
 		'cursor': this._process_cursor,
 		'bell': this._process_bell,
+		'notify_show' : this._process_notify_show,
+		'notify_close' : this._process_notify_close,
 		'sound-data': this._process_sound_data,
 		'clipboard-token': this._process_clipboard_token,
 		'set-clipboard-enabled': this._process_set_clipboard_enabled,
@@ -625,7 +627,7 @@ XpraClient.prototype._make_hello_base = function() {
 	if(LZ4) {
 		this._update_capabilities({
 			"lz4"						: true,
-			"lz4.js.version"			: LZ4.version, 
+			"lz4.js.version"			: LZ4.version,
 			"encoding.rgb_lz4"			: true,
 		});
 	}
@@ -786,7 +788,7 @@ XpraClient.prototype._window_geometry_changed = function(win) {
 	// so use win.client instead of `this` to refer to the client
 	var geom = win.get_internal_geometry();
 	var wid = win.wid;
-	
+
 	if (!win.override_redirect) {
 		win.client._window_set_focus(win);
 	}
@@ -927,7 +929,7 @@ XpraClient.prototype._process_hello = function(packet, ctx) {
         	}
         }
     }
-    
+
 	var version = hello["version"];
 	try {
 		var vparts = version.split(".");
@@ -1135,6 +1137,35 @@ XpraClient.prototype._process_bell = function(packet, ctx) {
 	return;
 }
 
+XpraClient.prototype._process_notify_show = function(packet, ctx) {
+	//TODO: add UI switch to disable notifications
+	var dbus_id = packet[1];
+	var nid = packet[2];
+	var app_name = packet[3];
+	var replaces_nid = packet[4];
+	var app_icon = packet[5];
+	var summary = packet[6];
+	var body = packet[7];
+	var expire_timeout = packet[8];
+	if(window.closeNotification) {
+		if (replaces_nid>0) {
+			window.closeNotification(replaces_nid);
+		}
+		window.closeNotification(nid);
+	}
+	if(window.doNotification) {
+		window.doNotification("info", nid, summary, body, expire_timeout);
+	}
+}
+
+XpraClient.prototype._process_notify_close = function(packet, ctx) {
+    nid = packet[1];
+    if(window.closeNotification) {
+    	window.closeNotification(nid);
+    }
+}
+
+
 XpraClient.prototype.reset_cursor = function(packet, ctx) {
 	for (var wid in ctx.id_to_window) {
 		var window = ctx.id_to_window[wid];
diff --git a/src/html5/js/Notifications.js b/src/html5/js/Notifications.js
new file mode 100644
index 0000000000..2975aab872
--- /dev/null
+++ b/src/html5/js/Notifications.js
@@ -0,0 +1,55 @@
+$(function() {
+
+	window.doNotification = function(type, nid, title, message, timeout, onTimeOut){
+		var nID = 'notification' + nid;
+		var a = $('<div id="' + nID + '" class="alert ' + type + '">'+
+					'<span class="title">'+title+'</span>'+
+					'<span class="message">' + message + '</span>'+
+					'<div class="dismiss">&#215;</div>'+
+				  '</div>');
+		$('.notifications').prepend(a);
+
+		a.on('click', '.dismiss', function() {
+			a.removeClass('visible').addClass('hidden');
+			a.on('transitionend webkitTransitionEnd', $.debounce(250, function() {
+					a.trigger('dismissed');
+					a.remove();
+			}));
+		});
+
+		setTimeout(function(){
+				a.addClass('visible');
+		}, 1);
+
+		if(timeout){
+			a.data('timeLeft', timeout);
+			var it = setInterval(function() {
+				var tleft = a.data('timeLeft') - 1;
+				if (a.data('timeLeft') === 0) {
+					if (onTimeOut) {
+						onTimeOut(a);
+					} else {
+						a.find('.dismiss').trigger('click');
+					}
+				} else {
+					a.find('sec').text(tleft);
+					a.data('timeLeft', tleft);
+				}
+			}, 1000);
+		}
+		return a;
+	};
+
+	window.closeNotification = function(nid) {
+		var nID = 'notification' + nid;
+		$('.notifications').find('#'+nID).find('.dismiss').trigger('click');
+	}
+
+	window.clearNotifications = function(){
+		$('.notifications').find('.dismiss').trigger('click');
+	};
+
+	window.removeNotifications = function(){
+		$('.notifications').empty();
+	};
+});
\ No newline at end of file
diff --git a/src/xpra/server/dbus/dbus_server.py b/src/xpra/server/dbus/dbus_server.py
index 2275145988..59f9891cf3 100755
--- a/src/xpra/server/dbus/dbus_server.py
+++ b/src/xpra/server/dbus/dbus_server.py
@@ -282,10 +282,14 @@ def DisableDebug(self, category):
         disable_debug_for(c)
 
 
-    @dbus.service.method(INTERFACE, in_signature='sss')
-    def SendNotification(self, title, message, uuids):
-        self.log(".SendNotification%s", (title, message, uuids))
-        self.server.control_command_send_notification(ns(title), ns(message), ns(uuids))
+    @dbus.service.method(INTERFACE, in_signature='isss')
+    def SendNotification(self, nid, title, message, uuids):
+        self.log(".SendNotification%s", (nid, title, message, uuids))
+        self.server.control_command_send_notification(ni(nid), ns(title), ns(message), ns(uuids))
+
+    def CloseNotification(self, nid, uuids):
+        self.log(".CloseNotification%s", (nid, uuids))
+        self.server.control_command_close_notification(ni(nid), ns(uuids))
 
 
     @dbus.service.method(INTERFACE, in_signature='', out_signature='a{ss}')
diff --git a/src/xpra/server/server_base.py b/src/xpra/server/server_base.py
index 9d20ac53c2..983f7904cb 100644
--- a/src/xpra/server/server_base.py
+++ b/src/xpra/server/server_base.py
@@ -783,7 +783,8 @@ def parse_4intlist(v):
             #network and transfers:
             ArgsControlCommand("print",                 "sends the file to the client(s) for printing", min_args=3),
             ArgsControlCommand("send-file",             "sends the file to the client(s)",  min_args=3, ),
-            ArgsControlCommand("send-notification",     "sends a notification to the client(s)",  min_args=3, max_args=4),
+            ArgsControlCommand("send-notification",     "sends a notification to the client(s)",  min_args=4, max_args=5, validation=[int]),
+            ArgsControlCommand("close-notification",    "send the request to close an existing notification to the client(s)", min_args=1, max_args=2, validation=[int]),
             ArgsControlCommand("compression",           "sets the packet compressor",       min_args=1, max_args=1),
             ArgsControlCommand("encoder",               "sets the packet encoder",          min_args=1, max_args=1),
             ArgsControlCommand("clipboard-direction",   "restrict clipboard transfers",     min_args=1, max_args=1),
@@ -1503,21 +1504,35 @@ def _control_get_sources(self, client_uuids_str, attr=None):
                 commandlog.warn("client connection not found for uuid(s): %s", notfound)
         return sources
 
-    def control_command_send_notification(self, title, message, client_uuids):
+    def control_command_send_notification(self, nid, title, message, client_uuids):
         if not self.notifications:
             msg = "notifications are disabled"
             notifylog(msg)
             return msg
         sources = self._control_get_sources(client_uuids)
-        notifylog("control_command_send_notification(%s, %s, %s) will send to %s", title, message, client_uuids, sources)
+        notifylog("control_command_send_notification(%i, %s, %s, %s) will send to %s", nid, title, message, client_uuids, sources)
         count = 0
         for source in sources:
-            if source.notify(0, 0, "control channel", 0, "", title, message, 10):
+            if source.notify(0, nid, "control channel", 0, "", title, message, 10):
                 count += 1
-        msg = "notification message send to %i clients" % count
+        msg = "notification id %i: message sent to %i clients" % (nid, count)
         notifylog(msg)
         return msg
 
+    def control_command_close_notification(self, nid, client_uuids):
+        if not self.notifications:
+            msg = "notifications are disabled"
+            notifylog(msg)
+            return msg
+        sources = self._control_get_sources(client_uuids)
+        notifylog("control_command_close_notification(%s, %s) will send to %s", nid, client_uuids, sources)
+        for source in sources:
+            source.notify_close(nid)
+        msg = "notification id %i: close request sent to %i clients" % (nid, len(sources))
+        notifylog(msg)
+        return msg
+
+
     def control_command_send_file(self, filename, openit, client_uuids, maxbitrate=0):
         openit = str(openit).lower() in ("open", "true", "1")
         return self.do_control_file_command("send file", client_uuids, filename, "file_transfer", (False, openit))