Bug 1402394 CamelCase all React component files in \devtools\client\shared\components\. r=pbro draft
authorDan Epstein <dan.epstein@outlook.com>
Wed, 27 Sep 2017 01:12:13 -0400
changeset 672465 5ef89b4169dda156a8160d4d21655147f4d9da11
parent 672296 e6c32278f32cd5f7d159627b2157396b62d0c4a9
child 672482 386b72667cbabf992b6de1cbc7940353b29d13a8
push id82254
push userbmo:pbrosset@mozilla.com
push dateFri, 29 Sep 2017 08:36:58 +0000
reviewerspbro
bugs1402394
milestone58.0a1
Bug 1402394 CamelCase all React component files in \devtools\client\shared\components\. r=pbro MozReview-Commit-ID: HH4mbqB6RTK
devtools/client/animationinspector/animation-inspector.xhtml
devtools/client/animationinspector/components/animation-timeline.js
devtools/client/dom/content/components/dom-tree.js
devtools/client/dom/content/components/main-toolbar.js
devtools/client/dom/dom.html
devtools/client/framework/toolbox.js
devtools/client/framework/toolbox.xul
devtools/client/inspector/extensions/components/ObjectTreeView.js
devtools/client/inspector/fonts/components/App.js
devtools/client/inspector/inspector.js
devtools/client/inspector/inspector.xhtml
devtools/client/inspector/toolsidebar.js
devtools/client/jsonview/components/json-panel.js
devtools/client/jsonview/components/main-tabbed-area.js
devtools/client/jsonview/css/main.css
devtools/client/memory/components/census-tree-item.js
devtools/client/memory/components/census.js
devtools/client/memory/components/dominator-tree-item.js
devtools/client/memory/components/dominator-tree.js
devtools/client/memory/components/heap.js
devtools/client/memory/components/individuals.js
devtools/client/netmonitor/src/assets/styles/netmonitor.css
devtools/client/netmonitor/src/components/monitor-panel.js
devtools/client/netmonitor/src/components/properties-view.js
devtools/client/netmonitor/src/components/security-panel.js
devtools/client/netmonitor/src/components/stack-trace-panel.js
devtools/client/netmonitor/src/components/tabbox-panel.js
devtools/client/netmonitor/src/components/toolbar.js
devtools/client/performance/components/jit-optimizations-item.js
devtools/client/performance/components/jit-optimizations.js
devtools/client/performance/components/waterfall-tree.js
devtools/client/shared/components/AutoCompletePopup.js
devtools/client/shared/components/Frame.js
devtools/client/shared/components/HSplitBox.js
devtools/client/shared/components/NotificationBox.css
devtools/client/shared/components/NotificationBox.js
devtools/client/shared/components/SearchBox.js
devtools/client/shared/components/SidebarToggle.css
devtools/client/shared/components/SidebarToggle.js
devtools/client/shared/components/StackTrace.js
devtools/client/shared/components/Tree.js
devtools/client/shared/components/autocomplete-popup.js
devtools/client/shared/components/frame.js
devtools/client/shared/components/h-split-box.js
devtools/client/shared/components/moz.build
devtools/client/shared/components/notification-box.css
devtools/client/shared/components/notification-box.js
devtools/client/shared/components/search-box.js
devtools/client/shared/components/sidebar-toggle.css
devtools/client/shared/components/sidebar-toggle.js
devtools/client/shared/components/splitter/Draggable.js
devtools/client/shared/components/splitter/SplitBox.css
devtools/client/shared/components/splitter/SplitBox.js
devtools/client/shared/components/splitter/draggable.js
devtools/client/shared/components/splitter/moz.build
devtools/client/shared/components/splitter/split-box.css
devtools/client/shared/components/splitter/split-box.js
devtools/client/shared/components/stack-trace.js
devtools/client/shared/components/tabs/TabBar.css
devtools/client/shared/components/tabs/TabBar.js
devtools/client/shared/components/tabs/Tabs.css
devtools/client/shared/components/tabs/Tabs.js
devtools/client/shared/components/tabs/moz.build
devtools/client/shared/components/tabs/tabbar.css
devtools/client/shared/components/tabs/tabbar.js
devtools/client/shared/components/tabs/tabs.css
devtools/client/shared/components/tabs/tabs.js
devtools/client/shared/components/test/mochitest/test_HSplitBox_01.html
devtools/client/shared/components/test/mochitest/test_frame_01.html
devtools/client/shared/components/test/mochitest/test_frame_02.html
devtools/client/shared/components/test/mochitest/test_notification_box_01.html
devtools/client/shared/components/test/mochitest/test_notification_box_02.html
devtools/client/shared/components/test/mochitest/test_notification_box_03.html
devtools/client/shared/components/test/mochitest/test_searchbox-with-autocomplete.html
devtools/client/shared/components/test/mochitest/test_searchbox.html
devtools/client/shared/components/test/mochitest/test_sidebar_toggle.html
devtools/client/shared/components/test/mochitest/test_stack-trace-source-maps.html
devtools/client/shared/components/test/mochitest/test_stack-trace.html
devtools/client/shared/components/test/mochitest/test_tabs_accessibility.html
devtools/client/shared/components/test/mochitest/test_tabs_menu.html
devtools/client/shared/components/test/mochitest/test_tree_01.html
devtools/client/shared/components/test/mochitest/test_tree_02.html
devtools/client/shared/components/test/mochitest/test_tree_03.html
devtools/client/shared/components/test/mochitest/test_tree_04.html
devtools/client/shared/components/test/mochitest/test_tree_05.html
devtools/client/shared/components/test/mochitest/test_tree_06.html
devtools/client/shared/components/test/mochitest/test_tree_07.html
devtools/client/shared/components/test/mochitest/test_tree_08.html
devtools/client/shared/components/test/mochitest/test_tree_09.html
devtools/client/shared/components/test/mochitest/test_tree_10.html
devtools/client/shared/components/test/mochitest/test_tree_11.html
devtools/client/shared/components/tree.js
devtools/client/shared/components/tree/LabelCell.js
devtools/client/shared/components/tree/ObjectProvider.js
devtools/client/shared/components/tree/TreeCell.js
devtools/client/shared/components/tree/TreeHeader.js
devtools/client/shared/components/tree/TreeRow.js
devtools/client/shared/components/tree/TreeView.css
devtools/client/shared/components/tree/TreeView.js
devtools/client/shared/components/tree/label-cell.js
devtools/client/shared/components/tree/moz.build
devtools/client/shared/components/tree/object-provider.js
devtools/client/shared/components/tree/tree-cell.js
devtools/client/shared/components/tree/tree-header.js
devtools/client/shared/components/tree/tree-row.js
devtools/client/shared/components/tree/tree-view.css
devtools/client/shared/components/tree/tree-view.js
devtools/client/shared/react-utils.js
devtools/client/storage/storage.xul
devtools/client/themes/components-frame.css
devtools/client/themes/components-h-split-box.css
devtools/client/webconsole/local-dev/index.js
devtools/client/webconsole/net/components/net-info-body.js
devtools/client/webconsole/net/components/post-tab.js
devtools/client/webconsole/net/components/response-tab.js
devtools/client/webconsole/net/components/stacktrace-tab.js
devtools/client/webconsole/net/main.js
devtools/client/webconsole/new-console-output/components/message.js
devtools/client/webconsole/webconsole.js
devtools/client/webconsole/webconsole.xhtml
--- a/devtools/client/animationinspector/animation-inspector.xhtml
+++ b/devtools/client/animationinspector/animation-inspector.xhtml
@@ -2,17 +2,17 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <link rel="stylesheet" href="chrome://devtools/skin/animationinspector.css" type="text/css"/>
-    <link rel="stylesheet" href="resource://devtools/client/shared/components/splitter/split-box.css"/>
+    <link rel="stylesheet" href="resource://devtools/client/shared/components/splitter/SplitBox.css"/>
     <script type="application/javascript" src="chrome://devtools/content/shared/theme-switching.js"/>
   </head>
   <body class="theme-sidebar" role="application" empty="true">
     <div id="global-toolbar" class="theme-toolbar">
       <span id="all-animations-label" class="label"></span>
       <button id="toggle-all" class="devtools-button pause-button"></button>
     </div>
     <div id="timeline-toolbar" class="theme-toolbar">
--- a/devtools/client/animationinspector/components/animation-timeline.js
+++ b/devtools/client/animationinspector/components/animation-timeline.js
@@ -84,17 +84,17 @@ AnimationsTimeline.prototype = {
       window: this.win,
       useOnlyShared: true
     }).require;
 
     const React = browserRequire("devtools/client/shared/vendor/react");
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
 
     const SplitBox = React.createFactory(
-      browserRequire("devtools/client/shared/components/splitter/split-box"));
+      browserRequire("devtools/client/shared/components/splitter/SplitBox"));
 
     const splitter = SplitBox({
       className: "animation-root",
       splitterSize: 1,
       initialHeight: "50%",
       endPanelControl: true,
       startPanel: React.DOM.div({
         className: "animation-timeline"
--- a/devtools/client/dom/content/components/dom-tree.js
+++ b/devtools/client/dom/content/components/dom-tree.js
@@ -4,17 +4,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 // React & Redux
 const React = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 
-const TreeView = React.createFactory(require("devtools/client/shared/components/tree/tree-view"));
+const TreeView = React.createFactory(require("devtools/client/shared/components/tree/TreeView"));
 
 // Reps
 const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
 const { Rep } = REPS;
 const Grip = REPS.Grip;
 
 // DOM Panel
 const { GripProvider } = require("../grip-provider");
--- a/devtools/client/dom/content/components/main-toolbar.js
+++ b/devtools/client/dom/content/components/main-toolbar.js
@@ -9,17 +9,17 @@
 const React = require("devtools/client/shared/vendor/react");
 const { l10n } = require("../utils");
 
 // Reps
 const { createFactories } = require("devtools/client/shared/react-utils");
 const { Toolbar, ToolbarButton } = createFactories(require("devtools/client/jsonview/components/reps/toolbar"));
 
 // DOM Panel
-const SearchBox = React.createFactory(require("devtools/client/shared/components/search-box"));
+const SearchBox = React.createFactory(require("devtools/client/shared/components/SearchBox"));
 
 // Actions
 const { fetchProperties } = require("../actions/grips");
 const { setVisibilityFilter } = require("../actions/filter");
 
 // Shortcuts
 const PropTypes = React.PropTypes;
 
--- a/devtools/client/dom/dom.html
+++ b/devtools/client/dom/dom.html
@@ -4,17 +4,17 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!DOCTYPE html>
 <html dir="">
 <head>
   <meta charset="utf-8"/>
 
   <link href="resource://devtools/client/dom/content/dom-view.css" rel="stylesheet" />
   <link href="resource://devtools/client/jsonview/css/toolbar.css" rel="stylesheet" />
-  <link href="resource://devtools/client/shared/components/tree/tree-view.css" rel="stylesheet" />
+  <link href="resource://devtools/client/shared/components/tree/TreeView.css" rel="stylesheet" />
 
   <script type="text/javascript"
           src="chrome://devtools/content/shared/theme-switching.js"></script>
 </head>
 <body class="theme-body devtools-monospace" role="application">
   <div id="content"></div>
   <script type="text/javascript" src="./main.js"></script>
 </body>
--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -1017,17 +1017,17 @@ Toolbox.prototype = {
 
   /**
    * Build the notification box as soon as needed.
    */
   get notificationBox() {
     if (!this._notificationBox) {
       let { NotificationBox, PriorityLevels } =
         this.browserRequire(
-          "devtools/client/shared/components/notification-box");
+          "devtools/client/shared/components/NotificationBox");
 
       NotificationBox = this.React.createFactory(NotificationBox);
 
       // Render NotificationBox and assign priority levels to it.
       let box = this.doc.getElementById("toolbox-notificationbox");
       this._notificationBox = Object.assign(
         this.ReactDOM.render(NotificationBox({}), box),
         PriorityLevels);
--- a/devtools/client/framework/toolbox.xul
+++ b/devtools/client/framework/toolbox.xul
@@ -1,15 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/toolbox.css" type="text/css"?>
-<?xml-stylesheet href="resource://devtools/client/shared/components/notification-box.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/shared/components/NotificationBox.css" type="text/css"?>
 
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 
 <!DOCTYPE window [
 <!ENTITY % toolboxDTD SYSTEM "chrome://devtools/locale/toolbox.dtd" >
 %toolboxDTD;
 <!ENTITY % editMenuStrings SYSTEM "chrome://global/locale/editMenuOverlay.dtd">
 %editMenuStrings;
--- a/devtools/client/inspector/extensions/components/ObjectTreeView.js
+++ b/devtools/client/inspector/extensions/components/ObjectTreeView.js
@@ -7,17 +7,17 @@
 const {
   addons,
   createClass, createFactory,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 
 const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
 const { Rep } = REPS;
-const TreeViewClass = require("devtools/client/shared/components/tree/tree-view");
+const TreeViewClass = require("devtools/client/shared/components/tree/TreeView");
 const TreeView = createFactory(TreeViewClass);
 
 /**
  * The ObjectTreeView React Component is used in the ExtensionSidebar component to provide
  * a UI viewMode which shows a tree view of the passed JavaScript object.
  */
 const ObjectTreeView = createClass({
   displayName: "ObjectTreeView",
--- a/devtools/client/inspector/fonts/components/App.js
+++ b/devtools/client/inspector/fonts/components/App.js
@@ -3,17 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { addons, createClass, createFactory, DOM: dom, PropTypes } =
   require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 
-const SearchBox = createFactory(require("devtools/client/shared/components/search-box"));
+const SearchBox = createFactory(require("devtools/client/shared/components/SearchBox"));
 const FontList = createFactory(require("./FontList"));
 
 const { getStr } = require("../utils/l10n");
 const Types = require("../types");
 
 const PREVIEW_UPDATE_DELAY = 150;
 
 const App = createClass({
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -482,17 +482,17 @@ Inspector.prototype = {
   },
 
   /**
    * Build Splitter located between the main and side area of
    * the Inspector panel.
    */
   setupSplitter: function () {
     let SplitBox = this.React.createFactory(this.browserRequire(
-      "devtools/client/shared/components/splitter/split-box"));
+      "devtools/client/shared/components/splitter/SplitBox"));
 
     let { width, height } = this.getSidebarSize();
     let splitter = SplitBox({
       className: "inspector-sidebar-splitter",
       initialWidth: width,
       initialHeight: height,
       splitterSize: 1,
       endPanelControl: true,
--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -11,23 +11,23 @@
   <link rel="stylesheet" href="chrome://devtools/skin/widgets.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/inspector.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/rules.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/computed.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/fonts.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/boxmodel.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/layout.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/animationinspector.css"/>
-  <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/tabs.css"/>
-  <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/tabbar.css"/>
+  <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/Tabs.css"/>
+  <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/TabBar.css"/>
   <link rel="stylesheet" href="resource://devtools/client/inspector/components/InspectorTabPanel.css"/>
-  <link rel="stylesheet" href="resource://devtools/client/shared/components/splitter/split-box.css"/>
+  <link rel="stylesheet" href="resource://devtools/client/shared/components/splitter/SplitBox.css"/>
   <link rel="stylesheet" href="resource://devtools/client/inspector/layout/components/Accordion.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/reps/reps.css"/>
-  <link rel="stylesheet" href="resource://devtools/client/shared/components/tree/tree-view.css"/>
+  <link rel="stylesheet" href="resource://devtools/client/shared/components/tree/TreeView.css"/>
 
   <script type="application/javascript"
           src="chrome://devtools/content/shared/theme-switching.js"></script>
   <script type="text/javascript">
     /* eslint-disable */
     var isInChrome = window.location.href.includes("chrome:");
     if (isInChrome) {
       var exports = {};
--- a/devtools/client/inspector/toolsidebar.js
+++ b/devtools/client/inspector/toolsidebar.js
@@ -68,17 +68,17 @@ ToolSidebar.prototype = {
   get InspectorTabPanel() {
     return this._toolPanel.InspectorTabPanel;
   },
 
   // Rendering
 
   render: function () {
     let Tabbar = this.React.createFactory(this.browserRequire(
-      "devtools/client/shared/components/tabs/tabbar"));
+      "devtools/client/shared/components/tabs/TabBar"));
 
     let sidebar = Tabbar({
       menuDocument: this._toolPanel._toolbox.doc,
       showAllTabsMenu: true,
       onSelect: this.handleSelectionChange.bind(this),
     });
 
     this._tabbar = this.ReactDOM.render(sidebar, this._tabbox);
--- a/devtools/client/jsonview/components/json-panel.js
+++ b/devtools/client/jsonview/components/json-panel.js
@@ -3,17 +3,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 define(function (require, exports, module) {
   const { DOM: dom, createFactory, createClass, PropTypes } = require("devtools/client/shared/vendor/react");
-  const TreeViewClass = require("devtools/client/shared/components/tree/tree-view");
+  const TreeViewClass = require("devtools/client/shared/components/tree/TreeView");
   const TreeView = createFactory(TreeViewClass);
 
   const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
   const { createFactories } = require("devtools/client/shared/react-utils");
   const { Rep } = REPS;
 
   const { SearchBox } = createFactories(require("./search-box"));
   const { Toolbar, ToolbarButton } = createFactories(require("./reps/toolbar"));
--- a/devtools/client/jsonview/components/main-tabbed-area.js
+++ b/devtools/client/jsonview/components/main-tabbed-area.js
@@ -8,17 +8,17 @@
 
 define(function (require, exports, module) {
   const { createClass, PropTypes } = require("devtools/client/shared/vendor/react");
 
   const { createFactories } = require("devtools/client/shared/react-utils");
   const { JsonPanel } = createFactories(require("./json-panel"));
   const { TextPanel } = createFactories(require("./text-panel"));
   const { HeadersPanel } = createFactories(require("./headers-panel"));
-  const { Tabs, TabPanel } = createFactories(require("devtools/client/shared/components/tabs/tabs"));
+  const { Tabs, TabPanel } = createFactories(require("devtools/client/shared/components/tabs/Tabs"));
 
   /**
    * This object represents the root application template
    * responsible for rendering the basic tab layout.
    */
   let MainTabbedArea = createClass({
     displayName: "MainTabbedArea",
 
--- a/devtools/client/jsonview/css/main.css
+++ b/devtools/client/jsonview/css/main.css
@@ -2,18 +2,18 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import "resource://devtools/client/themes/variables.css";
 @import "resource://devtools/client/themes/common.css";
 @import "resource://devtools/client/themes/toolbars.css";
 
-@import "resource://devtools/client/shared/components/tree/tree-view.css";
-@import "resource://devtools/client/shared/components/tabs/tabs.css";
+@import "resource://devtools/client/shared/components/tree/TreeView.css";
+@import "resource://devtools/client/shared/components/tabs/Tabs.css";
 
 @import "general.css";
 @import "search-box.css";
 @import "toolbar.css";
 @import "json-panel.css";
 @import "text-panel.css";
 @import "headers-panel.css";
 
--- a/devtools/client/memory/components/census-tree-item.js
+++ b/devtools/client/memory/components/census-tree-item.js
@@ -6,17 +6,17 @@
 const { isSavedFrame } = require("devtools/shared/DevToolsUtils");
 const {
   DOM: dom,
   createClass,
   createFactory,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
 const { L10N, formatNumber, formatPercent } = require("../utils");
-const Frame = createFactory(require("devtools/client/shared/components/frame"));
+const Frame = createFactory(require("devtools/client/shared/components/Frame"));
 const { TREE_ROW_HEIGHT } = require("../constants");
 const models = require("../models");
 
 module.exports = createClass({
   displayName: "CensusTreeItem",
 
   propTypes: {
     arrow: PropTypes.any,
--- a/devtools/client/memory/components/census.js
+++ b/devtools/client/memory/components/census.js
@@ -1,16 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { createClass, PropTypes, createFactory } = require("devtools/client/shared/vendor/react");
-const Tree = createFactory(require("devtools/client/shared/components/tree"));
+const Tree = createFactory(require("devtools/client/shared/components/Tree"));
 const CensusTreeItem = createFactory(require("./census-tree-item"));
 const { TREE_ROW_HEIGHT } = require("../constants");
 const { censusModel, diffingModel } = require("../models");
 
 module.exports = createClass({
   displayName: "Census",
 
   propTypes: {
--- a/devtools/client/memory/components/dominator-tree-item.js
+++ b/devtools/client/memory/components/dominator-tree-item.js
@@ -2,17 +2,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { assert, isSavedFrame } = require("devtools/shared/DevToolsUtils");
 const { DOM: dom, createClass, createFactory, PropTypes } = require("devtools/client/shared/vendor/react");
 const { L10N, formatNumber, formatPercent } = require("../utils");
-const Frame = createFactory(require("devtools/client/shared/components/frame"));
+const Frame = createFactory(require("devtools/client/shared/components/Frame"));
 const { TREE_ROW_HEIGHT } = require("../constants");
 
 const Separator = createFactory(createClass({
   displayName: "Separator",
 
   render() {
     return dom.span({ className: "separator" }, "›");
   }
--- a/devtools/client/memory/components/dominator-tree.js
+++ b/devtools/client/memory/components/dominator-tree.js
@@ -2,17 +2,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { DOM: dom, createClass, PropTypes, createFactory } = require("devtools/client/shared/vendor/react");
 const { assert } = require("devtools/shared/DevToolsUtils");
 const { createParentMap } = require("devtools/shared/heapsnapshot/CensusUtils");
-const Tree = createFactory(require("devtools/client/shared/components/tree"));
+const Tree = createFactory(require("devtools/client/shared/components/Tree"));
 const DominatorTreeItem = createFactory(require("./dominator-tree-item"));
 const { L10N } = require("../utils");
 const { TREE_ROW_HEIGHT, dominatorTreeState } = require("../constants");
 const { dominatorTreeModel } = require("../models");
 const DominatorTreeLazyChildren = require("../dominator-tree-lazy-children");
 
 const DOMINATOR_TREE_AUTO_EXPAND_DEPTH = 3;
 
--- a/devtools/client/memory/components/heap.js
+++ b/devtools/client/memory/components/heap.js
@@ -6,17 +6,17 @@
 
 const { DOM: dom, createClass, PropTypes, createFactory } = require("devtools/client/shared/vendor/react");
 const { assert, safeErrorString } = require("devtools/shared/DevToolsUtils");
 const Census = createFactory(require("./census"));
 const CensusHeader = createFactory(require("./census-header"));
 const DominatorTree = createFactory(require("./dominator-tree"));
 const DominatorTreeHeader = createFactory(require("./dominator-tree-header"));
 const TreeMap = createFactory(require("./tree-map"));
-const HSplitBox = createFactory(require("devtools/client/shared/components/h-split-box"));
+const HSplitBox = createFactory(require("devtools/client/shared/components/HSplitBox"));
 const Individuals = createFactory(require("./individuals"));
 const IndividualsHeader = createFactory(require("./individuals-header"));
 const ShortestPaths = createFactory(require("./shortest-paths"));
 const { getStatusTextFull, L10N } = require("../utils");
 const {
   snapshotState: states,
   diffingState,
   viewState,
--- a/devtools/client/memory/components/individuals.js
+++ b/devtools/client/memory/components/individuals.js
@@ -1,16 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { createClass, PropTypes, createFactory } = require("devtools/client/shared/vendor/react");
-const Tree = createFactory(require("devtools/client/shared/components/tree"));
+const Tree = createFactory(require("devtools/client/shared/components/Tree"));
 const DominatorTreeItem = createFactory(require("./dominator-tree-item"));
 const { TREE_ROW_HEIGHT } = require("../constants");
 const models = require("../models");
 
 /**
  * The list of individuals in a census group.
  */
 module.exports = createClass({
--- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -1,18 +1,18 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import "chrome://devtools/skin/widgets.css";
 @import "resource://devtools/client/themes/light-theme.css";
-@import "resource://devtools/client/shared/components/splitter/split-box.css";
-@import "resource://devtools/client/shared/components/tree/tree-view.css";
-@import "resource://devtools/client/shared/components/tabs/tabs.css";
-@import "resource://devtools/client/shared/components/tabs/tabbar.css";
+@import "resource://devtools/client/shared/components/splitter/SplitBox.css";
+@import "resource://devtools/client/shared/components/tree/TreeView.css";
+@import "resource://devtools/client/shared/components/tabs/Tabs.css";
+@import "resource://devtools/client/shared/components/tabs/TabBar.css";
 @import "chrome://devtools/skin/components-frame.css";
 @import "chrome://devtools/content/sourceeditor/codemirror/lib/codemirror.css";
 @import "chrome://devtools/content/sourceeditor/codemirror/addon/dialog/dialog.css";
 @import "chrome://devtools/content/sourceeditor/codemirror/mozilla.css";
 
 :root.theme-dark {
   --table-splitter-color: rgba(255,255,255,0.15);
   --table-zebra-background: rgba(255,255,255,0.05);
--- a/devtools/client/netmonitor/src/components/monitor-panel.js
+++ b/devtools/client/netmonitor/src/components/monitor-panel.js
@@ -14,17 +14,17 @@ const {
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { findDOMNode } = require("devtools/client/shared/vendor/react-dom");
 const Actions = require("../actions/index");
 const { getLongString } = require("../connector/index");
 const { getFormDataSections } = require("../utils/request-utils");
 const { getSelectedRequest } = require("../selectors/index");
 
 // Components
-const SplitBox = createFactory(require("devtools/client/shared/components/splitter/split-box"));
+const SplitBox = createFactory(require("devtools/client/shared/components/splitter/SplitBox"));
 const NetworkDetailsPanel = createFactory(require("./network-details-panel"));
 const RequestList = createFactory(require("./request-list"));
 const Toolbar = createFactory(require("./toolbar"));
 const { div } = DOM;
 const MediaQueryList = window.matchMedia("(min-width: 700px)");
 
 /*
  * Monitor panel component
--- a/devtools/client/netmonitor/src/components/properties-view.js
+++ b/devtools/client/netmonitor/src/components/properties-view.js
@@ -14,20 +14,20 @@ const {
 } = require("devtools/client/shared/vendor/react");
 
 const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
 const { Rep } = REPS;
 
 const { FILTER_SEARCH_DELAY } = require("../constants");
 
 // Components
-const SearchBox = createFactory(require("devtools/client/shared/components/search-box"));
-const TreeViewClass = require("devtools/client/shared/components/tree/tree-view");
+const SearchBox = createFactory(require("devtools/client/shared/components/SearchBox"));
+const TreeViewClass = require("devtools/client/shared/components/tree/TreeView");
 const TreeView = createFactory(TreeViewClass);
-const TreeRow = createFactory(require("devtools/client/shared/components/tree/tree-row"));
+const TreeRow = createFactory(require("devtools/client/shared/components/tree/TreeRow"));
 const SourceEditor = createFactory(require("./source-editor"));
 
 const { div, tr, td } = DOM;
 const AUTO_EXPAND_MAX_LEVEL = 7;
 const AUTO_EXPAND_MAX_NODES = 50;
 const EDITOR_CONFIG_ID = "EDITOR_CONFIG";
 
 /*
--- a/devtools/client/netmonitor/src/components/security-panel.js
+++ b/devtools/client/netmonitor/src/components/security-panel.js
@@ -8,17 +8,17 @@ const {
   createFactory,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 const { L10N } = require("../utils/l10n");
 const { getUrlHost } = require("../utils/request-utils");
 
 // Components
-const TreeViewClass = require("devtools/client/shared/components/tree/tree-view");
+const TreeViewClass = require("devtools/client/shared/components/tree/TreeView");
 const PropertiesView = createFactory(require("./properties-view"));
 
 const { div, input, span } = DOM;
 
 /*
  * Security panel component
  * If the site is being served over HTTPS, you get an extra tab labeled "Security".
  * This contains details about the secure connection used including the protocol,
--- a/devtools/client/netmonitor/src/components/stack-trace-panel.js
+++ b/devtools/client/netmonitor/src/components/stack-trace-panel.js
@@ -9,17 +9,17 @@ const {
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 const { viewSourceInDebugger } = require("../connector/index");
 
 const { div } = DOM;
 
 // Components
-const StackTrace = createFactory(require("devtools/client/shared/components/stack-trace"));
+const StackTrace = createFactory(require("devtools/client/shared/components/StackTrace"));
 
 function StackTracePanel({
   openLink,
   request,
   sourceMapService,
 }) {
   let { stacktrace } = request.cause;
 
--- a/devtools/client/netmonitor/src/components/tabbox-panel.js
+++ b/devtools/client/netmonitor/src/components/tabbox-panel.js
@@ -8,18 +8,18 @@ const {
   createFactory,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { L10N } = require("../utils/l10n");
 const { PANELS } = require("../constants");
 
 // Components
-const Tabbar = createFactory(require("devtools/client/shared/components/tabs/tabbar"));
-const TabPanel = createFactory(require("devtools/client/shared/components/tabs/tabs").TabPanel);
+const Tabbar = createFactory(require("devtools/client/shared/components/tabs/TabBar"));
+const TabPanel = createFactory(require("devtools/client/shared/components/tabs/Tabs").TabPanel);
 const CookiesPanel = createFactory(require("./cookies-panel"));
 const HeadersPanel = createFactory(require("./headers-panel"));
 const ParamsPanel = createFactory(require("./params-panel"));
 const ResponsePanel = createFactory(require("./response-panel"));
 const SecurityPanel = createFactory(require("./security-panel"));
 const StackTracePanel = createFactory(require("./stack-trace-panel"));
 const TimingsPanel = createFactory(require("./timings-panel"));
 
--- a/devtools/client/netmonitor/src/components/toolbar.js
+++ b/devtools/client/netmonitor/src/components/toolbar.js
@@ -20,17 +20,17 @@ const {
   getTypeFilteredRequests,
   isNetworkDetailsToggleButtonDisabled,
 } = require("../selectors/index");
 
 const { autocompleteProvider } = require("../utils/filter-autocomplete-provider");
 const { L10N } = require("../utils/l10n");
 
 // Components
-const SearchBox = createFactory(require("devtools/client/shared/components/search-box"));
+const SearchBox = createFactory(require("devtools/client/shared/components/SearchBox"));
 
 const { button, div, input, label, span } = DOM;
 
 const COLLPASE_DETAILS_PANE = L10N.getStr("collapseDetailsPane");
 const EXPAND_DETAILS_PANE = L10N.getStr("expandDetailsPane");
 const SEARCH_KEY_SHORTCUT = L10N.getStr("netmonitor.toolbar.filterFreetext.key");
 const SEARCH_PLACE_HOLDER = L10N.getStr("netmonitor.toolbar.filterFreetext.label");
 const TOOLBAR_CLEAR = L10N.getStr("netmonitor.toolbar.clear");
--- a/devtools/client/performance/components/jit-optimizations-item.js
+++ b/devtools/client/performance/components/jit-optimizations-item.js
@@ -4,17 +4,17 @@
 "use strict";
 
 const { LocalizationHelper } = require("devtools/shared/l10n");
 const STRINGS_URI = "devtools/client/locales/jit-optimizations.properties";
 const L10N = new LocalizationHelper(STRINGS_URI);
 
 const {PluralForm} = require("devtools/shared/plural-form");
 const { DOM: dom, PropTypes, createClass, createFactory } = require("devtools/client/shared/vendor/react");
-const Frame = createFactory(require("devtools/client/shared/components/frame"));
+const Frame = createFactory(require("devtools/client/shared/components/Frame"));
 const PROPNAME_MAX_LENGTH = 4;
 // If TREE_ROW_HEIGHT changes, be sure to change `var(--jit-tree-row-height)`
 // in `devtools/client/themes/jit-optimizations.css`
 const TREE_ROW_HEIGHT = 14;
 
 const OPTIMIZATION_ITEM_TYPES = ["site", "attempts", "types", "attempt", "type",
                                  "observedtype"];
 
--- a/devtools/client/performance/components/jit-optimizations.js
+++ b/devtools/client/performance/components/jit-optimizations.js
@@ -4,19 +4,19 @@
 "use strict";
 
 const { LocalizationHelper } = require("devtools/shared/l10n");
 const STRINGS_URI = "devtools/client/locales/jit-optimizations.properties";
 const L10N = new LocalizationHelper(STRINGS_URI);
 
 const { assert } = require("devtools/shared/DevToolsUtils");
 const { DOM: dom, createClass, createFactory, PropTypes } = require("devtools/client/shared/vendor/react");
-const Tree = createFactory(require("../../shared/components/tree"));
+const Tree = createFactory(require("../../shared/components/Tree"));
 const OptimizationsItem = createFactory(require("./jit-optimizations-item"));
-const FrameView = createFactory(require("../../shared/components/frame"));
+const FrameView = createFactory(require("../../shared/components/Frame"));
 const JIT_TITLE = L10N.getStr("jit.title");
 // If TREE_ROW_HEIGHT changes, be sure to change `var(--jit-tree-row-height)`
 // in `devtools/client/themes/jit-optimizations.css`
 const TREE_ROW_HEIGHT = 14;
 
 /* eslint-disable no-unused-vars */
 /**
  * TODO - Re-enable this eslint rule. The JIT tool is a work in progress, and isn't fully
--- a/devtools/client/performance/components/waterfall-tree.js
+++ b/devtools/client/performance/components/waterfall-tree.js
@@ -1,15 +1,15 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 const { createClass, createFactory, PropTypes } = require("devtools/client/shared/vendor/react");
-const Tree = createFactory(require("devtools/client/shared/components/tree"));
+const Tree = createFactory(require("devtools/client/shared/components/Tree"));
 const WaterfallTreeRow = createFactory(require("./waterfall-tree-row"));
 
 // Keep in sync with var(--waterfall-tree-row-height) in performance.css
 const WATERFALL_TREE_ROW_HEIGHT = 15; // px
 
 /**
  * Checks if a given marker is in the specified time range.
  *
rename from devtools/client/shared/components/autocomplete-popup.js
rename to devtools/client/shared/components/AutoCompletePopup.js
rename from devtools/client/shared/components/frame.js
rename to devtools/client/shared/components/Frame.js
rename from devtools/client/shared/components/h-split-box.js
rename to devtools/client/shared/components/HSplitBox.js
rename from devtools/client/shared/components/notification-box.css
rename to devtools/client/shared/components/NotificationBox.css
rename from devtools/client/shared/components/notification-box.js
rename to devtools/client/shared/components/NotificationBox.js
rename from devtools/client/shared/components/search-box.js
rename to devtools/client/shared/components/SearchBox.js
--- a/devtools/client/shared/components/search-box.js
+++ b/devtools/client/shared/components/SearchBox.js
@@ -3,17 +3,17 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* global window */
 
 "use strict";
 
 const { DOM: dom, createClass, PropTypes, createFactory } = require("devtools/client/shared/vendor/react");
 const KeyShortcuts = require("devtools/client/shared/key-shortcuts");
-const AutocompletePopup = createFactory(require("devtools/client/shared/components/autocomplete-popup"));
+const AutocompletePopup = createFactory(require("devtools/client/shared/components/AutoCompletePopup"));
 
 /**
  * A generic search box component for use across devtools
  */
 module.exports = createClass({
   displayName: "SearchBox",
 
   propTypes: {
rename from devtools/client/shared/components/sidebar-toggle.css
rename to devtools/client/shared/components/SidebarToggle.css
rename from devtools/client/shared/components/sidebar-toggle.js
rename to devtools/client/shared/components/SidebarToggle.js
rename from devtools/client/shared/components/stack-trace.js
rename to devtools/client/shared/components/StackTrace.js
--- a/devtools/client/shared/components/stack-trace.js
+++ b/devtools/client/shared/components/StackTrace.js
@@ -2,17 +2,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const React = require("devtools/client/shared/vendor/react");
 const { DOM: dom, createClass, createFactory, PropTypes } = React;
 const { LocalizationHelper } = require("devtools/shared/l10n");
-const Frame = createFactory(require("./frame"));
+const Frame = createFactory(require("./Frame"));
 
 const l10n = new LocalizationHelper("devtools/client/locales/webconsole.properties");
 
 const AsyncFrame = createFactory(createClass({
   displayName: "AsyncFrame",
 
   propTypes: {
     asyncCause: PropTypes.string.isRequired
rename from devtools/client/shared/components/tree.js
rename to devtools/client/shared/components/Tree.js
--- a/devtools/client/shared/components/moz.build
+++ b/devtools/client/shared/components/moz.build
@@ -7,22 +7,22 @@
 DIRS += [
     'reps',
     'splitter',
     'tabs',
     'tree'
 ]
 
 DevToolsModules(
-    'autocomplete-popup.js',
-    'frame.js',
-    'h-split-box.js',
-    'notification-box.css',
-    'notification-box.js',
-    'search-box.js',
-    'sidebar-toggle.css',
-    'sidebar-toggle.js',
-    'stack-trace.js',
-    'tree.js',
+    'AutoCompletePopup.js',
+    'Frame.js',
+    'HSplitBox.js',
+    'NotificationBox.css',
+    'NotificationBox.js',
+    'SearchBox.js',
+    'SidebarToggle.css',
+    'SidebarToggle.js',
+    'StackTrace.js',
+    'Tree.js',
 )
 
 MOCHITEST_CHROME_MANIFESTS += ['test/mochitest/chrome.ini']
 BROWSER_CHROME_MANIFESTS += ['test/browser/browser.ini']
rename from devtools/client/shared/components/splitter/draggable.js
rename to devtools/client/shared/components/splitter/Draggable.js
rename from devtools/client/shared/components/splitter/split-box.css
rename to devtools/client/shared/components/splitter/SplitBox.css
rename from devtools/client/shared/components/splitter/split-box.js
rename to devtools/client/shared/components/splitter/SplitBox.js
--- a/devtools/client/shared/components/splitter/split-box.js
+++ b/devtools/client/shared/components/splitter/SplitBox.js
@@ -1,17 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const React = require("devtools/client/shared/vendor/react");
 const ReactDOM = require("devtools/client/shared/vendor/react-dom");
-const Draggable = React.createFactory(require("devtools/client/shared/components/splitter/draggable"));
+const Draggable = React.createFactory(require("devtools/client/shared/components/splitter/Draggable"));
 const { DOM: dom, PropTypes } = React;
 
 /**
  * This component represents a Splitter. The splitter supports vertical
  * as well as horizontal mode.
  */
 const SplitBox = React.createClass({
   displayName: "SplitBox",
--- a/devtools/client/shared/components/splitter/moz.build
+++ b/devtools/client/shared/components/splitter/moz.build
@@ -1,11 +1,11 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
-    'draggable.js',
-    'split-box.css',
-    'split-box.js',
+    'Draggable.js',
+    'SplitBox.css',
+    'SplitBox.js',
 )
rename from devtools/client/shared/components/tabs/tabbar.css
rename to devtools/client/shared/components/tabs/TabBar.css
rename from devtools/client/shared/components/tabs/tabbar.js
rename to devtools/client/shared/components/tabs/TabBar.js
--- a/devtools/client/shared/components/tabs/tabbar.js
+++ b/devtools/client/shared/components/tabs/TabBar.js
@@ -4,17 +4,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* eslint-env browser */
 
 "use strict";
 
 const { DOM, createClass, PropTypes, createFactory } = require("devtools/client/shared/vendor/react");
-const Tabs = createFactory(require("devtools/client/shared/components/tabs/tabs").Tabs);
+const Tabs = createFactory(require("devtools/client/shared/components/tabs/Tabs").Tabs);
 
 const Menu = require("devtools/client/framework/menu");
 const MenuItem = require("devtools/client/framework/menu-item");
 
 // Shortcuts
 const { div } = DOM;
 
 /**
rename from devtools/client/shared/components/tabs/tabs.css
rename to devtools/client/shared/components/tabs/Tabs.css
rename from devtools/client/shared/components/tabs/tabs.js
rename to devtools/client/shared/components/tabs/Tabs.js
--- a/devtools/client/shared/components/tabs/moz.build
+++ b/devtools/client/shared/components/tabs/moz.build
@@ -1,12 +1,12 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
-    'tabbar.css',
-    'tabbar.js',
-    'tabs.css',
-    'tabs.js',
+    'TabBar.css',
+    'TabBar.js',
+    'Tabs.css',
+    'Tabs.js',
 )
--- a/devtools/client/shared/components/test/mochitest/test_HSplitBox_01.html
+++ b/devtools/client/shared/components/test/mochitest/test_HSplitBox_01.html
@@ -30,17 +30,17 @@ function aboutEq(a, b) {
   return Math.abs(a - b) < FUDGE_FACTOR;
 }
 
 window.onload = Task.async(function* () {
   try {
     const React = browserRequire("devtools/client/shared/vendor/react");
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
 
-    let HSplitBox = React.createFactory(browserRequire("devtools/client/shared/components/h-split-box"));
+    let HSplitBox = React.createFactory(browserRequire("devtools/client/shared/components/HSplitBox"));
     ok(HSplitBox, "Should get HSplitBox");
 
     const newSizes = [];
 
     function renderBox(props) {
       const boxProps = Object.assign({
         start: "hello!",
         end: "world!",
--- a/devtools/client/shared/components/test/mochitest/test_frame_01.html
+++ b/devtools/client/shared/components/test/mochitest/test_frame_01.html
@@ -16,17 +16,17 @@ with optional columns, unknown and non-U
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     let React = browserRequire("devtools/client/shared/vendor/react");
-    let Frame = React.createFactory(browserRequire("devtools/client/shared/components/frame"));
+    let Frame = React.createFactory(browserRequire("devtools/client/shared/components/Frame"));
     ok(Frame, "Should get Frame");
 
     // Check when there's a column
     yield checkFrameComponent({
       frame: {
         source: "http://myfile.com/mahscripts.js",
         line: 55,
         column: 10,
--- a/devtools/client/shared/components/test/mochitest/test_frame_02.html
+++ b/devtools/client/shared/components/test/mochitest/test_frame_02.html
@@ -16,17 +16,17 @@ Test that the frame component reacts to 
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     const Services = browserRequire("Services");
     let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     let React = browserRequire("devtools/client/shared/vendor/react");
-    let Frame = React.createFactory(browserRequire("devtools/client/shared/components/frame"));
+    let Frame = React.createFactory(browserRequire("devtools/client/shared/components/Frame"));
 
     const resolvedLocation = {
       sourceId: "whatever",
       line: 23,
       sourceUrl: "https://bugzilla.mozilla.org/original.js",
     };
     let mockSourceMapService = {
       _update: function () {
--- a/devtools/client/shared/components/test/mochitest/test_notification_box_01.html
+++ b/devtools/client/shared/components/test/mochitest/test_notification_box_01.html
@@ -19,17 +19,17 @@ Test for Notification Box. The test is c
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     let React = browserRequire("devtools/client/shared/vendor/react");
-    let { NotificationBox, PriorityLevels } = browserRequire("devtools/client/shared/components/notification-box");
+    let { NotificationBox, PriorityLevels } = browserRequire("devtools/client/shared/components/NotificationBox");
 
     const renderedBox = shallowRenderComponent(NotificationBox, {});
     is(renderedBox.type, "div", "NotificationBox is rendered as <div>");
 
     // Test rendering
     let boxElement = React.createElement(NotificationBox);
     let notificationBox = TestUtils.renderIntoDocument(boxElement);
     let notificationNode = ReactDOM.findDOMNode(notificationBox);
--- a/devtools/client/shared/components/test/mochitest/test_notification_box_02.html
+++ b/devtools/client/shared/components/test/mochitest/test_notification_box_02.html
@@ -16,17 +16,17 @@ Test for Notification Box. The test is c
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     let React = browserRequire("devtools/client/shared/vendor/react");
-    let { NotificationBox, PriorityLevels } = browserRequire("devtools/client/shared/components/notification-box");
+    let { NotificationBox, PriorityLevels } = browserRequire("devtools/client/shared/components/NotificationBox");
 
     // Test rendering
     let boxElement = React.createElement(NotificationBox);
     let notificationBox = TestUtils.renderIntoDocument(boxElement);
     let notificationNode = ReactDOM.findDOMNode(notificationBox);
 
     let callbackExecuted = false;
 
--- a/devtools/client/shared/components/test/mochitest/test_notification_box_03.html
+++ b/devtools/client/shared/components/test/mochitest/test_notification_box_03.html
@@ -16,17 +16,17 @@ Test for Notification Box. The test is c
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     let React = browserRequire("devtools/client/shared/vendor/react");
-    let { NotificationBox, PriorityLevels } = browserRequire("devtools/client/shared/components/notification-box");
+    let { NotificationBox, PriorityLevels } = browserRequire("devtools/client/shared/components/NotificationBox");
 
     // Test rendering
     let boxElement = React.createElement(NotificationBox);
     let notificationBox = TestUtils.renderIntoDocument(boxElement);
     let notificationNode = ReactDOM.findDOMNode(notificationBox);
 
     let buttonCallbackExecuted = false;
     var buttons = [{
--- a/devtools/client/shared/components/test/mochitest/test_searchbox-with-autocomplete.html
+++ b/devtools/client/shared/components/test/mochitest/test_searchbox-with-autocomplete.html
@@ -34,17 +34,17 @@ window.onload = async function () {
       let item = items[i];
       let ref = reference[i];
       is(item, ref, `Item ${i} in list is correct`);
     }
   }
 
   let React = browserRequire("devtools/client/shared/vendor/react");
   let SearchBox = React.createFactory(
-    browserRequire("devtools/client/shared/components/search-box")
+    browserRequire("devtools/client/shared/components/SearchBox")
   );
   const { component, $ } = await createComponentTest(SearchBox, {
     type: "search",
     autocompleteProvider: (filter) => {
       let baseList = [
         "foo",
         "BAR",
         "baZ",
--- a/devtools/client/shared/components/test/mochitest/test_searchbox.html
+++ b/devtools/client/shared/components/test/mochitest/test_searchbox.html
@@ -17,17 +17,17 @@ Test the searchbox component
 <body>
 <script src="head.js"></script>
 <script>
 /* import-globals-from head.js */
 "use strict";
 window.onload = function () {
   let React = browserRequire("devtools/client/shared/vendor/react");
   let SearchBox = React.createFactory(
-    browserRequire("devtools/client/shared/components/search-box")
+    browserRequire("devtools/client/shared/components/SearchBox")
   );
   ok(SearchBox, "Got the SearchBox factory");
 
   async function testSimpleSearchBox() {
     // Test initial state
     const { component, $ } = await createComponentTest(SearchBox, {
       type: "search",
       keyShortcut: "CmdOrCtrl+F",
--- a/devtools/client/shared/components/test/mochitest/test_sidebar_toggle.html
+++ b/devtools/client/shared/components/test/mochitest/test_sidebar_toggle.html
@@ -12,17 +12,17 @@ Test sidebar toggle button
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
 </head>
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
-  let SidebarToggle = browserRequire("devtools/client/shared/components/sidebar-toggle.js");
+  let SidebarToggle = browserRequire("devtools/client/shared/components/SidebarToggle.js");
 
   try {
     yield test();
   } catch(e) {
     ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
   } finally {
     SimpleTest.finish();
   }
--- a/devtools/client/shared/components/test/mochitest/test_stack-trace-source-maps.html
+++ b/devtools/client/shared/components/test/mochitest/test_stack-trace-source-maps.html
@@ -18,17 +18,17 @@ Test the rendering of a stack trace with
 <script>
 /* import-globals-from head.js */
 "use strict";
 
 window.onload = function () {
   let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
   let React = browserRequire("devtools/client/shared/vendor/react");
   let StackTrace = React.createFactory(
-    browserRequire("devtools/client/shared/components/stack-trace")
+    browserRequire("devtools/client/shared/components/StackTrace")
   );
   ok(StackTrace, "Got the StackTrace factory");
 
   add_task(function* () {
     let stacktrace = [
       {
         filename: "https://bugzilla.mozilla.org/bundle.js",
         lineNumber: 99,
--- a/devtools/client/shared/components/test/mochitest/test_stack-trace.html
+++ b/devtools/client/shared/components/test/mochitest/test_stack-trace.html
@@ -18,17 +18,17 @@ Test the rendering of a stack trace
 <script>
 /* import-globals-from head.js */
 "use strict";
 
 window.onload = function () {
   let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
   let React = browserRequire("devtools/client/shared/vendor/react");
   let StackTrace = React.createFactory(
-    browserRequire("devtools/client/shared/components/stack-trace")
+    browserRequire("devtools/client/shared/components/StackTrace")
   );
   ok(StackTrace, "Got the StackTrace factory");
 
   add_task(function* () {
     let stacktrace = [
       {
         filename: "http://myfile.com/mahscripts.js",
         lineNumber: 55,
--- a/devtools/client/shared/components/test/mochitest/test_tabs_accessibility.html
+++ b/devtools/client/shared/components/test/mochitest/test_tabs_accessibility.html
@@ -17,17 +17,17 @@ Test tabs accessibility.
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const React = browserRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
     const InspectorTabPanel = React.createFactory(browserRequire("devtools/client/inspector/components/InspectorTabPanel"));
-    const Tabbar = React.createFactory(browserRequire("devtools/client/shared/components/tabs/tabbar"));
+    const Tabbar = React.createFactory(browserRequire("devtools/client/shared/components/tabs/TabBar"));
     const tabbar = Tabbar();
     const tabbarReact = ReactDOM.render(tabbar, window.document.body);
     const tabbarEl = ReactDOM.findDOMNode(tabbarReact);
 
     // Setup for InspectorTabPanel
     const tabpanels = document.createElement("div");
     tabpanels.id = "tabpanels";
     document.body.appendChild(tabpanels);
--- a/devtools/client/shared/components/test/mochitest/test_tabs_menu.html
+++ b/devtools/client/shared/components/test/mochitest/test_tabs_menu.html
@@ -9,30 +9,30 @@ Test all-tabs menu.
 <head>
   <meta charset="utf-8">
   <title>Tabs component All-tabs menu test</title>
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/themes/variables.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/themes/common.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/themes/light-theme.css">
-  <link rel="stylesheet" type="text/css" href="resource://devtools/client/shared/components/tabs/tabs.css">
-  <link rel="stylesheet" type="text/css" href="resource://devtools/client/shared/components/tabs/tabbar.css">
+  <link rel="stylesheet" type="text/css" href="resource://devtools/client/shared/components/tabs/Tabs.css">
+  <link rel="stylesheet" type="text/css" href="resource://devtools/client/shared/components/tabs/TabBar.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/inspector/components/side-panel.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/inspector/components/InspectorTabPanel.css">
 </head>
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const React = browserRequire("devtools/client/shared/vendor/react");
-    const Tabbar = React.createFactory(browserRequire("devtools/client/shared/components/tabs/tabbar"));
+    const Tabbar = React.createFactory(browserRequire("devtools/client/shared/components/tabs/TabBar"));
 
     // Create container for the TabBar. Set smaller width
     // to ensure that tabs won't fit and the all-tabs menu
     // needs to appear.
     const tabBarBox = document.createElement("div");
     tabBarBox.style.width = "200px";
     tabBarBox.style.height = "200px";
     tabBarBox.style.border = "1px solid lightgray";
--- a/devtools/client/shared/components/test/mochitest/test_tree_01.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_01.html
@@ -16,17 +16,17 @@ depth.
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     let React = browserRequire("devtools/client/shared/vendor/react");
-    let Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
+    let Tree = React.createFactory(browserRequire("devtools/client/shared/components/Tree"));
 
     ok(React, "Should get React");
     ok(Tree, "Should get Tree");
 
     const t = Tree(TEST_TREE_INTERFACE);
     ok(t, "Should be able to create Tree instances");
 
     const tree = ReactDOM.render(t, window.document.body);
--- a/devtools/client/shared/components/test/mochitest/test_tree_02.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_02.html
@@ -15,17 +15,17 @@ Test that collapsed subtrees aren't rend
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     let React = browserRequire("devtools/client/shared/vendor/react");
-    let Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
+    let Tree = React.createFactory(browserRequire("devtools/client/shared/components/Tree"));
 
     const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
 
     isAccessibleTree(tree);
     TEST_TREE.expanded = new Set("MNO".split(""));
     yield forceRender(tree);
 
     isRenderedTree(document.body.textContent, [
--- a/devtools/client/shared/components/test/mochitest/test_tree_03.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_03.html
@@ -15,17 +15,17 @@ Test Tree's autoExpandDepth.
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     let React = browserRequire("devtools/client/shared/vendor/react");
-    let Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
+    let Tree = React.createFactory(browserRequire("devtools/client/shared/components/Tree"));
 
     const tree = ReactDOM.render(Tree(Object.assign({}, TEST_TREE_INTERFACE, {
       autoExpandDepth: 1
     })), window.document.body);
 
     isAccessibleTree(tree);
     isRenderedTree(document.body.textContent, [
       "A:false",
--- a/devtools/client/shared/components/test/mochitest/test_tree_04.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_04.html
@@ -24,17 +24,17 @@ window.onload = Task.async(function* () 
         bottom: document.querySelector(".tree > div:last-of-type").clientHeight,
       };
     }
 
     const ITEM_HEIGHT = 3;
 
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const React = browserRequire("devtools/client/shared/vendor/react");
-    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
+    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/Tree"));
 
     const tree = ReactDOM.render(
       Tree(Object.assign({}, TEST_TREE_INTERFACE, { itemHeight: ITEM_HEIGHT })),
       window.document.body);
 
     TEST_TREE.expanded = new Set("ABCDEFGHIJKLMNO".split(""));
 
     yield setState(tree, {
--- a/devtools/client/shared/components/test/mochitest/test_tree_05.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_05.html
@@ -17,17 +17,17 @@ Test focusing with the Tree component.
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const React = browserRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
-    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
+    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/Tree"));
 
     function renderTree(props) {
       const treeProps = Object.assign({},
         TEST_TREE_INTERFACE,
         { onFocus: x => renderTree({ focused: x }) },
         props
       );
       return ReactDOM.render(Tree(treeProps), window.document.body);
--- a/devtools/client/shared/components/test/mochitest/test_tree_06.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_06.html
@@ -16,17 +16,17 @@ Test keyboard navigation with the Tree c
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const React = browserRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
-    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
+    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/Tree"));
 
     function renderTree(props) {
       const treeProps = Object.assign({},
         TEST_TREE_INTERFACE,
         { onFocus: x => renderTree({ focused: x }) },
         props
       );
       return ReactDOM.render(Tree(treeProps), window.document.body);
--- a/devtools/client/shared/components/test/mochitest/test_tree_07.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_07.html
@@ -16,17 +16,17 @@ Test that arrows get the open attribute 
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const React = browserRequire("devtools/client/shared/vendor/react");
-    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
+    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/Tree"));
 
     const treeProps = Object.assign({}, TEST_TREE_INTERFACE, {
       renderItem: (item, depth, focused, arrow) => {
         return React.DOM.div(
           {
             id: item,
             style: { marginLeft: depth * 16 + "px" }
           },
--- a/devtools/client/shared/components/test/mochitest/test_tree_08.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_08.html
@@ -18,17 +18,17 @@ other inputs.
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const React = browserRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
-    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
+    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/Tree"));
 
     function renderTree(props) {
       const treeProps = Object.assign({},
         TEST_TREE_INTERFACE,
         { onFocus: x => renderTree({ focused: x }) },
         props
       );
       return ReactDOM.render(Tree(treeProps), window.document.body);
--- a/devtools/client/shared/components/test/mochitest/test_tree_09.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_09.html
@@ -17,17 +17,17 @@ Test that when an item in the Tree compo
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const React = browserRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
-    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
+    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/Tree"));
 
     let numberOfExpands = 0;
     let lastExpandedItem = null;
 
     let numberOfCollapses = 0;
     let lastCollapsedItem = null;
 
     function renderTree(props) {
--- a/devtools/client/shared/components/test/mochitest/test_tree_10.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_10.html
@@ -17,17 +17,17 @@ Test that when an item in the Tree compo
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const React = browserRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
-    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
+    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/Tree"));
 
     function renderTree(props) {
       const treeProps = Object.assign({},
         TEST_TREE_INTERFACE,
         { autoExpandDepth: 1 },
         props
       );
       return ReactDOM.render(Tree(treeProps), window.document.body);
--- a/devtools/client/shared/components/test/mochitest/test_tree_11.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_11.html
@@ -28,17 +28,17 @@ Test that when an item in the Tree compo
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const React = browserRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
-    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
+    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/Tree"));
 
     TEST_TREE.expanded = new Set("ABCDEFGHIJKLMNO".split(""));
 
     function renderTree(props) {
       const treeProps = Object.assign({},
         TEST_TREE_INTERFACE,
         {
           itemHeight: 10,
rename from devtools/client/shared/components/tree/label-cell.js
rename to devtools/client/shared/components/tree/LabelCell.js
rename from devtools/client/shared/components/tree/object-provider.js
rename to devtools/client/shared/components/tree/ObjectProvider.js
rename from devtools/client/shared/components/tree/tree-cell.js
rename to devtools/client/shared/components/tree/TreeCell.js
rename from devtools/client/shared/components/tree/tree-header.js
rename to devtools/client/shared/components/tree/TreeHeader.js
rename from devtools/client/shared/components/tree/tree-row.js
rename to devtools/client/shared/components/tree/TreeRow.js
--- a/devtools/client/shared/components/tree/tree-row.js
+++ b/devtools/client/shared/components/tree/TreeRow.js
@@ -7,18 +7,18 @@
 
 // Make this available to both AMD and CJS environments
 define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
   const ReactDOM = require("devtools/client/shared/vendor/react-dom");
 
   // Tree
-  const TreeCell = React.createFactory(require("./tree-cell"));
-  const LabelCell = React.createFactory(require("./label-cell"));
+  const TreeCell = React.createFactory(require("./TreeCell"));
+  const LabelCell = React.createFactory(require("./LabelCell"));
 
   // Scroll
   const { scrollIntoViewIfNeeded } = require("devtools/client/shared/scroll");
 
   // Shortcuts
   const { tr } = React.DOM;
   const PropTypes = React.PropTypes;
 
rename from devtools/client/shared/components/tree/tree-view.css
rename to devtools/client/shared/components/tree/TreeView.css
rename from devtools/client/shared/components/tree/tree-view.js
rename to devtools/client/shared/components/tree/TreeView.js
--- a/devtools/client/shared/components/tree/tree-view.js
+++ b/devtools/client/shared/components/tree/TreeView.js
@@ -6,19 +6,19 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
 define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
   // Reps
-  const { ObjectProvider } = require("./object-provider");
-  const TreeRow = React.createFactory(require("./tree-row"));
-  const TreeHeader = React.createFactory(require("./tree-header"));
+  const { ObjectProvider } = require("./ObjectProvider");
+  const TreeRow = React.createFactory(require("./TreeRow"));
+  const TreeHeader = React.createFactory(require("./TreeHeader"));
 
   // Shortcuts
   const DOM = React.DOM;
   const PropTypes = React.PropTypes;
 
   /**
    * This component represents a tree view with expandable/collapsible nodes.
    * The tree is rendered using <table> element where every node is represented
--- a/devtools/client/shared/components/tree/moz.build
+++ b/devtools/client/shared/components/tree/moz.build
@@ -1,14 +1,14 @@
 # vim: set filetype=python:
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
-    'label-cell.js',
-    'object-provider.js',
-    'tree-cell.js',
-    'tree-header.js',
-    'tree-row.js',
-    'tree-view.css',
-    'tree-view.js',
+    'LabelCell.js',
+    'ObjectProvider.js',
+    'TreeCell.js',
+    'TreeHeader.js',
+    'TreeRow.js',
+    'TreeView.css',
+    'TreeView.js',
 )
--- a/devtools/client/shared/react-utils.js
+++ b/devtools/client/shared/react-utils.js
@@ -9,17 +9,17 @@ define(function (require, exports, modul
   const React = require("devtools/client/shared/vendor/react");
 
   /**
    * Create React factories for given arguments.
    * Example:
    *   const {
    *     Tabs,
    *     TabPanel
-   *   } = createFactories(require("devtools/client/shared/components/tabs/tabs"));
+   *   } = createFactories(require("devtools/client/shared/components/tabs/Tabs"));
    */
   function createFactories(args) {
     let result = {};
     for (let p in args) {
       result[p] = React.createFactory(args[p]);
     }
     return result;
   }
--- a/devtools/client/storage/storage.xul
+++ b/devtools/client/storage/storage.xul
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/storage.css" type="text/css"?>
-<?xml-stylesheet href="resource://devtools/client/shared/components/sidebar-toggle.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/shared/components/SidebarToggle.css" type="text/css"?>
 
 <!DOCTYPE window [
   <!ENTITY % storageDTD SYSTEM "chrome://devtools/locale/storage.dtd">
   %storageDTD;
 ]>
 
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 
--- a/devtools/client/themes/components-frame.css
+++ b/devtools/client/themes/components-frame.css
@@ -1,16 +1,16 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /**
  * Frame Component
- * Styles for React component at `devtools/client/shared/components/frame.js`
+ * Styles for React component at `devtools/client/shared/components/Frame.js`
  */
 
 .frame-link {
   display: flex;
   justify-content: space-between;
   --frame-link-line-color: var(--theme-highlight-blue);
   --frame-link-source: var(--theme-highlight-purple);
 }
--- a/devtools/client/themes/components-h-split-box.css
+++ b/devtools/client/themes/components-h-split-box.css
@@ -1,16 +1,16 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /**
  * HSplitBox Component
- * Styles for React component at `devtools/client/shared/components/h-split-box.js`
+ * Styles for React component at `devtools/client/shared/components/HSplitBox.js`
  */
 
 .h-split-box,
 .h-split-box-pane {
   overflow: auto;
   margin: 0;
   padding: 0;
   width: 100%;
--- a/devtools/client/webconsole/local-dev/index.js
+++ b/devtools/client/webconsole/local-dev/index.js
@@ -21,18 +21,18 @@ try {
 
 EventEmitter.decorate(window);
 
 require("../../themes/widgets.css");
 require("../../themes/webconsole.css");
 require("../../themes/components-frame.css");
 require("../../themes/light-theme.css");
 require("../../shared/components/reps/reps.css");
-require("../../shared/components/tabs/tabs.css");
-require("../../shared/components/tabs/tabbar.css");
+require("../../shared/components/tabs/Tabs.css");
+require("../../shared/components/tabs/TabBar.css");
 require("../../netmonitor/src/assets/styles/netmonitor.css");
 
 pref("devtools.debugger.remote-timeout", 10000);
 pref("devtools.hud.loglimit", 10000);
 pref("devtools.webconsole.filter.error", true);
 pref("devtools.webconsole.filter.warn", true);
 pref("devtools.webconsole.filter.info", true);
 pref("devtools.webconsole.filter.log", true);
--- a/devtools/client/webconsole/net/components/net-info-body.js
+++ b/devtools/client/webconsole/net/components/net-info-body.js
@@ -1,16 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 const React = require("devtools/client/shared/vendor/react");
 const { createFactories } = require("devtools/client/shared/react-utils");
-const { Tabs, TabPanel } = createFactories(require("devtools/client/shared/components/tabs/tabs"));
+const { Tabs, TabPanel } = createFactories(require("devtools/client/shared/components/tabs/Tabs"));
 
 // Network
 const HeadersTab = React.createFactory(require("./headers-tab"));
 const ResponseTab = React.createFactory(require("./response-tab"));
 const ParamsTab = React.createFactory(require("./params-tab"));
 const CookiesTab = React.createFactory(require("./cookies-tab"));
 const PostTab = React.createFactory(require("./post-tab"));
 const StackTraceTab = React.createFactory(require("./stacktrace-tab"));
--- a/devtools/client/webconsole/net/components/post-tab.js
+++ b/devtools/client/webconsole/net/components/post-tab.js
@@ -1,16 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 const React = require("devtools/client/shared/vendor/react");
 
-const TreeView = React.createFactory(require("devtools/client/shared/components/tree/tree-view"));
+const TreeView = React.createFactory(require("devtools/client/shared/components/tree/TreeView"));
 
 const { REPS, MODE, parseURLEncodedText } = require("devtools/client/shared/components/reps/reps");
 const { Rep } = REPS;
 
 // Network
 const NetInfoParams = React.createFactory(require("./net-info-params"));
 const NetInfoGroupList = React.createFactory(require("./net-info-group-list"));
 const Spinner = React.createFactory(require("./spinner"));
--- a/devtools/client/webconsole/net/components/response-tab.js
+++ b/devtools/client/webconsole/net/components/response-tab.js
@@ -1,17 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 const React = require("devtools/client/shared/vendor/react");
 
 // Reps
-const TreeView = React.createFactory(require("devtools/client/shared/components/tree/tree-view"));
+const TreeView = React.createFactory(require("devtools/client/shared/components/tree/TreeView"));
 const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
 const { Rep } = REPS;
 
 // Network
 const SizeLimit = React.createFactory(require("./size-limit"));
 const NetInfoGroupList = React.createFactory(require("./net-info-group-list"));
 const Spinner = React.createFactory(require("./spinner"));
 const Json = require("../utils/json");
--- a/devtools/client/webconsole/net/components/stacktrace-tab.js
+++ b/devtools/client/webconsole/net/components/stacktrace-tab.js
@@ -1,15 +1,15 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 const { PropTypes, createClass, createFactory } = require("devtools/client/shared/vendor/react");
-const StackTrace = createFactory(require("devtools/client/shared/components/stack-trace"));
+const StackTrace = createFactory(require("devtools/client/shared/components/StackTrace"));
 
 const StackTraceTab = createClass({
   displayName: "StackTraceTab",
 
   propTypes: {
     data: PropTypes.object.isRequired,
     actions: PropTypes.shape({
       onViewSourceInDebugger: PropTypes.func.isRequired
--- a/devtools/client/webconsole/net/main.js
+++ b/devtools/client/webconsole/net/main.js
@@ -18,17 +18,17 @@ const { loadSheet } = require("devtools/
 
 // Localization
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const L10N = new LocalizationHelper("devtools/client/locales/netmonitor.properties");
 
 // Stylesheets
 var styleSheets = [
   "resource://devtools/client/jsonview/css/toolbar.css",
-  "resource://devtools/client/shared/components/tree/tree-view.css",
+  "resource://devtools/client/shared/components/tree/TreeView.css",
   "resource://devtools/client/shared/components/reps.css",
   "resource://devtools/client/webconsole/net/net-request.css",
   "resource://devtools/client/webconsole/net/components/size-limit.css",
   "resource://devtools/client/webconsole/net/components/net-info-body.css",
   "resource://devtools/client/webconsole/net/components/net-info-group.css",
   "resource://devtools/client/webconsole/net/components/net-info-params.css",
   "resource://devtools/client/webconsole/net/components/response-tab.css"
 ];
--- a/devtools/client/webconsole/new-console-output/components/message.js
+++ b/devtools/client/webconsole/new-console-output/components/message.js
@@ -15,18 +15,18 @@ const {
 } = require("devtools/client/shared/vendor/react");
 const { l10n } = require("devtools/client/webconsole/new-console-output/utils/messages");
 const actions = require("devtools/client/webconsole/new-console-output/actions/index");
 const {MESSAGE_SOURCE} = require("devtools/client/webconsole/new-console-output/constants");
 const CollapseButton = require("devtools/client/webconsole/new-console-output/components/collapse-button");
 const MessageIndent = require("devtools/client/webconsole/new-console-output/components/message-indent").MessageIndent;
 const MessageIcon = require("devtools/client/webconsole/new-console-output/components/message-icon");
 const MessageRepeat = require("devtools/client/webconsole/new-console-output/components/message-repeat");
-const FrameView = createFactory(require("devtools/client/shared/components/frame"));
-const StackTrace = createFactory(require("devtools/client/shared/components/stack-trace"));
+const FrameView = createFactory(require("devtools/client/shared/components/Frame"));
+const StackTrace = createFactory(require("devtools/client/shared/components/StackTrace"));
 
 const Message = createClass({
   displayName: "Message",
 
   propTypes: {
     open: PropTypes.bool,
     collapsible: PropTypes.bool,
     collapseTitle: PropTypes.string,
--- a/devtools/client/webconsole/webconsole.js
+++ b/devtools/client/webconsole/webconsole.js
@@ -229,18 +229,18 @@ function WebConsoleFrame(webConsoleOwner
     window: this.window,
     useOnlyShared: true,
     // The toolbox isn't available for the browser console.
     commonLibRequire: toolbox ? toolbox.browserRequire : null,
   });
 
   this.React = require("devtools/client/shared/vendor/react");
   this.ReactDOM = require("devtools/client/shared/vendor/react-dom");
-  this.FrameView = this.React.createFactory(require("devtools/client/shared/components/frame"));
-  this.StackTraceView = this.React.createFactory(require("devtools/client/shared/components/stack-trace"));
+  this.FrameView = this.React.createFactory(require("devtools/client/shared/components/Frame"));
+  this.StackTraceView = this.React.createFactory(require("devtools/client/shared/components/StackTrace"));
 
   this._telemetry = new Telemetry();
 
   EventEmitter.decorate(this);
 }
 exports.WebConsoleFrame = WebConsoleFrame;
 
 WebConsoleFrame.prototype = {
--- a/devtools/client/webconsole/webconsole.xhtml
+++ b/devtools/client/webconsole/webconsole.xhtml
@@ -6,18 +6,18 @@
 <html xmlns="http://www.w3.org/1999/xhtml" dir="">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <link rel="stylesheet" href="chrome://devtools/skin/widgets.css"/>
     <link rel="stylesheet" href="resource://devtools/client/themes/light-theme.css"/>
     <link rel="stylesheet" href="chrome://devtools/skin/webconsole.css"/>
     <link rel="stylesheet" href="chrome://devtools/skin/components-frame.css"/>
     <link rel="stylesheet" href="resource://devtools/client/shared/components/reps/reps.css"/>
-    <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/tabs.css"/>
-    <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/tabbar.css"/>
+    <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/Tabs.css"/>
+    <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/TabBar.css"/>
     <link rel="stylesheet" href="chrome://devtools/content/netmonitor/src/assets/styles/netmonitor.css"/>
 
     <script src="chrome://devtools/content/shared/theme-switching.js"></script>
     <script type="application/javascript"
             src="resource://devtools/client/webconsole/new-console-output/main.js"></script>
   </head>
   <body class="theme-sidebar" role="application">
     <div id="app-wrapper" class="theme-body">