Bug 1679261 - remove <deck> from chat-messenger.inc.xhtml. r=mkmelin draft
authorKhushil Mistry <khushil324@gmail.com>
Fri, 27 Nov 2020 01:10:28 +0530
changeset 95737 e74ff704335c7ba44b150e1522f7668f08965a52
parent 95733 ab382cc8c073f91261be27709fe18da758c2a1f1
child 95738 50c3825ddac4cb5f53e444a349e1011258d9995e
push id12261
push userkhushil324@gmail.com
push dateThu, 26 Nov 2020 19:43:15 +0000
treeherdertry-comm-central@50c3825ddac4 [default view] [failures only]
reviewersmkmelin
bugs1679261
Bug 1679261 - remove <deck> from chat-messenger.inc.xhtml. r=mkmelin
chat/modules/OTRUI.jsm
mail/components/im/content/chat-conversation-info.js
mail/components/im/content/chat-messenger.inc.xhtml
mail/components/im/content/chat-messenger.js
mail/test/browser/im/browser_toolbarButtons.js
mail/themes/windows/mail/chat.css
--- a/chat/modules/OTRUI.jsm
+++ b/chat/modules/OTRUI.jsm
@@ -374,18 +374,24 @@ var OTRUI = {
   updateOTRButton(_conv) {
     if (!OTR.libLoaded) {
       return;
     }
     if (!this.globalDoc) {
       return;
     }
     OTRUI.visibleConv = _conv;
-    let convBinding = this.globalDoc.getElementById("conversationsDeck")
-      .selectedPanel;
+    let convBinding;
+    for (let element of this.globalDoc.getElementById("conversationsBox")
+      .children) {
+      if (!element.hidden) {
+        convBinding = element;
+        break;
+      }
+    }
     if (convBinding && convBinding._conv && convBinding._conv.target) {
       OTRUI.setMsgState(_conv, null, this.globalDoc, false);
     } else {
       this.hideOTRButton();
     }
   },
 
   // set msg state on toolbar button
--- a/mail/components/im/content/chat-conversation-info.js
+++ b/mail/components/im/content/chat-conversation-info.js
@@ -126,18 +126,17 @@
       return this.querySelector(".statusMessageInput");
     }
 
     finishEditTopic(save) {
       if (!this.hasAttribute("editing")) {
         return;
       }
 
-      let panel = document.getElementById("conversationsDeck").selectedPanel;
-
+      let panel = this.getSelectedPanel();
       let topic = this.topic;
       let topicInput = this.topicInput;
       topic.removeAttribute("hidden");
       topicInput.toggleAttribute("hidden", "true");
       if (save) {
         // apply the new topic only if it is different from the current one
         if (topicInput.value != topicInput.getAttribute("value")) {
           panel._conv.topic = topicInput.value;
@@ -200,42 +199,49 @@
     otrButtonClicked(aEvent) {
       aEvent.preventDefault();
       let otrMenu = this.querySelector(".otr-menu-popup");
       otrMenu.openPopup(otrMenu.parentNode, "after_start");
     }
 
     onOtrStartClicked() {
       // check if start-menu-command is disabled, if yes exit
-      let convBinding = document.getElementById("conversationsDeck")
-        .selectedPanel;
+      let convBinding = this.getSelectedPanel();
       let uiConv = convBinding._conv;
       let conv = uiConv.target;
       let context = OTR.getContext(conv);
       let bundleId =
         "alert-" +
         (context.msgstate === OTR.getMessageState().OTRL_MSGSTATE_ENCRYPTED
           ? "refresh"
           : "start");
       OTRUI.sendSystemAlert(uiConv, conv, bundleId);
       OTR.sendQueryMsg(conv);
     }
 
     onOtrEndClicked() {
-      let convBinding = document.getElementById("conversationsDeck")
-        .selectedPanel;
+      let convBinding = this.getSelectedPanel();
       let uiConv = convBinding._conv;
       let conv = uiConv.target;
       OTR.disconnect(conv, false);
       let bundleId = "alert-gone_insecure";
       OTRUI.sendSystemAlert(uiConv, conv, bundleId);
     }
 
     onOtrAuthClicked() {
-      let convBinding = document.getElementById("conversationsDeck")
-        .selectedPanel;
+      let convBinding = this.getSelectedPanel();
       let uiConv = convBinding._conv;
       let conv = uiConv.target;
       OTRUI.openAuth(window, conv.normalizedName, "start", uiConv);
     }
+
+    getSelectedPanel() {
+      for (let element of document.getElementById("conversationsBox")
+        .children) {
+        if (!element.hidden) {
+          return element;
+        }
+      }
+      return null;
+    }
   }
   customElements.define("chat-conversation-info", MozChatConversationInfo);
 }
--- a/mail/components/im/content/chat-messenger.inc.xhtml
+++ b/mail/components/im/content/chat-messenger.inc.xhtml
@@ -108,17 +108,17 @@
                   <richlistitem is="chat-group-richlistitem" id="offlinecontactsGroup"
                                 name="&offlineContactsHeader.label;"
                                 class="closed"/>
                 </richlistbox>
               </vbox>
               <splitter id="listSplitter" collapse="before"/>
               <vbox id="chat-notification-top" flex="1">
                 <!-- notificationbox will be added here lazily. -->
-                <deck id="conversationsDeck" flex="1">
+                <vbox id="conversationsBox" flex="1">
 
                   <vbox flex="1" id="noConvScreen" class="im-placeholder-screen" align="center" pack="center">
                     <hbox id="noConvBox" class="im-placeholder-box" align="start">
                       <vbox id="noConvInnerBox" class="im-placeholder-innerbox" flex="1">
                         <label id="noConvTitle" class="im-placeholder-title">&chat.noConv.title;</label>
                         <description id="noConvDesc"
                                      class="im-placeholder-desc">&chat.noConv.description;</description>
                       </vbox>
@@ -141,40 +141,40 @@
                           <spacer flex="1"/>
                           <button id="openIMAccountManagerButton" label="&chat.showAccountManager.button;"
                                   oncommand="openIMAccountMgr();"/>
                         </hbox>
                       </vbox>
                     </hbox>
                   </vbox>
 
-                  <vbox id="logDisplay" flex="1">
-                    <deck id="logDisplayDeck" flex="1">
+                  <vbox id="logDisplay" flex="1" hidden="true">
+                    <vbox flex="1">
                       <vbox flex="1" id="noPreviousConvScreen" class="im-placeholder-screen" align="center" pack="center">
                         <hbox id="noPreviousConvBox" class="im-placeholder-box" align="start">
                           <vbox id="noPreviousConvInnerBox" class="im-placeholder-innerbox" flex="1">
                             <description id="noPreviousConvDesc"
                                          class="im-placeholder-desc">&chat.noPreviousConv.description;</description>
                           </vbox>
                         </hbox>
                       </vbox>
                       <vbox flex="1" id="logDisplayBrowserBox">
                         <browser id="conv-log-browser" is="conversation-browser" type="content"
                                 contextmenu="chatConversationContextMenu" flex="1"
                                 tooltip="imTooltip"
                                 messagemanagergroup="browsers"/>
                         <html:progress id="log-browserProgress" max="100" hidden="true"/>
                         <findbar id="log-findbar" browserid="conv-log-browser"/>
                       </vbox>
-                    </deck>
+                    </vbox>
                     <button id="goToConversation" hidden="true"
                             oncommand="chatHandler.showCurrentConversation();"/>
                   </vbox>
 
-                </deck>
+                </vbox>
               </vbox>
               <splitter id="contextSplitter" hidden="true" collapse="after"/>
               <vbox id="contextPane" hidden="true" width="250" persist="width">
                 <chat-conversation-info id="conv-top-info" class="conv-top-info"/>
                 <vbox id="contextPaneFlexibleBox" flex="1">
                   <vbox flex="1" class="conv-chat" width="150">
                     <hbox align="baseline" class="conv-nicklist-header input-container">
                       <label id="participantLabel"
--- a/mail/components/im/content/chat-messenger.js
+++ b/mail/components/im/content/chat-messenger.js
@@ -72,16 +72,31 @@ function openChatContextMenu(popup) {
 
 function clearChatContextMenu(popup) {
   let conv = chatHandler._getActiveConvView();
   let spellchecker = conv.spellchecker;
   spellchecker.clearDictionaryListFromMenu();
   spellchecker.clearSuggestionsFromMenu();
 }
 
+function getSelectedPanel() {
+  for (let element of document.getElementById("conversationsBox").children) {
+    if (!element.hidden) {
+      return element;
+    }
+  }
+  return null;
+}
+
+function hideAllPanels() {
+  for (let element of document.getElementById("conversationsBox").children) {
+    element.hidden = true;
+  }
+}
+
 // This function modifies gChatSpellChecker and updates the UI accordingly. It's
 // called when the user clicks on context menu to toggle the spellcheck feature.
 function enableInlineSpellCheck(aEnableInlineSpellCheck) {
   gChatSpellChecker.enabled = aEnableInlineSpellCheck;
   document
     .getElementById("spellCheckEnable")
     .setAttribute("checked", aEnableInlineSpellCheck);
   document
@@ -383,36 +398,30 @@ var chatTabType = {
         break;
       case "cmd_findPrevious":
         this.getFindbar().onFindAgainCommand(true);
         break;
     }
   },
   onEvent(aEvent, aTab) {},
   getBrowser(aTab) {
-    let panel = document.getElementById("conversationsDeck").selectedPanel;
+    let panel = getSelectedPanel();
     if (panel == document.getElementById("logDisplay")) {
-      if (
-        document.getElementById("logDisplayDeck").selectedPanel ==
-        document.getElementById("logDisplayBrowserBox")
-      ) {
+      if (!document.getElementById("logDisplayBrowserBox").hidden) {
         return document.getElementById("conv-log-browser");
       }
     } else if (panel && panel.localName == "chat-conversation") {
       return panel.convBrowser;
     }
     return null;
   },
   getFindbar(aTab) {
-    let panel = document.getElementById("conversationsDeck").selectedPanel;
+    let panel = getSelectedPanel();
     if (panel == document.getElementById("logDisplay")) {
-      if (
-        document.getElementById("logDisplayDeck").selectedPanel ==
-        document.getElementById("logDisplayBrowserBox")
-      ) {
+      if (!document.getElementById("logDisplayBrowserBox").hidden) {
         return document.getElementById("log-findbar");
       }
     } else if (panel && panel.localName == "chat-conversation") {
       return panel.findbar;
     }
     return null;
   },
 
@@ -551,18 +560,17 @@ var chatHandler = {
         title += " - " + selectedItem.getAttribute("displayname");
       }
     }
     gChatTab.title = title;
     document.getElementById("tabmail").setTabTitle(gChatTab);
   },
 
   onConvResize() {
-    let convDeck = document.getElementById("conversationsDeck");
-    let panel = convDeck.selectedPanel;
+    let panel = getSelectedPanel();
     if (panel && panel.localName == "chat-conversation") {
       panel.onConvResize();
     }
   },
 
   setStatusMenupopupCommand(aEvent) {
     let target = aEvent.originalTarget;
     if (
@@ -580,22 +588,20 @@ var chatHandler = {
     }
 
     let us = imServices.core.globalUserStatus;
     us.setStatus(Status.toFlag(status), us.statusText);
   },
 
   _pendingLogBrowserLoad: false,
   _showLogPanel() {
-    document.getElementById(
-      "conversationsDeck"
-    ).selectedPanel = document.getElementById("logDisplay");
-    document.getElementById(
-      "logDisplayDeck"
-    ).selectedPanel = document.getElementById("logDisplayBrowserBox");
+    hideAllPanels();
+    document.getElementById("logDisplay").hidden = false;
+    document.getElementById("logDisplayBrowserBox").hidden = false;
+    document.getElementById("noPreviousConvScreen").hidden = true;
   },
   _showLog(aConversation, aSearchTerm) {
     if (!aConversation) {
       return;
     }
     this._showLogPanel();
     let browser = document.getElementById("conv-log-browser");
     browser._convScrollEnabled = false;
@@ -765,18 +771,19 @@ var chatHandler = {
     let item = document.getElementById("contactlistbox").selectedItem;
     if (!item) {
       return;
     }
     if (
       item.localName == "richlistitem" &&
       item.getAttribute("is") == "chat-imconv-richlistitem"
     ) {
-      document.getElementById("conversationsDeck").selectedPanel =
-        item.convView;
+      hideAllPanels();
+      item.convView.hidden = false;
+      item.convView.querySelector(".conv-bottom").setAttribute("height", 110);
       document.getElementById("logTree").view.selection.clearSelection();
       item.convView.focus();
     } else if (
       item.localName == "richlistitem" &&
       item.getAttribute("is") == "chat-contact-richlistitem"
     ) {
       item.openConversation();
     }
@@ -841,19 +848,18 @@ var chatHandler = {
     let item = contactlistbox.selectedItem;
     if (
       !item ||
       item.hidden ||
       (item.localName == "richlistitem" &&
         item.getAttribute("is") == "chat-group-richlistitem")
     ) {
       this._hideContextPane(true);
-      document.getElementById(
-        "conversationsDeck"
-      ).selectedPanel = document.getElementById("noConvScreen");
+      hideAllPanels();
+      document.getElementById("noConvScreen").hidden = false;
       this.updateTitle();
       this.observedContact = null;
       if (gOtrEnabled) {
         OTRUI.hideOTRButton();
       }
       return;
     }
 
@@ -887,20 +893,20 @@ var chatHandler = {
           this._pendingSearchTerm = item.searchTerm || undefined;
           this._showLogList(aSimilarLogs, aLog);
         });
       });
     } else if (
       item.localName == "richlistitem" &&
       item.getAttribute("is") == "chat-imconv-richlistitem"
     ) {
-      let convDeck = document.getElementById("conversationsDeck");
+      let convBox = document.getElementById("conversationsBox");
       if (!item.convView) {
         let conv = document.createXULElement("chat-conversation");
-        convDeck.appendChild(conv);
+        convBox.appendChild(conv);
         conv.conv = item.conv;
         conv.tab = item;
         conv.setAttribute("contextmenu", "chatConversationContextMenu");
         conv.setAttribute("tooltip", "imTooltip");
         item.convView = conv;
         document.getElementById("contextSplitter").hidden = false;
         document.getElementById("contextPane").hidden = false;
         conv.editor.addEventListener("contextmenu", e => {
@@ -927,17 +933,19 @@ var chatHandler = {
         document.addEventListener("spellcheck-changed", e => {
           let conv = chatHandler._getActiveConvView();
           conv.editor.setAttribute("lang", e.detail.dictionary);
         });
       } else {
         item.convView.onConvResize();
       }
 
-      convDeck.selectedPanel = item.convView;
+      hideAllPanels();
+      item.convView.hidden = false;
+      item.convView.querySelector(".conv-bottom").setAttribute("height", 110);
       item.convView.updateConvStatus();
       item.update();
 
       if (gOtrEnabled) {
         OTRUI.updateOTRButton(item.conv);
       }
 
       imServices.logs.getLogsForConversation(item.conv, true).then(aLogs => {
@@ -988,22 +996,20 @@ var chatHandler = {
           e.setAttribute("hidden", "true");
         });
 
       imServices.logs.getLogsForContact(contact, true).then(aLogs => {
         if (contactlistbox.selectedItem != item) {
           return;
         }
         if (!this._showLogList(aLogs, true)) {
-          document.getElementById(
-            "conversationsDeck"
-          ).selectedPanel = document.getElementById("logDisplay");
-          document.getElementById(
-            "logDisplayDeck"
-          ).selectedPanel = document.getElementById("noPreviousConvScreen");
+          hideAllPanels();
+          document.getElementById("logDisplay").hidden = false;
+          document.getElementById("logDisplayBrowserBox").hidden = false;
+          document.getElementById("noPreviousConvScreen").hidden = true;
         }
       });
     }
     this.updateTitle();
   },
 
   onNickClick(aEvent) {
     // Open a private conversation only for a middle or double click.
--- a/mail/test/browser/im/browser_toolbarButtons.js
+++ b/mail/test/browser/im/browser_toolbarButtons.js
@@ -23,19 +23,18 @@ add_task(function test_toolbar_and_place
   mc.click(mc.eid("button-chat"));
   Assert.equal(
     mc.tabmail.selectedTab.mode.type,
     "chat",
     "the chat tab should be selected"
   );
 
   // Check that "No connected account" placeholder is correct.
-  Assert.equal(
-    mc.e("conversationsDeck").selectedPanel.id,
-    "noConvScreen",
+  Assert.ok(
+    !mc.e("noConvScreen").hidden,
     "'Your chat accounts are not connected.' placeholder"
   );
   Assert.ok(
     mc.e("noConvInnerBox").hidden,
     "the 'No conversation' placeholder is hidden"
   );
   Assert.ok(
     mc.e("noAccountInnerBox").hidden,
--- a/mail/themes/windows/mail/chat.css
+++ b/mail/themes/windows/mail/chat.css
@@ -16,17 +16,17 @@
 }
 
 #listPaneBox > * {
   background: transparent !important;
   appearance: none !important;
   border: none;
 }
 
-#conversationsDeck {
+#conversationsBox {
   background: var(--imbox-selected-background-color);
 }
 
 .conv-textbox {
   appearance: none;
   /* Right/left margins so the borders show up on all sides. */
   margin: 0 1px;
   padding: 2px;
@@ -169,17 +169,17 @@ richlistitem[is="chat-group-richlistitem
   }
 }
 
 @media (-moz-os-version: windows-win7) and (-moz-windows-default-theme) {
   :root:not([lwt-tree]) #listPaneBox {
     background-color: rgb(238, 243, 250);
   }
 
-  #conversationsDeck {
+  #conversationsBox {
     background-color: rgb(233, 239, 245);
   }
 
   .conv-nicklist-header,
   .conv-logs-header-label {
     background-color: rgb(233, 239, 245);
   }
 }