Change favicon depending on the Chrome debugger state

Reviewed By: yungsters

Differential Revision: D4465694

fbshipit-source-id: fc740f176d6e1fe25dfc79c9ccd8a1ea2be35bb3
This commit is contained in:
Alex Kotliarskyi 2017-01-26 11:51:41 -08:00 committed by Facebook Github Bot
parent 99b81da629
commit 8b4272b2fd

View File

@ -12,7 +12,7 @@
<head>
<meta charset=utf-8>
<!-- Base 64 encoded favicon, to avoid extra request to server -->
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAppQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9/3/uu/9n+n9s+396fr/6vr/tO79ue/99P3/te79j+X8u+/9oOn9h+P8xPH+/P7//f//xfL+juX8su399v3/jeX81fX+0fT+ieT8sO39iOP8z/T+2/f+iuT88Pz/7Pv/4fj+fOD8dt/83ff+8/z/jOT84vj+7fv/heP8w/H+8vz/g+L8zvT+0PT+2Pb+6Pr++f7/k+b8oun9rOz9bt37cN77fuH8q+v9qOv9xvL+mef9c978e+D8jeT8hOL8cN78l+f94/j+leb8vvD93/j+1/b+luf8wfD97vv/gOH8/v//wPD+dN/8qev9huP87/v/9Pz/6fr+m+j9+v7/ruz94Pj+feH8Xtn75/n+dd/8mOf8vfD9nej9b937X9n76/v/muj9se399f3/quv98fz/wfH+3Pf+2fb+5Pn+3vf+wvH+kOX8kub83/f+ct78geL82vf+keX8euD8cd78oen9d9/8eeD8nOj9p+r9i+T8yvP+zfT+gOL8cd771vb+ieP80vX+8Pv/v/D9r+z9vO/9o+r9t+795IXGEwAAAFZ0Uk5TAAARTpOtw9bVwpFLECF6wfLxv3ceDGzT/tBnCyOl+KIgLr0qJQ6po3L7+ijXJ4N2GMnIXvZYnoK3r+gZhHFqD6qhJrwiKZ9mc8X19BZUf87fzaR+URR5ts+RAAAAAWJLR0QB/wIt3gAAAAlwSFlzAAAASAAAAEgARslrPgAAAqpJREFUOMtjYIACRkYmZhZWNnYOTlYubh5GRgZUwMjIy8cvEAYFgkLCIqhKGEXFxCXCkICEpJQ0kgpGGVm5MDQgJ68AV8GoyBmGBSgpQ1UwqrCB+OERkVHRIEZMbGRcPFiFDFgFo6oaWENCYlJySmpaekZKZFJmFlhIXZUR5H4NTRAnOyc3LC0vvyCqsCgtrLikFCSmJQX0C6O2Dlh1TEkZkCyvqKwCUtU1tWBBDl2gAj2Ik6JL6oBkamF9A5KCMH1GBgNDCLOxpjwsrLipuaWpNSysDWwcEBgZMBibQJjtHZ1dyRXdOZk9vcl9/TnZEFETUwYzMCN8wsRJkwuaprTk5rZMmVowedr0VIgScwYLEDVjZuasiI7ZJXPCysqAXqiaGzUvsaMcJGPJAPLD/Cl9jWHxiQv6Fy6qXDxr4ZKlNcvClhdMWQGU0mGwApKzVq4Ckqu711SvXbeusmz9htVAbtrGWUDSCqxg0+Y0kIIt5Y0V67Yu3ta2oQDITd++CawAZEXdlB3ZYTsTe3ctnLWlO25hV/2U3WHhsTVtYCvAjlzTkbhoT8fekn1h+/cvPJBfPDfp4KHDRyCOhHizOnX60clLjh3aN3v28RMLlpw8NXNPI1hCDx5Q4SdOZ20+01OYf/TsuazzF5bDA8oaGtTVNWvCwuYsuHjpci4oqOsgoobWDIw2yJF1sHDqJuTIEkZEN0RBbeWVA0gK2EHRzWgLTjA7p1wNW5hb2Lf62vWFYQdKboDENO1AiZ/R3gGsekdNQuTSm6vSGlI2J9TcAgs5qkISpRM4US+/fSdhBoix/+6duN0ghrMLIzRXKfJjS/bOrrDcxcioIquFLq3lxouU+xjtpdhR5cXdVVEzJ6OKh6cXTNabTUMGS/728fWT9Q8ICAwKDglFSAMA+r1N1UgXhV8AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTYtMTAtMDVUMTQ6Mjk6MTMrMDA6MDATO+D3AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE2LTEwLTA1VDE0OjI5OjEzKzAwOjAwYmZYSwAAAEZ0RVh0c29mdHdhcmUASW1hZ2VNYWdpY2sgNi43LjgtOSAyMDE0LTA1LTEyIFExNiBodHRwOi8vd3d3LmltYWdlbWFnaWNrLm9yZ9yG7QAAAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAYdEVYdFRodW1iOjpJbWFnZTo6aGVpZ2h0ADE5Mg8AcoUAAAAXdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgAMTky06whCAAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxNDc1Njc3NzUzbJvFlQAAAA90RVh0VGh1bWI6OlNpemUAMEJClKI+7AAAAFZ0RVh0VGh1bWI6OlVSSQBmaWxlOi8vL21udGxvZy9mYXZpY29ucy8yMDE2LTEwLTA1LzViOTFlZDY3MjZlOTY2ODRjZjdlNmFmOWFhZmIyZGIzLmljby5wbmd2ygvUAAAAAElFTkSuQmCC">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<title>React Native Debugger</title>
<script>
/* eslint-env browser */
@ -22,6 +22,14 @@ function setStatus(status) {
document.getElementById('status').innerHTML = status;
}
const RUNNING_ICON = 'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAABAJJREFUWMPNV0tIlFEU/nsaPSCrhVFZBBFRFkXvKCpCw6BFtagkWoS1CApp0YMKclHRYxNpj0UUQWUavYmeEi2MsFVS/s7oqOPo6DjqzKjpzOjpnDl35s7MP/8/vyUxFy7c/5x7z/nued5fUcwOgLGKBXIUFYqUaijHqeL0iamGaMSjPbR32IYNMpQaKEbhHlQCpibtpTN09q+HBdJQSCEK7DatWDu7QzJI1pBvrULFPyiOt0iFeWtUw2I8YB825RKEXamFLDM31yifqAIcbwO40QmQ3wIwXtUqmFwDcNQJcKeL96apOiB0LUF+0jH7u26AwUEA3wCERmsAYF+z5B9CUF1B5rmDvPeBx8AdCWOCA05zYEEdCz6JtxqB3xsbACp/M+0WWuR+F6+/9ACsqOczV90AQQSRYdEBQbo0pteJ9p1NrCAsnOYYnNc7IDIuocJRUWdyGpm+qcEgO2JcQTmrEzxkahpZdbH0aABX3LG89Q1M3243CErSGalwBkVmi7gN3SpM2+uQLrgrXLCjSfJ3Cautqk9SrEIVk0qnQfrMtrKwtxiIj70A33vZvwGcA2IGxKxE3j0E9MLHZ6ZZkqQm6Ra1XcOcjofPtwO4AtLULbhuD7DSpwjmspvNTwop8tuQ5wnK/U1+gNMYvFNqdK1QpIjGEsPY7eC0IqFvUPgrHys90MKCz7p43xy0TqaV1xSINPaLmHmNZz73yLTdljgeyhXRySLEXDsr/tYrA29tPQtqxhtZ+zkLnnjlTcns41S+sd3PtCU2Prsaz1b1AfgHOTjjAKiKaKcR4kf0dS0qmRBXyYhGg4rOLCtoBvm7oJXXP/u0VZLc98yrAeDTAHiPAGx+LQCLAJCPJp6ZAMBUVFLg5PWvOADpyHMG2GpxALwaF1C6kb+/ogvm1zJtjXABCSEgo5H20COV3+5kF5D5G4ULVooUpAL2AwH1o8x1Oi7QBOEeB0czpVYpoi71cFwcFEF4RgThDCtnC60vtDMvz8F7X/rYmrQ2DkKdNCQ/X+uQDYgE1fSzMLJQiYeVXsRZ5mUaWSg6bem70GVQD0JpmKQQzauVzYZSsrqPlVExCo+g+K7CJvUIgT0XGTLXaqYQJSnF2aIUZ0eV4jxRim+ihYpETyC3hflb7Uzb3GimFCdpRuHCsiiuGRVHNSPqCdG8ZTYtKP1mlKQdhxvLcpuk0bvgnEsCoDgYGXVmg+iGuXaz7djgQbJQPEhOtPE3AfkkSizldYlIx3KkLbXJjKCgzbSafZAkeZJ96ObAc4tG48XMOOKU/MNOmS3UkEh5mXeoTzKDR+kklbsaPTjp4ZmeoLtRxzvWyn3hVBsXpqE9SlPiWZ4SPyYp8WuWEj+n/+n3/A8emj1HwPlGOgAAAABJRU5ErkJggg==';
const SLOW_ICON = 'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAABGZJREFUWMPNV+tvFFUU30/4L/i9K0gQImoiQTQmGtEQQAWCoSGgJiZqojZCYsoHQkNIwAcJppWgHwjqLi1SHrVP2m4tfdAULKUW2NLSx0ILbGsf293ZeR7OOXc72+nM7GwbQjrJze7eufeex+/3O+euz5flAyUrliSL/esTAX9hIugPJYI5YfyMicHfQ/SO1tBa35N68LBnpaC/KB7wT8YDOZDd8E/SHtq7cMMV/mfiwZwCjGo6e8PWwXvxDDpr3lFjSlsXatjmCJ6VdTbkwLJV6HnkSRmflY2IXPL8Su/InYyXrAS54zAoPX9Csi0f4sUr7EbOvAjy1QJQ+87w2vjp5Y5OuGaCcHJLuzZ8GQzDAEOZBnoMaRSSLd+a7+W2fWDIU+JdcpzXqv0X3eFw4gSRxXHD3+/wwfL17/m3VLsD9LEunlPuBEG9W8rftUftIFW9z2uUW7+BoWsQL33VGRK05ZR6R7YnG79gAzOHiwOWgRI+BTOPcvMEzj1nvpfqd4s9tbmu6rBAIXTuTB5KNT2J8vcs81YHfrW8ky5t5/nkP5+5kpJsmhUuU5GR6naKaDAq06nmb3hOJQj6zgpjjZ+n31/+Uuyp/jBjseKKSaUzo3wuvC6MDTeCOlgO2mgXkkxDjFX81MXQNR7a6A3kxFlQI7W8J/7XKxmlSbZ9VL8dF5SuAeW/ImT1mJlqI/EIf//PRtVIDWNP6Vfv1TLzdWkMlTJlrtfjIyB3/oiOvOTGhUIfNRGbZ01fsazoUO1+AxqoZ6PJK98JRXQeTWXnDUicXyc4gc4wFC17Rcbuh0B72GbKVmr41EmSIR91MgvmoU+E4dFOk3hSzbZURA9BnxpgFahDVWaklHYqPBQxDSZtxQaxt3oL6ONhhEhhclodyAlTBmKWojPSAnpsEKvdC5bFNMcRYtGhqOc+hLd87aCoCRN3bFWS4CPY5mQg5uBAExqL2BzQMHLhQD4kzr3m4MDLpgP6ZO8cB1ajA1HO2hwOTNkhQLkR3lq0AxJlb6fSuDVFwihC0I8QLAV1oCwNAcpRQDDMQxSuD8ReLGAMgSYzlE4Q2EnY/DWzmaSmDlbwIF5Q9IKEP4kDzq1ltTAJu38RhpvzRC+4V8fZ5B6SkYQuMiScldsn0w2IZIbRG1KUM6QMlLNRpfs4KEOVPKdjhqyyjYLS9bNrPWAZehaii2+ZzYYkqU/0mgXINESFCYc+3sPQqJFLQgkX3vQuRJ6luH5XqhTvmgVRnugBPQEcvwtyImxpKX8s9tTlepdiz2bUuifVjN61NqOeP6wknJ21yk02p1ybkWc7nmksVZutDtw4lu6GyAOMaFY3/EjswaKWVTvOeCHByJn5HUdSstoM2oMWETnqWkUyMkcetGLkG01FEGlnyrTnhcTzSjbSLIiH1y0mnRLD+9+B9JWsfb/lusYyRGXM60qW+VK6irsaXzjx4kmVzbYGO5787yHuC/L1H+Z/KV0U1/JF8cdkUfw1WxR/Tp/W3/PHSyH/l51SdaoAAAAASUVORK5CYII=';
const STOPPED_ICON = 'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAA9VJREFUWMPNV+dKJEEQnl93r3Avcfcavpe/zHlXzDmLYlZU1oSrYEDFsGZdVDBvUBTUuv6K6aZ34ioiW1BMT1dPdXWFr3oMI03q7u7+lZOTk5WbmxsQz5DgiOCEyRiHTFkW1hrfRXl5eX+E0qDgmGBKk7E2iG+/vHFZWdlvcaJswclPbJzC+BY6oOvTpxYfhr+6sYMh4bS9kZ+f/098EP2uzTUjoPNvOie3bV5YWEihUIjW1tZobGyMCgoKbBsUFxfT5OQkbWxs8FpxEEcjXD1hxtzR7cfHx/Tx8UGvr68ESiaTNDQ0pOTj4+P08vLCsufnZ167vb3tGg7HnECyOH1QU1PDimdmZvi9ra2Nrq6ueG59fZ22trZ4HI1GqbGxkdcsLy/T+/s7lZeXuxmR7eR6x2zv6+vjDaRysFhPq6urJGlpaQlKlbyrq4vn29vbXasjJRRmnTsuhqtBdXV1KfO6ATixLmttbeX53t5er8QM6gjnCjIdHR2sDKeSc4ODgyoEm5ubPIanpLy/v5/nmpqaPMGKERPQ6VU+wWCQlSERd3d3Of6ILxjJBpbvl5eXnBP7+/v8TWlpqV95ZhkmftuESKDFxUV6enpSrk4kEirLI5EIxx7ux4aYw1pZDaB4PE6zs7NUUlLilgsBw2wsKYKBgQFWBKVHR0d0cHDA45GREVY8NzenvAPGGMaAhoeH+Xl4eEjn5+eqbHt6epyMCBlmJ1OTIi68GdwpE6+lpUWd6P7+nqtgb29PnRRuB/BADtaTtrm5ma6vr+nt7Y2T02JAxDDbqZo8PT2lh4cHRj99HnMgIGEgECArId5TU1M8vrm5saEkwodQWQxI2Aw4OTmhx8dHmwE4OWh0dNTRAMRZGnB7e2szAGGA1yw5ELeFAOWGEFxcXFB1dbVyo4wlDAHoAGoloRwRglgsxqyXIABMhgChdAqBaxKitFB6YBgF9+tJWFFRoeA2HA6zDBiBtUhceBNjzyR0K0O4eWVlRTUgKLq7u2NlGO/s7PCmYGkgZHrZ4n1hYcEVD2QZegJRVVUVK0NJoSSRYBJ8JEkggqthmASiyspKfyDyg+LOzk5WhqcVinE/kD0BYUu3GaVAsV8zksBSW1ubMo/N9STUZQ0NDTajXJuRXzuWjUVvx+D5+XllAPLAqRsC1NJqx14XEpxcv5DAEIAVCHWNmIPOzs6ovr5eVQTyRMK074XE70omywmNCIQSxf1PyicmJlS1oAqw1go6vlcyr0tpUVERdzVcOLExkM26Bkg4PT3NfQHe+vSlNCOu5RnxY5IRv2YZ8XP6U7/n/wFyU6HBPUWxjAAAAABJRU5ErkJggg==';
function setFavicon(base64) {
document.querySelector('link[rel=icon]').href = 'data:image/png;base64,' + base64;
}
var isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
var refresh_shortcut = isMacLike ? '⌘R' : 'Ctrl R';
window.onload = function() {
@ -49,6 +57,7 @@ function connectToDebuggerProxy() {
'You should press' + refresh_shortcut + 'in simulator to reload.';
};
updateVisibility();
updateFavicon();
}
function shutdownJSRuntime() {
@ -56,6 +65,7 @@ function connectToDebuggerProxy() {
worker.terminate();
worker = null;
window.onbeforeunload = null;
updateFavicon();
}
}
@ -66,6 +76,19 @@ function connectToDebuggerProxy() {
visibilityState: document.visibilityState,
});
}
updateFavicon();
}
function updateFavicon() {
if (worker) {
if (document.visibilityState === 'visible') {
setFavicon(RUNNING_ICON);
} else {
setFavicon(SLOW_ICON);
}
} else {
setFavicon(STOPPED_ICON);
}
}
ws.onopen = function() {