Bug 1597131 - Port bug 1597120: Remove use of XUL mousethrough attribute. r=pmorris
authorMagnus Melin <mkmelin+mozilla@iki.fi>
Tue, 19 Nov 2019 16:30:53 +0200
changeset 28230 6ce35172d6627ced1807ad8cd1261c21dbf99321
parent 28229 dbf07a17aee31be33e83c6e0c7e7527a9611c30e
child 28231 e0b1df31a3f83d0665a2670a2b4b713b13e27eab
push id16707
push usermozilla@jorgk.com
push dateTue, 19 Nov 2019 23:13:05 +0000
treeherdercomm-central@11e9e7a7d60d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspmorris
bugs1597131, 1597120
Bug 1597131 - Port bug 1597120: Remove use of XUL mousethrough attribute. r=pmorris * mousethrough=always -> pointer-events: none * mousethrough=never -> pointer-events: auto
calendar/base/content/calendar-editable-item.js
calendar/base/content/calendar-event-column.js
calendar/base/content/calendar-month-view.js
calendar/base/content/calendar-multiday-view.js
calendar/base/themes/common/calendar-views.css
calendar/base/themes/common/today-pane.css
calendar/lightning/content/messenger-overlay-sidebar.xul
mail/base/content/mainMailToolbox.inc.xul
mail/components/downloads/content/aboutDownloads.xul
mail/components/im/content/chat-contact.js
mail/components/im/content/chat-conversation-info.js
mail/components/im/content/chat-imconv.js
mailnews/base/content/newmailalert.xul
--- a/calendar/base/content/calendar-editable-item.js
+++ b/calendar/base/content/calendar-editable-item.js
@@ -185,17 +185,17 @@
       this.addEventListener(
         "dragstart",
         event => {
           document.monthDragEvent = this;
         },
         true
       );
 
-      this.setAttribute("mousethrough", "never");
+      this.style.pointerEvents = "auto";
       this.setAttribute("tooltip", "itemTooltip");
       this.setAttribute("tabindex", "-1");
       this.addEventNameTextboxListener();
       this.initializeAttributeInheritance();
     }
 
     set parentBox(val) {
       this.mParentBox = val;
--- a/calendar/base/content/calendar-event-column.js
+++ b/calendar/base/content/calendar-event-column.js
@@ -28,19 +28,18 @@
         return;
       }
       this.appendChild(
         MozXULElement.parseXULToFragment(`
           <stack class="multiday-column-box-stack" flex="1">
             <box class="multiday-column-bg-box" flex="1"/>
             <box class="multiday-column-top-box"
                  flex="1"
-                 equalsize="always"
-                 mousethrough="always"/>
-            <box class="timeIndicator" mousethrough="always" hidden="true"/>
+                 equalsize="always"/>
+            <box class="timeIndicator" hidden="true"/>
             <box class="fgdragcontainer" flex="1">
               <box class="fgdragspacer">
                 <spacer flex="1"/>
                 <label class="fgdragbox-label fgdragbox-startlabel"/>
               </box>
               <box class="fgdragbox"/>
               <label class="fgdragbox-label fgdragbox-endlabel"/>
             </box>
--- a/calendar/base/content/calendar-month-view.js
+++ b/calendar/base/content/calendar-month-view.js
@@ -49,27 +49,27 @@
       let monthDayLabels = document.createXULElement("hbox");
       monthDayLabels.style.overflow = "hidden";
 
       let weekLabel = document.createXULElement("label");
       weekLabel.setAttribute("data-label", "week");
       weekLabel.setAttribute("flex", "1");
       weekLabel.setAttribute("crop", "end");
       weekLabel.setAttribute("hidden", "true");
-      weekLabel.setAttribute("mousethrough", "always");
+      weekLabel.style.pointerEvents = "none";
       weekLabel.classList.add(
         "calendar-month-day-box-week-label",
         "calendar-month-day-box-date-label",
         "calendar-week-label"
       );
 
       let dayLabel = document.createXULElement("label");
       dayLabel.setAttribute("data-label", "day");
       dayLabel.setAttribute("flex", "1");
-      dayLabel.setAttribute("mousethrough", "always");
+      dayLabel.style.pointerEvents = "none";
       dayLabel.classList.add("calendar-month-day-box-date-label", "calendar-day-label");
 
       monthDayLabels.appendChild(weekLabel);
       monthDayLabels.appendChild(dayLabel);
 
       this.dayItems = document.createXULElement("vbox");
       this.dayItems.setAttribute("flex", "1");
       this.dayItems.classList.add("calendar-month-day-box-items-box", "calendar-day-items");
@@ -341,17 +341,17 @@
       this.addEventListener(
         "dragstart",
         event => {
           document.monthDragEvent = this;
         },
         true
       );
 
-      this.setAttribute("mousethrough", "never");
+      this.style.pointerEvents = "auto";
       this.setAttribute("tooltip", "itemTooltip");
       this.addEventNameTextboxListener();
       this.initializeAttributeInheritance();
     }
 
     set occurrence(val) {
       cal.ASSERT(!this.mOccurrence, "Code changes needed to set the occurrence twice", true);
       this.mOccurrence = val;
--- a/calendar/base/content/calendar-multiday-view.js
+++ b/calendar/base/content/calendar-multiday-view.js
@@ -296,46 +296,41 @@
                       </label>
                     </vbox>
                     <hbox class="alarm-icons-box"
                           align="top">
                     </hbox>
                     <image class="item-classification-box">
                     </image>
                   </hbox>
-                  <stack mousethrough="always"
-                         class="calendar-category-box-stack">
+                  <stack class="calendar-category-box-stack">
                     <hbox class="calendar-category-box category-color-box calendar-event-selection"
                           flex="1"
                           pack="end">
                       <image class="calendar-category-box-gradient">
                       </image>
                     </hbox>
                   </stack>
                   <box class="calendar-event-gripbar-container">
                     <calendar-event-gripbar class="calendar-event-box-grippy-top"
-                                            mousethrough="never"
                                             whichside="start">
                     </calendar-event-gripbar>
-                    <spacer mousethrough="always"
-                            flex="1">
-                    </spacer>
+                    <spacer flex="1"/>
                     <calendar-event-gripbar class="calendar-event-box-grippy-bottom"
-                                            mousethrough="never"
                                             whichside="end">
                     </calendar-event-gripbar>
                   </box>
                 </stack>
               </box>
             </box>
           </box>
         `)
       );
 
-      this.setAttribute("mousethrough", "never");
+      this.style.pointerEvents = "auto";
       this.setAttribute("tooltip", "itemTooltip");
 
       this.orient = this.getAttribute("orient");
       this.addEventNameTextboxListener();
       this.initializeAttributeInheritance();
     }
 
     set parentColumn(val) {
--- a/calendar/base/themes/common/calendar-views.css
+++ b/calendar/base/themes/common/calendar-views.css
@@ -139,16 +139,17 @@
 }
 
 /* Core */
 .calendar-category-box:not([categories]) {
     display: none;
 }
 
 .calendar-category-box-stack {
+    pointer-events: none;
     display: flex;
     justify-content: end;
     margin-inline-end: 2px;
 }
 
 .calendar-category-box[categories] + hbox,
 .multiday-view-day-box .calendar-event-box-container[categories] > .calendar-event-details {
     margin-inline-end: 8px;
@@ -833,16 +834,17 @@ calendar-month-day-box calendar-month-da
     height: 1.2em;
     margin: 1px;
     padding: 0px 1px;
     background-color: var(--viewDropshadowBackground);
     box-shadow: 1px 1px 3px rgba(68, 35, 0, 0.7) inset;
 }
 
 calendar-event-gripbar {
+    pointer-events: auto;
     -moz-box-align: center;
     -moz-box-pack: center;
     min-height: 4px;
     min-width: 4px;
     overflow: hidden;
 }
 
 calendar-event-gripbar[parentorient="vertical"][whichside="start"] {
@@ -1169,16 +1171,21 @@ radio.calview:not([selected=true]):hover
 }
 
 .fgdragcontainer {
     min-width: 1px;
     min-height: 1px;
     overflow:hidden;
 }
 
+.multiday-column-top-box,
+.timeIndicator {
+  pointer-events: none;
+}
+
 .multiday-column-box-stack, .multiday-column-bg-box, .multiday-column-top-box, .calendar-empty-space-box,
 .calendar-event-column-linebox, .calendar-xul-column {
     min-width: 1px;
     min-height: 1px;
 }
 
 @media (-moz-overlay-scrollbars) {
     .multiday-headerscrollbarspacer,
--- a/calendar/base/themes/common/today-pane.css
+++ b/calendar/base/themes/common/today-pane.css
@@ -138,16 +138,20 @@
   margin-top: initial;
   margin-bottom: initial;
   font-size: 36px;
   font-weight: bold;
   width: 1em;
   text-align: center;
 }
 
+#dragCenter-image-container {
+  pointer-events: none;
+}
+
 #dragCenter-image {
   list-style-image: url("chrome://calendar-common/skin/widgets/drag-center.svg");
 }
 
 .miniday-nav-buttons {
   margin-top: 2px;
   min-width: 19px;
   -moz-user-focus: normal;
--- a/calendar/lightning/content/messenger-overlay-sidebar.xul
+++ b/calendar/lightning/content/messenger-overlay-sidebar.xul
@@ -1765,17 +1765,17 @@
               <hbox flex="1">
                 <stack id="dateContainer">
                   <hbox pack="center"
                         align="center">
                     <label id="datevalue-label" class="dateValue"
                            ondblclick="TodayPane.onDoubleClick(event);"
                            onmousedown="TodayPane.onMousedown(event);"/>
                   </hbox>
-                  <hbox flex="1" pack="center" align="center" mousethrough="always">
+                  <hbox id="dragCenter-image-container" flex="1" pack="center" align="center">
                     <image id="dragCenter-image" hidden="true"/>
                   </hbox>
                 </stack>
                 <vbox flex="1">
                   <hbox pack="center">
                     <deck id="weekdayNameContainer" pack="center"
                           ondblclick="TodayPane.onDoubleClick(event);">
                       <label/>
--- a/mail/base/content/mainMailToolbox.inc.xul
+++ b/mail/base/content/mainMailToolbox.inc.xul
@@ -295,18 +295,17 @@
                    oncommand="toAddressBook();"
                    tooltiptext="&addressBookButton.tooltip;"/>
     <toolbarbutton is="toolbarbutton-badge-button" id="button-chat"
                    class="toolbarbutton-1"
                    label="&chatButton.label;"
                    command="cmd_chat"
                    observes="cmd_chat"
                    tooltiptext="&chatButton.tooltip;"/>
-    <toolbaritem id="throbber-box" title="&throbberItem.title;" align="center" pack="center"
-                 mousethrough="always">
+    <toolbaritem id="throbber-box" title="&throbberItem.title;" align="center" pack="center">
       <image/>
     </toolbaritem>
     <toolbarbutton id="button-stop"
                    class="toolbarbutton-1"
                    label="&stopButton.label;"
                    tooltiptext="&stopButton.tooltip;"
                    command="cmd_stop"/>
     <toolbarbutton id="button-appmenu"
--- a/mail/components/downloads/content/aboutDownloads.xul
+++ b/mail/components/downloads/content/aboutDownloads.xul
@@ -62,18 +62,17 @@
 
   <stack flex="1">
     <richlistbox id="msgDownloadsRichListBox"
                  flex="1"
                  seltype="multiple"
                  context="msgDownloadsContextMenu"
                  oncontextmenu="DownloadsView.onDownloadContextMenu();"/>
     <description id="msgDownloadsListEmptyDescription"
-                 value="&aboutDownloads.empty;"
-                 mousethrough="always"/>
+                 value="&aboutDownloads.empty;"/>
   </stack>
 
 
   <menupopup id="msgDownloadsContextMenu">
     <menuitem command="msgDownloadsCmd_remove"
               class="msgDownloadRemoveFromHistoryMenuItem"
               label="&cmd.removeFromHistory.label;"
               accesskey="&cmd.removeFromHistory.accesskey;"/>
--- a/mail/components/im/content/chat-contact.js
+++ b/mail/components/im/content/chat-contact.js
@@ -90,29 +90,27 @@
           }
         }.bind(this),
       };
 
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
           <vbox class="box-line"></vbox>
-          <stack class="prplBuddyIcon" mousethrough="always">
+          <stack class="prplBuddyIcon">
             <image class="protoIcon"></image>
             <image class="statusIcon"></image>
           </stack>
-          <hbox flex="1" class="contact-hbox" mousethrough="always">
+          <hbox flex="1" class="contact-hbox">
             <label crop="end"
                    flex="1"
-                   mousethrough="always"
                    class="contactDisplayName blistDisplayName">
             </label>
             <label crop="end"
                    flex="100000"
-                   mousethrough="always"
                    class="contactStatusText">
             </label>
             <button class="startChatBubble"
                     tooltiptext="&openConversationButton.tooltip;">
             </button>
           </hbox>
           `,
           ["chrome://messenger/locale/chat.dtd"]
--- a/mail/components/im/content/chat-conversation-info.js
+++ b/mail/components/im/content/chat-conversation-info.js
@@ -60,32 +60,28 @@
         MozXULElement.parseXULToFragment(`
           <linkset>
             <html:link rel="localization" href="messenger/otr/chat.ftl"/>
           </linkset>
 
           <hbox class="displayUserAccount" flex="1">
             <stack class="statusImageStack">
               <box class="userIconHolder">
-                <image class="userIcon" mousethrough="always"></image>
+                <image class="userIcon"></image>
               </box>
               <image class="statusTypeIcon"></image>
             </stack>
             <stack class="displayNameAndstatusMessageStack"
-                   mousethrough="always"
                    flex="1">
               <hbox align="center" flex="1">
                 <description class="displayName" flex="1" crop="end">
                 </description>
                 <image class="prplIcon"></image>
               </hbox>
-              <description class="statusMessage"
-                           mousethrough="never"
-                           crop="end"
-                           flex="100000"/>
+              <description class="statusMessage" crop="end" flex="100000"/>
               <html:input class="statusMessageInput input-inline"
                           hidden="hidden"/>
             </stack>
           </hbox>
           <hbox class="otr-container"
                 align="start"
                 valign="middle"
                 hidden="true">
--- a/mail/components/im/content/chat-imconv.js
+++ b/mail/components/im/content/chat-imconv.js
@@ -59,32 +59,26 @@
       );
 
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
           <vbox class="box-line"></vbox>
           <button class="closeConversationButton close-icon"
                   tooltiptext="&closeConversationButton.tooltip;"></button>
-          <stack class="prplBuddyIcon" mousethrough="always">
+          <stack class="prplBuddyIcon">
             <image class="protoIcon"></image>
             <image class="statusIcon"></image>
           </stack>
-          <hbox flex="1" class="conv-hbox" mousethrough="always">
-            <label crop="end"
-                   flex="1"
-                   mousethrough="always"
-                   class="convDisplayName blistDisplayName">
+          <hbox flex="1" class="conv-hbox">
+            <label crop="end" flex="1" class="convDisplayName blistDisplayName">
             </label>
-            <label class="convUnreadCount"
-                   crop="end"
-                   mousethrough="never"></label>
+            <label class="convUnreadCount" crop="end"></label>
             <box class="convUnreadTargetedCount">
-              <label class="convUnreadTargetedCountLabel"
-                     crop="end" mousethrough="never"></label>
+              <label class="convUnreadTargetedCountLabel" crop="end"></label>
             </box>
             <spacer flex="1000000"></spacer>
           </hbox>
           `,
           ["chrome://messenger/locale/chat.dtd"]
         )
       );
 
--- a/mailnews/base/content/newmailalert.xul
+++ b/mailnews/base/content/newmailalert.xul
@@ -12,24 +12,24 @@
         windowtype="alert:alert"
         role="alert"
         align="start"
         onload="onAlertLoad()">
 
   <stringbundle id="bundle_messenger" src="chrome://messenger/locale/messenger.properties"/>
   <script src="chrome://messenger/content/newmailalert.js"/>
 
-  <stack id="alertContainer" mousethrough="always">
+  <stack id="alertContainer">
     <hbox id="alertBox">
       <hbox id ="alertImageBox" align="center" pack="center">
         <image id="alertImage"/>
       </hbox>
 
       <vbox id="alertTextBox">
         <label id="alertTitle"/>
         <separator id="alertGroove" class="groove"/>
-        <folder-summary id="folderSummaryInfo" mousethrough="never"/>
+        <folder-summary id="folderSummaryInfo"/>
       </vbox>
     </hbox>
 
     <toolbarbutton id="closeButton" class="close-icon" onclick="closeAlert();"/>
   </stack>
 </window>