- Loosen a bit the HTML hierarchy required for Tabs to work.

- Improved UX of the dev tools.
    a/ "Load unpacked", "Pack" and "Update now" buttons have been moved to the top
    b/ The header is now sticky like in chrome://extensions
    c/ The list of extensions/apps is centered when the window is expanded

BUG=242747
BUG=242743

Review URL: https://chromiumcodereview.appspot.com/15389003

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@202759 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/extensions/api/developer_private/developer_private_api.cc

@@ -49,6 +49,7 @@
 #include "grit/generated_resources.h"
 #include "net/base/net_util.h"
 #include "ui/base/l10n/l10n_util.h"
+#include "ui/webui/web_ui_util.h"
 #include "webkit/blob/shareable_file_reference.h"
 #include "webkit/browser/fileapi/file_system_context.h"
 #include "webkit/browser/fileapi/file_system_operation.h"
@@ -1098,6 +1099,8 @@ bool DeveloperPrivateGetStringsFunction::RunImpl() {
   DictionaryValue* dict = new DictionaryValue();
   SetResult(dict);
 
+  webui::SetFontAndTextDirection(dict);
+
   #define   SET_STRING(id, idr) \
     dict->SetString(id, l10n_util::GetStringUTF16(idr))
   SET_STRING("extensionSettings", IDS_MANAGE_EXTENSIONS_SETTING_WINDOWS_TITLE);

chrome/browser/resources/apps_debugger/background.js

@@ -8,8 +8,11 @@ chrome.app.runtime.onLaunched.addListener(function() {
     mainWindow.focus();
   } else {
     chrome.app.window.create('main.html', {
-      width: 768,
-      height: 1024,
+      id: 'apps_debugger',
+      minHeight: 600,
+      minWidth: 800,
+      height: 600,
+      width: 800,
     }, function(win) {
       mainWindow = win;
     });

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

@@ -17,40 +17,117 @@ hr {
 
 /* Override the visual style of tabs. */
 
+#tabs-header-container {
+  border-bottom: 1px solid #e0e0e0;
+  height: calc(100% - 53px);
+}
+
+#tabs {
+  border-bottom: none;
+  margin: 5px auto 0;
+  padding: 0 5px;
+  width: 800px;
+}
+
 tabs tab {
+  border-color: #e0e0e0;
   min-width: 150px;
   padding: 5px 20px;
 }
 
-/* Contents */
+tabs > [selected] {
+  background: white;
+  border-color: #e0e0e0;
+}
 
-#extension-settings {
-  margin: 30px;
-  max-width: 800px;
+html.focus-outline-visible tabs:focus > [selected] {
+  background: white;
+  border-color: rgb(160, 160, 255);
+  outline: none;
 }
 
-#no-extensions-message,
-#no-apps-message {
-  font-weight: bold;
+tabs > :not([selected]) {
+  background: rgba(0, 0, 0, 0.02);
+  border-color: #e0e0e0;
 }
 
-.empty-item-list {
-  height: 3em;
+tabs > :not([selected]):hover {
+  background: rgba(255, 255, 255, 0.9);
+}
+
+tabpanels {
+  height: 100%;
+  padding: 0;
+  width: 100%;
+}
+
+tabpanel {
+  margin: 0 auto;
+  padding-top: 80px;
+  width: 800px;
+}
+
+/* Header */
+
+#header {
+  background-color: rgba(255, 255, 255, 0.9);
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1;
 }
 
 #developer-controls {
-  margin-top: 15px;
-  max-width: 750px;
+  margin-top: 0;
+  max-width: none;
+  padding: 3px 10px 8px;
+  width: calc(100% - 20px);
+}
+
+#header-title {
+  -webkit-margin-start: 50px;
+  display: inline-block;
+  font-size: 1.2em;
+  position: relative;
+  top: 3px;
+}
+
+#header-bottom-gradient {
+  background: linear-gradient(to bottom, white, rgba(255, 255, 255, 0));
+  height: 30px;
+  position: fixed;
+  top: 79px;
+  width: 100%;
 }
 
 #search {
   float: right;
+  margin-top: 7px;
+  padding: 4px;
+  width: 200px;
 }
 
 html[dir='rtl'] #search {
   float: left;
 }
 
+/* Contents */
+
+#extension-settings {
+  margin: 0;
+  max-width: 100%;
+  padding: 10px 0;
+}
+
+#no-extensions-message,
+#no-apps-message {
+  font-weight: bold;
+}
+
+.empty-item-list {
+  height: 3em;
+}
+
 #no-extensions,
 #no-apps {
   margin: 10px 10px;

chrome/browser/resources/apps_debugger/js/main_scripts.js

@@ -11,7 +11,8 @@
 // src="../../../../../ui/webui/resources/js/cr/ui/focus_outline_manager.js" />
 //<include src="../../../../../ui/webui/resources/js/cr/ui/overlay.js" />
 //<include src="../../../../../ui/webui/resources/js/cr/ui/tabs.js" />
-//<include src="../../../../../ui/webui/resources/js/i18n_template2.js" />
+//<include
+// src="../../../../../ui/webui/resources/js/i18n_template_no_process.js" />
 //<include src="../../../../../ui/webui/resources/js/load_time_data.js" />
 //<include src="../../../../../ui/webui/resources/js/util.js" />
 //<include src="../../uber/uber_utils.js" />

chrome/browser/resources/apps_debugger/main.html

 <!DOCTYPE html>
-<html>
+<html i18n-values="dir:textdirection;">
 <!--
 
 Copyright (c) 2012 The Chromium Authors. All rights reserved.
@@ -8,14 +8,14 @@ found in the LICENSE file.
 -->
   <head>
     <meta charset="utf-8">
-    <link rel="stylesheet" href="css/items.css">
     <link rel="stylesheet" href="../../../../ui/webui/resources/css/chrome_shared.css">
-    <link rel="stylesheet" href="css/pack_item_overlay.css">
     <link rel="stylesheet" href="../../../../ui/webui/resources/css/alert_overlay.css">
     <link rel="stylesheet" href="../../../../ui/webui/resources/css/tabs.css">
     <link rel="stylesheet" href="../../../../ui/webui/resources/css/overlay.css">
     <link rel="stylesheet" href="../../../../ui/webui/resources/css/trash.css">
     <link rel="stylesheet" href="../uber/uber_shared.css">
+    <link rel="stylesheet" href="css/pack_item_overlay.css">
+    <link rel="stylesheet" href="css/items.css">
 
     <script src="js/main_scripts.js"></script>
   </head>
@@ -25,22 +25,27 @@ found in the LICENSE file.
       <include src="../../../../ui/webui/resources/html/alert_overlay.html">
     </div>
     <div class="page" id="extension-settings">
-      <h1 i18n-content="appsDevtoolTitle"></h1>
       <tabbox id="tab-box">
-        <tabs id="tabs">
-          <tab i18n-content="appsDevtoolApps"></tab>
-          <tab i18n-content="appsDevtoolExtensions"></tab>
-        </tabs>
-        <div id="developer-controls">
-          <button id="load-unpacked"
-              i18n-content="appsDevtoolLoadUnpackedButton"></button>
-          <button id="pack-item"
-              i18n-content="appsDevtoolPackButton"></button>
-          <button id= "update-items-now"
-              i18n-content="appsDevtoolUpdateButton"></button>
-          <input id="search" type="text"
-              i18n-values=".placeholder:appsDevtoolSearch" spellcheck="false">
-          <hr>
+        <div id="header">
+          <div id="developer-controls">
+            <button id="load-unpacked"
+                i18n-content="appsDevtoolLoadUnpackedButton"></button>
+            <button id="pack-item" i18n-content="appsDevtoolPackButton">
+            </button>
+            <button id="update-items-now"
+                i18n-content="appsDevtoolUpdateButton">
+            </button>
+            <h1 id="header-title" i18n-content="appsDevtoolTitle"></h1>
+            <input id="search" type="text"
+                i18n-values=".placeholder:appsDevtoolSearch" spellcheck="false">
+          </div>
+          <div id="tabs-header-container">
+            <tabs id="tabs" tabindex="0">
+              <tab i18n-content="appsDevtoolApps"></tab>
+              <tab i18n-content="appsDevtoolExtensions"></tab>
+            </tabs>
+          </div>
+          <div id="header-bottom-gradient"></div>
         </div>
         <tabpanels id="tab-panels">
           <!-- Apps Tab -->

ui/webui/resources/js/cr/ui/tabs.js

@@ -10,7 +10,9 @@ cr.define('cr.ui', function() {
    * @return {TabBox} The tab box if found.
    */
   function getTabBox(el) {
-    return el.parentElement && el.parentElement.parentElement;
+    return findAncestor(el, function(node) {
+      return node.tagName == 'TABBOX';
+    });
   }
 
   /**
@@ -39,12 +41,13 @@ cr.define('cr.ui', function() {
       TABPANEL: TabPanel
     };
 
-    var child;
-    for (var i = 0; child = this.children[i]; i++) {
-      var constr = map[child.tagName];
-      if (constr)
+    Object.keys(map).forEach(function(tagName) {
+      var children = this.getElementsByTagName(tagName);
+      var constr = map[tagName];
+      for (var i = 0; child = children[i]; i++) {
         cr.ui.decorate(child, constr);
-    }
+      }
+    }.bind(this));
   }
 
   /**
@@ -53,10 +56,18 @@ cr.define('cr.ui', function() {
    * @this {TabBox}
    */
   function selectedIndexSetHook(selectedIndex) {
-    var child, tabChild;
-    for (var i = 0; child = this.children[i]; i++) {
-      for (var j = 0; tabChild = child.children[j]; j++) {
-        tabChild.selected = j == selectedIndex;
+    var child, tabChild, element;
+    element = this.querySelector('tabs');
+    if (element) {
+      for (var i = 0; child = element.children[i]; i++) {
+        child.selected = i == selectedIndex;
+      }
+    }
+
+    element = this.querySelector('tabpanels');
+    if (element) {
+      for (var i = 0; child = element.children[i]; i++) {
+        child.selected = i == selectedIndex;
       }
     }
   }
@@ -113,7 +124,7 @@ cr.define('cr.ui', function() {
     decorate: function() {
       decorateChildren.call(this);
 
-      // Make the Tabs element fousable.
+      // Make the Tabs element focusable.
       this.tabIndex = 0;
       this.addEventListener('keydown', this.handleKeyDown_.bind(this));
 
@@ -149,8 +160,9 @@ cr.define('cr.ui', function() {
         delta *= -1;
 
       var count = this.children.length;
-      var index = this.parentElement.selectedIndex;
-      this.parentElement.selectedIndex = (index + delta + count) % count;
+      var tabbox = getTabBox(this);
+      var index = tabbox.selectedIndex;
+      tabbox.selectedIndex = (index + delta + count) % count;
 
       // Show focus outline since we used the keyboard.
       this.focusOutlineManager_.visible = true;