[Source Tree] show first root

[jasonLaster]

One nice thing that chrome does is only expand the first source tree root. This is nice because, they do some work to make sure it is often the most helpful and it helps focus the user on where to take an action.

Steps to reproduce

1. debug google.com

Patch

This patch should be everything we need.

diff --git a/src/components/SourcesTree.js b/src/components/SourcesTree.js
index fe5ce95..03e24cd 100644
--- a/src/components/SourcesTree.js
+++ b/src/components/SourcesTree.js
@@ -135,7 +135,9 @@ let SourcesTree = React.createClass({
       getRoots: () => sourceTree.contents,
       getKey: (item, i) => item.path,
       itemHeight: 30,
+      autoExpand: 0,
       autoExpandDepth: 1,
+      autoExpandAll: false,
       onFocus: this.focusItem,
       renderItem: this.renderItem
     });

Chrome

Firefox

[Dalimil]

So first, the devtools-sham-modules tree component with autoExpand(roots[0], 0); will throw an undefined error for an empty roots array so that had to be fixed. I wasn't quite sure if this should be filed in Bugzilla for the whole devtools project or if this code is local only to the debugger.html project...
Then I was trying to implement a source tree ordering that would be similar to the one used in Chrome - they keep the root domain on top and then only alphabetically sort the rest. (see the attached screenshot - www.mozilla.org needs to go before www.google-analytics even though g is before m ).

I just pinned the first group of sources to the top - which in most cases happens to be the domain corresponding to the opened tab but I think to implement this properly you'd need to change the way that reducers mergeIn a new source on ADD_SOURCE action or somehow keep track of the tab URL so that it can be compared later...

[jasonLaster]

This was done in #1371