Revert "chatview: use common chatview code"

This reverts commit 4b3bd0be.

Change-Id: I4ca15b188247b9c96cb9a46508ab02fdf102fa2e

.gitmodules

-[submodule "web"]
-	path = web
-	url = https://review.jami.net/jami-chatview

src/webkitchatcontainer.cpp

@@ -444,7 +444,6 @@ load_javascript_libs(WebKitWebView *webview_chat,
     /* Create the list of libraries to load */
     priv->js_libs_to_load = g_list_append(priv->js_libs_to_load, (gchar*) "/net/jami/JamiGnome/jed.js");
     priv->js_libs_to_load = g_list_append(priv->js_libs_to_load, (gchar*) "/net/jami/JamiGnome/linkify.js");
-    priv->js_libs_to_load = g_list_append(priv->js_libs_to_load, (gchar*) "/net/jami/JamiGnome/chatview.js");
     priv->js_libs_to_load = g_list_append(priv->js_libs_to_load, (gchar*) "/net/jami/JamiGnome/linkify-string.js");
     priv->js_libs_to_load = g_list_append(priv->js_libs_to_load, (gchar*) "/net/jami/JamiGnome/linkify-html.js");
 
@@ -552,22 +551,6 @@ build_view(WebKitChatContainer *view)
     );
     webkit_user_content_manager_add_style_sheet(webkit_content_manager, chatview_style_sheet);
 
-    chatview_style_sheet = webkit_user_style_sheet_new(
-        (gchar*) g_bytes_get_data(
-            g_resources_lookup_data(
-                "/net/jami/JamiGnome/chatview-gnome.css",
-                G_RESOURCE_LOOKUP_FLAGS_NONE,
-                NULL
-            ),
-            NULL
-        ),
-        WEBKIT_USER_CONTENT_INJECT_ALL_FRAMES,
-        WEBKIT_USER_STYLE_LEVEL_USER,
-        NULL,
-        NULL
-    );
-    webkit_user_content_manager_add_style_sheet(webkit_content_manager, chatview_style_sheet);
-
     /* Prepare WebKitSettings */
     WebKitSettings* webkit_settings = webkit_settings_new_with_settings(
         "enable-javascript", TRUE,

web @ 0a790d86

-Subproject commit 0a790d86a20ae80e5d2ee0d35452fa77cfb8cc40

web/.eslintrc.json

+{
+    "env": {
+        "browser": true
+    },
+    "plugins": ["html"],
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 6
+    },
+    "rules": {
+        "indent": [
+            "error",
+            4
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "double"
+        ],
+        "semi": [
+            "error",
+            "never"
+        ],
+        "no-inner-declarations": [
+            0
+        ]
+    }
+}

web/README

+# README - chatview
+
+The chatview runs under a WebKit GTK view. It is written using web technologies
+(HTML5/CSS3/JS) and is responsible for displaying everything that deals with the
+navbar, the messages, and the message bar.
+
+## Contributing - syntax
+
+We have a set of ESLint rules that define clear syntax rules (web/.eslintrc.json).
+
+You will need the following tools:
+
+- ESLint (The pluggable linting utility for JavaScript and JSX)
+  https://eslint.org/
+- ESLint HTML plugin (eslint-plugin-html)
+  https://www.npmjs.com/package/eslint-plugin-html
+
+Before pushing a patch, make sure that it passes ESLint:
+$ eslint chatview.html
+
+Most trivial issues can be fixed using
+$ eslint chatview.html --fix
+
+We will not accept patches introducing non-ESLint-compliant code.
+
+## WebKit GTK
+
+Everything runs under WebKit GTK, that is if you need to write browser specific
+code, you will only need to support WebKit (CSS -webkit- prefix).
+
+Do not use querySelector if getElementById or getElementByClassName can be used
+instead. querySelector doesn't always make the code easier and has very bad
+performances.

web/chatview.css

+/** Variable and font definitions */
+
+:root {
+  /* color definitions */
+  --ring-light-blue: rgba(59, 193, 211, 0.3);
+  --ring-dark-blue: #003b4e;
+  --ring-green: #219d55;
+  --ring-green-hover: #1f8b4c;
+  --ring-red: #dc2719;
+  --ring-red-hover: #b02e2c;
+
+  /* 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);
+
+  /* message bar properties */
+  --textarea-max-height: 150px;
+  --placeholder-text-color: #d3d3d3;
+
+  /* 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);
+  --invite-hover-color: white;
+
+  /* hairline properties */
+  --hairline-color: #d9d9d9;
+  --hairline-thickness: 0.2px;
+}
+
+@font-face {
+    font-family: emoji;
+
+    /* Fonts for text outside emoji blocks */
+    src: local('Open sans'),
+         local('Helvetica'),
+         local('Segoe UI'),
+         local('sans-serif');
+}
+
+@font-face {
+    font-family: emoji;
+
+    src: local('Noto Color Emoji'),
+         local('Android Emoji'),
+         local('Twitter Color Emoji');
+
+    /* Emoji unicode blocks */
+    unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
+}
+
+/** Body */
+
+body {
+  --navbar-size: calc(var(--navbar-height) + var(--navbar-padding-top) + var(--navbar-padding-bottom));
+  --messagebar-size: 57px; /* FIXME clean this up */
+
+  margin: 0;
+  overflow: hidden;
+  background-color: var(--bg-color);
+  padding-top: var(--navbar-size);
+  padding-bottom: var(--messagebar-size);
+
+  /* disable selection highlight because it looks very bad */
+  -webkit-user-select: none;
+}
+
+/** 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);
+
+  display: flex;
+}
+
+.hiddenState {
+  /* Used to hide navbar and message bar */
+  display: none !important;
+}
+
+.svgicon {
+  display: block;
+  margin: auto;
+  height: 100%;
+}
+
+.nav-button {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  cursor: pointer;
+  align-self: center;
+  border-radius: 50%;
+}
+
+.nav-button.deactivated {
+  width: 40px;
+  height: 40px;
+  align-self: center;
+  display: flex;
+  border-radius: 50%;
+  cursor: auto;
+}
+
+.nav-right {
+  align-self: flex-end;
+}
+
+.nav-left {
+  align-self: flex-start;
+}
+
+#nav-contactid {
+  margin: 0px;
+  margin-left: 5px;
+  padding: 0px;
+  height: 100%;
+  font-family: emoji;
+
+  /* enable selection (it is globally disabled in the body) */
+  -webkit-user-select: auto;
+
+  /* contactid field should take as much place as possible, but it should
+     also be the first one to shrink if necesary. */
+  flex-grow: 2;
+  flex-shrink: 2;
+  min-width: 0; /* necessary for child to be able to shrink correctly */
+
+  /* center vertically */
+  display: flex;
+  align-items: center;
+}
+
+#nav-contactid-wrapper {
+  width: 100%;
+}
+
+#nav-contactid-alias {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 3px;
+
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#nav-contactid-bestId {
+  font-size: 11px;
+
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.oneEntry #nav-contactid-bestId {
+  display: none;
+}
+
+.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);
+}
+
+#callButtons {
+  display: flex;
+}
+
+#navbar #unbanButton, #navbar #addToConversationsButton {
+  display: none;
+}
+
+#navbar.onBannedState #addToConvButton, #navbar.onBannedState #callButtons, #navbar.onBannedState #addToConversationsButton {
+  display: none;
+}
+
+#navbar.onBannedState #unbanButton {
+  display: flex;
+}
+
+/** Invitation bar */
+
+#invitation {
+  visibility: hidden;
+  background: var(--bg-color);
+  position: absolute;
+  width: 100%;
+  padding-bottom: 10px;
+
+  /* hairline */
+  border-bottom: var(--hairline-thickness) solid var(--hairline-color);
+}
+
+#invitation #invite_header {
+  margin: 10px;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* enable selection (it is globally disabled in the body) */
+  -webkit-user-select: auto;
+}
+
+#invitation .sender_image {
+  width: 50px;
+  height: 50px;
+}
+
+#invitation #actions {
+  margin-right: auto;
+  margin-left: auto;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* enable selection (it is globally disabled in the body) */
+  -webkit-user-select: auto;
+}
+
+#invitation #actions div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 5px;
+    margin-left: 5px;
+}
+
+#invitation #text {
+  text-align: center;
+  font-size: 0.8em;
+
+  /* enable selection (it is globally disabled in the body) */
+  -webkit-user-select: auto;
+}
+
+
+
+/** Messaging bar */
+
+#sendMessage {
+  background-color: var(--bg-color);
+  display: flex;
+  position: relative;
+  padding-right: 10px;
+  padding-left: 8px;
+  overflow: hidden;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  align-items: center;
+
+  position: fixed;
+  left:0; right:0;
+  z-index: 500;
+  bottom: 0;
+  /* hairline */
+  border-top: var(--hairline-thickness) solid var(--hairline-color);
+}
+
+#message {
+  font-family: emoji;
+  flex: 1;
+  background-color: var(--bg-color);
+  border: 0;
+  overflow-y: scroll;
+  color: black;
+  max-height: var(--textarea-max-height);
+  margin-right: 10px;
+  resize: none;
+
+  /* enable selection (it is globally disabled in the body) */
+  -webkit-user-select: auto;
+}
+
+#message:focus,
+#message.focus {
+  outline: none;
+}
+
+#container[disabled] {
+  background-color: #ccc;
+}
+
+input[placeholder], [placeholder], *[placeholder] {
+    color: var(--placeholder-text-color);
+}
+
+/** Main chat view */
+
+#lazyloading-icon {
+    margin: auto;
+    margin-bottom: 10px;
+    margin-top: 5px;
+    vertical-align: center;
+    width: 30px;
+    display: flex;
+}
+
+#container {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    /* When there are not enough messages to occupy full height of the
+       container, make sure they are displayed at the bottom, not at the
+       top. */
+    justify-content: flex-end;
+}
+
+a:link {
+  text-decoration: none;
+  color: #0e649b;
+  transition: all 0.2s ease-in-out;
+  border-bottom: dotted 1px;
+}
+
+a:hover {
+  border: 0;
+}
+
+#messages {
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  overflow-y: scroll;
+  height: auto;
+  padding-top: 0.5em;
+}
+
+.last-message {
+  /* The last message gets a bigger bottom padding so that it is not
+     "glued" to the message bar. */
+  padding-bottom: 1.5em !important;
+}
+
+/* General messages */
+
+.internal_mes_wrapper {
+    max-width: 70%;
+    margin: 8px 0 0 0;
+
+    display: flex;
+    flex-direction: column;
+
+    /* If a message is smaller (in width) than the timestamp, do not fill
+       full width and pack message at the left. */
+    align-items: flex-start;
+    align-content: flex-start;
+}
+
+.message_out > .internal_mes_wrapper {
+    /* If message is in the outgoing direction, pack at the right. */
+    align-items: flex-end;
+    align-content: flex-end;
+}
+
+.message_wrapper {
+    max-width: calc(100% - 2em);
+    border-radius: 10px;
+    padding: 1em;
+    position: relative;
+
+    display: flex;
+    flex-direction: row;
+}
+
+.message_type_data_transfer .message_wrapper {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    width: 450px;
+    max-width: none;
+}
+
+.transfer_info_wrapper {
+    display: flex;
+    flex-direction: row;
+}
+
+.message {
+    font: 0.875em emoji;
+    margin: 0;
+    display: flex;
+    justify-content: flex-start;
+    align-items: top;
+    overflow: hidden;
+
+  /* enable selection (it is globally disabled in the body) */
+  -webkit-user-select: auto;
+}
+
+.message_in {
+    padding-left: 25%;
+}
+
+.message_out {
+    padding-right: 25%;
+
+    /* Message sent by the user should be displayed at the right side of
+       the screen. */
+    flex-direction: row-reverse;
+}
+
+.message_delivery_status {
+    margin: 10px 10px;
+    color: #A0A0A0;
+}
+
+.message_sender {
+    display: none;
+}
+
+.sender_image {
+    border-radius: 50%;
+    margin: 10px;
+    width: 35px;
+    height: 35px;
+}
+
+.message_out .message_wrapper {
+    border-top-right-radius: 0;
+    transform-origin: top right;
+}
+
+.message_in .message_wrapper {
+    border-top-left-radius: 0;
+    transform-origin: top left;
+}
+
+.message_out .message_wrapper {
+    background-color: #cfd8dc;
+}
+
+.message_in .message_wrapper {
+    background-color: #fdfdfd;
+}
+
+/* Only the first message of a serie of messages has an angular
+ * top-right / top-left corner. Others get a rounded one.
+ * Same for avatars: do not show it for every single message,
+ * only for the first one of a serie. */
+
+.message_out + .message_out .message_wrapper {
+    border-top-right-radius: 10px;
+}
+
+.message_in + .message_in .message_wrapper {
+    border-top-left-radius: 10px;
+}
+
+.message_in + .message_in .sender_image {
+    visibility: hidden;
+}
+
+.message_out + .message_out .sender_image {
+    visibility: hidden;
+}
+
+@-webkit-keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+}
+
+.timestamp {
+    display: inline-flex;
+    justify-content: flex-start;
+    align-self:stretch;
+    color: #333;
+    font-size: 10px;
+    padding: 5px;
+}
+
+.timestamp_out {
+    flex-direction: row-reverse;
+}
+
+.timestamp_action {
+    margin: auto;
+    padding: 0;
+    vertical-align: center;
+    opacity:0;
+    transition: visibility 0.3s linear, opacity 0.3s linear;
+}