Bug 758493 - Remove calendar-daypicker binding and last use of DOMAttrModified in calendar. r=pmorris a=me
authorGeoff Lankow <geoff@darktrojan.net>
Fri, 22 May 2020 11:55:19 +1200
changeset 39237 b5646e5ec9f3fc8e6f7bb4175a4cebf53a80d46e
parent 39236 af28bde3ddb6d4eed4e60523ecbe9c0613aac2b0
child 39238 f9100b280c343feefea96022d38d10251d06e4ea
push id402
push userclokep@gmail.com
push dateMon, 29 Jun 2020 20:48:04 +0000
reviewerspmorris, me
bugs758493
Bug 758493 - Remove calendar-daypicker binding and last use of DOMAttrModified in calendar. r=pmorris a=me
calendar/base/content/calendar-daypicker.js
calendar/base/content/dialogs/calendar-event-dialog-recurrence.xhtml
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
deleted file mode 100644
--- a/calendar/base/content/calendar-daypicker.js
+++ /dev/null
@@ -1,40 +0,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/. */
-
-"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/dialogs/calendar-event-dialog-recurrence.xhtml
+++ b/calendar/base/content/dialogs/calendar-event-dialog-recurrence.xhtml
@@ -27,17 +27,16 @@
   <!-- 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://calendar/content/widgets/calendar-minimonth.js"/>
   <script src="chrome://calendar/content/datetimepickers/datetimepickers.js"/>
-  <script src="chrome://calendar/content/calendar-daypicker.js"/>
 
   <!-- recurrence pattern -->
   <html:fieldset id="recurrence-pattern-groupbox">
     <html:legend id="recurrence-pattern-caption">&event.recurrence.pattern.label;</html:legend>
     <hbox flex="1" id="recurrence-pattern-hbox">
       <vbox>
         <label value="&event.recurrence.occurs.label;"
                class="recurrence-pattern-hbox-label"
@@ -118,26 +117,59 @@
               <label id="weekly-period-on-label"
                      value="&event.recurrence.on.label;"
                      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();">
-                <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"/>
+                    disable-on-occurrence="true">
+                <button class="calendar-daypicker"
+                        type="checkbox"
+                        autoCheck="true"
+                        disable-on-readonly="true"
+                        disable-on-occurrence="true"
+                        mode="daypicker-weekday"/>
+                <button class="calendar-daypicker"
+                        type="checkbox"
+                        autoCheck="true"
+                        disable-on-readonly="true"
+                        disable-on-occurrence="true"
+                        mode="daypicker-weekday"/>
+                <button class="calendar-daypicker"
+                        type="checkbox"
+                        autoCheck="true"
+                        disable-on-readonly="true"
+                        disable-on-occurrence="true"
+                        mode="daypicker-weekday"/>
+                <button class="calendar-daypicker"
+                        type="checkbox"
+                        autoCheck="true"
+                        disable-on-readonly="true"
+                        disable-on-occurrence="true"
+                        mode="daypicker-weekday"/>
+                <button class="calendar-daypicker"
+                        type="checkbox"
+                        autoCheck="true"
+                        disable-on-readonly="true"
+                        disable-on-occurrence="true"
+                        mode="daypicker-weekday"/>
+                <button class="calendar-daypicker"
+                        type="checkbox"
+                        autoCheck="true"
+                        disable-on-readonly="true"
+                        disable-on-occurrence="true"
+                        mode="daypicker-weekday"/>
+                <button class="calendar-daypicker"
+                        type="checkbox"
+                        autoCheck="true"
+                        disable-on-readonly="true"
+                        disable-on-occurrence="true"
+                        mode="daypicker-weekday"/>
               </hbox>
             </hbox>
           </vbox>
 
           <!-- Monthly -->
           <vbox id="period-deck-monthly-box">
             <hbox id="montly-period-every-box" align="center">
               <label id="monthly-period-every-label"
@@ -224,64 +256,251 @@
               <box id="monthly-period-specific-date-box"
                    orient="horizontal"
                    align="center">
                 <radio id="montly-period-specific-date-radio"
                        label="&event.recurrence.repeat.recur.label;"
                        disable-on-readonly="true"
                        disable-on-occurrence="true"/>
                 <hbox id="monthly-days"
-                      class="daypicker-monthday"
-                      onselect="updateRecurrenceControls();">
+                      class="daypicker-monthday">
                   <vbox class="daypicker-monthday-mainbox" flex="1">
                     <hbox class="daypicker-row" flex="1">
-                      <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"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="1"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="2"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="3"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="4"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="5"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="6"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="7"
+                              mode="monthly-days"/>
                     </hbox>
                     <hbox class="daypicker-row" flex="1">
-                      <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"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="8"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="9"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="10"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="11"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="12"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="13"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="14"
+                              mode="monthly-days"/>
                     </hbox>
                     <hbox class="daypicker-row" flex="1">
-                      <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"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="15"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="16"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="17"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="18"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="19"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="20"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="21"
+                              mode="monthly-days"/>
                     </hbox>
                     <hbox class="daypicker-row" flex="1">
-                      <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"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="22"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="23"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="24"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="25"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="26"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="27"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="28"
+                              mode="monthly-days"/>
                     </hbox>
                     <hbox class="daypicker-row" flex="1">
-                      <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" />
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="29"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="30"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label="31"
+                              mode="monthly-days"/>
+                      <button class="calendar-daypicker"
+                              type="checkbox"
+                              autoCheck="true"
+                              disable-on-readonly="true"
+                              disable-on-occurrence="true"
+                              label=""
+                              mode="monthly-days"/>
                     </hbox>
                   </vbox>
                 </hbox>
               </box>
             </radiogroup>
           </vbox>
 
             <!-- Yearly -->
--- a/calendar/base/jar.mn
+++ b/calendar/base/jar.mn
@@ -8,17 +8,16 @@ calendar.jar:
 % content calendar %content/
     content/agenda-listbox-utils.js                             (content/agenda-listbox-utils.js)
     content/agenda-listbox.js                                   (content/agenda-listbox.js)
     content/calendar-base-view.js                               (content/calendar-base-view.js)
     content/calendar-chrome-startup.js                          (content/calendar-chrome-startup.js)
     content/calendar-clipboard.js                               (content/calendar-clipboard.js)
     content/calendar-command-controller.js                      (content/calendar-command-controller.js)
     content/calendar-day-label.js                               (content/calendar-day-label.js)
-    content/calendar-daypicker.js                               (content/calendar-daypicker.js)
     content/calendar-dnd-listener.js                            (content/calendar-dnd-listener.js)
     content/calendar-event-column.js                            (content/calendar-event-column.js)
     content/calendar-event-gripbar.js                           (content/calendar-event-gripbar.js)
     content/calendar-extract.js                                 (content/calendar-extract.js)
     content/calendar-invitations-manager.js                     (content/calendar-invitations-manager.js)
     content/calendar-item-editing.js                            (content/calendar-item-editing.js)
     content/calendar-management.js                              (content/calendar-management.js)
     content/calendar-menus.js                                   (content/calendar-menus.js)
--- a/calendar/base/themes/common/calendar-daypicker.css
+++ b/calendar/base/themes/common/calendar-daypicker.css
@@ -1,55 +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/. */
 
-button[is="calendar-daypicker"] {
+button.calendar-daypicker {
   display: -moz-box;
   -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;
 }
 
-button[is="calendar-daypicker"][mode="monthly-days"] {
+button.calendar-daypicker[mode="monthly-days"] {
   min-width: 32px;
   height: 15px;
 }
 
-button[is="calendar-daypicker"][mode="daypicker-weekday"] {
+button.calendar-daypicker[mode="daypicker-weekday"] {
   min-width: 36px;
   height: 32px;
 }
 
-button[is="calendar-daypicker"][mode="monthly-days"][bottom="true"][right="true"] {
+hbox:last-child > button.calendar-daypicker:last-child[mode="monthly-days"] {
   width: 128px;
   height: 15px;
 }
 
-button[is="calendar-daypicker"]:hover {
+button.calendar-daypicker:hover {
   background-image: linear-gradient(rgba(255, 255, 255, .0), rgba(0, 0, 0, .10) 90%);
   cursor: pointer;
 }
 
-button[is="calendar-daypicker"]:hover:active,
-button[is="calendar-daypicker"][open="true"] {
+button.calendar-daypicker:hover:active,
+button.calendar-daypicker[open="true"] {
   background-image: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .01) 15%);
   cursor: pointer;
 }
 
-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"] {
+button.calendar-daypicker[disabled="true"],
+button.calendar-daypicker[disabled="true"][checked="true"],
+button.calendar-daypicker[disabled="true"]:hover,
+button.calendar-daypicker[disabled="true"]:hover:active,
+button.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;
 }
 
-button[is="calendar-daypicker"][checked="true"] {
+button.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/skin/shared/calendar-daypicker.css);
 
-button[is="calendar-daypicker"] {
+button.calendar-daypicker {
   border-top: 1px solid ThreeDShadow;
   border-left: 1px solid ThreeDShadow;
 }
 
-button[is="calendar-daypicker"][bottom="true"] {
+hbox:last-child > button.calendar-daypicker {
   border-bottom: 1px solid ThreeDShadow;
 }
 
-button[is="calendar-daypicker"][right="true"] {
+button.calendar-daypicker:last-child {
   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/skin/shared/calendar-daypicker.css);
 
-button[is="calendar-daypicker"] {
+button.calendar-daypicker {
   border-top: 1px solid #808080;
   border-left: 1px solid #808080;
 }
 
-button[is="calendar-daypicker"][bottom="true"] {
+hbox:last-child > button.calendar-daypicker {
   border-bottom: 1px solid #808080;
 }
 
-button[is="calendar-daypicker"][right="true"] {
+button.calendar-daypicker:last-child {
   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/skin/shared/calendar-daypicker.css);
 
-button[is="calendar-daypicker"] {
+button.calendar-daypicker {
   border-top: 1px solid ThreeDShadow;
   border-left: 1px solid ThreeDShadow;
 }
 
-button[is="calendar-daypicker"][bottom="true"] {
+hbox:last-child > button.calendar-daypicker {
   border-bottom: 1px solid ThreeDShadow;
 }
 
-button[is="calendar-daypicker"][right="true"] {
+button.calendar-daypicker:last-child {
   border-right: 1px solid ThreeDShadow;
 }