fix(toolbar): Button popups

css/_login_menu.scss

@@ -1,6 +1,7 @@
 /*Initialize*/
 ul.loginmenu {
-    font-family: inherit;
+    font-family: $baseFontFamily;
+    line-height: normal;
     display:none;
     position: absolute;
     margin: 0;
@@ -55,4 +56,17 @@ a.disabled {
     position: absolute;
     top: -30px;
     left: 0px;
-}
+}
+
+.loginmenu.extendedToolbarPopup {
+    left: 55px;
+    top: 0px;
+}
+
+ul.loginmenu.extendedToolbarPopup:after {
+    content: url('../images/leftDropdownPointer.png');
+    display: block;
+    position: absolute;
+    top: 18px;
+    left: -7px;
+}

index.html

@@ -109,7 +109,7 @@
             </a>
             <span id="authentication" class="authentication" style="display: none">
                 <a class="button icon-avatar" id="toolbar_button_authentication" data-i18n="[content]toolbar.authenticate"></a>
-                <ul class="loginmenu">
+                <ul class="loginmenu extendedToolbarPopup">
                     <span class="loginmenuPadding"></span>
                     <li id="toolbar_auth_identity"></li>
                     <li id="toolbar_button_login">
@@ -131,7 +131,7 @@
             <a class="button icon-security" id="toolbar_button_security" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]toolbar.lock" content="Lock / unlock room"></a>
             <a class="button icon-share-doc" id="toolbar_button_etherpad" data-container="body" data-toggle="popover" data-placement="right" content="Shared document" data-i18n="[content]toolbar.etherpad"></a>
             <a class="button icon-shared-video" id="toolbar_button_sharedvideo" data-container="body" data-toggle="popover" data-placement="right" content="Share a YouTube video" data-i18n="[content]toolbar.sharedvideo" style="display: none">
-                <ul id="sharedVideoMutedPopup" class="loginmenu">
+                <ul id="sharedVideoMutedPopup" class="loginmenu extendedToolbarPopup">
                     <li data-i18n="[html]toolbar.sharedVideoMutedPopup"></li>
                 </ul>
             </a>

modules/UI/toolbars/Toolbar.js

@@ -184,6 +184,18 @@ const defaultToolbarButtons = {
             APP.conference.toggleAudioMuted();
         },
         shortcutDescription: "keyboardShortcuts.mute",
+        popups: [
+            {
+                id: "micMutedPopup",
+                className: "loginmenu",
+                dataAttr: "[html]toolbar.micMutedPopup"
+            },
+            {
+                id: "unableToUnmutePopup",
+                className: "loginmenu",
+                dataAttr: "[html]toolbar.unableToUnmutePopup"
+            }
+        ],
         content: "Mute / Unmute",
         i18n: "[content]toolbar.mute"
     },
@@ -704,9 +716,22 @@ const Toolbar = {
         buttonElement.setAttribute("data-container", "body");
         buttonElement.setAttribute("data-toggle", "popover");
         buttonElement.setAttribute("data-placement", "bottom");
+        this._addPopups(buttonElement, button.popups);
 
         document.getElementById("mainToolbar")
             .appendChild(buttonElement);
+    },
+
+    _addPopups(buttonElement, popups = []) {
+        popups.forEach((popup) => {
+            let popupElement = document.createElement("ul");
+            popupElement.id = popup.id;
+            popupElement.className = popup.className;
+            let liElement = document.createElement("li");
+            liElement.setAttribute("data-i18n", popup.dataAttr);
+            popupElement.appendChild(liElement);
+            buttonElement.appendChild(popupElement);
+        });
     }
 };