Bug 1368317 - Fix sidebar overlap styling for when the sidebar is on the end-side of the window (rhs in ltr). r=bgrins, a=jcristau
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Thu, 15 Jun 2017 14:31:54 +0100
changeset 414037 66c52ae642d227406bd09ce7f6c17c8582fbab48
parent 414036 00c04e6496edb2d94b4fd2528c6ae90c55733fbf
child 414038 54fe4bc8e0075af5b11a0091fcb477ac8135cc0d
push id1490
push usermtabara@mozilla.com
push dateMon, 31 Jul 2017 14:08:16 +0000
treeherdermozilla-release@70e32e6bf15e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins, jcristau
bugs1368317
milestone55.0
Bug 1368317 - Fix sidebar overlap styling for when the sidebar is on the end-side of the window (rhs in ltr). r=bgrins, a=jcristau MozReview-Commit-ID: 3BZily6xSD2
browser/base/content/browser-sidebar.js
browser/themes/shared/sidebar.inc.css
--- a/browser/base/content/browser-sidebar.js
+++ b/browser/base/content/browser-sidebar.js
@@ -138,16 +138,20 @@ var SidebarUI = {
     if (!this._positionStart) {
       // DOM ordering is:     |  sidebar-box  | splitter |   appcontent  |
       // Want to display as:  |   appcontent  | splitter |  sidebar-box  |
       // So we just swap box and appcontent ordering
       let appcontent = document.getElementById("appcontent");
       let boxOrdinal = this._box.ordinal;
       this._box.ordinal = appcontent.ordinal;
       appcontent.ordinal = boxOrdinal;
+      // Indicate we've switched ordering to the splitter
+      this._splitter.setAttribute("overlapend", true);
+    } else {
+      this._splitter.removeAttribute("overlapend");
     }
 
     this.hideSwitcherPanel();
   },
 
   /**
    * Try and adopt the status of the sidebar from another window.
    * @param {Window} sourceWindow - Window to use as a source for sidebar status.
--- a/browser/themes/shared/sidebar.inc.css
+++ b/browser/themes/shared/sidebar.inc.css
@@ -24,17 +24,17 @@
   min-width: 1px;
   width: 3px;
   background-image: none !important;
   background-color: transparent;
   margin-inline-start: -3px;
   position: relative;
 }
 
-#appcontent ~ .sidebar-splitter {
+.sidebar-splitter[overlapend] {
   border-inline-end-width: 0;
   border-inline-start-width: 1px;
   margin-inline-start: 0;
   margin-inline-end: -3px;
 }
 
 #sidebar-throbber[loading="true"] {
   list-style-image: url("chrome://global/skin/icons/loading.png");