Enabling about:system page to select shown entries and to scroll to specific entry

TEST=Open about:system. Table containing available system information is shown.
Clicking on button Expand shows associated entry, and clicking on Collapse hides it. Initialy all entries are hidden. 
Clicking on Expand all / Collapse all shows / hides all entries.
about:system/foo hides all entries but foo, and scrolls to it  

BUG=4973

Review URL: http://codereview.chromium.org/3173038

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

3 files changed, 199 insertions, 42 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index a0f5f3d..778b897 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -3791,7 +3791,31 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_BAD_FLAGS_WARNING_MESSAGE" desc="Message shown when an unsupported command-line flag is used. [Keep it short so it fits in the infobar.]">
         You are using an unsupported command-line flag: <ph name="BAD_FLAG">$1<ex>--no-sandbox</ex></ph>. Stability and security will suffer.
       </message>
-
+      
+      <!-- about:system strings -->
+      <if expr="pp_ifdef('chromeos')">
+        <message name="IDS_ABOUT_SYS_TITLE" desc="about:system page title">
+          About System
+        </message>
+        <message name="IDS_ABOUT_SYS_DESC" desc="about:system page description">
+          System diagnostic data
+        </message>
+        <message name="IDS_ABOUT_SYS_TABLE_TITLE" desc="Title of a table that contains system details">
+          Details
+        </message>
+        <message name="IDS_ABOUT_SYS_EXPAND_ALL" desc="name of a button that shows (expands) all system details">
+          Expand all...
+        </message>
+        <message name="IDS_ABOUT_SYS_COLLAPSE_ALL" desc="name of a button that hides (collapses) all system details">
+          Collapse all...
+        </message>
+        <message name="IDS_ABOUT_SYS_EXPAND" desc="name of a button that shows (expands) specific system details">
+          Expand...
+        </message>
+        <message name="IDS_ABOUT_SYS_COLLAPSE" desc="name of a button that hides (collapses) specific system details">
+          Collapse...
+        </message>
+      </if>
 
       <!-- about:version strings -->
       <message name="IDS_ABOUT_VERSION_TITLE" desc="Title on the about:version page">
diff --git a/chrome/browser/browser_about_handler.cc b/chrome/browser/browser_about_handler.cc
index 08dbb7e..013caf7 100644
--- a/chrome/browser/browser_about_handler.cc
+++ b/chrome/browser/browser_about_handler.cc
@@ -778,13 +778,28 @@ std::string AboutSync() {
       ResourceBundle::GetSharedInstance().GetRawDataResource(
       IDR_ABOUT_SYNC_HTML));
 
-  return jstemplate_builder::GetTemplateHtml(
+  return jstemplate_builder::GetTemplatesHtml(
       sync_html, &strings , "t" /* template root node id */);
 }
 
 #if defined(OS_CHROMEOS)
-std::string AboutSys() {
+std::string AboutSys(const std::string& query) {
   DictionaryValue strings;
+  strings.SetString("title", l10n_util::GetStringUTF16(IDS_ABOUT_SYS_TITLE));
+  strings.SetString("description",
+                    l10n_util::GetStringUTF16(IDS_ABOUT_SYS_DESC));
+  strings.SetString("table_title",
+                    l10n_util::GetStringUTF16(IDS_ABOUT_SYS_TABLE_TITLE));
+  strings.SetString("expand_all_btn",
+                    l10n_util::GetStringUTF16(IDS_ABOUT_SYS_EXPAND_ALL));
+  strings.SetString("collapse_all_btn",
+                    l10n_util::GetStringUTF16(IDS_ABOUT_SYS_COLLAPSE_ALL));
+  strings.SetString("expand_btn",
+                    l10n_util::GetStringUTF16(IDS_ABOUT_SYS_EXPAND));
+  strings.SetString("collapse_btn",
+                    l10n_util::GetStringUTF16(IDS_ABOUT_SYS_COLLAPSE));
+  ChromeURLDataManager::DataSource::SetFontAndTextDirection(&strings);
+
   chromeos::SyslogsLibrary* syslogs_lib =
       chromeos::CrosLibrary::Get()->GetSyslogsLibrary();
   scoped_ptr<chromeos::LogDictionaryType> sys_info;
@@ -794,19 +809,19 @@ std::string AboutSys() {
      ListValue* details = new ListValue();
      strings.Set("details", details);
      chromeos::LogDictionaryType::iterator it;
-
      for (it = sys_info.get()->begin(); it != sys_info.get()->end(); ++it) {
        DictionaryValue* val = new DictionaryValue;
-       val->SetString("stat_name", (*it).first);
-       val->SetString("stat_value", (*it).second);
+       val->SetString("stat_name", it->first);
+       val->SetString("stat_value", it->second);
        details->Append(val);
      }
+     strings.SetString("anchor", query);
   }
   static const base::StringPiece sys_html(
         ResourceBundle::GetSharedInstance().GetRawDataResource(
         IDR_ABOUT_SYS_HTML));
 
-  return jstemplate_builder::GetTemplateHtml(
+  return jstemplate_builder::GetTemplatesHtml(
         sys_html, &strings , "t" /* template root node id */);
 }
 #endif
@@ -897,7 +912,7 @@ void AboutSource::StartDataRequest(const std::string& path_raw,
     response = AboutSync();
 #if defined(OS_CHROMEOS)
   } else if (path == kSysPath) {
-    response = AboutSys();
+    response = AboutSys(info);
 #endif
   }
 
diff --git a/chrome/browser/resources/about_sys.html b/chrome/browser/resources/about_sys.html
index dbae643..00cdf1c 100644
--- a/chrome/browser/resources/about_sys.html
+++ b/chrome/browser/resources/about_sys.html
@@ -1,8 +1,7 @@
 <!DOCTYPE HTML>
-<html id="t">
-<head>
+<html i18n-values="dir:textdirection;"><head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title>About S&#121;stem</title>
+<title i18n-content="title"></title>
 
 <style>
 body {
@@ -13,11 +12,12 @@ body {
   min-width: 45em;
 }
 
-h1,h2 {
+h1, h2 {
  font-size: 110%;
  letter-spacing: -1px;
  margin: 0;
 }
+
 h1 {
   font-weight: bold;
   color: #4a8ee6;
@@ -28,12 +28,12 @@ h2 {
   font-weight: normal;
   padding: 0.5em 1em;
   color: #3a75bd;
-  margin-left: -38px;
-  padding-left: 38px;
+  -webkit-margin-start: -38px;
+  -webkit-padding-start: 38px;
   border-top: 1px solid #3a75bd;
   padding-top: 0.5em;
-
 }
+
 h2:first-child {
   border-top: 0;
   padding-top: 0;
@@ -51,35 +51,47 @@ h2:first-child {
   color: white;
   text-shadow: 0 0 2px black;
 }
-div#header h1 {
-  padding-left: 3em;
+
+html[dir='rtl'] #header {
+  padding: 0.6em 0 0.75em 1em;
+}
+
+#header h1 {
+  -webkit-padding-start: 3em;
   margin: 0;
   display: inline;
-  background: url('shared/images/gear.png') 12px 60% no-repeat;
+  background: url('shared/images/gear.png') no-repeat;
+  background-position: 12px 60%;
   color: white;
 }
-div#header p {
+
+html[dir='rtl'] #header h1 {
+  background-position-left: auto;
+  backgroun-position-right: 12px;
+}
+
+#header p {
   font-size: 84%;
   font-style: italic;
   padding: 0;
   margin: 0;
   color: white;
-  padding-left: 0.4em;
+  -webkit-padding-start: 0.4em;
   display: inline;
 }
 
-table.list {
+.list {
   line-height: 200%;
   border-collapse: collapse;
   font-size: 84%;
   table-layout: fixed;
   width: 100%;
 }
-table.list:not([class*='filtered']) tr:nth-child(odd) td {
+.list:not(.filtered) tr:nth-child(odd) td {
   background: #eff3ff;
 }
 
-table.list td {
+.list td {
   padding: 0 0.5em;
   vertical-align: top;
   line-height: 1.4em;
@@ -87,58 +99,164 @@ table.list td {
   font-family: 'Courier New', monospace;
   white-space: pre;
 }
-table.list tr td:nth-last-child(1),
-table.list tr th:nth-last-child(1) {
-  padding-right: 1em;
+
+.list tr td:nth-last-child(1),
+.list tr th:nth-last-child(1) {
+  -webkit-padding-end: 1em;
 }
-table.list:not([class*='filtered']) .tab .name {
-  padding-left: 1.5em;
+
+.list:not(.filtered) .tab .name {
+  -webkit-padding-start: 1.5em;
 }
 
-table.list .name {
+.list .name {
   width: 20%;
 }
 
-table.list .name div {
+.list .name div {
   height: 1.6em;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-table.list .number {
+.number_expanded, .number_collapsed  {
   text-align: left;
   width: 80%;
 }
 
-table.list#details tr:not([class*='firstRow']) > *:nth-child(1),
-table.list#details tr:not([class*='firstRow']) > *:nth-child(4),
-table.list#details tr.firstRow th:nth-child(1),
-table.list#details tr.firstRow th:nth-child(2) {
+html[dir='rtl'] .number_expanded, html[dir='rtl'] .number_collapsed  {
+  text-align: right;
+}
+
+tr:not(.firstRow) > *:nth-child(1),
+tr:not(.firstRow) > *:nth-child(4),
+tr.firstRow th:nth-child(1),
+tr.firstRow th:nth-child(2) {
   border-right: 1px solid #b5c6de;
 }
-table.list#details .name {
-  padding-left: 25px;
+
+html[dir='rtl'] tr:not(.firstRow) > *:nth-child(1),
+html[dir='rtl'] tr:not(.firstRow) > *:nth-child(4),
+html[dir='rtl'] tr.firstRow th:nth-child(1),
+html[dir='rtl'] tr.firstRow th:nth-child(2) {
+  border-right: auto;
+  border-left: 1px solid #b5c6de;
+}
+
+.name {
+  -webkit-padding-start: 25px;
   background-position: 5em center;
   background-repeat: no-repeat;
 }
+
+html[dir='rtl'] #details .name {
+  background-position-left: auto;
+  background-position-right: 5em;
+}
+
+.number_collapsed .stat_value {
+  display: none;
+}
+
+.number_expanded .stat_value {
+  display: auto;
+}
+
+#anchor {
+  display: none;
+}
+
+.globalButton {
+  float: right;
+  margin: 1px 5px;
+}
+
+html[dir='rtl'] .globalButton {
+  float: left;
+}
 </style>
+<script src="shared/js/local_strings.js"></script>
+<script>
+var localStrings;
+
+function changeCollapsedStatus() {
+  if (this.parentNode.className == 'number_collapsed') {
+    this.parentNode.className = 'number_expanded';
+    this.textContent = localStrings.getString('collapse_btn');
+  } else {
+    this.parentNode.className = 'number_collapsed';
+    this.textContent = localStrings.getString('expand_btn');
+  }
+}
+
+function collapseAll() {
+  var expandStatusDivs = document.getElementsByClassName('expand_status');
+  for(var i = 0; i < expandStatusDivs.length; i++) {
+    expandStatusDivs[i].textContent = localStrings.getString('expand_btn');
+    expandStatusDivs[i].parentNode.className = 'number_collapsed';
+  }
+}
+
+function expandAll() {
+  var expandStatusDivs = document.getElementsByClassName('expand_status');
+  for(var i = 0; i < expandStatusDivs.length; i++) {
+    expandStatusDivs[i].textContent = localStrings.getString('collapse_btn');
+    expandStatusDivs[i].parentNode.className = 'number_expanded';
+  }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  localStrings = new LocalStrings();    
+    
+  var collapseAllBtn = document.getElementById('collapseAll');
+  collapseAllBtn.onclick = collapseAll;
+  
+  var expandAllBtn = document.getElementById('expandAll');
+  expandAllBtn.onclick = expandAll;
+  
+  var anchorName = document.getElementById('anchor').textContent;
+  var expandStatusDivs = document.getElementsByClassName('expand_status');
+  for(var i = 0; i < expandStatusDivs.length; i++) {
+    expandStatusDivs[i].onclick = changeCollapsedStatus;
+    if (expandStatusDivs[i].id != anchorName + 'Btn') {
+      expandStatusDivs[i].textContent = localStrings.getString('expand_btn');
+      expandStatusDivs[i].parentNode.className = 'number_collapsed';
+    } else {
+      var anchor = document.createElement('a');
+      anchor.name = anchorName;
+      expandStatusDivs[i].parentNode.insertBefore(anchor, expandStatusDivs[i]);
+      window.location.hash = anchorName; 
+      expandStatusDivs[i].textContent = localStrings.getString('collapse_btn');
+      expandStatusDivs[i].parentNode.className = 'number_expanded';
+    }
+  }    
+});
+</script>
 
 </head>
-<body>
+<body id="t">
   <div id="header">
-    <h1>About S&#121;stem</h1>
-    <p>System diagnostic data</p>
+    <h1 i18n-content="title"></h1>
+    <p i18n-content="description"></p>
   </div>
   <div id="content">
-    <h2>Details</h2>
+    <h2 i18n-content="table_title"></h2>
+    <div id="anchor" jscontent="anchor"></div>
+    <button id="expandAll" class="globalButton" i18n-content="expand_all_btn">
+    </button>
+    <button id="collapseAll" class="globalButton" 
+        i18n-content="collapse_all_btn"></button>
     <table class="list" id="details">
       <tr jsselect="details">
         <td class="name">
+          <a jsvalues="name:anchor_value"></a>
           <div jscontent="stat_name"></div>
         </td>
         <td class="number">
-          <div jscontent="stat_value"></div>
+          <button jsvalues="id:stat_name + 'Btn'" class="expand_status">
+          </button>
+          <div class="stat_value" jscontent="stat_value"></div>
         </td>
       </tr>
     </table>