Bug 1547229 - [de-xbl] convert the daypicker binding to <button is="calendar-daypicker">. r=mkmelin
authorAlessandro Castellani <alessandro@thunderbird.net>
Thu, 23 May 2019 02:30:01 -0700
changeset 35665 4ae242ef0d4cbe718bba9bdd1dacd182ee0c5045
parent 35664 c4b00b0454bac43bcde2e95f160a44c65e6f2e78
child 35666 b7c1cd832766baf8ffcddc02ec5645d09396d0d4
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersmkmelin
bugs1547229
Bug 1547229 - [de-xbl] convert the daypicker binding to <button is="calendar-daypicker">. r=mkmelin
calendar/base/content/calendar-daypicker.js
calendar/base/content/calendar-daypicker.xml
calendar/base/content/dialogs/calendar-event-dialog-recurrence.xul
calendar/base/jar.mn
calendar/base/themes/common/calendar-daypicker.css
calendar/base/themes/linux/calendar-daypicker.css
calendar/base/themes/osx/calendar-daypicker.css
calendar/base/themes/windows/calendar-daypicker.css
new file mode 100644
--- /dev/null
+++ b/calendar/base/content/calendar-daypicker.js
@@ -0,0 +1,40 @@
+/* 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/. */
+
+"use strict";
+
+// Wrap in a block to prevent leaking to window scope.
+{
+    /**
+     * The MozCalendarDaypicker widget is used to display the days of
+     * the week and month for event recurrence.
+     *
+     * @extends {MozButton}
+     */
+    class MozCalendarDaypicker extends customElements.get("button") {
+        connectedCallback() {
+            if (this.delayConnectedCallback() || this.hasChildNodes()) {
+                return;
+            }
+            super.connectedCallback();
+
+            this.setAttribute("type", "checkbox");
+            this.setAttribute("autoCheck", "true");
+            this.setAttribute("disable-on-readonly", "true");
+            this.setAttribute("disable-on-occurrence", "true");
+
+            this.addEventListener("DOMAttrModified", this.onModified);
+        }
+
+        onModified(aEvent) {
+            if (aEvent.attrName == "checked") {
+                let event = document.createEvent("Events");
+                event.initEvent("select", true, true);
+                this.calendar.dispatchEvent(event);
+            }
+        }
+    }
+
+    customElements.define("calendar-daypicker", MozCalendarDaypicker, { "extends": "button" });
+}
--- a/calendar/base/content/calendar-daypicker.xml
+++ b/calendar/base/content/calendar-daypicker.xml
@@ -1,46 +1,9 @@
 <?xml version="1.0"?>
 <!-- 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/. -->
 
 <bindings xmlns="http://www.mozilla.org/xbl"
           xmlns:xbl="http://www.mozilla.org/xbl"
           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-  <!--
-  ########################################################################
-  ## daypicker
-  ########################################################################
-  -->
-
-  <binding id="daypicker"
-           extends="chrome://global/content/bindings/button.xml#button-base">
-    <content>
-      <xul:hbox anonid="daypickerId" class="daypickerclass" align="center" flex="1">
-        <xul:label anonid="daytext"
-                   class="toolbarbutton-text"
-                   flex="1"
-                   xbl:inherits="value=label"/>
-      </xul:hbox>
-    </content>
-    <implementation>
-      <method name="onmodified">
-        <parameter name="aEvent"/>
-        <body><![CDATA[
-            if (aEvent.attrName == "checked") {
-                let event = document.createEvent("Events");
-                event.initEvent("select", true, true);
-                this.calendar.dispatchEvent(event);
-            }
-        ]]></body>
-      </method>
-      <constructor><![CDATA[
-          this.setAttribute("autoCheck", "true");
-          this.setAttribute("type", "checkbox");
-          this.setAttribute("disable-on-readonly", "true");
-          this.setAttribute("disable-on-occurrence", "true");
-          this.addEventListener("DOMAttrModified", this.onmodified);
-      ]]></constructor>
-    </implementation>
-  </binding>
 </bindings>
--- a/calendar/base/content/dialogs/calendar-event-dialog-recurrence.xul
+++ b/calendar/base/content/dialogs/calendar-event-dialog-recurrence.xul
@@ -28,16 +28,17 @@
   <!-- Javascript includes -->
   <script src="chrome://calendar/content/calendar-event-dialog-recurrence.js"/>
   <script src="chrome://calendar/content/calendar-dialog-utils.js"/>
   <script src="chrome://calendar/content/calendar-ui-utils.js"/>
   <script src="chrome://calendar/content/calendar-statusbar.js"/>
 
   <script src="chrome://messenger/content/customElements.js"/>
   <script src="chrome://calendar/content/datetimepickers/datetimepickers.js"/>
+  <script src="chrome://calendar/content/calendar-daypicker.js"/>
 
   <!-- recurrence pattern -->
   <groupbox id="recurrence-pattern-groupbox">
     <label id="recurrence-pattern-caption" class="header">&event.recurrence.pattern.label;</label>
     <grid id="recurrence-pattern-grid">
       <columns id="recurrence-pattern-columns">
         <column id="recurrence-pattern-description-column"/>
         <column id="recurrence-pattern-controls-column"/>
@@ -132,23 +133,24 @@
                        disable-on-readonly="true"
                        disable-on-occurrence="true"
                        control="daypicker-weekday"/>
                 <hbox id="daypicker-weekday"
                       flex="1"
                       disable-on-readonly="true"
                       disable-on-occurrence="true"
                       onselect="updateRecurrenceControls();">
-                  <daypicker bottom="true" mode="daypicker-weekday"/>
-                  <daypicker bottom="true" mode="daypicker-weekday"/>
-                  <daypicker bottom="true" mode="daypicker-weekday"/>
-                  <daypicker bottom="true" mode="daypicker-weekday"/>
-                  <daypicker bottom="true" mode="daypicker-weekday"/>
-                  <daypicker bottom="true" mode="daypicker-weekday"/>
-                  <daypicker bottom="true" right="true" mode="daypicker-weekday"/>
+                  <button is="calendar-daypicker" bottom="true" mode="daypicker-weekday"/>
+                  <button is="calendar-daypicker" bottom="true" mode="daypicker-weekday"/>
+                  <button is="calendar-daypicker" bottom="true" mode="daypicker-weekday"/>
+                  <button is="calendar-daypicker" bottom="true" mode="daypicker-weekday"/>
+                  <button is="calendar-daypicker" bottom="true" mode="daypicker-weekday"/>
+                  <button is="calendar-daypicker" bottom="true" mode="daypicker-weekday"/>
+                  <button is="calendar-daypicker" bottom="true" mode="daypicker-weekday"
+                          right="true"/>
                 </hbox>
               </hbox>
             </vbox>
 
             <!-- Monthly -->
             <vbox id="period-deck-monthly-box">
               <hbox id="montly-period-every-box" align="center">
                 <label id="monthly-period-every-label"
@@ -242,56 +244,60 @@
                          label="&event.recurrence.repeat.recur.label;"
                          disable-on-readonly="true"
                          disable-on-occurrence="true"/>
                   <hbox id="monthly-days"
                         class="daypicker-monthday"
                         onselect="updateRecurrenceControls();">
                     <vbox class="daypicker-monthday-mainbox" flex="1">
                       <hbox class="daypicker-row" flex="1">
-                        <daypicker label="1" mode="monthly-days"/>
-                        <daypicker label="2" mode="monthly-days"/>
-                        <daypicker label="3" mode="monthly-days"/>
-                        <daypicker label="4" mode="monthly-days"/>
-                        <daypicker label="5" mode="monthly-days"/>
-                        <daypicker label="6" mode="monthly-days"/>
-                        <daypicker label="7" right="true" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="1" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="2" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="3" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="4" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="5" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="6" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="7" mode="monthly-days"
+                                right="true"/>
                       </hbox>
                       <hbox class="daypicker-row" flex="1">
-                        <daypicker label="8" mode="monthly-days"/>
-                        <daypicker label="9" mode="monthly-days"/>
-                        <daypicker label="10" mode="monthly-days"/>
-                        <daypicker label="11" mode="monthly-days"/>
-                        <daypicker label="12" mode="monthly-days"/>
-                        <daypicker label="13" mode="monthly-days"/>
-                        <daypicker label="14" right="true" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="8" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="9" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="10" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="11" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="12" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="13" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="14" mode="monthly-days"
+                                right="true"/>
                       </hbox>
                       <hbox class="daypicker-row" flex="1">
-                        <daypicker label="15" mode="monthly-days"/>
-                        <daypicker label="16" mode="monthly-days"/>
-                        <daypicker label="17" mode="monthly-days"/>
-                        <daypicker label="18" mode="monthly-days"/>
-                        <daypicker label="19" mode="monthly-days"/>
-                        <daypicker label="20" mode="monthly-days"/>
-                        <daypicker label="21" right="true" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="15" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="16" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="17" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="18" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="19" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="20" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="21" mode="monthly-days"
+                                right="true"/>
                       </hbox>
                       <hbox class="daypicker-row" flex="1">
-                        <daypicker label="22" mode="monthly-days"/>
-                        <daypicker label="23" mode="monthly-days"/>
-                        <daypicker label="24" mode="monthly-days"/>
-                        <daypicker label="25" mode="monthly-days"/>
-                        <daypicker label="26" mode="monthly-days"/>
-                        <daypicker label="27" mode="monthly-days"/>
-                        <daypicker label="28" right="true" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="22" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="23" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="24" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="25" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="26" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="27" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="28" mode="monthly-days"
+                                right="true"/>
                       </hbox>
                       <hbox class="daypicker-row" flex="1">
-                        <daypicker bottom="true" label="29" mode="monthly-days"/>
-                        <daypicker bottom="true" label="30" mode="monthly-days"/>
-                        <daypicker bottom="true" label="31" mode="monthly-days"/>
-                        <daypicker bottom="true" right="true" label="" mode="monthly-days"/>
+                        <button is="calendar-daypicker" label="29" mode="monthly-days" bottom="true"/>
+                        <button is="calendar-daypicker" label="30" mode="monthly-days" bottom="true"/>
+                        <button is="calendar-daypicker" label="31" mode="monthly-days" bottom="true"/>
+                        <button is="calendar-daypicker" label="" mode="monthly-days" bottom="true" right="true" />
                       </hbox>
                     </vbox>
                   </hbox>
                 </box>
               </radiogroup>
             </vbox>
 
             <!-- Yearly -->
--- a/calendar/base/jar.mn
+++ b/calendar/base/jar.mn
@@ -25,16 +25,17 @@ calendar.jar:
     content/calendar/calendar-menus.js                     (content/calendar-menus.js)
     content/calendar/calendar-views.xul                    (content/calendar-views.xul)
     content/calendar/calendar-month-view.xml               (content/calendar-month-view.xml)
     content/calendar/calendar-month-base-view.js           (content/calendar-month-base-view.js)
     content/calendar/calendar-multiday-view.xml            (content/calendar-multiday-view.xml)
     content/calendar/calendar-multiday-base-view.js        (content/calendar-multiday-base-view.js)
     content/calendar/calendar-base-view.js                 (content/calendar-base-view.js)
     content/calendar/calendar-day-label.js                 (content/calendar-day-label.js)
+    content/calendar/calendar-daypicker.js                 (content/calendar-daypicker.js)
     content/calendar/calendar-statusbar.js                 (content/calendar-statusbar.js)
     content/calendar/calendar-task-editing.js              (content/calendar-task-editing.js)
     content/calendar/calendar-task-tree.js                 (content/calendar-task-tree.js)
     content/calendar/calendar-task-tree-view.js            (content/calendar-task-tree-view.js)
     content/calendar/calendar-task-tree-utils.js           (content/calendar-task-tree-utils.js)
     content/calendar/calendar-task-view.xul                (content/calendar-task-view.xul)
     content/calendar/calendar-task-view.js                 (content/calendar-task-view.js)
     content/calendar/calendar-ui-utils.js                  (content/calendar-ui-utils.js)
--- a/calendar/base/themes/common/calendar-daypicker.css
+++ b/calendar/base/themes/common/calendar-daypicker.css
@@ -1,54 +1,55 @@
 /* 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/. */
 
-daypicker {
+button[is="calendar-daypicker"] {
   display: -moz-box;
-  -moz-binding: url(chrome://calendar/content/calendar-daypicker.xml#daypicker);
+  -moz-appearance: none;
+  margin: 0;
   background-image: linear-gradient(rgba(0, 0, 0, .0) 5%, rgba(0, 0, 0, .20));
   background-color: -moz-Field;
   text-align: center;
 }
 
-daypicker[mode="monthly-days"] {
-  width: 32px;
+button[is="calendar-daypicker"][mode="monthly-days"] {
+  min-width: 32px;
   height: 15px;
 }
 
-daypicker[mode="daypicker-weekday"] {
+button[is="calendar-daypicker"][mode="daypicker-weekday"] {
   min-width: 36px;
   height: 32px;
 }
 
-daypicker[mode="monthly-days"][bottom="true"][right="true"] {
+button[is="calendar-daypicker"][mode="monthly-days"][bottom="true"][right="true"] {
   width: 128px;
   height: 15px;
 }
 
-daypicker:hover {
+button[is="calendar-daypicker"]:hover {
   background-image: linear-gradient(rgba(255, 255, 255, .0), rgba(0, 0, 0, .10) 90%);
   cursor: pointer;
 }
 
-daypicker:hover:active,
-daypicker[open="true"] {
+button[is="calendar-daypicker"]:hover:active,
+button[is="calendar-daypicker"][open="true"] {
   background-image: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .01) 15%);
   cursor: pointer;
 }
 
-daypicker[disabled="true"],
-daypicker[disabled="true"][checked="true"],
-daypicker[disabled="true"]:hover,
-daypicker[disabled="true"]:hover:active,
-daypicker[disabled="true"][open="true"] {
+button[is="calendar-daypicker"][disabled="true"],
+button[is="calendar-daypicker"][disabled="true"][checked="true"],
+button[is="calendar-daypicker"][disabled="true"]:hover,
+button[is="calendar-daypicker"][disabled="true"]:hover:active,
+button[is="calendar-daypicker"][disabled="true"][open="true"] {
   background-image: linear-gradient(rgba(0, 0, 0, .0) 5%, rgba(0, 0, 0, .20));
   color: GrayText;
   cursor: default;
   background-color: -moz-Dialog;
 }
 
-daypicker[checked="true"] {
+button[is="calendar-daypicker"][checked="true"] {
   background-image: linear-gradient(rgba(0, 0, 0, .30), rgba(255, 255, 255, .0) 35%);
   background-color: Highlight;
   color: HighlightText;
 }
--- a/calendar/base/themes/linux/calendar-daypicker.css
+++ b/calendar/base/themes/linux/calendar-daypicker.css
@@ -1,18 +1,18 @@
 /* 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/. */
 
 @import url(chrome://calendar-common/skin/calendar-daypicker.css);
 
-daypicker {
+button[is="calendar-daypicker"] {
   border-top: 1px solid ThreeDShadow;
   border-left: 1px solid ThreeDShadow;
 }
 
-daypicker[bottom="true"] {
+button[is="calendar-daypicker"][bottom="true"] {
   border-bottom: 1px solid ThreeDShadow;
 }
 
-daypicker[right="true"] {
+button[is="calendar-daypicker"][right="true"] {
   border-right: 1px solid ThreeDShadow;
 }
--- a/calendar/base/themes/osx/calendar-daypicker.css
+++ b/calendar/base/themes/osx/calendar-daypicker.css
@@ -1,18 +1,18 @@
 /* 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/. */
 
 @import url(chrome://calendar-common/skin/calendar-daypicker.css);
 
-daypicker {
+button[is="calendar-daypicker"] {
   border-top: 1px solid #808080;
   border-left: 1px solid #808080;
 }
 
-daypicker[bottom="true"] {
+button[is="calendar-daypicker"][bottom="true"] {
   border-bottom: 1px solid #808080;
 }
 
-daypicker[right="true"] {
+button[is="calendar-daypicker"][right="true"] {
   border-right: 1px solid #808080;
 }
\ No newline at end of file
--- a/calendar/base/themes/windows/calendar-daypicker.css
+++ b/calendar/base/themes/windows/calendar-daypicker.css
@@ -1,18 +1,18 @@
 /* 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/. */
 
 @import url(chrome://calendar-common/skin/calendar-daypicker.css);
 
-daypicker {
+button[is="calendar-daypicker"] {
   border-top: 1px solid ThreeDShadow;
   border-left: 1px solid ThreeDShadow;
 }
 
-daypicker[bottom="true"] {
+button[is="calendar-daypicker"][bottom="true"] {
   border-bottom: 1px solid ThreeDShadow;
 }
 
-daypicker[right="true"] {
+button[is="calendar-daypicker"][right="true"] {
   border-right: 1px solid ThreeDShadow;
 }