Bug 1397278 - When typing in urlbar or search box, box size increases. r?dao draft
authorDrew Willcoxon <adw@mozilla.com>
Wed, 06 Sep 2017 20:54:55 -0700
changeset 660542 bffa46fcb7203957a0ad6bc757623fd23a50f51a
parent 660422 d8e238b811d3dc74515065ae8cab6c74baf0295f
child 730258 007f7ba8accbc8b520881d36ea7a791ed6891020
push id78425
push userdwillcoxon@mozilla.com
push dateThu, 07 Sep 2017 03:55:53 +0000
reviewersdao
bugs1397278
milestone57.0a1
Bug 1397278 - When typing in urlbar or search box, box size increases. r?dao MozReview-Commit-ID: JWGC7MFY10j
browser/themes/shared/urlbar-searchbar.inc.css
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -150,48 +150,62 @@
 }
 
 #userContext-icons,
 #urlbar-zoom-button {
   margin-left: 6px;
   margin-right: 6px;
 }
 
+/* .urlbar-icon includes .urlbar-history-dropmarker, .urlbar-go-button,
+   .search-go-button, and the page actions, but not #pageActionSeparator. */
 .urlbar-icon {
+  padding: 0 6px;
+  /* 16x16 icon with border-box sizing */
   width: 28px;
-  height: 28px;
-  /* 28x28 box - 16x16 image = 12x12 padding, 6 on each side */
-  padding: 6px;
+  height: 16px;
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0.6;
   color: inherit;
+}
+
+.urlbar-icon.urlbar-page-action,
+.urlbar-icon-wrapper.urlbar-page-action > .urlbar-icon {
+  /* 28x28 box - 16x16 image = 12x12 padding, 6 on each side */
+  width: 28px;
+  height: 28px;
+  padding: 6px;
   transition-property: background-color;
   transition-duration: var(--toolbarbutton-hover-transition-duration);
 }
 
-:root[uidensity=compact] .urlbar-icon {
+:root[uidensity=compact] .urlbar-icon.urlbar-page-action,
+:root[uidensity=compact] .urlbar-icon-wrapper.urlbar-page-action > .urlbar-icon {
+  /* 24x24 box - 16x16 image = 8x8 padding, 4 on each side */
   width: 24px;
   height: 24px;
-  /* 24x24 box - 16x16 image = 8x8 padding, 4 on each side */
   padding: 4px;
 }
 
-:root[uidensity=touch] .urlbar-icon {
+:root[uidensity=touch] .urlbar-icon.urlbar-page-action,
+:root[uidensity=touch] .urlbar-icon-wrapper.urlbar-page-action > .urlbar-icon {
+  /* 30x30 box - 16x16 image = 14x14 padding, 7 on each side */
   width: 30px;
   height: 30px;
-  /* 30x30 box - 16x16 image = 14x14 padding, 7 on each side */
   padding: 7px;
 }
 
-.urlbar-icon:hover {
+.urlbar-icon.urlbar-page-action:hover,
+.urlbar-icon-wrapper.urlbar-page-action:hover {
   background-color: hsla(0,0%,80%,.4);
 }
 
-.urlbar-icon:hover:active {
+.urlbar-icon.urlbar-page-action:hover:active,
+.urlbar-icon-wrapper.urlbar-page-action > .urlbar-icon:hover:active {
   background-color: hsla(0,0%,80%,.45);
   transition-duration: var(--toolbarbutton-active-transition-duration);
 }
 
 .urlbar-go-button,
 .search-go-button {
   list-style-image: url("chrome://browser/skin/back.svg");
   width: 26px;