6 | Elements are not available
7 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/packages/replay-next/src/utils/code.ts:
--------------------------------------------------------------------------------
1 | export function validateCode(code: string): boolean {
2 | try {
3 | // Wrapping brackets is necessary to support certain types of expressions, e.g. inline objects
4 | new Function(`[${code}]`);
5 | return true;
6 | } catch (error) {
7 | return false;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/accordion/website/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | [
4 | "next/babel",
5 | {
6 | "preset-env": {
7 | "targets": {
8 | "chrome": "95"
9 | }
10 | }
11 | }
12 | ]
13 | ],
14 | "plugins": ["@babel/plugin-transform-react-display-name"]
15 | }
16 |
--------------------------------------------------------------------------------
/packages/design/svgs/tune.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/packages/replay-next/components/Initializer.module.css:
--------------------------------------------------------------------------------
1 | .Loader {
2 | position: absolute;
3 | top: 0;
4 | bottom: 0;
5 | left: 0;
6 | right: 0;
7 |
8 | display: flex;
9 | align-items: center;
10 | justify-content: center;
11 |
12 | font-size: var(--font-size-large);
13 | color: var(--color-dimmer);
14 | }
15 |
--------------------------------------------------------------------------------
/src/devtools/client/themes/images/menu.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/devtools/shared/generate-uuid.js:
--------------------------------------------------------------------------------
1 | /* This Source Code Form is subject to the terms of the Mozilla Public
2 | * License, v. 2.0. If a copy of the MPL was not distributed with this
3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4 |
5 | export function generateUUID() {
6 | return `uuid-${Math.random()}`;
7 | }
8 |
--------------------------------------------------------------------------------
/src/ui/components/TestSuite/views/TestSuitePanel.module.css:
--------------------------------------------------------------------------------
1 | .Panel {
2 | height: 100%;
3 | display: flex;
4 | flex-direction: column;
5 | overflow: auto;
6 | }
7 |
8 | .Loading {
9 | height: 100%;
10 | display: flex;
11 | flex-direction: column;
12 | align-items: center;
13 | justify-content: center;
14 | }
15 |
--------------------------------------------------------------------------------
/packages/replay-next/components/console/CurrentTimeIndicator.module.css:
--------------------------------------------------------------------------------
1 | .CurrentTimeIndicator {
2 | width: 100%;
3 | height: 2px;
4 | background-color: var(--color-current);
5 |
6 | /* Ensure current time indicator is always above console rows */
7 | position: absolute;
8 | z-index: 3;
9 | margin-top: -1px;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/shared/constants.ts:
--------------------------------------------------------------------------------
1 | // The PageStyle actor flattens the DOM CSS objects a little bit, merging Rules and their Styles into one actor.
2 | // For elements (which have a style but no associated rule) we fake a rule with the following style id.
3 | export const ELEMENT_STYLE = 100;
4 |
5 | export const TOO_MANY_POINTS_TO_FIND = 10_000;
6 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/src/actions/sources/index.ts:
--------------------------------------------------------------------------------
1 | /* This Source Code Form is subject to the terms of the Mozilla Public
2 | * License, v. 2.0. If a copy of the MPL was not distributed with this
3 | * file, You can obtain one at Hello World!
--------------------------------------------------------------------------------
/src/devtools/client/inspector/rules/components/value/Url.tsx:
--------------------------------------------------------------------------------
1 | interface UrlProps {
2 | href: string;
3 | value: string;
4 | }
5 |
6 | export default function Url({ href, value }: UrlProps) {
7 | return (
8 |
9 | {value}
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/src/components/shared/Dropdown.d.ts:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 |
3 | interface DropdownProps {
4 | panel: React.ReactNode;
5 | icon: React.ReactNode;
6 | panelStyles: React.CSSProperties;
7 | }
8 |
9 | export class Dropdown extends ComponentHello World!
4 |
5 |
13 |
14 |
--------------------------------------------------------------------------------
/src/ui/components/shared/Base64Image.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function Base64Image({
4 | src,
5 | format,
6 | ...rest
7 | }: React.ImgHTMLAttributes
14 | {label}
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/devtools/client/themes/images/dropmarker.svg:
--------------------------------------------------------------------------------
1 |
4 |
7 |
--------------------------------------------------------------------------------
/src/ui/components/SecondaryToolbox/react-devtools/components/Badge.module.css:
--------------------------------------------------------------------------------
1 | .Badge {
2 | background: var(--background-color-current-execution-point);
3 | color: var(--value-type-html-tag);
4 | font-family: var(--font-family-default);
5 | font-size: var(--font-size-tiny);
6 | padding: 0 0.25rem;
7 | border-radius: 0.25rem;
8 | margin-left: 1ch;
9 | height: 0.8rem;
10 | line-height: 0.8rem;
11 | }
12 |
--------------------------------------------------------------------------------
/packages/replay-next/components/ExternalLink.tsx:
--------------------------------------------------------------------------------
1 | import React, { AnchorHTMLAttributes, ReactNode } from "react";
2 |
3 | export default function ExternalLink({
4 | children,
5 | ...props
6 | }: OmitHello World!
2 |
19 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/images/document.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/src/selectors/index.ts:
--------------------------------------------------------------------------------
1 | export * from "../reducers/tabs";
2 | export * from "../reducers/pause";
3 | export * from "../reducers/threads";
4 | export * from "../reducers/ui";
5 | export * from "../reducers/ast";
6 | export * from "../reducers/source-tree";
7 | export * from "../reducers/preview";
8 |
9 | export * from "../reducers/quick-open";
10 |
11 | export { getSelectedFrameSuspense } from "./pause";
12 |
--------------------------------------------------------------------------------
/src/ui/components/UploadScreen/ExpiredWorkspaces.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | position: absolute;
3 | top: -4rem;
4 | background-color: #fffbd2;
5 | color: #6e4400;
6 | border: 1px solid #f7ea9c;
7 | border-radius: 0.5rem;
8 | padding: 0.5rem 1rem;
9 | cursor: default;
10 | }
11 |
12 | .warning {
13 | font-weight: bold;
14 | }
15 |
16 | .wrapper a {
17 | margin-left: 0.3rem;
18 | text-decoration: underline;
19 | }
20 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: New Issue
3 | about: Create a report to help us improve
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Description:**
11 |
12 |
13 | **Steps to Reproduce:**
14 |
15 |
16 | **Expected Result:**
17 |
18 | **Additional Context:**
19 |
20 | * Screenshots:
21 | * Video (Loom):
22 | * Replay ([replay.io/record-bugs](https://replay.io/record-bugs) for instructions):
23 |
--------------------------------------------------------------------------------
/.github/workflows/mirror.yml:
--------------------------------------------------------------------------------
1 | on:
2 | push:
3 | branches:
4 | - 'main'
5 |
6 | jobs:
7 | mirror_job:
8 | runs-on: ubuntu-latest
9 | name: Mirror main branch to staging branch
10 | steps:
11 | - name: Mirror action step
12 | id: mirror
13 | uses: google/mirror-branch-action@v1.0
14 | with:
15 | github-token: ${{ secrets.GITHUB_TOKEN }}
16 | source: 'main'
17 | dest: 'staging'
--------------------------------------------------------------------------------
/public/test/examples/doc_recursion.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Hello World!
4 |
5 |
18 |
19 |
--------------------------------------------------------------------------------
/src/devtools/client/themes/images/animation-fast-track.svg:
--------------------------------------------------------------------------------
1 |
4 |
7 |
--------------------------------------------------------------------------------
/packages/e2e-tests/examples/redux-fundamentals/src/exampleAddons/middleware.js:
--------------------------------------------------------------------------------
1 | export const print1 = (storeAPI) => (next) => (action) => {
2 | console.log('1')
3 | return next(action)
4 | }
5 |
6 | export const print2 = (storeAPI) => (next) => (action) => {
7 | console.log('2')
8 | return next(action)
9 | }
10 |
11 | export const print3 = (storeAPI) => (next) => (action) => {
12 | console.log('3')
13 | return next(action)
14 | }
15 |
--------------------------------------------------------------------------------
/packages/replay-next/components/lexical/plugins/mentions/types.ts:
--------------------------------------------------------------------------------
1 | import type { Spread } from "lexical";
2 | import { SerializedTextNode } from "lexical";
3 |
4 | export type Collaborator = {
5 | id: string;
6 | name: string;
7 | };
8 |
9 | export type SerializedMentionsTextNode = Spread<
10 | {
11 | id: string;
12 | name: string;
13 | type: "mentions-item";
14 | version: 1;
15 | },
16 | SerializedTextNode
17 | >;
18 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/src/components/shared/Badge.js:
--------------------------------------------------------------------------------
1 | /* This Source Code Form is subject to the terms of the Mozilla Public
2 | * License, v. 2.0. If a copy of the MPL was not distributed with this
3 | * file, You can obtain one at Hello World!
3 |
19 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/src/components/shared/Button/index.js:
--------------------------------------------------------------------------------
1 | /* This Source Code Form is subject to the terms of the Mozilla Public
2 | * License, v. 2.0. If a copy of the MPL was not distributed with this
3 | * file, You can obtain one at
8 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/packages/e2e-tests/examples/rdt-react-versions/react-15-app/src/appInjector.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 |
4 | import App from "./App";
5 |
6 | export const inject = (parentElementId: string) =>
7 | ReactDOM.render(
9 |
13 |
10 |
12 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/public/test/examples/doc_events_chromium.html:
--------------------------------------------------------------------------------
1 |
2 | Hello World!
3 |
19 |
--------------------------------------------------------------------------------
/src/devtools/client/inspector/computed/components/ComputedApp.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import ComputedProperties from "./ComputedProperties";
4 | import ComputedToolbar from "./ComputedToolbar";
5 |
6 | export default function ComputedApp() {
7 | return (
8 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/.github/workflows/nightly.yaml:
--------------------------------------------------------------------------------
1 | name: Nightly
2 | on:
3 | schedule:
4 | - cron: 0 8 * * 1-5
5 | workflow_dispatch:
6 |
7 | jobs:
8 | trunk_check:
9 | name: Trunk Check Upload
10 | runs-on: ubuntu-latest
11 |
12 | steps:
13 | - name: Checkout
14 | uses: actions/checkout@v4
15 |
16 | - name: Trunk Check
17 | uses: trunk-io/trunk-action@v1.1.19
18 | with:
19 | trunk-token: ${{ secrets.TRUNK_TOKEN }}
20 |
--------------------------------------------------------------------------------
/packages/e2e-tests/examples/mapped_minified/bundle_input.js:
--------------------------------------------------------------------------------
1 | function z(n){return n;}z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);z(100);
2 |
--------------------------------------------------------------------------------
/packages/shared/user-data/GraphQL/queries.ts:
--------------------------------------------------------------------------------
1 | import { gql } from "@apollo/client";
2 |
3 | export const GET_USER_PREFERENCES = gql`
4 | query GetUserPreferences {
5 | viewer {
6 | preferences
7 | }
8 | }
9 | `;
10 |
11 | export const UPDATE_USER_PREFERENCES = gql`
12 | mutation UpdateUserPreferences($preferences: JSONObject!) {
13 | updateUserPreferences(input: { preferences: $preferences }) {
14 | success
15 | }
16 | }
17 | `;
18 |
--------------------------------------------------------------------------------
/public/icons/video.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/images/plus.svg:
--------------------------------------------------------------------------------
1 |
4 |
7 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/images/rewind-button.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/images/window.svg:
--------------------------------------------------------------------------------
1 |
4 |
7 |
--------------------------------------------------------------------------------
/src/devtools/client/themes/images/add.svg:
--------------------------------------------------------------------------------
1 |
4 |
7 |
--------------------------------------------------------------------------------
/src/ui/components/CommandPalette/CommandPalette.module.css:
--------------------------------------------------------------------------------
1 | .commandPaletteWrapper {
2 | max-width: 400px;
3 | min-width: 280px;
4 | background-color: var(--theme-base-100);
5 | color: var(--body-color);
6 | }
7 |
8 | .commandPallete {
9 | border-bottom: 1px solid var(--theme-base-85);
10 | }
11 |
12 | .shortcut:hover {
13 | background-color: var(--theme-base-90);
14 | }
15 |
16 | .shortcutHover {
17 | background-color: var(--theme-base-90);
18 | }
19 |
--------------------------------------------------------------------------------
/src/ui/hooks/comments/index.ts:
--------------------------------------------------------------------------------
1 | import * as comments from "./comments";
2 | import useAddComment from "./useAddComment";
3 | import useAddCommentReply from "./useAddCommentReply";
4 | import useDeleteComment from "./useDeleteComment";
5 | import useDeleteCommentReply from "./useDeleteCommentReply";
6 |
7 | export const commentsHooks = {
8 | ...comments,
9 | useAddComment,
10 | useAddCommentReply,
11 | useDeleteComment,
12 | useDeleteCommentReply,
13 | };
14 |
--------------------------------------------------------------------------------
/packages/replay-next/components/sources/utils/getBadgeStyleVars.ts:
--------------------------------------------------------------------------------
1 | import { CSSProperties } from "react";
2 |
3 | import { Badge } from "shared/client/types";
4 |
5 | export function getBadgeStyleVars(badge: Badge | null): CSSProperties {
6 | const badgeName = badge || "default";
7 | return {
8 | "--badge-background-color": `var(--badge-${badgeName}-color)`,
9 | "--badge-color": `var(--badge-${badgeName}-contrast-color)`,
10 | } as CSSProperties;
11 | }
12 |
--------------------------------------------------------------------------------
/public/test/examples/rdt-react-versions/dist/react15/assets/index-4ab65188.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"index-4ab65188.js","mappings":"+CAKAA,EAAS,OAAQC,EAAA,IAAAC,EAAA,EAAI,EAAI,SAAS,eAAe,MAAM,CAAE","names":["ReactDOM","jsx","App"],"sources":["../../react-15-app/src/main.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport App from \"./App\";\n\nReactDOM.render(Hello World!
4 |
5 |
17 |
18 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/images/arrow.svg:
--------------------------------------------------------------------------------
1 |
4 |
7 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/images/rewind.svg:
--------------------------------------------------------------------------------
1 |
4 |
7 |
--------------------------------------------------------------------------------
/src/devtools/client/themes/images/arrow-e.svg:
--------------------------------------------------------------------------------
1 |
4 |
7 |
--------------------------------------------------------------------------------
/packages/e2e-tests/examples/redux-fundamentals/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react-swc'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig(({ command, mode }) => {
6 | const base =
7 | command === 'serve' ? '' : '/recording/test/examples/redux-fundamentals/dist/'
8 | return {
9 | base,
10 | plugins: [react()],
11 | build: {
12 | sourcemap: true,
13 | },
14 | }
15 | })
16 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/images/arrow-up.svg:
--------------------------------------------------------------------------------
1 |
4 |
7 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/images/pause-circle-16x16.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/images/tab.svg:
--------------------------------------------------------------------------------
1 |
4 |
7 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/src/utils/pause/frames/index.ts:
--------------------------------------------------------------------------------
1 | /* This Source Code Form is subject to the terms of the Mozilla Public
2 | * License, v. 2.0. If a copy of the MPL was not distributed with this
3 | * file, You can obtain one at IFRAME
4 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/images/column-marker.svg:
--------------------------------------------------------------------------------
1 |
4 |
7 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/src/components/SecondaryPanes/Frames/FrameIndent.tsx:
--------------------------------------------------------------------------------
1 | /* This Source Code Form is subject to the terms of the Mozilla Public
2 | * License, v. 2.0. If a copy of the MPL was not distributed with this
3 | * file, You can obtain one at
8 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/ui/components/TestSuite/utils/isTestSuiteReplay.ts:
--------------------------------------------------------------------------------
1 | import { Recording } from "shared/graphql/types";
2 | import {
3 | isGroupedTestCasesV2,
4 | isGroupedTestCasesV3,
5 | } from "shared/test-suites/RecordingTestMetadata";
6 |
7 | export function isTestSuiteReplay(recording: Recording): boolean {
8 | const testMetadata = recording?.metadata?.test;
9 | return (
10 | testMetadata != null &&
11 | (isGroupedTestCasesV2(testMetadata) || isGroupedTestCasesV3(testMetadata))
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/packages/design/SystemProvider/index.tsx:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 | import type { ReactNode } from "react";
3 |
4 | import iconSprite from "../Icon/sprite.svg";
5 |
6 | /** Provides design system functionality to all descendant components. */
7 | export function SystemProvider({ children }: { children: ReactNode }) {
8 | return (
9 | <>
10 |
11 |
12 |
13 |
14 | {children}
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/devtools/client/debugger/images/sources/vuejs.svg:
--------------------------------------------------------------------------------
1 |
4 |
8 |
--------------------------------------------------------------------------------
/src/devtools/client/themes/images/play.svg:
--------------------------------------------------------------------------------
1 |
4 |
7 |
--------------------------------------------------------------------------------
/packages/design/svgs/fast-forward.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/packages/e2e-tests/examples/mapped_styles/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | module.exports = {
4 | context: __dirname,
5 | entry: "./bundle_input.js",
6 | output: {
7 | filename: "mapped_styles.js",
8 | path: path.resolve(__dirname, "dist"),
9 | },
10 | devtool: "source-map",
11 | mode: "production",
12 | module: {
13 | rules: [
14 | {
15 | test: /\.css$/i,
16 | use: ["style-loader", "css-loader"],
17 | },
18 | ],
19 | },
20 | };
21 |
--------------------------------------------------------------------------------
/packages/replay-next/components/Loader.tsx:
--------------------------------------------------------------------------------
1 | import { CSSProperties, ReactNode } from "react";
2 |
3 | import styles from "./Loader.module.css";
4 |
5 | export default function Loader({
6 | className = "",
7 | message = "Loading…",
8 | style,
9 | }: {
10 | className?: string;
11 | message?: ReactNode;
12 | style?: CSSProperties;
13 | }) {
14 | return (
15 |
9 |
12 | Replay is down for maintenance, come back later!
11 |
16 | {message}
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/public/test/examples/rdt-react-versions/dist/react15/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |