chatview: add chatview folder to lrc

Change-Id: I6739b541e7f19addfbef34ed732d2d5c6cad5155

CMakeLists.txt

@@ -344,6 +344,19 @@ SET(libringclient_api_LIB_HDRS
   src/api/newvideo.h
 )
 
+SET(libringclient_WEB_chatview
+   src/web-chatview/.eslintrc.json
+   src/web-chatview/chatview-gnome.css
+   src/web-chatview/chatview.css
+   src/web-chatview/chatview.html
+   src/web-chatview/chatview.js
+   src/web-chatview/jed.js
+   src/web-chatview/linkify-html.js
+   src/web-chatview/linkify-string.js
+   src/web-chatview/linkify.js
+   src/web-chatview/qwebchannel.js
+   src/web-chatview/web.gresource.xml
+)
 
 SET(libringclient_video_LIB_HDRS
   src/video/renderer.h
@@ -580,6 +593,11 @@ INSTALL( FILES ${libringclient_video_LIB_HDRS}
   COMPONENT Devel
 )
 
+INSTALL( FILES ${libringclient_WEB_chatview}
+  DESTINATION ${INCLUDE_INSTALL_DIR}/libringclient/web-chatview
+  COMPONENT Devel
+)
+
 INSTALL( FILES ${libringclient_extensions_LIB_HDRS}
   DESTINATION ${INCLUDE_INSTALL_DIR}/libringclient/extensions
   COMPONENT Devel

src/web-chatview/.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
+        ]
+    }
+}

src/web-chatview/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.js --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.

src/web-chatview/chatview-gnome.css

+.internal_mes_wrapper {
+    margin: 3px 0 0 0;
+}
+
+.message_wrapper {
+    padding: 1em;
+}
+
+.sender_image {
+    margin: 10px;
+}
+
+.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;
+}
+
+.message_text {
+    hyphens: auto;
+    word-break: break-word;
+    word-wrap: break-word;
+}
+
+.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;
+}
\ No newline at end of file

src/web-chatview/chatview-windows.css

+:root {
+    /* color definitions */
+    --jami-light-blue: rgba(59, 193, 211, 0.3);
+    --jami-dark-blue: #004e86;
+    --jami-green: #219d55;
+    --jami-green-hover: #1f8b4c;
+    --jami-red: #dc2719;
+    --jami-red-hover: #b02e2c;
+    /* main properties */
+    --bg-color: #ffffff;
+    /* 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: #00;
+    --deactivated-icon-color: #bebebe;
+    --action-icon-hover-color: #ededed;
+    --action-critical-icon-hover-color: rgba(211, 77, 59, 0.3); /* complementary color of jami 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(212, 212, 212, 1.0);
+    --invite-hover-color: white;
+    /* hairline properties */
+    --hairline-color: #f0f0f0;
+    --hairline-thickness: 2px;
+}
+
+#invite_contact_name {
+    font-weight: 500;
+}
+
+
+.internal_mes_wrapper {
+    margin: 0;
+}
+
+.message_wrapper {
+    padding: 0.5em 1em 0.5em 1em;
+}
+
+.sender_image {
+    margin: 0px 10px 0px 10px;
+}
+
+.message_in .message_wrapper {
+    background-color: #cfebf5;
+}
+
+.message_in .sender_image,
+.message_out .sender_image {
+    visibility: hidden;
+}
+
+.message_in.last_of_sequence .sender_image,
+.message_in.single_message .sender_image {
+    visibility: visible;
+}
+
+.message_in.last_of_sequence .sender_image {
+    margin-top: 2px;
+}
+
+.message_in.middle_of_sequence .sender_image {
+    margin-top: 0px;
+}
+
+
+.generated_message.message_in .message_wrapper,
+.generated_message.message_out .message_wrapper {
+    background-color: transparent !important;
+    border-radius: 0px !important;
+}
+
+.single_message.message_in .message_wrapper,
+.single_message.message_out .message_wrapper {
+    border-radius: 20px 20px 20px 20px !important;
+}
+
+.last_of_sequence.message_in .message_wrapper {
+    border-radius: 4px 20px 20px 20px;
+}
+
+.first_of_sequence.message_in .message_wrapper {
+    border-radius: 20px 20px 20px 4px;
+}
+
+.middle_of_sequence.message_in .message_wrapper {
+    border-radius: 4px 20px 20px 5px;
+}
+
+.last_of_sequence.message_out .message_wrapper {
+    border-radius: 20px 4px 20px 20px;
+}
+
+.first_of_sequence.message_out .message_wrapper {
+    border-radius: 20px 20px 4px 20px;
+}
+
+.middle_of_sequence.message_out .message_wrapper {
+    border-radius: 20px 5px 4px 20px;
+}
+
+.middle_of_sequence .internal_mes_wrapper,
+.last_of_sequence .internal_mes_wrapper,
+.last_message .internal_mes_wrapper {
+    margin: 0px 0 0 0 !important;
+}
+
+.message_out .sender_image {
+    margin: 8px;
+}
+
+.first_of_sequence.message_out .internal_mes_wrapper,
+.single_message.message_out .internal_mes_wrapper {
+    margin: 0px 0 0 0 !important;
+}
+
+.sender_image_cell {
+    vertical-align: bottom;
+    min-width: 16px;
+}
+
+.message_in .sender_image_cell {
+    min-width: 56px;
+}
+
+.dummy_cell {
+    padding: 0;
+}
+
+.timestamp_cell {
+    padding: 0;
+    max-width: 0px;
+    overflow: visible;
+    white-space: nowrap;
+}
+
+.timestamp_cell_out {
+    padding: 0;
+    text-align: right;
+    direction: rtl;
+    max-width: 0px;
+    overflow: visible;
+    white-space: nowrap;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0 0px;
+    margin: 0;
+    padding: 0;
+}
+
+.message_text {
+    word-break: break-all;
+    word-wrap: hyphenate;
+}
+
+pre {
+    white-space: pre-wrap;
+}
+
+.message:hover:not(.message_type_contact) .menu_interaction {
+    display: block;
+    opacity: 1;
+}
+
+.menuoption {
+    user-select: none;
+    cursor: pointer;
+}
+
+.nav-button {
+    width: 30px;
+    height: 30px;
+    margin: 8px;
+    padding: 2px;
+    display: flex;
+    cursor: pointer;
+    align-self: center;
+    border-radius: 16px;
+}
+
+.nav-button.deactivated {
+    width: 30px;
+    height: 30px;
+    margin: 8px;
+    padding: 2px;
+    align-self: center;
+    display: flex;
+    border-radius: 16px;
+    cursor: auto;
+}
\ No newline at end of file

src/web-chatview/chatview.css

+/** Variable and font definitions */
+
+:root {
+  /* color definitions */
+  --jami-light-blue: rgba(59, 193, 211, 0.3);
+  --jami-dark-blue: #003b4e;
+  --jami-green: #219d55;
+  --jami-green-hover: #1f8b4c;
+  --jami-red: #dc2719;
+  --jami-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(--jami-dark-blue);
+  --deactivated-icon-color: #BEBEBE;
+  --action-icon-hover-color: var(--jami-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 {
+    --messagebar-size: 47px;
+    margin: 0;
+    overflow: hidden;
+    background-color: var(--bg-color);
+    padding-bottom: var(--messagebar-size);
+    /* disable selection highlight because it looks very bad */
+    -webkit-user-select: text;
+}
+
+::-webkit-scrollbar-track {
+    background-color: var(--bg-color);
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+    background-color: var(--bg-color);
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--bg-color);
+ }
+
+
+/** 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: 70%;
+}
+
+.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;
+}
+
+.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;