Bug 1575360 - Add shadow effect to megabar when it's open. r=dao
authorharry <htwyford@mozilla.com>
Tue, 27 Aug 2019 09:46:45 +0000
changeset 553777 5b409f6201d591176a53873c7ec45239e0d2521d
parent 553776 19f1235e5f70ace9207e64add8cdf65320e92e95
child 553778 493b216296d589e558ecf80eccded445be778bbe
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1575360
milestone70.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 1575360 - Add shadow effect to megabar when it's open. r=dao Differential Revision: https://phabricator.services.mozilla.com/D42714
browser/themes/osx/browser.css
browser/themes/shared/urlbar-searchbar.inc.css
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -254,22 +254,29 @@
 }
 
 /* Ensure diacritics and other edge-of-font-box glyphs do not get clipped,
  * even in non-Latin scripts. */
 #urlbar-input {
   line-height: 1.745em;
 }
 
-#urlbar:not(.hidden-focus)[focused="true"],
+/* Focus ring. */
+#urlbar:not(.megabar):not(.hidden-focus)[focused="true"],
 #searchbar:focus-within {
   box-shadow: 0 0 0 1px var(--toolbar-field-focus-border-color) inset,
               0 0 0 1px var(--toolbar-field-focus-border-color);
 }
 
+#urlbar[breakout]:not(.hidden-focus)[focused="true"] {
+  box-shadow: 0 0 0 1px var(--toolbar-field-focus-border-color) inset,
+              0 0 0 1px var(--toolbar-field-focus-border-color),
+              0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
 %include ../shared/identity-block/identity-block.inc.css
 
 #wrapper-urlbar-container[place="palette"] {
   max-width: 20em;
 }
 
 #pageAction-urlbar-shareURL,
 #pageAction-panel-shareURL {
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -89,16 +89,17 @@
   position: absolute;
   z-index: 2;
   top: 0;
   margin-top: -@urlbarBreakoutVerticalExtend@;
   margin-inline-start: -@urlbarBreakoutHorizontalExtend@;
   width: calc(var(--urlbar-width) + 2 * @urlbarBreakoutHorizontalExtend@);
   min-height: calc(var(--urlbar-toolbar-height) + 2 * @urlbarBreakoutVerticalExtend@);
   padding: calc(3px + @urlbarBreakoutVerticalExtend@) 0;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 }
 
 #urlbar[breakout][open="true"] {
   padding-bottom: 0;
 }
 
 #urlbar[breakout] > #urlbar-input-container {
   padding-inline: @urlbarBreakoutHorizontalExtend@;