Bug 1268107 - Cannot use back in about:debugging after entering an invalid hash r=jdescottes

MozReview-Commit-ID: CsbzQXiR9RV

devtools/client/aboutdebugging/components/aboutdebugging.js

@@ -3,7 +3,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* eslint-env browser */
-/* globals AddonsPanel, WorkersPanel */
 
 "use strict";
 
@@ -67,18 +66,9 @@ module.exports = createClass({
   },
 
   onHashChange() {
-    let hash = window.location.hash;
-    // Default to defaultTabId if no hash is provided.
-    let panelId = hash ? hash.substr(1) : defaultPanelId;
-
-    let isValid = panels.some(p => p.id == panelId);
-    if (isValid) {
-      this.setState({ selectedPanelId: panelId });
-    } else {
-      // If the current hash matches no valid category, navigate to the default
-      // panel.
-      this.selectPanel(defaultPanelId);
-    }
+    this.setState({
+      selectedPanelId: window.location.hash.substr(1) || defaultPanelId
+    });
   },
 
   selectPanel(panelId) {
@@ -89,14 +79,24 @@ module.exports = createClass({
     let { client } = this.props;
     let { selectedPanelId } = this.state;
     let selectPanel = this.selectPanel;
-
     let selectedPanel = panels.find(p => p.id == selectedPanelId);
+    let panel;
+
+    if (selectedPanel) {
+      panel = selectedPanel.component({ client, id: selectedPanel.id });
+    } else {
+      panel = (
+        dom.div({ className: "page-not-found" },
+          dom.h1({ className: "header-name" },
+            Strings.GetStringFromName("pageNotFound")
+          )
+        )
+      );
+    }
 
     return dom.div({ className: "app" },
       PanelMenu({ panels, selectedPanelId, selectPanel }),
-      dom.div({ className: "main-content" },
-        selectedPanel.component({ client, id: selectedPanel.panelId })
-      )
+      dom.div({ className: "main-content" }, panel)
     );
   }
 });