chatview: implement navbar

Currently the navbar is implemented in native GTK, and has a pretty
bad integration with the chatview. In this patch we implement a
modern navbar *in* the chatview and remove the old GTK bar.

*Changes summary*

chatview, HTML/JS/CSS side:
- Remove useless function setSendIcon from the chatview
- Simplify setTemporary in the chatview
- Use only one single showInvitation function instead of two
  showInvitation and hideInvitation functions.
- Remove pointless/copy&pasted comments

chatview, GTK side:
- Simplify chatview update methods: instead of providing several
separate functions to update the invitation/banned status of the chat
view, only provide one (update_chatview_frame). This should have a
good impact on the performances and simplify webkit crash handling.

Change-Id: I6959240efd357fedb07d3c60d551efc8fca84812
Reviewed-by: Sebastien Blin <sebastien.blin@savoirfairelinux.com>

src/chatview.h

@@ -3,6 +3,7 @@
  *  Author: Stepan Salenikovich <stepan.salenikovich@savoirfairelinux.com>
  *  Author: Nicolas Jäger <nicolas.jager@savoirfairelinux.com>
  *  Author: Sébastien Blin <sebastien.blin@savoirfairelinux.com>
+ *  Author: Hugo Lefeuvre <hugo.lefeuvre@savoirfairelinux.com>
  *
  *  This program is free software; you can redistribute it and/or modify
  *  it under the terms of the GNU General Public License as published by
@@ -56,7 +57,6 @@ GtkWidget     *chat_view_new        (WebKitChatContainer* view,
                                      AccountInfoPointer const & accountInfo,
                                      lrc::api::conversation::Info* conversation);
 lrc::api::conversation::Info chat_view_get_conversation(ChatView*);
-bool chat_view_get_temporary(ChatView*);
 void chat_view_update_temporary(ChatView*, bool, bool);
 void chat_view_set_header_visible(ChatView*, gboolean);
 

src/currentcallview.cpp

@@ -1031,6 +1031,11 @@ current_call_view_dispose(GObject *object)
     auto* view = CURRENT_CALL_VIEW(object);
     auto* priv = CURRENT_CALL_VIEW_GET_PRIVATE(view);
 
+    // navbar was hidden during setCallInfo, we need to make it visible again before view destruction
+    auto children = gtk_container_get_children(GTK_CONTAINER(priv->frame_chat));
+    auto chat_view = children->data;
+    chat_view_set_header_visible(CHAT_VIEW(chat_view), TRUE);
+
     delete priv->cpp;
     priv->cpp = nullptr;
 

src/incomingcallview.cpp

@@ -86,6 +86,11 @@ incoming_call_view_dispose(GObject *object)
     view = INCOMING_CALL_VIEW(object);
     priv = INCOMING_CALL_VIEW_GET_PRIVATE(view);
 
+    // navbar was hidden during init, we need to make it visible again before view destruction
+    auto children = gtk_container_get_children(GTK_CONTAINER(priv->frame_chat));
+    auto chat_view = children->data;
+    chat_view_set_header_visible(CHAT_VIEW(chat_view), TRUE);
+
     QObject::disconnect(priv->state_change_connection);
 
     g_clear_object(&priv->settings);

src/ringmainwindow.cpp

@@ -1424,7 +1424,7 @@ CppImpl::slotNewConversation(const std::string& uid)
     accountInfo_->conversationModel->setFilter("");
     // Select new conversation if contact added
     auto* old_view = gtk_bin_get_child(GTK_BIN(widgets->frame_call));
-    if (IS_RING_WELCOME_VIEW(old_view) || (IS_CHAT_VIEW(old_view) && chat_view_get_temporary(CHAT_VIEW(old_view)))) {
+    if (IS_RING_WELCOME_VIEW(old_view)) {
         accountInfo_->conversationModel->selectConversation(uid);
         try {
             auto contactUri =  chatViewConversation_->participants.front();

src/webkitchatcontainer.cpp

@@ -2,6 +2,7 @@
  *  Copyright (C) 2016-2018 Savoir-faire Linux Inc.
  *  Author: Alexandre Viau <alexandre.viau@savoirfairelinux.com>
  *  Author: Sébastien Blin <sebastien.blin@savoirfairelinux.com>
+ *  Author: Hugo Lefeuvre <hugo.lefeuvre@savoirfairelinux.com>
  *
  *  This program is free software; you can redistribute it and/or modify
  *  it under the terms of the GNU General Public License as published by
@@ -670,22 +671,6 @@ webkit_chat_container_print_history(WebKitChatContainer *view,
     g_free(function_call);
 }
 
-void
-webkit_chat_container_set_temporary(WebKitChatContainer *view, bool temporary)
-{
-    WebKitChatContainerPrivate *priv = WEBKIT_CHAT_CONTAINER_GET_PRIVATE(view);
-
-    gchar* function_call = g_strdup_printf("setTemporary(%s)", temporary ? "true" : "false");
-    webkit_web_view_run_javascript(
-        WEBKIT_WEB_VIEW(priv->webview_chat),
-        function_call,
-        NULL,
-        NULL,
-        NULL
-    );
-    g_free(function_call);
-}
-
 void
 webkit_chat_container_set_invitation(WebKitChatContainer *view, bool show,
                                      const std::string& contactUri)
@@ -693,12 +678,8 @@ webkit_chat_container_set_invitation(WebKitChatContainer *view, bool show,
     auto priv = WEBKIT_CHAT_CONTAINER_GET_PRIVATE(view);
     gchar* function_call = nullptr;
 
-    if (show) {
-        function_call = g_strdup_printf("showInvitation('%s')",
-        contactUri.c_str());
-    } else {
-        function_call = g_strdup_printf("hideInvitation()");
-    }
+    // TODO better escape names
+    function_call = g_strdup_printf(show ? "showInvitation(\"%s\")" : "showInvitation()", contactUri.c_str());
 
     webkit_web_view_run_javascript(
         WEBKIT_WEB_VIEW(priv->webview_chat),
@@ -732,3 +713,38 @@ webkit_chat_container_is_ready(WebKitChatContainer *view)
     WebKitChatContainerPrivate *priv = WEBKIT_CHAT_CONTAINER_GET_PRIVATE(view);
     return priv->js_libs_loaded;
 }
+
+void
+webkit_chat_set_header_visible(WebKitChatContainer *view, bool isVisible)
+{
+    WebKitChatContainerPrivate *priv = WEBKIT_CHAT_CONTAINER_GET_PRIVATE(view);
+
+    gchar* function_call = g_strdup_printf("displayNavbar(%s)", isVisible ? "true" : "false");
+
+    webkit_web_view_run_javascript(
+        WEBKIT_WEB_VIEW(priv->webview_chat),
+        function_call,
+        NULL,
+        NULL,
+        NULL
+    );
+    g_free(function_call);
+}
+
+void
+webkit_chat_update_chatview_frame(WebKitChatContainer *view, bool isBanned, bool isTemporary, const gchar* alias, const gchar* bestId)
+{
+    WebKitChatContainerPrivate *priv = WEBKIT_CHAT_CONTAINER_GET_PRIVATE(view);
+
+    gchar* function_call = g_strdup_printf("update_chatview_frame(%s, %s, \"%s\", \"%s\")",
+                                           isBanned ? "true" : "false", isTemporary ? "true" : "false", alias, bestId);
+
+    webkit_web_view_run_javascript(
+        WEBKIT_WEB_VIEW(priv->webview_chat),
+        function_call,
+        NULL,
+        NULL,
+        NULL
+    );
+    g_free(function_call);
+}

src/webkitchatcontainer.h

@@ -54,7 +54,8 @@ gboolean   webkit_chat_container_is_ready             (WebKitChatContainer *view
 void       webkit_chat_container_set_display_links    (WebKitChatContainer *view, bool display);
 void       webkit_chat_disable_send_interaction       (WebKitChatContainer *view, bool isDisabled);
 void       webkit_chat_hide_message_bar               (WebKitChatContainer *view, bool isHidden);
-void       webkit_chat_container_set_temporary        (WebKitChatContainer *view, bool temporary);
 void       webkit_chat_container_set_invitation       (WebKitChatContainer *view, bool show, const std::string& contactUri);
+void       webkit_chat_set_header_visible             (WebKitChatContainer *view, bool isVisible);
+void       webkit_chat_update_chatview_frame          (WebKitChatContainer *view, bool isBanned, bool isInvited, const gchar* alias, const gchar* bestId);
 
 G_END_DECLS

web/chatview.css

@@ -8,11 +8,21 @@
   /* main properties */
   --bg-color: #f2f2f2; /* same as macOS client */
 
+  /* navbar properties */
+  --navbar-height: 40px;
+  --navbar-padding-top: 8px;
+  --navbar-padding-bottom: var(--navbar-padding-top);
+  --navbar-size: calc(var(--navbar-height) + var(--navbar-padding-top) + var(--navbar-padding-bottom));
   --messagebar-size: 57px; /* FIXME clean this up */
 
   /* button properties */
   --action-icon-color: var(--ring-dark-blue);
+  --deactivated-icon-color: #BEBEBE;
   --action-icon-hover-color: var(--ring-light-blue);
+  --action-critical-icon-hover-color: rgba(211, 77, 59, 0.3); /* complementary color of ring light blue */
+  --action-critical-icon-press-color: rgba(211, 77, 59, 0.5);
+  --action-critical-icon-color: #4E1300;
+  --non-action-icon-color: #212121;
   --action-icon-press-color: rgba(59, 193, 211, 0.5);
 
   /* hairline properties */
@@ -47,9 +57,155 @@ body {
   margin: 0;
   overflow: hidden;
   background-color: var(--bg-color);
+  padding-top: var(--navbar-size);
   padding-bottom: var(--messagebar-size);
 }
 
+/** Navbar */
+
+.navbar-wrapper {
+  /* on top, over everything and full width */
+  position: fixed;
+  left:0; right:0;
+  z-index: 500;
+  top: 0;
+}
+
+#navbar {
+  background-color: var(--bg-color);
+  padding-right: 8px;
+  padding-left: 8px;
+  padding-top: var(--navbar-padding-top);
+  padding-bottom: var(--navbar-padding-bottom);
+  height: var(--navbar-height);
+  overflow: hidden;
+  align-items: center;
+
+  /* takes whole width */
+  left:0; right:0;
+
+  /* hairline */
+  border-bottom: var(--hairline-thickness) solid var(--hairline-color);
+
+  /* disable selection highlight because it looks very bad */
+  -webkit-user-select: none;
+}
+
+#navbar.hiddenState {
+  visibility: hidden;
+}
+
+.svgicon {
+  display: block;
+  margin: auto;
+  height: 100%;
+}
+
+.nav-button {
+  width: 40px;
+  height: 40px;
+  align-self: center;
+  display: flex;
+  cursor: pointer;
+  border-radius: 50%;
+}
+
+.nav-button.deactivated {
+  width: 40px;
+  height: 40px;
+  align-self: center;
+  display: flex;
+  border-radius: 50%;
+  cursor: auto;
+}
+
+.nav-right {
+  float: right;
+}
+
+.nav-left {
+  float: left;
+}
+
+#nav-contactid {
+  margin: 0px;
+  margin-left: 5px;
+  padding: 0px;
+  height: 100%;
+  font-family: emoji;
+
+  /* enable selection (it is globally disabled in the navbar) */
+  -webkit-user-select: auto;
+}
+
+#nav-contactid.oneEntry {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#nav-contactid-alias {
+  font-size: 14px;
+  font-weight: bold;
+  margin: 5px 0px 3px;
+}
+
+#nav-contactid-bestId {
+  font-size: 11px;
+}
+
+.oneEntry #nav-contactid-bestId {
+  visibility: hidden;
+}
+
+.action-button svg {
+  fill: var(--action-icon-color);
+}
+
+.action-button.deactivated svg {
+  fill: var(--deactivated-icon-color);
+}
+
+.non-action-button svg {
+  fill: var(--non-action-icon-color);
+}
+
+.non-action-button:hover, .action-button:hover {
+  background: var(--action-icon-hover-color);
+}
+
+.non-action-button:active, .action-button:active {
+  background: var(--action-icon-press-color);
+}
+
+.action-button.deactivated:hover, .action-button.deactivated:active {
+  background: none;
+}
+
+.action-critical-button svg {
+  fill: var(--action-critical-icon-color);
+}
+
+.action-critical-button:hover {
+  background: var(--action-critical-icon-hover-color);
+}
+
+.action-critical-button:active {
+  background: var(--action-critical-icon-press-color);
+}
+
+#navbar #addBannedContactButton, #navbar #addToConversationsButton {
+  display: none;
+}
+
+#navbar.onBannedState #addToConvButton, #navbar.onBannedState #callButtons, #navbar.onBannedState #addToConversationsButton {
+  display: none;
+}
+
+#navbar.onBannedState #addBannedContactButton {
+  display: flex;
+}
+
 /** Invitation bar */
 
 #invitation {
@@ -77,7 +233,7 @@ body {
   border: 0;
   border-radius: 5px;
   transition: all 0.3s ease;
-  color: #212121;
+  color: #f9f9f9;
   padding: 10px 20px 10px 20px;
   vertical-align: middle;
   cursor: pointer;
@@ -113,24 +269,6 @@ body {
 
 /** Messaging bar */
 
-.svgicon {
-  display: block;
-  margin: auto;
-  height: 100%;
-}
-
-.action-button svg {
-  fill: var(--action-icon-color);
-}
-
-.action-button:hover {
-  background: var(--action-icon-hover-color);
-}
-
-.action-button:active {
-  background: var(--action-icon-press-color);
-}
-
 #sendMessage {
   background-color: var(--bg-color);
   display: flex;
@@ -154,16 +292,6 @@ body {
   visibility: hidden;
 }
 
-.msg-button {
-  border-radius: 50%;
-  border: 0;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-self: center;
-  cursor: pointer;
-}
-
 #message {
   flex: 1;
   background-color: var(--bg-color);