chore: Add floating URL bar preference to theme settings

src/browser/app/profile/zen-browser.js

@@ -67,6 +67,7 @@ pref('zen.tabs.vertical', true);
 pref('zen.theme.accent-color', "#aac7ff");
 pref('zen.theme.toolbar-themed', true);
 pref('zen.theme.pill-button', false);
+pref('zen.theme.floating-urlbar', false);
 pref('zen.view.compact', false);
 pref('zen.view.compact.hide-toolbar', false);
 pref('zen.view.sidebar-expanded', false);

src/browser/components/preferences/zen-settings.js

@@ -93,5 +93,10 @@ Preferences.addAll([
     id: "zen.theme.pill-button",
     type: "bool",
     default: true,
+  },
+  {
+    id: "zen.theme.floating-urlbar",
+    type: "bool",
+    default: false,
   }
 ]);

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -29,13 +29,6 @@
                   data-l10n-id="zen-look-and-feel-compact-view-top-toolbar"
                   preference="zen.view.compact.hide-toolbar"/> 
       </vbox>
-
-      <label><html:h2 data-l10n-id="zen-look-and-feel-buttons-header"/></label>
-      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-buttons-description" />
-
-      <checkbox id="zenLooksAndFeelPilledButtons"
-            data-l10n-id="zen-look-and-feel-pilled-buttons"
-            preference="zen.theme.pill-button"/>
 </groupbox>
 
 <hbox id="zenSidePanelsCategory"
@@ -73,4 +66,27 @@
             preference="zen.view.sidebar-expanded"/>
 </groupbox>
 
+<hbox id="zenThemeCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="paneZenLooks">
+<html:h1 data-l10n-id="pane-zen-theme-title"/>
+</hbox>
+
+<groupbox id="zenThemeGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
+      <label><html:h2 data-l10n-id="zen-look-and-feel-buttons-header"/></label>
+      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-buttons-description" />
+
+      <checkbox id="zenLooksAndFeelPilledButtons"
+            data-l10n-id="zen-look-and-feel-pilled-buttons"
+            preference="zen.theme.pill-button"/>
+
+      <label><html:h2 data-l10n-id="zen-look-and-feel-urlbar-header"/></label>
+      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-urlbar-description" />
+
+      <checkbox id="zenLooksAndFeelFloatingUrlbar"
+            data-l10n-id="zen-look-and-feel-floating-urlbar"
+            preference="zen.theme.floating-urlbar"/>
+</groupbox>
+
 </html:template>

src/browser/locales/en-US/browser/preferences/zen-preferences.ftl

@@ -41,6 +41,14 @@ zen-settings-workspaces-description = With workspaces, you can have multiple bro
 zen-settings-workspaces-enabled = 
     .label = Enable Workspaces (Experimental)
 
+pane-zen-theme-title = Theme Settings
+
+zen-look-and-feel-urlbar-header = Awesome Bar Settings
+zen-look-and-feel-urlbar-description = Customize the look and feel of the Awesome Bar
+
+zen-look-and-feel-floating-urlbar = 
+    .label = Floating URL Bar when focused
+
 zen-vertical-tabs-title = Sidebar and tabs layout
 zen-vertical-tabs-header = Vertical Tabs
 zen-vertical-tabs-description = Manage your tabs in a vertical layout

src/browser/themes/shared/zen-browser-shared.css

@@ -222,6 +222,7 @@ button.popup-notification-dropmarker {
 #navigator-toolbox {
   min-width: 55px;
   max-width: 55px;
+  transition: .4s !important;
 }
 
 #navigator-toolbox toolbar#TabsToolbar {
@@ -832,4 +833,50 @@ panelmultiview {
   #zen-sidebar-icons-wrapper::before {
     width: 100%;
   }
-}
+}
+
+/* Popup Search */
+
+@media (-moz-bool-pref: "zen.theme.floating-urlbar") {
+  #urlbar:is([breakout][breakout-extend], [breakout][usertyping][focused]) {
+    #urlbar-input {
+      font-size: 16px !important;
+      text-align: left !important;
+    }
+    
+    z-index: 1;
+    position: fixed !important;
+    --urlbar-height: auto !important;
+    bottom: auto !important;
+    top: 20vh !important;
+    padding-left: 6px !important;
+    padding-right: 8px !important;
+    
+    left: 18vw !important;
+    right: 18vw !important;
+    width: 64vw !important;
+
+    &:after {
+      content: "";
+      position: fixed;
+      pointer-events: none;
+      
+      width: 100vw;
+      height: 100vh;
+      
+      top: 0px;
+      left: 0px;
+      
+      background-color: rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(8px);
+
+      z-index: -1;
+    }
+
+    #identity-box {
+      margin: auto 0;
+      height: 30px;
+      margin-right: 10px;
+    }
+  }
+}