Extract styles, images and audio file

package.json

@@ -17,7 +17,7 @@
     "lint": "eslint --ext .js,.ts . --cache --report-unused-disable-directives",
     "test:ci:cocoapods": "ruby packages/platform-ios/native_modules.rb",
     "postinstall": "yarn build",
-    "link-packages": "PACKAGES=('tools' 'platform-ios' 'platform-android' 'cli' 'cli-types' 'global-cli') && cd packages && for PACKAGE in \"${PACKAGES[@]}\"; do cd $PACKAGE && yarn link && cd ..; done",
+    "link-packages": "PACKAGES=('tools' 'platform-ios' 'platform-android' 'cli' 'cli-types' 'global-cli' 'debugger-ui') && cd packages && for PACKAGE in \"${PACKAGES[@]}\"; do cd $PACKAGE && yarn link && cd ..; done",
     "publish": "yarn build-clean-all && yarn install && lerna publish"
   },
   "dependencies": {

packages/debugger-ui/src/ui/index.css

@@ -0,0 +1,37 @@
+html,
+body {
+  font-family: Helvetica, Verdana, sans-serif;
+  font-size: large;
+  font-weight: 200;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+.shortcut {
+  border-radius: 4px;
+  color: #eee;
+  background-color: #333;
+  font-family: 'Monaco', monospace;
+  font-size: medium;
+  letter-spacing: 3px;
+  padding: 4px;
+}
+.content {
+  padding: 10px;
+}
+.reload-btn {
+  padding: 5px 10px;
+}
+body.dark {
+  background-color: #242424;
+  color: #afafaf;
+}
+.dark .shortcut {
+  color: #c1c1c1;
+}
+.dark a {
+  color: #3b99fc;
+}
+input[type='checkbox'] {
+  vertical-align: middle;
+}

packages/debugger-ui/src/ui/main.js → packages/debugger-ui/src/ui/index.js

@@ -1,5 +1,10 @@
 /* eslint-env browser */
-'use strict';
+import './index.css';
+import blueIcon from './assets/blue-icon.png';
+import grayIcon from './assets/gray-icon.png';
+import orangeIcon from './assets/orange-icon.png';
+
+('use strict');
 (function() {
   const isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
   const refreshShortcut = isMacLike ? '⌘R' : 'Ctrl R';
@@ -10,15 +15,6 @@
     Page.render();
   };
 
-  const Assets = {
-    blueIcon:
-      'data:image/png;base64,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==',
-    grayIcon:
-      'data:image/png;base64,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==',
-    orangeIcon:
-      'data:image/png;base64,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 Page = (window.Page = {
     state: {
       isDark:
@@ -66,12 +62,12 @@
 
       const linkNode = document.querySelector('link[rel=icon]');
       if (status.type === 'disconnected' || status.type === 'error') {
-        linkNode.href = Assets.grayIcon;
+        linkNode.href = grayIcon;
       } else {
         if (visibilityState === 'visible' || isPriorityMaintained) {
-          linkNode.href = Assets.blueIcon;
+          linkNode.href = blueIcon;
         } else {
-          linkNode.href = Assets.orangeIcon;
+          linkNode.href = orangeIcon;
         }
       }