Bug 1389094 - Increase height of sidebar search bar and tree items in touch mode. r=dao draft
authorNihanth Subramanya <nhnt11@gmail.com>
Sun, 08 Oct 2017 22:06:30 +0530
changeset 679537 eff12ac335b7908ded5eca9810aa41251d9eabdb
parent 677774 a0488ecc201c04f2617e7b02f039344e8fbf0d9a
child 735639 22a877f4991b54e80c8aa6d33946ea665afb231d
push id84264
push usernhnt11@gmail.com
push dateThu, 12 Oct 2017 21:28:52 +0000
reviewersdao
bugs1389094
milestone58.0a1
Bug 1389094 - Increase height of sidebar search bar and tree items in touch mode. r=dao MozReview-Commit-ID: HxT3eNHImyz
browser/base/content/browser.js
browser/components/places/content/sidebarUtils.js
browser/themes/linux/places/places.css
browser/themes/osx/places/places.css
browser/themes/windows/places/places.css
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -5724,27 +5724,39 @@ var gUIDensity = {
     gPrefService.setIntPref(this.uiDensityPref, mode);
   },
 
   update(mode) {
     if (mode == null) {
       mode = this.getCurrentDensity().mode;
     }
 
-    let doc = document.documentElement;
-    switch (mode) {
-    case this.MODE_COMPACT:
-      doc.setAttribute("uidensity", "compact");
-      break;
-    case this.MODE_TOUCH:
-      doc.setAttribute("uidensity", "touch");
-      break;
-    default:
-      doc.removeAttribute("uidensity");
-      break;
+    let docs = [
+      document.documentElement,
+      SidebarUI.browser.contentDocument.documentElement,
+    ];
+    for (let doc of docs) {
+      switch (mode) {
+      case this.MODE_COMPACT:
+        doc.setAttribute("uidensity", "compact");
+        break;
+      case this.MODE_TOUCH:
+        doc.setAttribute("uidensity", "touch");
+        break;
+      default:
+        doc.removeAttribute("uidensity");
+        break;
+      }
+    }
+    let tree = SidebarUI.browser.contentDocument.querySelector(".sidebar-placesTree");
+    if (tree) {
+      // Tree items don't update their styles without changing some property on the
+      // parent tree element, like background-color or border. See bug 1407399.
+      tree.style.border = "1px";
+      tree.style.border = "";
     }
 
     TabsInTitlebar.updateAppearance(true);
   },
 };
 
 var gHomeButton = {
   prefDomain: "browser.startup.homepage",
--- a/browser/components/places/content/sidebarUtils.js
+++ b/browser/components/places/content/sidebarUtils.js
@@ -1,13 +1,14 @@
 /* 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/. */
 
 Components.utils.import("resource://gre/modules/AppConstants.jsm");
+window.top.gUIDensity.update();
 
 var SidebarUtils = {
   handleTreeClick: function SU_handleTreeClick(aTree, aEvent, aGutterSelect) {
     // right-clicks are not handled here
     if (aEvent.button == 2)
       return;
 
     var tbo = aTree.treeBoxObject;
--- a/browser/themes/linux/places/places.css
+++ b/browser/themes/linux/places/places.css
@@ -46,16 +46,21 @@
   border: 0;
   background: transparent;
 }
 
 .sidebar-placesTreechildren::-moz-tree-row {
   min-height: 24px;
 }
 
+:root[uidensity=touch] #search-box,
+:root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
+  min-height: 32px;
+}
+
 .sidebar-placesTreechildren::-moz-tree-cell(leaf) ,
 .sidebar-placesTreechildren::-moz-tree-image(leaf) {
   cursor: pointer;
 }
 
 .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) {
   cursor: pointer;
   text-decoration: underline;
--- a/browser/themes/osx/places/places.css
+++ b/browser/themes/osx/places/places.css
@@ -14,16 +14,20 @@
 .sidebar-placesTreechildren::-moz-tree-row {
   padding-bottom: 1px;
   margin: 0;
   height: 24px;
   /* Default font size is 11px on mac, so this is 12px */
   font-size: 1.0909rem;
 }
 
+:root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
+  min-height: 32px;
+}
+
 .sidebar-placesTree {
   -moz-appearance: -moz-mac-source-list;
   -moz-font-smoothing-background-color: -moz-mac-source-list;
 }
 
 .sidebar-placesTreechildren::-moz-tree-separator {
   border-top: 1px solid #505d6d;
   margin: 0 10px;
--- a/browser/themes/windows/places/places.css
+++ b/browser/themes/windows/places/places.css
@@ -16,16 +16,21 @@
 .sidebar-placesTree {
   -moz-appearance: none;
   background-color: transparent;
   color: inherit;
   border: 0;
   margin: 0;
 }
 
+:root[uidensity=touch] #search-box,
+:root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
+  min-height: 32px;
+}
+
 .sidebar-placesTreechildren::-moz-tree-cell,
 .sidebar-placesTreechildren::-moz-tree-twisty {
   padding: 0 4px;
 }
 
 .sidebar-placesTreechildren::-moz-tree-cell(leaf) ,
 .sidebar-placesTreechildren::-moz-tree-image(leaf) {
   cursor: pointer;