summaryrefslogtreecommitdiffstats
path: root/chrome/browser/resources
diff options
context:
space:
mode:
authortbarzic@google.com <tbarzic@google.com@0039d316-1c4b-4281-b951-d872f2087c98>2010-08-25 04:07:16 +0000
committertbarzic@google.com <tbarzic@google.com@0039d316-1c4b-4281-b951-d872f2087c98>2010-08-25 04:07:16 +0000
commite1100721c5613c46f85ed82a9620e5e9a1c818f7 (patch)
tree93ea83e7b1f3e1f94670b5882e44ae0e39ceb485 /chrome/browser/resources
parentcd2c93311a47b41e360bad093b009b12c0df440c (diff)
downloadchromium_src-e1100721c5613c46f85ed82a9620e5e9a1c818f7.zip
chromium_src-e1100721c5613c46f85ed82a9620e5e9a1c818f7.tar.gz
chromium_src-e1100721c5613c46f85ed82a9620e5e9a1c818f7.tar.bz2
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
Diffstat (limited to 'chrome/browser/resources')
-rw-r--r--chrome/browser/resources/about_sys.html186
1 files changed, 152 insertions, 34 deletions
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>
generated by cgit v1.1 at 2025-05-09 01:55:29 +0000