mirror of
https://github.com/zebrajr/react.git
synced 2025-12-06 12:20:20 +01:00
911f92a44d
This is being done so that we can embed DevTools within the new React (beta) docs. The primary changes here are to `react-devtools-inline/backend`: * Add a new `createBridge` API * Add an option to the `activate` method to support passing in the custom bridge object. The `react-devtools-inline` README has been updated to include these new methods. To verify these changes, this commit also updates the test shell to add a new entry-point for multiple DevTools. This commit also replaces two direct calls to `window.postMessage()` with `bridge.send()` (and adds the related Flow types).
57 lines
1.4 KiB
HTML
57 lines
1.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf8">
|
|
<title>React DevTools</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
display: flex;
|
|
flex-direction: row;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
|
|
sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
.column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 50%;
|
|
}
|
|
.column:first-of-type {
|
|
border-right: 1px solid #3d424a;
|
|
}
|
|
.iframe {
|
|
height: 50%;
|
|
flex: 0 0 50%;
|
|
border: none;
|
|
}
|
|
.devtools {
|
|
height: 50%;
|
|
flex: 0 0 50%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="column left-column">
|
|
<iframe id="iframe-left" class="iframe"></iframe>
|
|
<div id="devtools-left" class="devtools"></div>
|
|
</div>
|
|
<div class="column">
|
|
<iframe id="iframe-right" class="iframe"></iframe>
|
|
<div id="devtools-right" class="devtools"></div>
|
|
</div>
|
|
|
|
<script src="dist/multi-devtools.js"></script>
|
|
</body>
|
|
</html> |