Bug 1556786 - Fix header box alignment in day and week views. r=mkmelin
authorPaul Morris <paul@paulwmorris.com>
Wed, 26 Jun 2019 13:56:08 -0400
changeset 35962 9f2d18f74b1517f68e06a96970ad0736aedce2a9
parent 35961 d1433086b124fed82e3a4883861648012e5e61fc
child 35963 a32a7dd507912e310334745f46a2788848b146e3
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersmkmelin
bugs1556786
Bug 1556786 - Fix header box alignment in day and week views. r=mkmelin
calendar/base/content/calendar-multiday-base-view.js
calendar/base/themes/common/calendar-views.css
--- a/calendar/base/content/calendar-multiday-base-view.js
+++ b/calendar/base/content/calendar-multiday-base-view.js
@@ -1542,20 +1542,30 @@
         }
 
         /**
          * Adjust scroll bar spacers if needed.
          */
         adjustScrollBarSpacers() {
             // Get the width or height of the scrollbox scrollbar, depending on view orientation.
             const widthOrHeight = this.getAttribute("orient") == "vertical" ? "width" : "height";
-            const propertyValue = this.scrollbox.firstChild.getBoundingClientRect()[widthOrHeight];
+
+            // We cannot access the scrollbar to get its size directly (e.g. via querySelector) so
+            // we subtract the size of the other scrollbox children from the size of the scrollbox
+            // to calculate the size of the scrollbar.
+            let scrollboxChildrenSize = 0;
+            for (const child of this.scrollbox.children) {
+                scrollboxChildrenSize += child.getBoundingClientRect()[widthOrHeight];
+            }
+            const scrollboxSize = this.scrollbox.getBoundingClientRect()[widthOrHeight];
+
+            const scrollbarSize = scrollboxSize - scrollboxChildrenSize;
 
             // Check if we need to show the headerScrollbarSpacer at all.
-            let headerPropVal = propertyValue;
+            let headerPropVal = scrollbarSize;
             const headerDayBox = this.querySelector(".headerdaybox");
             if (headerDayBox) {
                 // Only do this when there are multiple days.
                 const headerDayBoxMaxHeight = parseInt(document.defaultView
                     .getComputedStyle(headerDayBox).getPropertyValue("max-height"), 10);
 
                 if (this.getAttribute("orient") == "vertical" &&
                     headerDayBox.getBoundingClientRect().height >= headerDayBoxMaxHeight) {
@@ -1563,17 +1573,17 @@
                     // there is already a scrollbar and we don't need to show the
                     // headerScrollbarSpacer. This is only valid for the non-rotated view.
                     headerPropVal = 0;
                 }
             }
 
             // Set the same width/height for the label and header box spacers.
             this.querySelector(".headerscrollbarspacer").setAttribute(widthOrHeight, headerPropVal);
-            this.querySelector(".labelscrollbarspacer").setAttribute(widthOrHeight, propertyValue);
+            this.querySelector(".labelscrollbarspacer").setAttribute(widthOrHeight, scrollbarSize);
         }
 
         /**
          * Scroll the view to a given minute.
          *
          * @param {number} rawMinute    The minute to scroll to.
          */
         scrollToMinute(rawMinute) {
--- a/calendar/base/themes/common/calendar-views.css
+++ b/calendar/base/themes/common/calendar-views.css
@@ -283,27 +283,25 @@ calendar-header-container[weekend="true"
 }
 
 /* Make sure we extend the bold line separating scrollable and non-scrollable
    areas over the timebar. */
 .multiday-view-header-time-spacer[orient="horizontal"] {
     border-bottom: 2px solid var(--viewBorderColor);
     border-right: 1px solid var(--viewBorderColor);
     margin-inline-end: 1px;
-    margin-inline-start: -1px;
 }
 
 .multiday-view-header-time-spacer[orient="vertical"] {
     border-right: 2px solid var(--viewBorderColor);
 }
 
 .multiday-view-label-box[orient="horizontal"] > .multiday-view-label-time-spacer {
     border-right: 1px solid var(--viewBorderColor);
     margin-inline-end: 1px;
-    margin-inline-start: -1px;
 }
 
 .multiday-view-header-day-box[orient="horizontal"] {
     border-right: 1px solid var(--viewBorderColor);
     border-bottom: 2px solid var(--viewBorderColor);
     overflow-x: hidden;
     overflow-y: auto;
     max-height: 120px;