3f1a4922-6438-402b-8a31-b68b7edbe989

Build # 3f1a4922-6438-402b-8a31-b68b7edbe989

Build Type

push

circleci

Committed by GitHub Actions — l10n sync

Commit Message

Merge in latest l10n strings

Run Details

1561 of 2384 branches covered (65.48%)

Branch coverage included in aggregate %.

5107 of 6949 relevant lines covered (73.49%)

19.12 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

21.05

/frontend/src/hooks/mediaQuery.ts

import { useEffect, useState } from "react";
import variables from "./mediaQuery.module.scss";

function useMediaQueryImp(mediaQuery: string): boolean {
  const [mediaQueryList, setMediaQueryList] = useState(
    window.matchMedia(mediaQuery)
  );
  useEffect(() => {
    setMediaQueryList(window.matchMedia(mediaQuery));
  }, [mediaQuery]);

  const [matches, setMatches] = useState(mediaQueryList.matches);
  useEffect(() => {
    const changeListener: Parameters<MediaQueryList["addEventListener"]>[1] = (
      _changedList
    ) => {
      setMatches(mediaQueryList.matches);
    };
    mediaQueryList.addEventListener("change", changeListener);
    return () => {
      mediaQueryList.removeEventListener("change", changeListener);
    };
  }, [mediaQueryList]);

  return matches;
}

export const useMediaQuery =
  typeof window === "undefined" || typeof window.matchMedia !== "function"
    ? () => false
    : useMediaQueryImp;

/**
 * Get whether the current viewport width matches a Protocol media query.
 *
 * @param width Matches the `$mq-xs` to `$mq-xl` media queries from Protocol.
 * @returns Whether the current viewport width matches that media query.
 */
export function useMinViewportWidth(
  width: "xs" | "sm" | "md" | "lg" | "xl"
): boolean {
  let mediaQuery = "";
  if (width === "xl") {
    mediaQuery = variables.mq_xl.replace('"', "").replace('"', "");
  }
  if (width === "lg") {
    mediaQuery = variables.mq_lg.replace('"', "").replace('"', "");
  }
  if (width === "md") {
    mediaQuery = variables.mq_md.replace('"', "").replace('"', "");
  }
  if (width === "sm") {
    mediaQuery = variables.mq_sm.replace('"', "").replace('"', "");
  }
  if (width === "xs") {
    mediaQuery = variables.mq_xs.replace('"', "").replace('"', "");
  }
  return useMediaQuery(mediaQuery);
}

1	import { useEffect, useState } from "react";	1✔
2	import variables from "./mediaQuery.module.scss";	1✔
3
4	function useMediaQueryImp(mediaQuery: string): boolean {
5	const [mediaQueryList, setMediaQueryList] = useState(	×
6	window.matchMedia(mediaQuery)
7	);
8	useEffect(() => {	×
9	setMediaQueryList(window.matchMedia(mediaQuery));	×
10	}, [mediaQuery]);
11
12	const [matches, setMatches] = useState(mediaQueryList.matches);	×
13	useEffect(() => {	×
14	const changeListener: Parameters<MediaQueryList["addEventListener"]>[1] = (	×
15	_changedList
16	) => {
17	setMatches(mediaQueryList.matches);	×
18	};
19	mediaQueryList.addEventListener("change", changeListener);	×
20	return () => {	×
21	mediaQueryList.removeEventListener("change", changeListener);	×
22	};
23	}, [mediaQueryList]);
24
25	return matches;	×
26	}
27
28	export const useMediaQuery =	1✔
29	typeof window === "undefined" \|\| typeof window.matchMedia !== "function"	1!
30	? () => false	×
31	: useMediaQueryImp;
32
33	/**
34	* Get whether the current viewport width matches a Protocol media query.
35	*
36	* @param width Matches the `$mq-xs` to `$mq-xl` media queries from Protocol.
37	* @returns Whether the current viewport width matches that media query.
38	*/
39	export function useMinViewportWidth(	1✔
40	width: "xs" \| "sm" \| "md" \| "lg" \| "xl"
41	): boolean {
42	let mediaQuery = "";	×
43	if (width === "xl") {	×
44	mediaQuery = variables.mq_xl.replace('"', "").replace('"', "");	×
45	}
46	if (width === "lg") {	×
47	mediaQuery = variables.mq_lg.replace('"', "").replace('"', "");	×
48	}
49	if (width === "md") {	×
50	mediaQuery = variables.mq_md.replace('"', "").replace('"', "");	×
51	}
52	if (width === "sm") {	×
53	mediaQuery = variables.mq_sm.replace('"', "").replace('"', "");	×
54	}
55	if (width === "xs") {	×
56	mediaQuery = variables.mq_xs.replace('"', "").replace('"', "");	×
57	}
58	return useMediaQuery(mediaQuery);	×
59	}

mozilla / fx-private-relay / 3f1a4922-6438-402b-8a31-b68b7edbe989

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous