status-im
/
metro
mirror of https://github.com/status-im/metro.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[ReactNative] Show banner promoting DevTools 

Summary:
When React DevTools is not installed, React prints a tiny warning to the console.
However, in debugger.html we have a lot of free space we could use to promote
React DevTools more actively.
This commit is contained in:
Alex Kotliarskyi 2015-08-07 15:01:40 -07:00
parent 06f508a55a
commit cc87e5173f
1 changed files with 56 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
debugger.html
View File

@ -27,6 +27,12 @@ window.onbeforeunload = function() {
}
};
window.addEventListener('load', function () {
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
document.getElementById('devtools-banner').style.display = 'block';
}
});
// Alias native implementations needed by the debugger before platform-specific
// implementations are loaded into the global namespace
var debuggerSetTimeout = window.setTimeout;
@ -112,6 +118,13 @@ function loadScript(src, callback) {
})();
</script>
<style type="text/css">
body {
font-size: large;
margin: 0;
padding: 0;
font-family: Helvetica, Verdana, sans-serif;
font-weight: 200;
}
.shortcut {
font-family: monospace;
color: #eee;
@ -120,16 +133,52 @@ function loadScript(src, callback) {
border-radius: 4px;
letter-spacing: 3px;
}
body {
font-size: large;
#devtools-banner {
display: none;
background-color: #FDFDD5;
padding: 10px;
}
#devtools-banner h3 {
margin: 0;
font-weight: normal;
}
#devtools-banner a {
display: none;
padding: 10px 20px 10px 20px;
margin-bottom: 10px;
color: white;
text-decoration: none;
font-size: 11px;
text-shadow: 0 1px 1px rgba(0,0,0,0.1);
text-transform: uppercase;
font-weight: bold;
background-color: #4d7bd6;
border-radius: 2px;
border: 1px solid #2d53af;
display: inline-block;
}
.content {
padding: 10px;
}
</style>
</head>
<body>
<p>
React Native JS code runs inside this Chrome tab
</p>
<p>Press <span class="shortcut">⌘⌥J</span> to open Developer Tools. Enable <a href="http://stackoverflow.com/a/17324511/232122" target="_blank">Pause On Caught Exceptions</a> for a better debugging experience.</p>
<p>Status: <span id="status">Loading</span></p>
<div id="devtools-banner">
<h3>Install React DevTools</h3>
<p>
React Developer Tools is an extension that allows you to inspect the
React component hierarchies in the Chrome Developer Tools.
</p>
<a href="https://fb.me/react-devtools" target="_blank">
Install
</a>
</div>
<div class="content">
<p>
React Native JS code runs inside this Chrome tab
</p>
<p>Press <span class="shortcut">⌘⌥J</span> to open Developer Tools. Enable <a href="http://stackoverflow.com/a/17324511/232122" target="_blank">Pause On Caught Exceptions</a> for a better debugging experience.</p>
<p>Status: <span id="status">Loading</span></p>
</div>
</body>
</html>