Bug 1091592 - Improve style of select dropdowns, including adding more padding for touch-enabled devices. r=jaws
authorMark Golbeck <markgolbeck08@gmail.com>
Mon, 10 Oct 2016 19:36:50 -0700
changeset 317835 83461556cda59e8bcd54f09b9263e3202ce01dc2
parent 317781 f03e2740d604d339ed553dad62a3fc54c317f8fa
child 317836 3f08e53732e43d9f7d8a2d5cc71d186d0ef0ee9b
push id33170
push usercbook@mozilla.com
push dateFri, 14 Oct 2016 10:37:07 +0000
treeherderautoland@0d101ebfd95c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1091592
milestone52.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1091592 - Improve style of select dropdowns, including adding more padding for touch-enabled devices. r=jaws MozReview-Commit-ID: THzkOhk0uR
browser/themes/windows/browser.css
toolkit/themes/linux/global/menu.css
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -2642,8 +2642,62 @@ notification.pluginVulnerable > .notific
   .cui-widget-panelview[id^=PanelUI-webext-] {
     border-radius: 4px;
   }
 }
 
 .webextension-popup-browser {
   border-radius: inherit;
 }
+
+.contentSelectDropdown-ingroup > .menu-iconic-text {
+  padding-inline-start: 20px;
+}
+
+#ContentSelectDropdown > menupopup {
+  background-color: -moz-field;
+  -moz-border-top-colors: GrayText;
+  -moz-border-right-colors: GrayText;
+  -moz-border-bottom-colors: GrayText;
+  -moz-border-left-colors: GrayText;
+}
+
+#ContentSelectDropdown > menupopup > menucaption,
+#ContentSelectDropdown > menupopup > menuitem {
+  padding: 4px 6px;
+}
+
+#ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
+#ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
+  font: message-box;
+  font-size: 11px;
+  /**
+   * Remove the extra vertical padding set by menu.css since
+   * the menuitem itself will include enough padding.
+   */
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+#ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
+  font-weight: bold;
+}
+
+#ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
+  color: GrayText;
+  background-color: unset;
+}
+
+#ContentSelectDropdown > menupopup > menucaption {
+  background-color: buttonface;
+}
+
+#ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
+  color: GrayText;
+}
+
+@media (-moz-touch-enabled) {
+  #ContentSelectDropdown > menupopup > menucaption,
+  #ContentSelectDropdown > menupopup > menuitem {
+    padding-top: 11px;
+    padding-bottom: 11px;
+  }
+}
--- a/toolkit/themes/linux/global/menu.css
+++ b/toolkit/themes/linux/global/menu.css
@@ -31,17 +31,18 @@ menu[_moz-menuactive="true"],
 menuitem[_moz-menuactive="true"],
 .splitmenu-menuitem[_moz-menuactive="true"] {
   color: -moz-menuhovertext;
   background-color: -moz-menuhover;
 }
 
 menu[disabled="true"],
 menuitem[disabled="true"],
-.splitmenu-menuitem[disabled="true"] {
+.splitmenu-menuitem[disabled="true"],
+menucaption[disabled="true"] {
   color: GrayText;
 }
 
 menubar > menu {
   padding: 0px 4px;
   color: -moz-menubartext;
 }