kuy
diff --git a/‎frontend/Panel.js‎
Lines changed: 5 additions & 1 deletion b/‎frontend/Panel.js‎
Lines changed: 5 additions & 1 deletion
diff --git a/‎shells/firefox/data/panel.html‎
Lines changed: 9 additions & 3 deletions b/‎shells/firefox/data/panel.html‎
Lines changed: 9 additions & 3 deletions
diff --git a/‎shells/firefox/panel/run.js‎
Lines changed: 9 additions & 5 deletions b/‎shells/firefox/panel/run.js‎
Lines changed: 9 additions & 5 deletions
@@ -206,6 +206,10 @@ class Panel extends React.Component {
 
  render() {
  if (this.state.loading) {
+ // TODO: This currently shows in the Firefox shell when navigating from a
+ // React page to a non-React page. We should show a better message but
+ // properly doing so probably requires refactoring how we load the panel
+ // and communicate with the bridge.
  return (
  <div style={styles.loading}>
  <h1>Connecting to React...</h1>
@@ -215,7 +219,7 @@ class Panel extends React.Component {
  );
  }
  if (!this.state.isReact) {
- return <div style={styles.loading}><h1>Looking for react...</h1></div>;
+ return <div style={styles.loading}><h1>Looking for React...</h1></div>;
  }
  var extraTabs = assign.apply(null, [{}].concat(this.plugins.map(p => p.tabs())));
  var extraPanes = [].concat(...this.plugins.map(p => p.panes()));
 
@@ -1,4 +1,4 @@
-<!doctype>
+<!doctype html>
 <html>
  <head>
  <meta charset=utf8>
@@ -13,6 +13,10 @@
  flex: 1;
  display: flex;
  }
+ h1 {
+ font-size: 24px;
+ margin: 16px 0;
+ }
  #container {
  display: flex;
  position: fixed;
@@ -24,8 +28,10 @@
  font-family: sans-serif;
  }
  #message {
- margin: 20px auto;
- color: #ccc;
+ color: #888;
+ flex: 1;
+ margin: 46px 30px;
+ text-align: center;
  }
  #logs {
  position: fixed;
 
@@ -17,12 +17,11 @@ var Panel = require('../../../frontend/Panel');
 var React = require('react');
 
 var node = document.getElementById('container');
-node.innerHTML = '<h1>Connecting to devtools</h1>';
+React.render(<h1 id="message">Looking for React...</h1>, node);
 var port = {};
 
 function reload() {
  React.unmountComponentAtNode(node);
- node.innerHTML = '';
  React.render(<Panel alreadyFoundReact={true} {...config} />, node);
 }
 
@@ -33,13 +32,18 @@ window.addEventListener('message', function(event) {
  if (evt.data === 'show') {
  reload();
  } else if (evt.data === 'unload') {
- node.innerHTML = '<h1 id="message">Looking for React</h1>';
+ React.render(<h1 id="message">Looking for React...</h1>, node);
  } else if (evt.data.type === 'hasReact') {
  if (evt.data.val) {
  React.render(<Panel alreadyFoundReact={true} {...config} />, node);
  } else {
- node.innerHTML =
- '<h1 id="message">Unable to find React on the page.</h1>';
+ // TODO: Does this actually show up? It seems like either the "Looking
+ // for React..." at the top of this file shows, or (when navigating
+ // from a React page to a non-React one) Panel renders the same text.
+ React.render(
+ <h1 id="message">Unable to find React on the page.</h1>,
+ node
+ );
  }
  }
  };