Bug 1365489 - Show select element drop down arrow in edit profile dialog. r=MattN
authorScott Wu <scottcwwu@gmail.com>
Wed, 17 May 2017 14:25:09 +0800
changeset 411296 880b0d81cf87455cdd51c59c924c73fcd7a01daa
parent 411295 29f34e4a8b1acf7d734ca44b8dddbeee0b8a081f
child 411297 2cf913cce0c47a55f866ef4d46a7f62c9d487e5c
push id7391
push usermtabara@mozilla.com
push dateMon, 12 Jun 2017 13:08:53 +0000
treeherdermozilla-beta@2191d7f87e2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1365489
milestone55.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 1365489 - Show select element drop down arrow in edit profile dialog. r=MattN MozReview-Commit-ID: KzkxIyKKcy6
browser/extensions/formautofill/skin/shared/editProfile.css
toolkit/themes/shared/in-content/common.inc.css
--- a/browser/extensions/formautofill/skin/shared/editProfile.css
+++ b/browser/extensions/formautofill/skin/shared/editProfile.css
@@ -31,17 +31,17 @@ label > span {
 input,
 select {
   box-sizing: border-box;
   flex: 1 0 auto;
   width: calc(50% - 8em);
 }
 
 option {
-  padding: 6px;
+  padding: 5px 10px;
 }
 
 textarea {
   resize: none;
 }
 
 button {
   padding: 3px 2em;
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -190,16 +190,27 @@ xul|menulist {
   -moz-border-top-colors: none !important;
   -moz-border-right-colors: none !important;
   -moz-border-bottom-colors: none !important;
   -moz-border-left-colors: none !important;
   border-radius: 2px;
   background-color: var(--in-content-page-background);
 }
 
+html|select:not([size]):not([multiple]) {
+  background-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
+  background-position: right 3px center;
+  background-repeat: no-repeat;
+  background-size: auto 18px;
+  font-size: inherit;
+  padding-inline-start: 5px;
+  padding-inline-end: 24px;
+  text-overflow: ellipsis;
+}
+
 html|button:enabled:hover,
 html|select:not([size]):not([multiple]):enabled:hover,
 xul|button:not([disabled="true"]):hover,
 xul|colorpicker[type="button"]:not([disabled="true"]):hover,
 xul|menulist:not([disabled="true"]):hover {
   background-color: var(--in-content-box-background-hover);
 }