bump[third_party/react-devtools]: 5.2.0

facebookexperimental · May 20, 2024 · f40224b · f40224b
1 parent 0eb7c90
commit f40224b
Show file tree

Hide file tree

Showing 5 changed files with 10,579 additions and 9,838 deletions.
diff --git a/front_end/third_party/react-devtools/README.md b/front_end/third_party/react-devtools/README.md
@@ -6,4 +6,3 @@ https://github.com/facebook/react/tree/main/packages/react-devtools-fusebox
 ## How to update this package?
 1. Clone [`react`](https://github.com/facebook/react) repo and run `yarn build` in [`packages/react-devtools-fusebox`](https://github.com/facebook/react/tree/main/packages/react-devtools-fusebox)
 2. Copy all artifacts from `build` folder to `package` folder here.
-3. Update `frontend.d.ts` if needed, type definitions are not included in the build yet.
diff --git a/front_end/third_party/react-devtools/package/frontend.css b/front_end/third_party/react-devtools/package/frontend.css
@@ -106,7 +106,6 @@
   padding: 0.125rem 0.25rem;
   line-height: normal;
   border-radius: 0.125rem;
-  margin-right: 0.25rem;
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-small);
 }
@@ -145,6 +144,7 @@
   --color-component-badge-background: var(
     --color-component-badge-background-inverted
   );
+  --color-forget-badge-background: var(--color-forget-badge-background-inverted);
   --color-component-badge-count: var(--color-component-badge-count-inverted);
   --color-attribute-name: var(--color-attribute-name-inverted);
   --color-attribute-value: var(--color-attribute-value-inverted);
@@ -208,25 +208,6 @@
   color: var(--color-text);
 }
 
-.sP6uS8ZOU4PkDlNU0AYK {
-  background-color: var(--color-forget-badge);
-}
-
-.SjNrJ30jUO5kUSCsWh4c {
-  display: inline-flex;
-  align-items: center;
-}
-
-.SjNrJ30jUO5kUSCsWh4c *:not(:first-child) {
-  margin-left: 0.25rem;
-}
-
-.j9rH1DJ2jYY7I1tswNOx {
-  font-family: var(--font-family-monospace);
-  font-size: var(--font-size-monospace-small);
-  color: var(--color-component-badge-count);
-}
-
 .dPHAvUl3PSp59chvDv66,
 .rcOJ8fC0AbSrvixHIvdw,
 .V5OmBsGHEXanXzw77sNS {
@@ -290,6 +271,43 @@
   z-index: 10000002;
 }
 
+.sP6uS8ZOU4PkDlNU0AYK {
+  background-color: var(--color-forget-badge-background);
+  color: var(--color-forget-text);
+  padding-right: 1.75em;
+  position: relative;
+}
+
+.sP6uS8ZOU4PkDlNU0AYK::after {
+  bottom: 0;
+  content: '✨';
+  position: absolute;
+  right: 0.25em;
+}
+
+.j3Lt3YqBHSwuvIVtnIxU {
+  display: flex;
+}
+
+.j3Lt3YqBHSwuvIVtnIxU > span { /* targets .ToggleContent */
+  padding: 0;
+}
+
+.SjNrJ30jUO5kUSCsWh4c {
+  display: inline-flex;
+  align-items: center;
+}
+
+.SjNrJ30jUO5kUSCsWh4c *:not(:first-child) {
+  margin-left: 0.25rem;
+}
+
+.j9rH1DJ2jYY7I1tswNOx {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+  color: var(--color-component-badge-count);
+}
+
 .MOeHyomWH2dTqysCu6Ii {
   border: none;
   background: var(--color-button-background);
@@ -790,39 +808,7 @@
   font-size: var(--font-size-sans-large);
 }
 
-.pVySJG3jMP40bWLFGBla {
-  position: absolute;
-  background-color: var(--color-context-background);
-  box-shadow: 1px 1px 2px var(--color-shadow);
-  border-radius: 0.25rem;
-  overflow: hidden;
-  z-index: 10000002;
-  user-select: none;
-}
-.omYdOiQA4INhfDwXiCGT {
-  display: flex;
-  align-items: center;
-  color: var(--color-context-text);
-  padding: 0.5rem 0.75rem;
-  cursor: default;
-  border-top: 1px solid var(--color-context-border);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sans-normal);
-}
-.omYdOiQA4INhfDwXiCGT:first-of-type {
-  border-top: none;
-}
-.omYdOiQA4INhfDwXiCGT:hover,
-.omYdOiQA4INhfDwXiCGT:focus {
-  outline: 0;
-  background-color: var(--color-context-background-hover);
-}
-.omYdOiQA4INhfDwXiCGT:active {
-  background-color: var(--color-context-background-selected);
-  color: var(--color-context-text-selected);
-}
 .eKXhn2sbXs1thQ1xt1b6 {
-  padding: 0.25rem;
   user-select: none;
   display: inline-flex;
 }
@@ -983,9 +969,51 @@
 .YOB3sdCfSr_qYyMcvl9Z {
   color: var(--color-component-name);
 }
+.omYdOiQA4INhfDwXiCGT {
+  display: flex;
+  align-items: center;
+  color: var(--color-context-text);
+  padding: 0.5rem 0.75rem;
+  cursor: default;
+  border-top: 1px solid var(--color-context-border);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-normal);
+}
+
+.omYdOiQA4INhfDwXiCGT:first-of-type {
+  border-top: none;
+}
+
+.omYdOiQA4INhfDwXiCGT:hover,
+.omYdOiQA4INhfDwXiCGT:focus {
+  outline: 0;
+  background-color: var(--color-context-background-hover);
+}
+
+.omYdOiQA4INhfDwXiCGT:active {
+  background-color: var(--color-context-background-selected);
+  color: var(--color-context-text-selected);
+}
+
+.pVySJG3jMP40bWLFGBla {
+  position: absolute;
+  background-color: var(--color-context-background);
+  box-shadow: 1px 1px 2px var(--color-shadow);
+  border-radius: 0.25rem;
+  overflow: hidden;
+  z-index: 10000002;
+  user-select: none;
+}
+
+.ZplKR_6Ki52aunUdBR3W {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .ltOoJtAx5EC08rarvM4p {
   padding: 0.25rem;
-  border-top: 1px solid var(--color-border);
 }
 .ltOoJtAx5EC08rarvM4p:first-of-type {
   border-top: none;
@@ -1371,6 +1399,11 @@
   line-height: var(--line-height-data);
 }
 
+.s7UqGwXK0u5IO8pB45HE:not(:empty) {
+  padding: 0.25rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
 .G1iPSTGC6eNcmT5RjA6C {
   border-radius: 0.25rem;
   padding: 0.125rem 0.25rem;
@@ -1406,10 +1439,6 @@
   background-color: var(--color-background-hover);
 }
 
-.kMxnwph9G_5khS9rwjns {
-  margin-right: 0.5rem;
-}
-
 .P14TYiR8U2gzEkHw_ISN {
   padding-left: 1.25rem;
   white-space: nowrap;
@@ -1940,10 +1969,6 @@
   transition: all ease-in-out 250ms;
 }
 
-.hMgAJyZBpTlsirz54AIg {
-  margin-bottom: 0.5rem;
-}
-
 .IkCgTd3uBjVma0pkjIWQ {
   margin-top: 0.25rem;
 }
@@ -1972,10 +1997,20 @@
 
 .ANH3uQmqdejNNBMFVElK {
   padding: 0.25rem 0;
-  margin-bottom: 0.25rem;
   flex: 0 0 auto;
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.ktt_CXlygBWE6kn8NPge {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.ktt_CXlygBWE6kn8NPge:not(:empty) {
+  padding-bottom: 0.25rem;
   border-bottom: 1px solid var(--color-border);
 }
 
@@ -1992,10 +2027,11 @@
   white-space: nowrap;
   overflow-x: hidden;
   text-overflow: ellipsis;
+  padding-bottom: 0.25rem;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .WfcYLToZgb8sJXT8vsc0 {
-  margin: 0.25rem 0;
   display: block;
   width: 100%;
   text-align: left;
@@ -2718,6 +2754,9 @@
   padding: 0.5rem;
   user-select: none;
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .ISf33Slct6dgSxu6Jgnp {

diff --git a/front_end/third_party/react-devtools/package/frontend.d.ts b/front_end/third_party/react-devtools/package/frontend.d.ts
@@ -1,5 +1,12 @@
-export type MessagePayload = null | string | number | boolean | {[key: string]: MessagePayload} | MessagePayload[];
-export type Message = {event: string, payload?: MessagePayload};
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export type MessagePayload = null | string | number | boolean | { [key: string]: MessagePayload } | MessagePayload[];
+export type Message = { event: string, payload?: MessagePayload };
 
 export type WallListener = (message: Message) => void;
 export type Wall = {
@@ -16,10 +23,31 @@ export type BrowserTheme = 'dark' | 'light';
 export function createBridge(wall: Wall): Bridge;
 export function createStore(bridge: Bridge): Store;
 
+export type Source = {
+  sourceURL: string,
+  line: number,
+  column: number,
+};
+export type ViewElementSource = (
+  source: Source,
+  symbolicatedSource: Source | null,
+) => void;
+export type ViewAttributeSource = (
+  id: number,
+  path: Array<string | number>,
+) => void;
+export type CanViewElementSource = (
+  source: Source,
+  symbolicatedSource: Source | null,
+) => boolean;
+
 export type InitializationOptions = {
   bridge: Bridge,
   store: Store,
   theme?: BrowserTheme,
+  viewAttributeSourceFunction?: ViewAttributeSource,
+  viewElementSourceFunction?: ViewElementSource,
+  canViewElementSourceFunction?: CanViewElementSource,
 };
-export function initialize(node: Element | Document, options: InitializationOptions): void;
 
+export function initialize(node: Element | Document, options: InitializationOptions): void;