Source code
Revision control
Copy as Markdown
Other Tools
/* 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/. */
:host {
display: flex;
width: 100%;
--content-search-handoff-ui-background-color: Field;
--content-search-handoff-ui-color: FieldText;
--content-search-handoff-ui-fill: FieldText;
--content-search-handoff-ui-caret-color: FieldText;
--content-search-handoff-ui-border-width: 1px;
--content-search-handoff-ui-unfocused-border-color: transparent;
--content-search-handoff-ui-fakefocus-border-color: SelectedItem;
--content-search-handoff-ui-fakefocus-box-shadow-inner: color-mix(in srgb, SelectedItem 25%, transparent);
--content-search-handoff-ui-fakefocus-box-shadow-outer: color-mix(in srgb, SelectedItem 25%, transparent);
}
.fake-editable {
height: 100%;
opacity: 0;
position: absolute;
inset: 0;
}
.fake-editable:focus {
outline: none;
caret-color: transparent;
}
.fake-textbox {
opacity: 0.54;
text-align: start;
-webkit-line-clamp: 1;
overflow: hidden;
margin-inline-start: var(--space-xsmall);
/**
* It's not clear to me why I need to do this, but for some reason I don't
* inherit the font-size through the shadow DOM...
*/
font-size: var(--font-size-root);
}
.search-handoff-button {
position: relative;
background: var(--content-search-handoff-ui-background-color) var(--newtab-search-icon) 16px center no-repeat;
background-size: var(--size-item-medium);
padding-inline-start: calc(2 * var(--space-xlarge));
padding-inline-end: var(--space-small);
padding-block: 0;
width: 100%;
box-shadow: var(--box-shadow-level-3);
border: var(--content-search-handoff-ui-border-width) solid var(--content-search-handoff-ui-unfocused-border-color);
border-radius: var(--border-radius-medium);
color: var(--content-search-handoff-ui-color);
-moz-context-properties: fill;
fill: var(--content-search-handoff-ui-fill);
&:dir(rtl) {
background-position-x: right 16px;
}
}
@keyframes caret-animation {
to {
visibility: hidden;
}
}
.fake-caret {
/* To replicate the default caret blink rate of 567ms (https://searchfox.org/mozilla-central/source/widget/cocoa/nsLookAndFeel.mm#397):
- Multiply the blink time by 2 to cover both the visible and hidden states.
- Use steps(2, start) to divide the animation into 2 phases:
1. First 567ms (Step 1) → Caret is visible
2. Next 567ms (Step 2) → Caret is hidden
This gives a sharp ON/OFF effect instead of a smooth transition. */
animation: caret-animation var(--caret-blink-time, 1134ms) steps(2, start) var(--caret-blink-count, infinite);
background: var(--content-search-handoff-ui-caret-color);
display: none;
inset-inline-start: calc(2 * var(--space-xlarge));
width: 1px;
/**
* We use the negative margin trick here to overlap the same area as the
* fake-textbox.
*/
height: 17px;
margin-top: -17px;
}
:host([fakefocus]:not([disabled])) .search-handoff-button {
border: var(--content-search-handoff-ui-border-width) solid var(--content-search-handoff-ui-fakefocus-border-color);
box-shadow:
0 0 0 2px var(--content-search-handoff-ui-fakefocus-box-shadow-inner),
0 0 0 4px var(--content-search-handoff-ui-fakefocus-box-shadow-outer);
.fake-caret {
display: block;
}
}
:host([disabled]) .search-handoff-button {
opacity: 0.5;
}
:host([nonhandoff]) {
.non-handoff-container {
display: flex;
flex: 1;
}
#newtab-search-text {
position: relative;
background: var(--content-search-handoff-ui-background-color) var(--newtab-search-icon) 16px center no-repeat;
background-size: var(--size-item-medium);
padding-inline-start: calc(2 * var(--space-xlarge));
padding-inline-end: calc(48px + var(--space-medium));
padding-block: 0;
width: 100%;
box-shadow: var(--box-shadow-level-3);
border: var(--content-search-handoff-ui-border-width) solid var(--content-search-handoff-ui-unfocused-border-color);
border-radius: var(--border-radius-medium);
color: var(--content-search-handoff-ui-color);
-moz-context-properties: fill;
fill: var(--content-search-handoff-ui-fill);
&:dir(rtl) {
background-position-x: right 16px;
}
&::-moz-search-clear-button {
display: none;
}
}
.contentSearchSuggestionTable {
background-color: hsla(0, 0%, 100%, 0.99);
color: black;
border: 1px solid hsla(0, 0%, 0%, 0.2);
border-top: none;
box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.1);
position: absolute;
inset-inline-start: 0;
z-index: 1001;
user-select: none;
cursor: default;
}
.contentSearchSuggestionsList {
border-bottom: 1px solid hsl(0, 0%, 92%);
width: 100%;
height: 100%;
}
.contentSearchSuggestionTable,
.contentSearchSuggestionsList {
border-spacing: 0;
overflow: hidden;
padding: 0;
margin: 0;
text-align: start;
}
.contentSearchHeaderRow,
.contentSearchSuggestionRow {
margin: 0;
max-width: inherit;
padding: 0;
}
.contentSearchHeaderRow > td > img,
.contentSearchSuggestionRow > td > .historyIcon {
margin-inline-end: 8px;
margin-bottom: -3px;
}
.contentSearchSuggestionTable .historyIcon {
width: 16px;
height: 16px;
display: inline-block;
background-image: url("chrome://browser/skin/history.svg");
-moz-context-properties: fill;
fill: graytext;
}
.contentSearchSuggestionRow.selected > td > .historyIcon {
fill: HighlightText;
}
.contentSearchHeader > img {
height: 16px;
width: 16px;
margin: 0;
padding: 0;
}
.contentSearchSuggestionRow.remote > td > .historyIcon {
visibility: hidden;
}
.contentSearchSuggestionRow.selected {
background-color: SelectedItem;
color: SelectedItemText;
}
.contentSearchHeader,
.contentSearchSuggestionEntry {
margin: 0;
max-width: inherit;
overflow: hidden;
padding: 4px 10px;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 75%;
}
.contentSearchHeader {
background-color: hsl(0, 0%, 97%);
color: #666;
border-bottom: 1px solid hsl(0, 0%, 92%);
}
.contentSearchSuggestionsContainer {
margin: 0;
padding: 0;
border-spacing: 0;
width: 100%;
}
.contentSearchSearchWithHeaderSearchText {
white-space: pre;
font-weight: var(--font-weight-bold);
}
.contentSearchOneOffItem {
appearance: none;
height: 32px;
margin: 0;
padding: 0;
border: none;
background: none;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAWCAYAAAABxvaqAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gofECQNNVW2/AAAABBJREFUGFdjOHPmzH8GehEA/KpKg9YTf4AAAAAASUVORK5CYII=");
background-repeat: no-repeat;
background-position: right center;
}
.contentSearchOneOffItem:dir(rtl) {
background-position-x: left;
}
.contentSearchOneOffItem > img {
width: 16px;
height: 16px;
margin-bottom: -2px;
pointer-events: none;
}
.contentSearchOneOffItem:not(.last-row) {
border-bottom: 1px solid hsl(0, 0%, 92%);
}
.contentSearchOneOffItem.end-of-row {
background-image: none;
}
.contentSearchOneOffItem.selected {
background-color: SelectedItem;
background-image: none;
}
.contentSearchOneOffsTable {
width: 100%;
}
.contentSearchSettingsButton {
margin: 0;
padding: 0;
height: 32px;
border: none;
border-top: 1px solid hsla(0, 0%, 0%, 0.08);
text-align: center;
width: 100%;
}
.contentSearchSettingsButton.selected {
background-color: hsl(0, 0%, 90%);
}
.contentSearchSettingsButton:active {
background-color: hsl(0, 0%, 85%);
}
/**
* These rules are a copy of newtab's customizations to the non-handoff
* table, but with the activity-stream variables replaced / inlined. This
* allows us to get the non-handoff mode to look correct in newtab without
* having to modify the newtab code itself. Notably, non-handoff mode is
* only expected to work on newtab.
*/
.contentSearchSuggestionTable {
--newtab-background-color: light-dark(#f9f9fb, #2b2a33);
--newtab-background-color-secondary: light-dark(var(--color-white), #42414d);
--newtab-text-secondary-color: light-dark(color-mix(in srgb, var(--text-color) 70%, transparent), var(--text-color));
--newtab-border-color: light-dark(
color-mix(in srgb, var(--newtab-background-color) 75%, #000),
color-mix(in srgb, var(--newtab-background-color) 75%, #fff)
);
--newtab-element-hover-color: light-dark(
color-mix(in srgb, var(--newtab-background-color) 90%, #000),
color-mix(in srgb, var(--newtab-background-color) 80%, #fff)
);
border: 0;
box-shadow:
0 5px 10px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(0, 0, 0, 0.2);
transform: translateY(4px);
background-color: var(--newtab-background-color);
.contentSearchHeader {
color: var(--newtab-text-secondary-color);
background-color: var(--newtab-background-color-secondary);
}
.contentSearchHeader,
.contentSearchSettingsButton {
border-color: var(--newtab-border-color);
}
.contentSearchSuggestionsList {
color: var(--text-color);
border: 0;
}
.contentSearchOneOffsTable {
border-block-start: solid 1px var(--newtab-border-color);
background-color: var(--newtab-background-color);
}
.contentSearchSearchWithHeaderSearchText {
color: var(--text-color);
}
.contentSearchSuggestionRow.selected {
background: var(--newtab-element-hover-color);
color: var(--text-color);
&:active {
background: var(--newtab-element-active-color);
}
.historyIcon {
fill: var(--newtab-text-secondary-color);
}
}
& .contentSearchOneOffItem {
background-image: none;
/**
* We use a border-offset of 18% to make the border slightly shorter
*/
border-image: linear-gradient(transparent 18%, var(--newtab-border-color) 18%, var(--newtab-border-color) 82%, transparent 82%) 1;
border-inline-end: 1px solid;
position: relative;
&.selected {
background: var(--newtab-element-hover-color);
}
&:active {
background: var(--newtab-element-active-color);
}
}
.contentSearchSettingsButton:hover {
background: var(--newtab-element-hover-color);
color: var(--text-color);
}
}
.contentSearchHeaderRow > td > img,
.contentSearchSuggestionRow > td > .historyIcon {
margin-inline-start: var(--space-small);
margin-inline-end: var(--space-large);
}
.search-button {
background: url("chrome://browser/skin/forward.svg") no-repeat center center;
background-size: 16px 16px;
border: 0;
border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
-moz-context-properties: fill;
fill: var(--newtab-text-secondary-color);
height: 100%;
inset-inline-end: 0;
position: absolute;
width: var(--size-item-xlarge);
}
.search-button:focus,
.search-button:hover {
background-color: var(--newtab-element-hover-color);
cursor: pointer;
}
.search-button:focus {
outline: 0;
box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed);
border: 1px solid var(--newtab-primary-action-background);
border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
}
.search-button:active {
background-color: var(--newtab-element-hover-color);
}
}