4 files changed, 188 insertions, 0 deletions
diff --git a/browser/themes/shared/search/search-engine-placeholder.png b/browser/themes/shared/search/search-engine-placeholder.png
new file mode 100644
index 0000000000..bff355bf48
--- /dev/null
+++ b/browser/themes/shared/search/search-engine-placeholder.png
diff --git a/browser/themes/shared/search/search-engine-placeholder@2x.png b/browser/themes/shared/search/search-engine-placeholder@2x.png
new file mode 100644
index 0000000000..1565fc55df
--- /dev/null
+++ b/browser/themes/shared/search/search-engine-placeholder@2x.png
diff --git a/browser/themes/shared/search/search-indicator-badge-add.svg b/browser/themes/shared/search/search-indicator-badge-add.svg
new file mode 100644
index 0000000000..eef74b2c72
--- /dev/null
+++ b/browser/themes/shared/search/search-indicator-badge-add.svg
@@ -0,0 +1,8 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
+  <circle fill="#fff" cx="5.5" cy="5.5" r="5.5"/>
+  <circle fill="#12bc00" class="cls-2" cx="5.5" cy="5.5" r="4.5"/>
+  <path fill="#fff" d="M7.5 6H6v1.5a.5.5 0 0 1-1 0V6H3.5a.5.5 0 0 1 0-1H5V3.5a.5.5 0 0 1 1 0V5h1.5a.5.5 0 0 1 0 1z"/>
+</svg>
diff --git a/browser/themes/shared/searchbar.css b/browser/themes/shared/searchbar.css
new file mode 100644
index 0000000000..9afb692ddd
--- /dev/null
+++ b/browser/themes/shared/searchbar.css
@@ -0,0 +1,180 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.searchbar-engine-image {
+  width: 16px;
+  height: 16px;
+  list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.search-one-offs:not([hidden]) {
+  display: block;
+  width: 100%;
+}
+
+.search-panel-one-offs-header {
+  display: block;
+}
+
+.search-panel-header {
+  font-weight: normal;
+  margin: 0;
+}
+
+.search-panel-header > label {
+  margin-top: 2px;
+  margin-bottom: 1px;
+  opacity: .6;
+}
+
+/* Make the contrast stronger in dark mode */
+:root[lwt-toolbar-field-focus-brighttext] .search-panel-header > label {
+  opacity: 1;
+}
+
+/**
+ * The borders of the various elements are specified as follows.
+ *
+ * The current engine always has a bottom border.
+ * The search results never have a border.
+ *
+ * When the search results are not collapsed:
+ * - The elements underneath the search results all have a top border.
+ *
+ * When the search results are collapsed:
+ * - The elements underneath the search results all have a bottom border.
+ */
+
+.search-panel-current-engine {
+  -moz-box-align: center;
+  border-top: none !important;
+  padding-inline: 8px;
+}
+
+.search-panel-one-offs:not([hidden]),
+.search-panel-one-offs-container {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+}
+
+.search-panel-one-offs {
+  margin: 0 !important;
+  /* Bug 1108841: prevent font-size from affecting the layout */
+  line-height: 0;
+  flex-wrap: wrap;
+}
+
+.searchbar-engine-one-off-item {
+  appearance: none;
+  display: -moz-inline-box;
+  background-color: transparent;
+  border: none;
+  min-width: 32px;
+  height: 32px;
+  margin-inline-end: 8px;
+  margin-block: 0;
+  padding: 0;
+  color: inherit;
+  border-radius: var(--toolbarbutton-border-radius);
+}
+
+@media (-moz-platform: windows) {
+  .searchbar-engine-one-off-item:focus-visible {
+    outline: none;
+  }
+}
+
+/* We don't handle `:active` because it doesn't work on the search or settings
+   buttons due to event.preventDefault() in SearchOneOffs._on_mousedown(). */
+.searchbar-engine-one-off-item:not([selected]):hover {
+  background-color: var(--autocomplete-popup-hover-background);
+  color: inherit;
+}
+
+.searchbar-engine-one-off-item[selected] {
+  background-color: var(--autocomplete-popup-highlight-background);
+  color: var(--autocomplete-popup-highlight-color);
+}
+
+.searchbar-engine-one-off-item > .button-box > .button-text {
+  display: none;
+}
+
+.searchbar-engine-one-off-item > .button-box > .button-icon {
+  margin-inline: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.search-panel-tree {
+  background: transparent;
+  color: inherit;
+}
+
+.search-panel-tree > .autocomplete-richlistitem {
+  padding: 1px 3px;
+}
+
+.search-panel-tree > .autocomplete-richlistitem:hover {
+  background-color: var(--autocomplete-popup-hover-background);
+}
+
+.search-panel-tree > .autocomplete-richlistitem > .ac-type-icon {
+  display: -moz-box;
+  width: 14px;
+  height: 14px;
+  margin-inline-end: 7px;
+}
+
+.search-panel-tree > .autocomplete-richlistitem[originaltype="fromhistory"] > .ac-type-icon {
+  list-style-image: url("chrome://browser/skin/history.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+  fill-opacity: 0.6;
+}
+
+.search-panel-tree > .autocomplete-richlistitem[originaltype="fromhistory"][selected] > .ac-type-icon {
+  fill-opacity: 1;
+}
+
+.searchbar-separator {
+  appearance: none;
+  margin: var(--panel-separator-margin);
+  padding: 0;
+  border: 0;
+  border-top: 1px solid var(--autocomplete-popup-separator-color);
+  color: inherit;
+}
+
+.search-panel-tree[collapsed=true] + .searchbar-separator {
+  display: none;
+}
+
+.search-setting-button {
+  max-height: 32px;
+  align-self: end;
+  margin-inline: 0;
+}
+
+.search-setting-button > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/settings.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--urlbar-icon-fill-opacity);
+}
+
+@media (-moz-platform: windows-win10) {
+  #PopupSearchAutoComplete {
+    --panel-border-radius: var(--arrowpanel-border-radius);
+  }
+}
+
+@media (-moz-platform: macos) {
+  #PopupSearchAutoComplete {
+    border-radius: 4px;
+  }
+}