Bug 1491758 - Migrate facet-date binding to custom element. r=mkmelin
authorArshad Khan <arshdkhn1@gmail.com>
Mon, 08 Oct 2018 19:49:28 +0530
changeset 33355 1bffb3f6d7a9634e803aa28dd85c57dc36f00cef
parent 33354 9b05b741a18853060319a212eb08025a2ec1546f
child 33356 283c828650e3acf302b844263cedb609b2a88cb7
push id387
push userclokep@gmail.com
push dateMon, 10 Dec 2018 21:30:47 +0000
reviewersmkmelin
bugs1491758
Bug 1491758 - Migrate facet-date binding to custom element. r=mkmelin
mail/base/content/glodaFacet.js
mail/base/content/glodaFacetBindings.css
mail/base/content/glodaFacetBindings.xml
mail/base/content/glodaFacetView.xhtml
mail/base/jar.mn
new file mode 100644
--- /dev/null
+++ b/mail/base/content/glodaFacet.js
@@ -0,0 +1,63 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* global HTMLElement, DateFacetVis, FacetContext */
+class MozFacetDate extends HTMLElement {
+  get build() {
+    return this.buildFunc;
+  }
+
+  get brushItems() {
+    return (aItems) => this.vis.hoverItems(aItems);
+  }
+
+  get clearBrushedItems() {
+    return () => this.vis.clearHover();
+  }
+
+  connectedCallback() {
+    const wrapper = document.createElement("div");
+    wrapper.classList.add("facet", "date-wrapper");
+
+    const h2 = document.createElement("h2");
+
+    const canvas = document.createElement("div");
+    canvas.classList.add("date-vis-frame");
+
+    const zoomOut = document.createElement("div");
+    zoomOut.classList.add("facet-date-zoom-out");
+    zoomOut.setAttribute("role", "image");
+    zoomOut.addEventListener("click", () => FacetContext.zoomOut());
+
+    wrapper.appendChild(h2);
+    wrapper.appendChild(canvas);
+    wrapper.appendChild(zoomOut);
+    this.appendChild(wrapper);
+
+    this.canUpdate = true;
+    this.canvasNode = canvas;
+    this.vis = null;
+    if ("faceter" in this) {
+      this.buildFunc(true);
+    }
+  }
+
+  buildFunc(aDoSize) {
+    if (!this.vis) {
+      this.vis = new DateFacetVis(this, this.canvasNode);
+      this.vis.build();
+    } else {
+      while (this.canvasNode.hasChildNodes()) {
+        this.canvasNode.lastChild.remove();
+      }
+      if (aDoSize) {
+        this.vis.build();
+      } else {
+        this.vis.rebuild();
+      }
+    }
+  }
+}
+
+customElements.define("facet-date", MozFacetDate);
--- a/mail/base/content/glodaFacetBindings.css
+++ b/mail/base/content/glodaFacetBindings.css
@@ -17,20 +17,16 @@
 .facetious[type="boolean"] {
   -moz-binding: url('chrome://messenger/content/glodaFacetBindings.xml#facet-boolean');
 }
 
 .facetious[type="boolean-filtered"] {
   -moz-binding: url('chrome://messenger/content/glodaFacetBindings.xml#facet-boolean-filtered');
 }
 
-.facetious[type="date"] {
-  -moz-binding: url('chrome://messenger/content/glodaFacetBindings.xml#facet-date');
-}
-
 .results[type="message"] {
   -moz-binding: url('chrome://messenger/content/glodaFacetBindings.xml#results-message');
 }
 
 .message {
   -moz-binding: url('chrome://messenger/content/glodaFacetBindings.xml#result-message');
 }
 
--- a/mail/base/content/glodaFacetBindings.xml
+++ b/mail/base/content/glodaFacetBindings.xml
@@ -1260,68 +1260,16 @@
       if (event.originalTarget.hasAttribute("class") &&
           event.originalTarget.classList.contains("bar-link")) {
         this.barHoverGone(event.originalTarget.parentNode, true);
       }
     ]]></handler>
   </handlers>
 </binding>
 
-<binding id="facet-date">
-  <content>
-    <html:div class="facet date-wrapper">
-      <html:h2 anonid="name"></html:h2>
-      <!-- we need to do this because of something protovis is doing where
-           it attempts to re-interpret the text and the html namespace no
-           longer exists in that context. -->
-      <html:div anonid="canvas" class="date-vis-frame"></html:div>
-      <html:div class="facet-date-zoom-out" onclick="FacetContext.zoomOut()"
-                role="image"/>
-    </html:div>
-  </content>
-  <implementation>
-    <constructor><![CDATA[
-      this.canvasNode = document.getAnonymousElementByAttribute(
-                                   this, "anonid", "canvas");
-      this.vis = null;
-      if ("faceter" in this)
-        this.build(true);
-    ]]></constructor>
-    <field name="canUpdate" readonly="true">true</field>
-    <method name="build">
-      <parameter name="aDoSize" />
-      <body><![CDATA[
-        if (!this.vis) {
-          this.vis = new DateFacetVis(this, this.canvasNode);
-          this.vis.build();
-        }
-        else {
-          while (this.canvasNode.hasChildNodes())
-            this.canvasNode.lastChild.remove();
-          if (aDoSize)
-            this.vis.build()
-          else
-            this.vis.rebuild();
-        }
-      ]]></body>
-    </method>
-    <method name="brushItems">
-      <parameter name="aItems" />
-      <body><![CDATA[
-        this.vis.hoverItems(aItems);
-      ]]></body>
-    </method>
-    <method name="clearBrushedItems">
-      <body><![CDATA[
-        this.vis.clearHover();
-      ]]></body>
-    </method>
-  </implementation>
-</binding>
-
 <!-- ===== Results ===== -->
 
 <binding id="results-message">
   <content>
     <html:div class="results-message-header">
       <html:h2 class="results-message-count" anonid="count"></html:h2>
       <html:div class="results-message-showall">
         <html:span class="results-message-showall-button"
--- a/mail/base/content/glodaFacetView.xhtml
+++ b/mail/base/content/glodaFacetView.xhtml
@@ -8,40 +8,43 @@
 <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd" >
 %brandDTD;
 <!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
 %globalDTD;
 <!ENTITY % facetViewDTD SYSTEM "chrome://messenger/locale/glodaFacetView.dtd">
 %facetViewDTD;
 ]>
 <html xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:html="http://www.w3.org/1999/xhtml"
-    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-    version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en"
-    dir="&locale.dir;">
+      xmlns:html="http://www.w3.org/1999/xhtml"
+      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+      version="-//W3C//DTD XHTML 1.1//EN"
+      dir="&locale.dir;">
 <head>
   <!-- XBL bindings CSS -->
   <link rel="stylesheet"
-      href="chrome://messenger/content/glodaFacetBindings.css"
-      type="text/css"></link>
+        href="chrome://messenger/content/glodaFacetBindings.css"
+        type="text/css"/>
   <link rel="stylesheet" media="screen" type="text/css"
         href="chrome://messenger/skin/tagColors.css"/>
   <!-- Themes -->
   <link rel="stylesheet"
-      href="chrome://messenger/skin/glodaFacetView.css"
-      type="text/css"></link>
+        href="chrome://messenger/skin/glodaFacetView.css"
+        type="text/css"/>
+  <!-- Custom elements -->
+  <script type="application/javascript"
+          src="chrome://messenger/content/glodaFacet.js"></script>
   <!-- Global Context -->
   <script type="application/javascript"
-      src="chrome://messenger/content/glodaFacetView.js"></script>
+          src="chrome://messenger/content/glodaFacetView.js"></script>
   <!-- Libs -->
   <script type="application/javascript"
-      src="chrome://messenger/content/protovis-r2.6-modded.js"></script>
+          src="chrome://messenger/content/protovis-r2.6-modded.js"></script>
   <!-- Facet Binding Stuff that doesn't belong in XBL -->
   <script type="application/javascript"
-      src="chrome://messenger/content/glodaFacetVis.js"></script>
+          src="chrome://messenger/content/glodaFacetVis.js"></script>
 </head>
 <body id="body" onload="reachOutAndTouchFrame()"
       onkeypress="if (event.keyCode == event.DOM_VK_ESCAPE) document.getElementById('popup-menu').hide();"
       onmouseup="return clickOnBody(event)">
   <div id="popup-menu" class="popup-menu" variety="invisible"/>
   <div id="table">
     <div>
         <div class="facets facets-sidebar" id="facets">
@@ -57,23 +60,23 @@
                  attr="attachmentTypes"
                  groupDisplayProperty="categoryLabel"
                  uninitialized="true"/>
           </div>
         </div>
         <div id="main-column">
           <div id="header">
             <div id="date-toggle" class="date-toggle" tabindex="0" role="button"
-               onclick="FacetContext.toggleTimeline()"
-               onkeypress="if (event.charCode == KeyEvent.DOM_VK_SPACE) { FacetContext.toggleTimeline(); event.preventDefault() }"/>
+                 onclick="FacetContext.toggleTimeline()"
+                 onkeypress="if (event.charCode == KeyEvent.DOM_VK_SPACE) { FacetContext.toggleTimeline(); event.preventDefault() }"/>
             <div id="search-value"/>
             <div id="query-explanation"/>
           </div>
           <div id="data-column">
-            <div id="facet-date" class="facetious" type="date" />
+            <facet-date id="facet-date" class="facetious" type="date"/>
             <div class="results" id="results" type="message" />
             <div class="loading" id="showLoading">
               <span class="loading">
                 <img class="loading"
                      src="chrome://global/skin/icons/loading.png"/>
                 &glodaFacetView.loading.label;
               </span>
              </div>
--- a/mail/base/jar.mn
+++ b/mail/base/jar.mn
@@ -100,16 +100,17 @@ messenger.jar:
     content/messenger/glodaFacetTab.js              (content/glodaFacetTab.js)
     content/messenger/glodaFacetViewWrapper.xul     (content/glodaFacetViewWrapper.xul)
     content/messenger/glodaFacetView.xhtml          (content/glodaFacetView.xhtml)
     content/messenger/glodaFacetView.js             (content/glodaFacetView.js)
     content/messenger/glodaFacetView.css            (content/glodaFacetView.css)
     content/messenger/glodaFacetBindings.css        (content/glodaFacetBindings.css)
     content/messenger/glodaFacetBindings.xml        (content/glodaFacetBindings.xml)
     content/messenger/glodaFacetVis.js              (content/glodaFacetVis.js)
+    content/messenger/glodaFacet.js                 (content/glodaFacet.js)
     content/messenger/quickFilterBar.js             (content/quickFilterBar.js)
     content/messenger/quickFilterBar.css            (content/quickFilterBar.css)
     content/messenger/browserRequest.js             (content/browserRequest.js)
     content/messenger/browserRequest.xul            (content/browserRequest.xul)
 *   content/messenger/safeMode.xul                  (content/safeMode.xul)
     content/messenger/safeMode.js                   (content/safeMode.js)
     content/messenger/sanitize.xul                  (content/sanitize.xul)
     content/messenger/sanitize.js                   (content/sanitize.js)