Chromium Code Reviews Chromium Code Reviews
Issue 42435:
Implement default css for toolstrips. (Closed)
| Index: chrome/browser/resources/extensions_ui.html |
| diff --git a/chrome/browser/resources/extensions_ui.html b/chrome/browser/resources/extensions_ui.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..e719f919f4107d81ba1c9be9f8a8f0a986db7919 |
| --- /dev/null |
| +++ b/chrome/browser/resources/extensions_ui.html |
| @@ -0,0 +1,224 @@ |
| +<!DOCTYPE HTML> |
|
Matt Perry
2009/03/23 18:43:56
Could you "svn mv" the original file to this to pr
|
| +<html id="root"> |
| +<head> |
| +<meta charset="utf-8"> |
| +<title jscontent="title"></title> |
| +<script type="text/javascript"> |
| +/** |
| + * This variable structure is here to document the structure that the template |
| + * expects to correctly populate the page. |
| + */ |
| +var extensionDataFormat = { |
| + "extensions": [ |
| + { |
| + "name": "Extension Name", |
| + "description": "Extension long format description", |
| + "version": "1.0.231", |
| + "content_scripts": [ |
| + { |
| + "js": ["script1_file1.js", "script1_file2.js"], |
| + "matches": ["http://*/*", "http://other.com/*"] |
| + }, |
| + { |
| + "js": ["script2_file1.js", "script2_file2.js"], |
| + "matches": ["http://*/*", "http://other.com/*"] |
| + } |
| + ] |
| + }, |
| + { |
| + "name": "Extension Name", |
| + "description": "Extension long format description", |
| + "version": "1.0.231", |
| + "content_scripts": [ |
| + { |
| + "js": ["script1_file1.js", "script1_file2.js"], |
| + "matches": ["http://*/*", "http://other.com/*"] |
| + }, |
| + { |
| + "js": ["script2_file1.js", "script2_file2.js"], |
| + "matches": ["http://*/*", "http://other.com/*"] |
| + } |
| + ] |
| + } |
| + ], |
| + "errors": [ |
| + "something failed to happen", |
| + "something else failed to happen" |
| + ] |
| +}; |
| + |
| +/** |
| + * Takes the |extensionsData| input argument which represents data about the |
| + * currently installed/running extensions and populates the html jstemplate with |
| + * that data. It expects an object structure like the above. |
| + * @param {Object} extensionsData Detailed info about installed extensions |
| + */ |
| +function showExtensionsData(extensionsData) { |
| + // This is the javascript code that processes the template: |
| + var input = new JsExprContext(extensionsData); |
| + var output = document.getElementById('extensionTemplate'); |
| + jstProcess(input, output); |
| +} |
| + |
| +/* |
| + * Asks the C++ ExtensionDOMHandler to inspect the installed extensions and |
| + * return detailed data about the configuration. The ExtensionDOMHandler |
| + * should reply to returnExtensionsData() (below). |
| + */ |
| +function requestExtensionsData() { |
| + chrome.send("requestExtensionsData", []); |
| +} |
| +function returnExtensionsData(extensionsData) { |
| + showExtensionsData(extensionsData); |
| + |
| + // We are currently hiding the body because the first call to jstProcess() to |
| + // insert localized strings happens prior to this call which runs during the |
| + // body.onload event, causes a flickering. |
| + document.getElementById('body-container').style.display = "inline"; |
| +} |
| +</script> |
| +<style type="text/css"> |
| +body { |
| + background-color: Window; |
| + color: WindowText; |
| + font: message-box; |
| +} |
| + |
| +div#outside { |
| + margin-left: 5%; |
| + margin-right: 5%; |
| + text-align: justify; |
| + width: 90%; |
| +} |
| + |
| +div#installed-extensions { |
| + font-size: xx-large; |
| + font-weight: bold; |
| + text-align: center; |
| +} |
| + |
| +div.extension-name { |
| + font-size: large; |
| + font-weight: bold; |
| + margin-top: 2em; |
| + margin-bottom: 1em; |
| + text-align: left; |
| +} |
| + |
| +dl { |
| + margin: 0px 0px 3px 0px; |
| +} |
| + |
| +table { |
| + background-color: Window; |
| + border: 1px solid ThreeDShadow; |
| + border-spacing: 0px; |
| + color: WindowText; |
| + font: message-box; |
| + margin-bottom: 20px; |
| + text-align: left; |
| + width: 100%; |
| +} |
| + |
| +th { |
| + background-color: Highlight; |
| + color: HighlightText; |
| + text-align: center; |
| +} |
| + |
| +th + th, |
| +td + td { |
| + border-left: 1px dotted ThreeDShadow; |
| +} |
| + |
| +td { |
| + border-top: 1px dotted ThreeDShadow; |
| + text-align: left; |
| +} |
| + |
| +th, td { |
| + padding: 3px; |
| +} |
| + |
| +th.type, th.suff { |
| + width: 20%; |
| +} |
| + |
| +th.desc { |
| + width: 50%; |
| +} |
| + |
| +th.enabled { |
| + width: 10%; |
| +} |
| + |
| +#error-box { |
| + background-color:#D8D8D8; |
| + margin-top: 8px; |
| + padding: 8px; |
| + width: 100%; |
| +} |
| +#error-log { |
| + color: #B00000; |
| + font-weight: bold; |
| +} |
| +.error { |
| + font-style:italic; |
| +} |
| +</style> |
| +</head> |
| +<body onload="requestExtensionsData();"> |
| + <div id="body-container" style="display:none;"> |
| + <div id="outside"> |
| + <div id="installed-extensions">Installed Extensions</div> |
| + <div id="extensionTemplate"> |
| + |
| + <div id="error-box" jsdisplay="errors.length > 0"> |
| + <div id="error-log">Errors</div> |
| + <div class="error" jsselect="errors" jscontent="$this"> |
| + Error Detail</div> |
| + </div> |
| + |
| + <div class="extension-name" jsdisplay="extensions.length === 0"> |
| + No Extensions Installed</div> |
| + |
| + <div jsdisplay="extensions.length > 0"> |
| + <div class="extension" jsselect="extensions"> |
| + <div class="extension-name" jscontent="name"> |
| + sExtension Name</div> |
| + <dl> |
| + <dd> |
| + <span jscontent="description">Extension Description</span> |
| + </dd> |
| + <dd>Version: <span jscontent="version">x.x.x.x</span></dd> |
| + </dl> |
| + |
| + <table jsselect="content_scripts"> |
| + <thead> |
| + <tr><th colspan="2">Content Script</th></tr> |
| + </thead> |
| + <tbody> |
| + <tr> |
| + <td>JavaScript Files</td> |
| + <td> |
| + <span jsselect="js" |
| + jscontent="(($index > 0) ? ', ' : '') + $this"> |
| + </span> |
| + </td> |
| + </tr> |
| + <tr> |
| + <td>URL Match Patterns</td> |
| + <td> |
| + <span jsselect="matches" |
| + jscontent="(($index > 0) ? ', ' : '') + $this"> |
| + </span> |
| + </td> |
| + </tr> |
| + </tbody> |
| + </table> |
| + </div> |
| + </div> |
| + </div> |
| + </div> |
| + </body> |
| +</html> |
