refined-findbar.scss

@use 'sass:list';
@use 'sass:math';
@use 'sass:map';

/// Makes a CSS `var()` expression that references a variable and any fallbacks, in the specified
/// order.
///
/// @example scss Variable without fallback
///     @debug -var(a);
///     // Prints var(--a)
///
/// @example scss Variable with fallbacks
///     @debug -var(a, b, c);
///     // var(--a, var(--b, var(--c)))
@function -var($names...) {
	$css: '';

	@for $i from list.length($names) through 1 {
		@if $css == '' {
			$css: 'var(--' + list.nth($names, $i) + ')';
		} @else {
			$css: 'var(--' + list.nth($names, $i) + ', ' + $css + ')';
		}
	}

	@return $css;
}

$-checkbox-selectors: (
	CHECKBOX_HIGHLIGHT_ALL: "checkbox[anonid='highlight']",
	CHECKBOX_MATCH_CASE: "checkbox[anonid='find-case-sensitive']",
	CHECKBOX_MATCH_DIACRITICS: "checkbox[anonid='find-match-diacritics']",
	CHECKBOX_WHOLE_WORDS: "checkbox[anonid='find-entire-word']",
);

@mixin /* sig:start */
	refined-findbar(
		$float: true,
		$float-alignment: bottom,
		$float-distance: 18px,

		$buttons: true,
		$buttons-grouped: true,

		$order: (
			TEXT_BOX,
			CHECKBOX_HIGHLIGHT_ALL,
			CHECKBOX_MATCH_CASE,
			CHECKBOX_MATCH_DIACRITICS,
			CHECKBOX_WHOLE_WORDS,
			LABELS,
			DESCRIPTION,
		)
	)
	/* sig:end */ {
	@namespace url('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul');
	@namespace htmlNs url('http://www.w3.org/1999/xhtml');

	@keyframes findbar-scale-in {
		0% {
			transform: scaleY(0);
		}
		100% {
			transform: scaleY(1);
		}
	}

	@keyframes findbar-scale-out {
		0% {
			transform: scaleY(1);
		}
		100% {
			transform: scaleY(0);
		}
	}

	findbar {
		$space-unit: 8px;

		contain: content;
		border: 1px solid var(--chrome-content-separator-color);

		/* Position */

		// The findbar sits in a relatively positioned a vbox.browserContainer, so we're free to
		// absolutely position the findbar within it.
		position: absolute;

		@if $float {
			// Top or bottom align the floating findbar.
			right: $float-distance;
			#{$float-alignment}: $float-distance;
			transform-origin: #{$float-alignment} center;

			border-radius: var(--toolbarbutton-border-radius);
		} @else {
			// Top-align the non-floating findbar, move it up by 1px to "merge" it with the rest of
			// the chrome.
			top: -1px;
			right: 44px;
			transform-origin: top center;

			border-bottom-left-radius: var(--toolbarbutton-border-radius);
			border-bottom-right-radius: var(--toolbarbutton-border-radius);
			border-top-width: 0 !important;
		}

		/* Animation */

		// Scale in when shown, out when hidden.

		animation: 0.1s findbar-scale-in;

		&[hidden='true'] {
			animation: 0.1s findbar-scale-out;
		}

		%bordered-control {
			border: 1px solid ThreeDShadow;
		}

		// Uniformly pad & space out direct descendants.
		& {
			gap: $space-unit;
			padding: 6px;
			padding-inline-start: $space-unit;
			padding-inline-end: $space-unit;
		}

		// Remove horizontal margins of direct descendants because the gap (above) will space them
		// out.
		& > * {
			margin-inline-start: 0 !important;
			margin-inline-end: 0 !important;
		}

		// Findbar controls live within an hbox.findbar-container, which is a flex parent. Remove
		// horizontal margins of direct descendants and space them out evenly using gap.
		.findbar-container {
			gap: $space-unit;

			& > * {
				margin-inline-start: 0 !important;
				margin-inline-end: 0 !important;
			}
		}

		/* Text box */

		[anonid='findbar-textbox-wrapper'] {
			htmlNs|input {
				@extend %bordered-control;

				@if $buttons and $buttons-grouped {
					// Remove border radii along the right edge to merge the text box with the prev
					// & next buttons, if the findbar isn't opened in quick find mode.
					&:not(.minimal) {
						border-top-right-radius: 0 !important;
						border-bottom-right-radius: 0 !important;
					}
				}
			}

			/* Previous & next buttons. Hidden if the findbar is opened in quick find mode. */

			toolbarbutton {
				@extend %bordered-control;

				color: var(--button-color);
				background-color: #{-var(button-background-color, button-bgcolor)};
				border-width: 1px !important;

				// The previous & next buttons have left & right margins respectively, by default.
				// Remove them to merge the buttons with the text box.
				margin-inline: 0 !important;

				@if $buttons and $buttons-grouped {
					&:last-of-type {
						border-top-left-radius: 0 !important;
						border-bottom-left-radius: 0 !important;
					}
					&:not(:last-of-type) {
						border-radius: 0 !important;
						border-right-width: 0 !important;
					}
				}
			}
		}

		/* Checkboxes */

		checkbox {
			@if $buttons {
				@extend %bordered-control;

				padding: 3px 6px;
				border-radius: var(--toolbarbutton-border-radius);
				color: var(--button-color);
				background-color: #{-var(button-background-color, button-bgcolor)};

				&:hover {
					background-color: #{-var(button-background-color-hover, button-hover-bgcolor)};
				}

				&:active {
					background-color: #{-var(button-background-color-active, button-active-bgcolor)};
				}

				&[checked='true'] {
					color: #{-var(button-text-color-primary, button-primary-color)};
					background-color: #{-var(color-accent-primary, button-primary-bgcolor)};

					&:hover {
						background-color: #{-var(color-accent-primary-hover, button-primary-hover-bgcolor)};
					}

					&:active {
						background-color: #{-var(color-accent-primary-active, button-primary-active-bgcolor)};
					}
				}

				&:focus-visible {
					outline: var(--focus-outline);
					outline-offset: var(--focus-outline-inset);
				}

				.checkbox-check {
					display: none;
				}

				// Restyle border thicknesses & radii of first & last checkboxes so they appear
				// grouped together.

				// The :first-of-type and :last-of-type pseudo-classes can't be used here because
				// they follow the DOM order, and checkboxes might have been reordered via $order.
				// Instead, identify the first & last checkboxes via their corresponding keys in
				// $order.

				$checkbox-by-index: ();
				@each $name in map.keys($-checkbox-selectors) {
					$checkbox-by-index: map.set($checkbox-by-index, list.index($order, $name), $name);
				}

				$first-checkbox: map.get($checkbox-by-index, math.min(map.keys($checkbox-by-index)...));
				$last-checkbox: map.get($checkbox-by-index, math.max(map.keys($checkbox-by-index)...));

				@if $buttons-grouped {
					&:not(#{map.get($-checkbox-selectors, $last-checkbox)}) {
						border-top-right-radius: 0;
						border-bottom-right-radius: 0;
					}

					&:not(#{map.get($-checkbox-selectors, $first-checkbox)}) {
						border-top-left-radius: 0;
						border-bottom-left-radius: 0;
						border-left-width: 0;

						// Remove space between consecutive grouped buttons.
						margin-inline-start: -$space-unit !important;
					}
				} @else {
					&:not(#{map.get($-checkbox-selectors, $first-checkbox)}) {
						// Move non-grouped buttons closer to each other.
						margin-inline-start: -1 * math.div($space-unit, 2) !important;
					}
				}
			}
		}

		/* Description */

		// Hide empty description element.
		description.findbar-label:empty {
			display: none;
		}

		/* Order */

		[anonid='findbar-textbox-wrapper'] {
			order: list.index($order, TEXT_BOX) - 1;
		}

		@each $name, $selector in $-checkbox-selectors {
			#{$selector} {
				order: list.index($order, $name) - 1;
			}
		}

		label.findbar-label {
			order: list.index($order, LABELS) - 1;
		}

		description.findbar-label {
			order: list.index($order, DESCRIPTION) - 1;
		}
	}
}