summaryrefslogtreecommitdiffstats
path: root/chrome/browser/resources/extensions_ui.html
diff options
context:
space:
mode:
Diffstat (limited to 'chrome/browser/resources/extensions_ui.html')
-rw-r--r--chrome/browser/resources/extensions_ui.html100
1 files changed, 59 insertions, 41 deletions
diff --git a/chrome/browser/resources/extensions_ui.html b/chrome/browser/resources/extensions_ui.html
index b8477c2..4400282 100644
--- a/chrome/browser/resources/extensions_ui.html
+++ b/chrome/browser/resources/extensions_ui.html
@@ -42,7 +42,7 @@ h1 {
div.content {
font-size: 84%;
- margin-top: 10px;
+ margin-top: 5px;
}
.section-header {
@@ -90,22 +90,22 @@ body.showDevMode .showInDevMode {
-webkit-transition: all .1s ease-in;
}
-.wbox-dev-tools {
+.wbox-dev-mode {
-webkit-box-align: stretch;
-webkit-box-flex: 1;
}
-.developer-tools-image {
+.developer-mode-image {
margin-top: 2px;
}
-.developer-tools-link {
+.developer-mode-link {
font-size: 100%;
margin-right: 3px;
white-space: nowrap;
}
-.developer-tools {
+.developer-mode {
background: #f4f6fc;
border-bottom: 1px solid #edeff5;
font-size: 85%;
@@ -115,10 +115,20 @@ body.showDevMode .showInDevMode {
width: 100%;
}
+.extension_disabled td {
+ background: url('gray.png') 0px 0px;
+ color: #a0a0a0;
+ padding-bottom: 4px;
+ padding-top: 5px;
+}
+
+.extension_enabled td {
+ padding-bottom: 4px;
+ padding-top: 5px;
+}
+
.extension {
- border-bottom: 1px solid #edeff5;
- margin-bottom: 9px;
- padding-bottom: 10px;
+ border-bottom: 1px solid #cdcdcd;
}
.extension-name {
@@ -244,6 +254,7 @@ var extensionDataFormat = {
"description": "Extension long format description",
"version": "1.0.231",
"enabled": "true",
+ "order": 1,
"options_url": "options.html",
"icon": "relative-path-to-icon.png",
"content_scripts": [
@@ -281,6 +292,7 @@ var extensionDataFormat = {
"description": "Extension long format description",
"version": "1.0.231",
"enabled": "true",
+ "order": 2,
"icon": "",
"content_scripts": [
{
@@ -305,16 +317,16 @@ var extensionDataFormat = {
]
};
-// Keeps track of whether the developer tools subsection has been made visible
+// Keeps track of whether the developer mode subsection has been made visible
// (expanded) or not.
-var devToolsExpanded = false;
+var devModeExpanded = false;
/**
- * Toggles the devToolsExpanded, and notifies the c++ dom_ui to toggle the
+ * Toggles the devModeExpanded, and notifies the c++ dom_ui to toggle the
* extensions.ui.developer_mode which saved in the preferences.
*/
-function toggleDevToolsExpanded() {
- devToolsExpanded = !devToolsExpanded;
+function toggleDevModeExpanded() {
+ devModeExpanded = !devModeExpanded;
chrome.send('toggleDeveloperMode', []);
}
@@ -325,11 +337,16 @@ function toggleDevToolsExpanded() {
* @param {Object} extensionsData Detailed info about installed extensions
*/
function showExtensionsData(extensionsData) {
- // Sort by extension name (case-insensitive)
+ // Sort by order specified in the data or (if equal) then sort by
+ // extension name (case-insensitive).
extensionsData.extensions.sort(function(a, b) {
- a = a.name.toLowerCase();
- b = b.name.toLowerCase();
- return a < b ? -1 : (a > b ? 1 : 0);
+ if (a.order == b.order) {
+ a = a.name.toLowerCase();
+ b = b.name.toLowerCase();
+ return a < b ? -1 : (a > b ? 1 : 0);
+ } else {
+ return a.order < b.order ? -1 : 1;
+ }
});
// This is the javascript code that processes the template:
@@ -354,7 +371,7 @@ window.domui_responded_ = false;
function returnExtensionsData(extensionsData) {
window.domui_responded_ = true;
- devToolsExpanded = extensionsData.developerMode;
+ devModeExpanded = extensionsData.developerMode;
showExtensionsData(extensionsData);
@@ -364,15 +381,14 @@ function returnExtensionsData(extensionsData) {
document.getElementById('body-container').style.display = "inline";
// Explicitly set the height for each element that wants to be "slid" in and
- // out when the devToolsExpanded is toggled.
+ // out when the devModeExpanded is toggled.
var slidables = document.getElementsByClassName('showInDevMode');
- for (var i = 0; i < slidables.length; i++) {
+ for (var i = 0; i < slidables.length; i++)
slidables[i].style.height = slidables[i].offsetHeight + "px";
- }
// If not in developer mode, hide the developer mode elements without the
// slide/fade transition.
- if (!devToolsExpanded) {
+ if (!devModeExpanded) {
document.getElementsByTagName('body')[0].className = "hideDevModeInitial";
} else {
document.getElementById('collapse').style.display = "inline";
@@ -473,18 +489,18 @@ function hidePackDialog() {
}
/*
- * Toggles visibility of the developer tools.
+ * Toggles visibility of the developer mode.
*/
-function toggleDeveloperTools() {
- toggleDevToolsExpanded();
+function toggleDeveloperMode() {
+ toggleDevModeExpanded();
document.getElementById('collapse').style.display =
- devToolsExpanded ? "inline" : "none";
+ devModeExpanded ? "inline" : "none";
document.getElementById('expand').style.display =
- devToolsExpanded ? "none" : "inline";
+ devModeExpanded ? "none" : "inline";
document.getElementsByTagName('body')[0].className =
- devToolsExpanded ? "showDevMode" : "hideDevMode";
+ devModeExpanded ? "showDevMode" : "hideDevMode";
}
/**
@@ -586,16 +602,16 @@ function autoUpdate() {
jscontent="extensions.length"></span>)</span>
</td>
<td width="18" padding="">
- <img id="collapse" class="developer-tools-image"
- style="display:none" onclick="toggleDeveloperTools();"
+ <img id="collapse" class="developer-mode-image"
+ style="display:none" onclick="toggleDeveloperMode();"
src="minus.png" />
- <img id="expand" class="developer-tools-image"
- onclick="toggleDeveloperTools();" src="plus.png" />
+ <img id="expand" class="developer-mode-image"
+ onclick="toggleDeveloperMode();" src="plus.png" />
</td>
<td width="50" align="right">
- <div class="developer-tools-link">
- <a onclick="toggleDeveloperTools();" style="cursor: default"
- i18n-content="devToolsLink">DEVTOOLS</a>
+ <div class="developer-mode-link">
+ <a onclick="toggleDeveloperMode();" style="cursor: default"
+ i18n-content="devModeLink">DEVMODE</a>
</div>
</td>
</tr>
@@ -603,9 +619,9 @@ function autoUpdate() {
</div>
</div>
- <div id="developer_tools" class="wbox-dev-tools showInDevMode">
- <div class="developer-tools">
- <span i18n-content="devToolsPrefix">DEVELOPER_TOOLS:</span>
+ <div id="developer_tools" class="wbox-dev-mode showInDevMode">
+ <div class="developer-mode">
+ <span i18n-content="devModePrefix">DEVELOPER_MODE:</span>
<button onclick="loadExtension()"
i18n-content="loadUnpackedButton">LOAD</button>
<button onclick="showPackDialog()"
@@ -622,9 +638,9 @@ function autoUpdate() {
<div jsdisplay="extensions.length > 0">
<div class="extension" jsselect="extensions">
- <table width="100%" cellpadding="0" cellspacing="0">
- <tr>
- <td width="62" align="center" valign="top">
+ <table width="100%" cellpadding="2" cellspacing="0">
+ <tr jsvalues=".className:enabled ? 'extension_enabled' : 'extension_disabled'">
+ <td width="62" height="50" align="center" valign="top">
<span jsdisplay="icon"
><img
jsvalues=".src:'chrome-extension://' + id + '/' + icon"
@@ -643,6 +659,8 @@ function autoUpdate() {
<span jscontent="version">x.x.x.x</span>
<span jsdisplay="!enabled"
i18n-content="extensionDisabled">(DISABLED)</span>
+ <span jsdisplay="order == 1"
+ i18n-content="inDevelopment">(IN DEVELOPMENT)</span>
</div>
<div class="extension-description" jscontent="description"></div>