Bug 1269757 - Clean up panelId/id confusion in about:debugging. r=janx

devtools/client/aboutdebugging/components/aboutdebugging.js

@@ -24,19 +24,16 @@ const Strings = Services.strings.createBundle(
 
 const panels = [{
   id: "addons",
-  panelId: "addons-panel",
   name: Strings.GetStringFromName("addons"),
   icon: "chrome://devtools/skin/images/debugging-addons.svg",
   component: AddonsPanel
 }, {
   id: "tabs",
-  panelId: "tabs-panel",
   name: Strings.GetStringFromName("tabs"),
   icon: "chrome://devtools/skin/images/debugging-tabs.svg",
   component: TabsPanel
 }, {
   id: "workers",
-  panelId: "workers-panel",
   name: Strings.GetStringFromName("workers"),
   icon: "chrome://devtools/skin/images/debugging-workers.svg",
   component: WorkersPanel

devtools/client/aboutdebugging/components/addons/panel.js

@@ -112,13 +112,13 @@ module.exports = createClass({
     let targetClass = AddonTarget;
 
     return dom.div({
-      id,
+      id: id + "-panel",
       className: "panel",
       role: "tabpanel",
-      "aria-labelledby": "panel-addons-header-name"
+      "aria-labelledby": id + "-header"
     },
     PanelHeader({
-      id: "addons-panel-header-name",
+      id: id + "-header",
       name: Strings.GetStringFromName("addons")
     }),
     AddonsControls({ debugDisabled }),

devtools/client/aboutdebugging/components/panel-menu-entry.js

@@ -21,14 +21,14 @@ module.exports = createClass({
   },
 
   render() {
-    let { panelId, icon, name, selected } = this.props;
+    let { id, name, icon, selected } = this.props;
 
     // Here .category, .category-icon, .category-name classnames are used to
     // apply common styles defined.
     let className = "category" + (selected ? " selected" : "");
     return dom.div({
       "aria-selected": selected,
-      "aria-controls": panelId,
+      "aria-controls": id + "-panel",
       className,
       onClick: this.onClick,
       onKeyDown: this.onKeyDown,

devtools/client/aboutdebugging/components/panel-menu.js

@@ -13,11 +13,10 @@ module.exports = createClass({
 
   render() {
     let { panels, selectedPanelId, selectPanel } = this.props;
-    let panelLinks = panels.map(({ id, panelId, name, icon }) => {
+    let panelLinks = panels.map(({ id, name, icon }) => {
       let selected = id == selectedPanelId;
       return PanelMenuEntry({
         id,
-        panelId,
         name,
         icon,
         selected,

devtools/client/aboutdebugging/components/tabs/panel.js

@@ -63,17 +63,17 @@ module.exports = createClass({
   },
 
   render() {
-    let { client } = this.props;
+    let { client, id } = this.props;
     let { tabs } = this.state;
 
     return dom.div({
-      id: "tabs-panel",
+      id: id + "-panel",
       className: "panel",
       role: "tabpanel",
-      "aria-labelledby": "tabs-panel-header-name"
+      "aria-labelledby": id + "-header"
     },
     PanelHeader({
-      id: "tabs-panel-header-name",
+      id: id + "-header",
       name: Strings.GetStringFromName("tabs")
     }),
     dom.div({},

devtools/client/aboutdebugging/components/workers/panel.js

@@ -104,13 +104,13 @@ module.exports = createClass({
     let { workers } = this.state;
 
     return dom.div({
-      id,
+      id: id + "-panel",
       className: "panel",
       role: "tabpanel",
-      "aria-labelledby": "panel-workers-header-name"
+      "aria-labelledby": id + "-header"
     },
     PanelHeader({
-      id: "workers-panel-header-name",
+      id: id + "-header",
       name: Strings.GetStringFromName("workers")
     }),
     dom.div({ id: "workers", className: "inverted-icons" },