chatview: major cleanup
Despite of the recent optimization commits, the chatview is still
affected by a significant number of performance issues. This commit
tries to address some of them:
* Use getElementById instead of querySelector, when possible.
* Use getElementByClassName instead of querySelector, when possible.
(querySelector is in average 2x slower than getElementById or
getElementByClassName!)
In this commit we also address the following bugs:
* printHistoryPart: it doesn't make any sense to call
addOrUpdateMessage if we are at the end of the buffer.
* the bottom padding of the body isn't updated with the size of
the #message textarea, leading to an annoying overlap when writing
large messages.
* selection highlighting in the chatview is crappy. The user should
not be able to highlight the background because it doesn't make
any sense. Only meaningful elements should be highlightable.
* The first time a message fails to be sent, the cross 'X' icon
is displayed with a very bad looking shift to the right. This is
because the 'sending' icon is still displayed, with visibility
hidden.
* Many variables were not declared / using some broken, ancient
JavaScript Sith magic we don't want to mess with. In order to make
sure we are not going to rely on such mechanisms anymore, add
"use strict" stanza.
In addition to that we also fix a _very_ large number of style issues
(semicolons, indentation, comments) and define a clear style policy
for the JS code.
A code audit revealed several small bugs which we are not going to
address in this commit. Add FIXME comments.
Also, remove some useless debug warnings from the GTK side chatview
code.
Change-Id: If6b605868ba6b0b9623ae01c5293064211b58327
Reviewed-by: Sebastien Blin <sebastien.blin@savoirfairelinux.com>
diff --git a/web/README b/web/README
new file mode 100644
index 0000000..df47564
--- /dev/null
+++ b/web/README
@@ -0,0 +1,33 @@
+# 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.