Bug 1582424 - remove grid usage from chat-tooltip.js. r=mkmelin
authorKhushil Mistry <khushil324@gmail.com>
Tue, 24 Sep 2019 19:53:48 +0200
changeset 36927 398e5adc18c37292e3237b23e7189005fb374808
parent 36926 c9c2af227b34f5e902c9ecbe95e8c00f14484ac9
child 36928 26a5aac2075887afd40c0bd7d702394f72a85560
push id395
push userclokep@gmail.com
push dateMon, 02 Dec 2019 19:38:57 +0000
reviewersmkmelin
bugs1582424
Bug 1582424 - remove grid usage from chat-tooltip.js. r=mkmelin
chat/content/chat-tooltip.js
chat/themes/imtooltip.css
--- a/chat/content/chat-tooltip.js
+++ b/chat/content/chat-tooltip.js
@@ -208,23 +208,18 @@
                     <description class="tooltipDisplayName" flex="1" crop="end"></description>
                     <image class="tooltipProtoIcon status"></image>
                   </hbox>
                   <spacer flex="1"></spacer>
                 </vbox>
                 <description class="tooltipMessage"></description>
               </stack>
             </hbox>
-            <grid>
-              <columns>
-                <column></column>
-                <column flex="1"></column>
-              </columns>
-              <rows class="tooltipRows"></rows>
-            </grid>
+            <html:table class="tooltipTable">
+            </html:table>
           </vbox>
         `)
       );
       this.initializeAttributeInheritance();
     }
 
     get bundle() {
       if (!this._bundle) {
@@ -248,21 +243,21 @@
 
       return (this._buddy = val);
     }
 
     get buddy() {
       return this._buddy;
     }
 
-    get rows() {
-      if (!("_rows" in this)) {
-        this._rows = this.querySelector(".tooltipRows");
+    get table() {
+      if (!("_table" in this)) {
+        this._table = this.querySelector(".tooltipTable");
       }
-      return this._rows;
+      return this._table;
     }
 
     setBuddyIcon(aSrc) {
       let img = this.querySelector(".userIcon");
       if (aSrc) {
         img.setAttribute("userIcon", aSrc);
       } else {
         img.removeAttribute("userIcon");
@@ -271,50 +266,52 @@
 
     setMessage(aMessage) {
       // Setting the textContent directly allows text wrapping.
       let msg = this.querySelector(".tooltipMessage");
       msg.textContent = aMessage;
     }
 
     reset() {
-      while (this.rows.hasChildNodes()) {
-        this.rows.lastChild.remove();
+      while (this.table.hasChildNodes()) {
+        this.table.lastChild.remove();
       }
     }
 
     addRow(aLabel, aValue) {
       let description;
-      let row = [...this.rows.querySelectorAll("row")].find(row => {
-        return row.querySelector("label").getAttribute("value") == aLabel;
+      let row = [...this.table.querySelectorAll("tr")].find(row => {
+        return row.querySelector("th").textContent == aLabel;
       });
       if (!row) {
         // Create a new row for this label.
-        row = document.createXULElement("row");
-        let label = document.createXULElement("label");
-        label.className = "header";
-        label.setAttribute("value", aLabel);
-        row.appendChild(label);
-        description = document.createXULElement("description");
+        row = document.createElementNS("http://www.w3.org/1999/xhtml", "tr");
+        let th = document.createElementNS("http://www.w3.org/1999/xhtml", "th");
+        th.textContent = aLabel;
+        th.setAttribute("valign", "top");
+        row.appendChild(th);
+        description = document.createElementNS(
+          "http://www.w3.org/1999/xhtml",
+          "td"
+        );
         row.appendChild(description);
-        row.setAttribute("align", "baseline");
-        this.rows.appendChild(row);
+        this.table.appendChild(row);
       } else {
         // Row with this label already exists - just update.
-        description = row.querySelector("description");
+        description = row.querySelector("td");
       }
       description.textContent = aValue;
     }
 
     addSeparator() {
-      let row = document.createXULElement("row");
-      let separator = document.createXULElement("separator");
-      separator.className = "thin";
-      row.appendChild(separator);
-      this.rows.appendChild(row);
+      if (this.table.hasChildNodes()) {
+        let lastElement = this.table.lastChild;
+        lastElement.querySelector("th").classList.add("chatTooltipSeparator");
+        lastElement.querySelector("td").classList.add("chatTooltipSeparator");
+      }
     }
 
     requestBuddyInfo(aAccount, aObservedName) {
       // Libpurple prpls don't necessarily return data in response to
       // requestBuddyInfo that is suitable for displaying inside a
       // tooltip (e.g. too many objects, or <img> and <a> tags),
       // so we only use it for JavaScript prpls.
       // This is a terrible, terrible hack to work around the fact that
--- a/chat/themes/imtooltip.css
+++ b/chat/themes/imtooltip.css
@@ -41,19 +41,29 @@
   width: 16px;
   height: 16px;
 }
 
 .tooltipProtoIcon[status="unknown"] {
   opacity: 0.7;
 }
 
-.tooltipRows label {
-  margin-left: 0 !important;
+.tooltipTable {
+  border-spacing: 0;
 }
 
-.tooltipSeparator {
-  margin-left: 3px;
+.tooltipTable th {
+  text-align: left;
+  white-space: nowrap;
+}
+
+.tooltipTable th,
+.tooltipTable td {
+  line-height: 1.5em;
+}
+
+.chatTooltipSeparator {
+  border-bottom: 1px solid #A3A3A3;
 }
 
 .statusTypeIcon:not([status]) {
   display: none;
 }