Skip to content

Commit 871a396

Browse files
pull[bot]pull[bot]
committed
[DevTools] Move Timeline to footer instead of header (facebook#34617)
One thing that always bothered me is that the collapse buttons on either side of the toolbar looks like left/right buttons which would conflict with some steps buttons I plan to add. Another issue is that we'll need to add more tool buttons to the top and probably eventually a Search field. Ideally this whole section should line up vertically with the height of the title row. I also realized that all UIs that have some kind of timeline control (and play/pause/skip) do that in the bottom below the content. E.g. music players and video players all do that. We're better off playing into that structure since that's the UI analogy we're going for here. Makes it clearer what the weird timeline is for. By moving it to the bottom it also frees up the top for the collapse buttons and more controls. __Horizontal__ <img width="794" height="809" alt="Screenshot 2025-09-26 at 3 40 35 PM" src="https://github.com/user-attachments/assets/dacad9c4-d52f-4b66-9585-5cc74f230e6f" /> __Vertical__ <img width="570" height="812" alt="Screenshot 2025-09-26 at 3 40 53 PM" src="https://github.com/user-attachments/assets/db225413-849e-46f1-b764-8fbd08b395c4" /> DiffTrain build for [2622487](facebook@2622487)
1 parent f1e6f39 commit 871a396

35 files changed

+651
-189
lines changed

‎compiled/facebook-www/REVISION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
047715c4ba0922ae3cd34bc9f1c1895e67ae3faa
1+
2622487a7495b2ded000e1ad8b2e292d01bdd126

‎compiled/facebook-www/REVISION_TRANSFORMS‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
047715c4ba0922ae3cd34bc9f1c1895e67ae3faa
1+
2622487a7495b2ded000e1ad8b2e292d01bdd126

‎compiled/facebook-www/React-dev.classic.js‎

Lines changed: 55 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -536,8 +536,12 @@ __DEV__ &&
536536
}
537537
function lazyInitializer(payload) {
538538
if (-1 === payload._status) {
539-
var ctor = payload._result,
540-
thenable = ctor();
539+
if (enableAsyncDebugInfo) {
540+
var ioInfo = payload._ioInfo;
541+
null != ioInfo && (ioInfo.start = ioInfo.end = performance.now());
542+
}
543+
ioInfo = payload._result;
544+
var thenable = ioInfo();
541545
thenable.then(
542546
function (moduleObject) {
543547
if (0 === payload._status || -1 === payload._status) {
@@ -552,26 +556,43 @@ __DEV__ &&
552556
},
553557
function (error) {
554558
if (0 === payload._status || -1 === payload._status)
555-
(payload._status = 2), (payload._result = error);
559+
if (
560+
((payload._status = 2),
561+
(payload._result = error),
562+
enableAsyncDebugInfo)
563+
) {
564+
var _ioInfo2 = payload._ioInfo;
565+
null != _ioInfo2 && (_ioInfo2.end = performance.now());
566+
void 0 === thenable.status &&
567+
((thenable.status = "rejected"), (thenable.reason = error));
568+
}
556569
}
557570
);
571+
if (
572+
enableAsyncDebugInfo &&
573+
((ioInfo = payload._ioInfo), null != ioInfo)
574+
) {
575+
ioInfo.value = thenable;
576+
var displayName = thenable.displayName;
577+
"string" === typeof displayName && (ioInfo.name = displayName);
578+
}
558579
-1 === payload._status &&
559580
((payload._status = 0), (payload._result = thenable));
560581
}
561582
if (1 === payload._status)
562583
return (
563-
(ctor = payload._result),
564-
void 0 === ctor &&
584+
(ioInfo = payload._result),
585+
void 0 === ioInfo &&
565586
console.error(
566587
"lazy: Expected the result of a dynamic import() call. Instead received: %s\n\nYour code should look like: \n const MyComponent = lazy(() => import('./MyComponent'))\n\nDid you accidentally put curly braces around the import?",
567-
ctor
588+
ioInfo
568589
),
569-
"default" in ctor ||
590+
"default" in ioInfo ||
570591
console.error(
571592
"lazy: Expected the result of a dynamic import() call. Instead received: %s\n\nYour code should look like: \n const MyComponent = lazy(() => import('./MyComponent'))",
572-
ctor
593+
ioInfo
573594
),
574-
ctor.default
595+
ioInfo.default
575596
);
576597
throw payload._result;
577598
}
@@ -586,6 +607,9 @@ __DEV__ &&
586607
function useMemoCache(size) {
587608
return resolveDispatcher().useMemoCache(size);
588609
}
610+
function useEffectEvent(callback) {
611+
return resolveDispatcher().useEffectEvent(callback);
612+
}
589613
function releaseAsyncTransition() {
590614
ReactSharedInternals.asyncTransitions--;
591615
}
@@ -741,7 +765,8 @@ __DEV__ &&
741765
var dynamicFeatureFlags = require("ReactFeatureFlags"),
742766
enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
743767
renameElementSymbol = dynamicFeatureFlags.renameElementSymbol,
744-
enableViewTransition = dynamicFeatureFlags.enableViewTransition;
768+
enableViewTransition = dynamicFeatureFlags.enableViewTransition,
769+
enableAsyncDebugInfo = dynamicFeatureFlags.enableAsyncDebugInfo;
745770
dynamicFeatureFlags = Symbol.for("react.element");
746771
var REACT_ELEMENT_TYPE = renameElementSymbol
747772
? Symbol.for("react.transitional.element")
@@ -1196,9 +1221,7 @@ __DEV__ &&
11961221
Object.seal(refObject);
11971222
return refObject;
11981223
};
1199-
exports.experimental_useEffectEvent = function (callback) {
1200-
return resolveDispatcher().useEffectEvent(callback);
1201-
};
1224+
exports.experimental_useEffectEvent = useEffectEvent;
12021225
exports.forwardRef = function (render) {
12031226
null != render && render.$$typeof === REACT_MEMO_TYPE
12041227
? console.error(
@@ -1284,11 +1307,26 @@ __DEV__ &&
12841307
);
12851308
};
12861309
exports.lazy = function (ctor) {
1287-
return {
1310+
ctor = { _status: -1, _result: ctor };
1311+
var lazyType = {
12881312
$$typeof: REACT_LAZY_TYPE,
1289-
_payload: { _status: -1, _result: ctor },
1313+
_payload: ctor,
12901314
_init: lazyInitializer
12911315
};
1316+
if (enableAsyncDebugInfo) {
1317+
var ioInfo = {
1318+
name: "lazy",
1319+
start: -1,
1320+
end: -1,
1321+
value: null,
1322+
owner: null,
1323+
debugStack: Error("react-stack-top-frame"),
1324+
debugTask: console.createTask ? console.createTask("lazy()") : null
1325+
};
1326+
ctor._ioInfo = ioInfo;
1327+
lazyType._debugInfo = [{ awaited: ioInfo }];
1328+
}
1329+
return lazyType;
12921330
};
12931331
exports.memo = function (type, compare) {
12941332
null == type &&
@@ -1370,6 +1408,7 @@ __DEV__ &&
13701408
);
13711409
return resolveDispatcher().useEffect(create, deps);
13721410
};
1411+
exports.useEffectEvent = useEffectEvent;
13731412
exports.useId = function () {
13741413
return resolveDispatcher().useId();
13751414
};
@@ -1419,7 +1458,7 @@ __DEV__ &&
14191458
exports.useTransition = function () {
14201459
return resolveDispatcher().useTransition();
14211460
};
1422-
exports.version = "19.2.0-www-classic-047715c4-20250925";
1461+
exports.version = "19.2.0-www-classic-2622487a-20250926";
14231462
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
14241463
"function" ===
14251464
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/React-dev.modern.js‎

Lines changed: 55 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -536,8 +536,12 @@ __DEV__ &&
536536
}
537537
function lazyInitializer(payload) {
538538
if (-1 === payload._status) {
539-
var ctor = payload._result,
540-
thenable = ctor();
539+
if (enableAsyncDebugInfo) {
540+
var ioInfo = payload._ioInfo;
541+
null != ioInfo && (ioInfo.start = ioInfo.end = performance.now());
542+
}
543+
ioInfo = payload._result;
544+
var thenable = ioInfo();
541545
thenable.then(
542546
function (moduleObject) {
543547
if (0 === payload._status || -1 === payload._status) {
@@ -552,26 +556,43 @@ __DEV__ &&
552556
},
553557
function (error) {
554558
if (0 === payload._status || -1 === payload._status)
555-
(payload._status = 2), (payload._result = error);
559+
if (
560+
((payload._status = 2),
561+
(payload._result = error),
562+
enableAsyncDebugInfo)
563+
) {
564+
var _ioInfo2 = payload._ioInfo;
565+
null != _ioInfo2 && (_ioInfo2.end = performance.now());
566+
void 0 === thenable.status &&
567+
((thenable.status = "rejected"), (thenable.reason = error));
568+
}
556569
}
557570
);
571+
if (
572+
enableAsyncDebugInfo &&
573+
((ioInfo = payload._ioInfo), null != ioInfo)
574+
) {
575+
ioInfo.value = thenable;
576+
var displayName = thenable.displayName;
577+
"string" === typeof displayName && (ioInfo.name = displayName);
578+
}
558579
-1 === payload._status &&
559580
((payload._status = 0), (payload._result = thenable));
560581
}
561582
if (1 === payload._status)
562583
return (
563-
(ctor = payload._result),
564-
void 0 === ctor &&
584+
(ioInfo = payload._result),
585+
void 0 === ioInfo &&
565586
console.error(
566587
"lazy: Expected the result of a dynamic import() call. Instead received: %s\n\nYour code should look like: \n const MyComponent = lazy(() => import('./MyComponent'))\n\nDid you accidentally put curly braces around the import?",
567-
ctor
588+
ioInfo
568589
),
569-
"default" in ctor ||
590+
"default" in ioInfo ||
570591
console.error(
571592
"lazy: Expected the result of a dynamic import() call. Instead received: %s\n\nYour code should look like: \n const MyComponent = lazy(() => import('./MyComponent'))",
572-
ctor
593+
ioInfo
573594
),
574-
ctor.default
595+
ioInfo.default
575596
);
576597
throw payload._result;
577598
}
@@ -586,6 +607,9 @@ __DEV__ &&
586607
function useMemoCache(size) {
587608
return resolveDispatcher().useMemoCache(size);
588609
}
610+
function useEffectEvent(callback) {
611+
return resolveDispatcher().useEffectEvent(callback);
612+
}
589613
function releaseAsyncTransition() {
590614
ReactSharedInternals.asyncTransitions--;
591615
}
@@ -741,7 +765,8 @@ __DEV__ &&
741765
var dynamicFeatureFlags = require("ReactFeatureFlags"),
742766
enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
743767
renameElementSymbol = dynamicFeatureFlags.renameElementSymbol,
744-
enableViewTransition = dynamicFeatureFlags.enableViewTransition;
768+
enableViewTransition = dynamicFeatureFlags.enableViewTransition,
769+
enableAsyncDebugInfo = dynamicFeatureFlags.enableAsyncDebugInfo;
745770
dynamicFeatureFlags = Symbol.for("react.element");
746771
var REACT_ELEMENT_TYPE = renameElementSymbol
747772
? Symbol.for("react.transitional.element")
@@ -1196,9 +1221,7 @@ __DEV__ &&
11961221
Object.seal(refObject);
11971222
return refObject;
11981223
};
1199-
exports.experimental_useEffectEvent = function (callback) {
1200-
return resolveDispatcher().useEffectEvent(callback);
1201-
};
1224+
exports.experimental_useEffectEvent = useEffectEvent;
12021225
exports.forwardRef = function (render) {
12031226
null != render && render.$$typeof === REACT_MEMO_TYPE
12041227
? console.error(
@@ -1284,11 +1307,26 @@ __DEV__ &&
12841307
);
12851308
};
12861309
exports.lazy = function (ctor) {
1287-
return {
1310+
ctor = { _status: -1, _result: ctor };
1311+
var lazyType = {
12881312
$$typeof: REACT_LAZY_TYPE,
1289-
_payload: { _status: -1, _result: ctor },
1313+
_payload: ctor,
12901314
_init: lazyInitializer
12911315
};
1316+
if (enableAsyncDebugInfo) {
1317+
var ioInfo = {
1318+
name: "lazy",
1319+
start: -1,
1320+
end: -1,
1321+
value: null,
1322+
owner: null,
1323+
debugStack: Error("react-stack-top-frame"),
1324+
debugTask: console.createTask ? console.createTask("lazy()") : null
1325+
};
1326+
ctor._ioInfo = ioInfo;
1327+
lazyType._debugInfo = [{ awaited: ioInfo }];
1328+
}
1329+
return lazyType;
12921330
};
12931331
exports.memo = function (type, compare) {
12941332
null == type &&
@@ -1370,6 +1408,7 @@ __DEV__ &&
13701408
);
13711409
return resolveDispatcher().useEffect(create, deps);
13721410
};
1411+
exports.useEffectEvent = useEffectEvent;
13731412
exports.useId = function () {
13741413
return resolveDispatcher().useId();
13751414
};
@@ -1419,7 +1458,7 @@ __DEV__ &&
14191458
exports.useTransition = function () {
14201459
return resolveDispatcher().useTransition();
14211460
};
1422-
exports.version = "19.2.0-www-modern-047715c4-20250925";
1461+
exports.version = "19.2.0-www-modern-2622487a-20250926";
14231462
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
14241463
"function" ===
14251464
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/React-prod.classic.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,9 @@ function lazyInitializer(payload) {
308308
function useMemoCache(size) {
309309
return ReactSharedInternals.H.useMemoCache(size);
310310
}
311+
function useEffectEvent(callback) {
312+
return ReactSharedInternals.H.useEffectEvent(callback);
313+
}
311314
var reportGlobalError =
312315
"function" === typeof reportError
313316
? reportError
@@ -502,9 +505,7 @@ exports.createElement = function (type, config, children) {
502505
exports.createRef = function () {
503506
return { current: null };
504507
};
505-
exports.experimental_useEffectEvent = function (callback) {
506-
return ReactSharedInternals.H.useEffectEvent(callback);
507-
};
508+
exports.experimental_useEffectEvent = useEffectEvent;
508509
exports.forwardRef = function (render) {
509510
return { $$typeof: REACT_FORWARD_REF_TYPE, render: render };
510511
};
@@ -561,6 +562,7 @@ exports.useDeferredValue = function (value, initialValue) {
561562
exports.useEffect = function (create, deps) {
562563
return ReactSharedInternals.H.useEffect(create, deps);
563564
};
565+
exports.useEffectEvent = useEffectEvent;
564566
exports.useId = function () {
565567
return ReactSharedInternals.H.useId();
566568
};
@@ -602,4 +604,4 @@ exports.useSyncExternalStore = function (
602604
exports.useTransition = function () {
603605
return ReactSharedInternals.H.useTransition();
604606
};
605-
exports.version = "19.2.0-www-classic-047715c4-20250925";
607+
exports.version = "19.2.0-www-classic-2622487a-20250926";

‎compiled/facebook-www/React-prod.modern.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,9 @@ function lazyInitializer(payload) {
308308
function useMemoCache(size) {
309309
return ReactSharedInternals.H.useMemoCache(size);
310310
}
311+
function useEffectEvent(callback) {
312+
return ReactSharedInternals.H.useEffectEvent(callback);
313+
}
311314
var reportGlobalError =
312315
"function" === typeof reportError
313316
? reportError
@@ -502,9 +505,7 @@ exports.createElement = function (type, config, children) {
502505
exports.createRef = function () {
503506
return { current: null };
504507
};
505-
exports.experimental_useEffectEvent = function (callback) {
506-
return ReactSharedInternals.H.useEffectEvent(callback);
507-
};
508+
exports.experimental_useEffectEvent = useEffectEvent;
508509
exports.forwardRef = function (render) {
509510
return { $$typeof: REACT_FORWARD_REF_TYPE, render: render };
510511
};
@@ -561,6 +562,7 @@ exports.useDeferredValue = function (value, initialValue) {
561562
exports.useEffect = function (create, deps) {
562563
return ReactSharedInternals.H.useEffect(create, deps);
563564
};
565+
exports.useEffectEvent = useEffectEvent;
564566
exports.useId = function () {
565567
return ReactSharedInternals.H.useId();
566568
};
@@ -602,4 +604,4 @@ exports.useSyncExternalStore = function (
602604
exports.useTransition = function () {
603605
return ReactSharedInternals.H.useTransition();
604606
};
605-
exports.version = "19.2.0-www-modern-047715c4-20250925";
607+
exports.version = "19.2.0-www-modern-2622487a-20250926";

‎compiled/facebook-www/React-profiling.classic.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,9 @@ function lazyInitializer(payload) {
312312
function useMemoCache(size) {
313313
return ReactSharedInternals.H.useMemoCache(size);
314314
}
315+
function useEffectEvent(callback) {
316+
return ReactSharedInternals.H.useEffectEvent(callback);
317+
}
315318
var reportGlobalError =
316319
"function" === typeof reportError
317320
? reportError
@@ -506,9 +509,7 @@ exports.createElement = function (type, config, children) {
506509
exports.createRef = function () {
507510
return { current: null };
508511
};
509-
exports.experimental_useEffectEvent = function (callback) {
510-
return ReactSharedInternals.H.useEffectEvent(callback);
511-
};
512+
exports.experimental_useEffectEvent = useEffectEvent;
512513
exports.forwardRef = function (render) {
513514
return { $$typeof: REACT_FORWARD_REF_TYPE, render: render };
514515
};
@@ -565,6 +566,7 @@ exports.useDeferredValue = function (value, initialValue) {
565566
exports.useEffect = function (create, deps) {
566567
return ReactSharedInternals.H.useEffect(create, deps);
567568
};
569+
exports.useEffectEvent = useEffectEvent;
568570
exports.useId = function () {
569571
return ReactSharedInternals.H.useId();
570572
};
@@ -606,7 +608,7 @@ exports.useSyncExternalStore = function (
606608
exports.useTransition = function () {
607609
return ReactSharedInternals.H.useTransition();
608610
};
609-
exports.version = "19.2.0-www-classic-047715c4-20250925";
611+
exports.version = "19.2.0-www-classic-2622487a-20250926";
610612
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
611613
"function" ===
612614
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)