Added separate tabs for apps / extensions in dev_tools app.

chrome/browser/resources/apps_debugger/css/items.css

Index: chrome/browser/resources/apps_debugger/css/items.css
diff --git a/chrome/browser/resources/apps_debugger/css/items.css b/chrome/browser/resources/apps_debugger/css/items.css
index c86f3b9f5c9170084ac36f78bff8fa882f30db82..18d92048c11c2036cc8db3a54ad9c9af5266ba2f 100644
--- a/chrome/browser/resources/apps_debugger/css/items.css
+++ b/chrome/browser/resources/apps_debugger/css/items.css
@@ -12,7 +12,7 @@ html {
 
 hr {
   color: rgb(115, 111, 110);
-  margin: 10px 0 10px;
+  margin: 15px 0 15px;

[Dan Beam, 2013/03/20 19:05:30]

margin: 15px 0;

[Gaurav, 2013/03/29 21:14:26]

Done.

 }
 
 /* Contents */
@@ -22,18 +22,18 @@ hr {
   max-width: 800px;
 }
 
-#no-extensions-message {
+#no-extensions-message,
+#no-apps-message {
   font-weight: bold;
 }
 
-.empty-extension-list {
+.empty-item-list {
   height: 3em;
 }
 
 #developer-controls {
-  bottom: 15px;
+  margin-top: 15px;
   max-width: 750px;
-  top: 15px;
 }
 
 #search {
@@ -44,18 +44,21 @@ html[dir='rtl'] #search {
   float: left;
 }
 
-#no-extensions {
+#no-extensions,
+#no-apps {
   margin: 10px 10px;
 }
 
 .loading #no-extensions,
-#extension-settings-list:not(.empty-extension-list) ~ #no-extensions,
-.empty-extension-list {
+.loading #no-apps,
+#extension-settings-list:not(.empty-item-list) ~ #no-extensions,
+#app-settings-list:not(.empty-item-list) ~#no-apps,

[Dan Beam, 2013/03/20 19:05:30]

s/~#/~ #/

[Gaurav, 2013/03/29 21:14:26]

Done.

+.empty-item-list {
   display: none;
 }
 
 .extension-list-item-wrapper {
-  margin: 23px 0;
+  margin: 30px 0;
 }
 
 .extension-list-item {
@@ -112,7 +115,7 @@ html[dir='rtl'] .extension-list-item {
 }
 
 .active-views {
-  margin: 4px;
+  margin-top: 15px;
 }
 
 .site-link {
@@ -130,6 +133,7 @@ html[dir='rtl'] .enable-control {
 
 .file-access-control,
 .incognito-control {
+  left: 0;

[Dan Beam, 2013/03/20 19:05:30]

I'm confused, have you tried this in RTL?  It seems like if you want it to stick
to the leading edge (left in LTR, right in RTL) you can remove the
html[dir='rtl'] block below and just say:

  left: 0;
  right: 0;

(both in the same rule) and left will apply in LTR and right will apply in RTL.

   position: relative;
   right: 0.5em;
 }
@@ -164,6 +168,10 @@ html[dir='rtl'] .incognito-control {
   word-wrap: break-word;
 }
 
+.load-path {
+  margin-top: 15px;
+}
+
 .terminated-reload-link {
   -webkit-margin-end: 2.5em;
   padding-top: 7px;
@@ -179,6 +187,14 @@ html[dir='rtl'] .incognito-control {
   -webkit-margin-start: 0;
 }
 
+#tabs {
+  background: none;
+}
+
+#tabpanels {
+  box-shadow: 0 0 0;

[Dan Beam, 2013/03/20 19:05:30]

why isn't this:

  box-shadow: none;

also, #tab-panels?

[Gaurav, 2013/03/29 21:14:26]

Done.

+}
+
 /* Overlays */
 
 #overlay {
@@ -230,6 +246,10 @@ html[dir='rtl'] #extension-settings .trash {
   display: none;
 }
 
+.optional-controls {
+  margin-top: 15px;
+}
+
 a {
   color: rgb(17, 85, 204);
   text-decoration: underline;