Added separate tabs for apps / extensions in dev_tools app.

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

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 body,
 html {
   color: rgb(48, 57, 66);
   font-family: Arial, sans-serif;
   font-size: 90%;
   overflow: visible;
 }
 
 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 */
 
 #extension-settings {
   margin: 30px;
   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 {
   float: right;
 }
 
 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 {
   /* Set in ItemsList.createNode_(). */
   -webkit-background-size: 3em 3em;
   background-repeat: no-repeat;
   display: -webkit-box;
   min-height: 4em;
 }
 
@@ skipping 36 matching lines @@
 }
 
 .extension-description,
 .extension-list-item-wrapper.inactive-extension .extension-details,
 .location-text,
 .enable-checkbox input:disabled + .enable-checkbox-text {
   color: rgb(151, 156, 160);
 }
 
 .active-views {
-  margin: 4px;
+  margin-top: 15px;
 }
 
 .site-link {
   font-size: 90%;
 }
 
 .enable-controls {
   float: right;
   position: relative;
 }
 
 html[dir='rtl'] .enable-control {
   float: left;
 }
 
 .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;
 }
 
 html[dir='rtl'] .file-access-control,
 html[dir='rtl'] .incognito-control {
   left: 0.5em;
   right: auto;
 }
 
@@ skipping 14 matching lines @@
 .extension-list-item-wrapper.inactive-extension .enabled-text,
 .extension-list-item-wrapper:not(.inactive-extension) .enable-text,
 .extension-list-item-wrapper.inactive-extension .optional-controls {
   display: none;
 }
 
 .load-path > span {
   word-wrap: break-word;
 }
 
+.load-path {
+  margin-top: 15px;
+}
+
 .terminated-reload-link {
   -webkit-margin-end: 2.5em;
   padding-top: 7px;
 }
 
 .extension-list-item a {
   -webkit-margin-end: 0.5em;
   -webkit-margin-start: 0;
   display: inline-block;
 }
 
 .install-warnings a {
   -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 {
   z-index: 5;
 }
 
 #overlay .page:not(.showing) {
   display: none;
 }
 
@@ skipping 31 matching lines @@
 }
 
 .extension-list-item-wrapper.may-not-disable .trash {
   visibility: hidden;
 }
 
 .may-not-disable .optional-controls .optional-controls-disableable {
   display: none;
 }
 
+.optional-controls {
+  margin-top: 15px;
+}
+
 a {
   color: rgb(17, 85, 204);
   text-decoration: underline;
 }
 
 a:active {
   color: rgb(5, 37, 119);
 }