atom-nuclide
Version:
A unified developer experience for web and mobile development, built as a suite of features on top of Atom to provide hackability and the support of an active community.
110 lines (105 loc) • 3.1 kB
HTML
<html>
<head>
<meta charset=utf8>
<style>
html {
display: flex;
font-family: sans-serif;
}
body {
display: flex;
flex: 1;
margin: 0;
padding: 0;
}
#container {
background-color: white;
bottom: 0;
display: flex;
left: 0;
position: fixed;
right: 0;
top: 0;
}
#logs {
left: 0;
position: fixed;
top: 0;
white-space: pre;
}
#waiting {
color: #aaa;
flex: 1;
font-family: sans-serif;
padding: 30px;
text-align: center;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
#connecting-screen {
display: flex;
width: 100%;
padding: 15px;
justify-content: center;
align-items: center;
text-align: center;
color: #333;
line-height: 1.3;
/*
Instead of showing the connecting screen and having it (potentially) be immediately
replaced, wait a bit. If the inspector hasn't been shown by then, it's a pretty good
indicator that it won't ever be (without user action) and we should help them out.
*/
opacity: 0;
animation: fade-in 0.25s ease-in 0.5s forwards;
}
#connecting-screen-tips {
text-align: left;
max-width: 40em;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<div id="connecting-screen">
<div>
<h2>Waiting for a connection from React Native</h2>
<p>
This should happen pretty quickly. If it hasn't, something's wrong. 😢
</p>
<h3>Troubleshooting Tips:</h3>
<ul id="connecting-screen-tips">
<li>
Make sure a React Native app is running and that it's in DEV mode.
</li>
<li>
Only one element inspector can be active at a time. Close any other open inspectors.
</li>
<li>
There may be a zombie element inspector instance running. Try reopening your Atom
window or check port 8097.
</li>
</ul>
</div>
</div>
</div>
<script>
function initializeElementInspector(inspectorDevTools, requirePaths) {
// The paths used by Atom webviews' `require` aren't what you expect (i.e. they're not
// based on the file location. Because of this, we pass the paths we want to use from the
// JS host and patch it. That way, the standalone script will be able to find its
// dependencies (the "ws" module).
// See https://github.com/atom/electron/issues/2631 for explanation.
require.cache[__filename].paths = requirePaths;
// Start the element inspector.
require(inspectorDevTools)
.setContentDOMNode(document.getElementById('container'))
.startServer();
}
</script>
</body>
</html>