Add jsdocs, apply manual formatting

https://github.com/jitsi/jitsi-meet/pull/1397 (React Toolbar) is huge at
the time of this writing. In order to reduce it, I'm extracting changes
not directly related to React-ifying the Toolbar such as added jsdocs
and source code formatting.

modules/UI/UI.js

@@ -196,11 +196,11 @@ UI.setRaisedHandStatus = (participant, raisedHandStatus) => {
 /**
  * Sets the local "raised hand" status.
  */
-UI.setLocalRaisedHandStatus = (raisedHandStatus) => {
+UI.setLocalRaisedHandStatus
-    VideoLayout.setRaisedHandStatus(
+    = raisedHandStatus => 
+        VideoLayout.setRaisedHandStatus(
             APP.conference.getMyUserId(),
             raisedHandStatus);
-};
 
 /**
  * Initialize conference UI.
@@ -306,9 +306,12 @@ UI.start = function () {
 
     sharedVideoManager = new SharedVideoManager(eventEmitter);
     if (!interfaceConfig.filmStripOnly) {
-        let debouncedShowToolbar = debounce(() => {
+        let debouncedShowToolbar
-            UI.showToolbar();
+            = debounce(
-        }, 100, { leading: true, trailing: false });
+                    () => UI.showToolbar(),
+                    100,
+                    { leading: true, trailing: false });
+
         $("#videoconference_page").mousemove(debouncedShowToolbar);
         setupToolbars();
 
@@ -713,9 +716,7 @@ UI.removeListener = function (type, listener) {
  * @param type the type of the event we're emitting
  * @param options the parameters for the event
  */
-UI.emitEvent = function (type, options) {
+UI.emitEvent = (type, options) => eventEmitter.emit(type, options);
-    eventEmitter.emit(type, options);
-};
 
 UI.clickOnVideo = function (videoNumber) {
     let videos = $("#remoteVideos .videocontainer:not(#mixedstream)");
@@ -913,9 +914,7 @@ UI.promptDisplayName = () => {
  * @param {string} id user id
  * @param {number} lvl audio level
  */
-UI.setAudioLevel = function (id, lvl) {
+UI.setAudioLevel = (id, lvl) => VideoLayout.setAudioLevel(id, lvl);
-    VideoLayout.setAudioLevel(id, lvl);
-};
 
 /**
  * Update state of desktop sharing buttons.

modules/UI/side_pannels/SidePanels.js

@@ -6,18 +6,25 @@ import UIUtil from '../util/UIUtil';
 
 const SidePanels = {
     init (eventEmitter) {
-        //Initialize chat
+        // Initialize chat
-        if (UIUtil.isButtonEnabled('chat'))
+        if (UIUtil.isButtonEnabled('chat')) {
             Chat.init(eventEmitter);
-        //Initialize settings
+        }
-        if (UIUtil.isButtonEnabled('settings'))
+
+        // Initialize settings
+        if (UIUtil.isButtonEnabled('settings')) {
             SettingsMenu.init(eventEmitter);
-        //Initialize profile
+        }
-        if (UIUtil.isButtonEnabled('profile'))
+
+        // Initialize profile
+        if (UIUtil.isButtonEnabled('profile')) {
             Profile.init(eventEmitter);
-        //Initialize contact list view
+        }
-        if (UIUtil.isButtonEnabled('contacts'))
+
+        // Initialize contact list view
+        if (UIUtil.isButtonEnabled('contacts')) {
             ContactListView.init();
+        }
     }
 };
 

modules/UI/side_pannels/chat/Chat.js

@@ -49,30 +49,41 @@ var CHAT_CONTAINER_ID = "chat_container";
  *  Updates visual notification, indicating that a message has arrived.
  */
 function updateVisualNotification() {
-    var unreadMsgElement = document.getElementById('unreadMessages');
+    // XXX The rewrite of the toolbar in React delayed the availability of the
+    // element unreadMessages. In order to work around the delay, I introduced
+    // and utilized unreadMsgSelector in addition to unreadMsgElement.
+    const unreadMsgSelector = $('#unreadMessages');
+    const unreadMsgElement
+        = unreadMsgSelector.length > 0 ? unreadMsgSelector[0] : undefined;
 
     if (unreadMessages) {
         unreadMsgElement.innerHTML = unreadMessages.toString();
 
         ToolbarToggler.dockToolbar(true);
 
-        var chatButtonElement
+        const chatButtonElement
             = document.getElementById('toolbar_button_chat');
-        var leftIndent = (UIUtil.getTextWidth(chatButtonElement) -
+        const leftIndent
-            UIUtil.getTextWidth(unreadMsgElement)) / 2;
+            = (UIUtil.getTextWidth(chatButtonElement)
-        var topIndent = (UIUtil.getTextHeight(chatButtonElement) -
+                    - UIUtil.getTextWidth(unreadMsgElement))
-            UIUtil.getTextHeight(unreadMsgElement)) / 2 - 5;
+                / 2;
+        const topIndent
+            = (UIUtil.getTextHeight(chatButtonElement)
+                        - UIUtil.getTextHeight(unreadMsgElement))
+                    / 2
+                - 5;
 
         unreadMsgElement.setAttribute(
-            'style',
+                'style',
-                'top:' + topIndent +
+                'top:' + topIndent + '; left:' + leftIndent + ';');
-                '; left:' + leftIndent + ';');
     }
     else {
-        unreadMsgElement.innerHTML = '';
+        unreadMsgSelector.html('');
     }
 
-    $(unreadMsgElement).parent()[unreadMessages > 0 ? 'show' : 'hide']();
+    if (unreadMsgElement) {
+        unreadMsgSelector.parent()[unreadMessages > 0 ? 'show' : 'hide']();
+    }
 }
 
 
@@ -309,7 +320,7 @@ var Chat = {
         }
 
         let subjectId = 'subject';
-        let html = linkify(UIUtil.escapeHtml(subject));
+        const html = linkify(UIUtil.escapeHtml(subject));
         $(`#${subjectId}`).html(html);
         UIUtil.setVisible(subjectId, subject && subject.length > 0);
     },

react/features/film-strip/components/FilmStrip.js

@@ -26,6 +26,13 @@ class FilmStrip extends Component {
          * @type {Participant[]}
          */
         _participants: React.PropTypes.array,
+
+        /**
+         * The indicator which determines whether the film strip is visible.
+         *
+         * @private
+         * @type {boolean}
+         */
         visible: React.PropTypes.bool.isRequired
     }
 
@@ -101,7 +108,7 @@ class FilmStrip extends Component {
  * @param {Object} state - Redux state.
  * @private
  * @returns {{
- *      _participants: Participant[],
+ *     _participants: Participant[],
  *  }}
  */
 function _mapStateToProps(state) {

react/features/toolbar/components/AbstractToolbarButton.js

@@ -21,12 +21,24 @@ export default class AbstractToolbarButton extends Component {
          * The style of the Icon of this AbstractToolbarButton.
          */
         iconStyle: React.PropTypes.object,
+
+        /**
+         * On click handler.
+         */
         onClick: React.PropTypes.func,
+
+        /**
+         * Toolbar button styles.
+         */
         style:
             React.PropTypes.oneOfType([
                 React.PropTypes.array,
                 React.PropTypes.object
             ]),
+
+        /**
+         * The color underlaying the button.
+         */
         underlayColor: React.PropTypes.any
     }
 

react/features/toolbar/components/Notice.js

@@ -24,6 +24,11 @@ export default class Notice extends Component {
         const { noticeMessage } = config;
 
         this.state = {
+            /**
+             * Message to be shown in notice component.
+             *
+             * @type {string}
+             */
             noticeMessage
         };
     }