Chromium Code Reviews Chromium Code Reviews
Issue 42435:
Implement default css for toolstrips. (Closed)
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE HTML> | |
|
Matt Perry
2009/03/23 18:43:56
Could you "svn mv" the original file to this to pr
| |
| 2 <html id="root"> | |
| 3 <head> | |
| 4 <meta charset="utf-8"> | |
| 5 <title jscontent="title"></title> | |
| 6 <script type="text/javascript"> | |
| 7 /** | |
| 8 * This variable structure is here to document the structure that the template | |
| 9 * expects to correctly populate the page. | |
| 10 */ | |
| 11 var extensionDataFormat = { | |
| 12 "extensions": [ | |
| 13 { | |
| 14 "name": "Extension Name", | |
| 15 "description": "Extension long format description", | |
| 16 "version": "1.0.231", | |
| 17 "content_scripts": [ | |
| 18 { | |
| 19 "js": ["script1_file1.js", "script1_file2.js"], | |
| 20 "matches": ["http://*/*", "http://other.com/*"] | |
| 21 }, | |
| 22 { | |
| 23 "js": ["script2_file1.js", "script2_file2.js"], | |
| 24 "matches": ["http://*/*", "http://other.com/*"] | |
| 25 } | |
| 26 ] | |
| 27 }, | |
| 28 { | |
| 29 "name": "Extension Name", | |
| 30 "description": "Extension long format description", | |
| 31 "version": "1.0.231", | |
| 32 "content_scripts": [ | |
| 33 { | |
| 34 "js": ["script1_file1.js", "script1_file2.js"], | |
| 35 "matches": ["http://*/*", "http://other.com/*"] | |
| 36 }, | |
| 37 { | |
| 38 "js": ["script2_file1.js", "script2_file2.js"], | |
| 39 "matches": ["http://*/*", "http://other.com/*"] | |
| 40 } | |
| 41 ] | |
| 42 } | |
| 43 ], | |
| 44 "errors": [ | |
| 45 "something failed to happen", | |
| 46 "something else failed to happen" | |
| 47 ] | |
| 48 }; | |
| 49 | |
| 50 /** | |
| 51 * Takes the |extensionsData| input argument which represents data about the | |
| 52 * currently installed/running extensions and populates the html jstemplate with | |
| 53 * that data. It expects an object structure like the above. | |
| 54 * @param {Object} extensionsData Detailed info about installed extensions | |
| 55 */ | |
| 56 function showExtensionsData(extensionsData) { | |
| 57 // This is the javascript code that processes the template: | |
| 58 var input = new JsExprContext(extensionsData); | |
| 59 var output = document.getElementById('extensionTemplate'); | |
| 60 jstProcess(input, output); | |
| 61 } | |
| 62 | |
| 63 /* | |
| 64 * Asks the C++ ExtensionDOMHandler to inspect the installed extensions and | |
| 65 * return detailed data about the configuration. The ExtensionDOMHandler | |
| 66 * should reply to returnExtensionsData() (below). | |
| 67 */ | |
| 68 function requestExtensionsData() { | |
| 69 chrome.send("requestExtensionsData", []); | |
| 70 } | |
| 71 function returnExtensionsData(extensionsData) { | |
| 72 showExtensionsData(extensionsData); | |
| 73 | |
| 74 // We are currently hiding the body because the first call to jstProcess() to | |
| 75 // insert localized strings happens prior to this call which runs during the | |
| 76 // body.onload event, causes a flickering. | |
| 77 document.getElementById('body-container').style.display = "inline"; | |
| 78 } | |
| 79 </script> | |
| 80 <style type="text/css"> | |
| 81 body { | |
| 82 background-color: Window; | |
| 83 color: WindowText; | |
| 84 font: message-box; | |
| 85 } | |
| 86 | |
| 87 div#outside { | |
| 88 margin-left: 5%; | |
| 89 margin-right: 5%; | |
| 90 text-align: justify; | |
| 91 width: 90%; | |
| 92 } | |
| 93 | |
| 94 div#installed-extensions { | |
| 95 font-size: xx-large; | |
| 96 font-weight: bold; | |
| 97 text-align: center; | |
| 98 } | |
| 99 | |
| 100 div.extension-name { | |
| 101 font-size: large; | |
| 102 font-weight: bold; | |
| 103 margin-top: 2em; | |
| 104 margin-bottom: 1em; | |
| 105 text-align: left; | |
| 106 } | |
| 107 | |
| 108 dl { | |
| 109 margin: 0px 0px 3px 0px; | |
| 110 } | |
| 111 | |
| 112 table { | |
| 113 background-color: Window; | |
| 114 border: 1px solid ThreeDShadow; | |
| 115 border-spacing: 0px; | |
| 116 color: WindowText; | |
| 117 font: message-box; | |
| 118 margin-bottom: 20px; | |
| 119 text-align: left; | |
| 120 width: 100%; | |
| 121 } | |
| 122 | |
| 123 th { | |
| 124 background-color: Highlight; | |
| 125 color: HighlightText; | |
| 126 text-align: center; | |
| 127 } | |
| 128 | |
| 129 th + th, | |
| 130 td + td { | |
| 131 border-left: 1px dotted ThreeDShadow; | |
| 132 } | |
| 133 | |
| 134 td { | |
| 135 border-top: 1px dotted ThreeDShadow; | |
| 136 text-align: left; | |
| 137 } | |
| 138 | |
| 139 th, td { | |
| 140 padding: 3px; | |
| 141 } | |
| 142 | |
| 143 th.type, th.suff { | |
| 144 width: 20%; | |
| 145 } | |
| 146 | |
| 147 th.desc { | |
| 148 width: 50%; | |
| 149 } | |
| 150 | |
| 151 th.enabled { | |
| 152 width: 10%; | |
| 153 } | |
| 154 | |
| 155 #error-box { | |
| 156 background-color:#D8D8D8; | |
| 157 margin-top: 8px; | |
| 158 padding: 8px; | |
| 159 width: 100%; | |
| 160 } | |
| 161 #error-log { | |
| 162 color: #B00000; | |
| 163 font-weight: bold; | |
| 164 } | |
| 165 .error { | |
| 166 font-style:italic; | |
| 167 } | |
| 168 </style> | |
| 169 </head> | |
| 170 <body onload="requestExtensionsData();"> | |
| 171 <div id="body-container" style="display:none;"> | |
| 172 <div id="outside"> | |
| 173 <div id="installed-extensions">Installed Extensions</div> | |
| 174 <div id="extensionTemplate"> | |
| 175 | |
| 176 <div id="error-box" jsdisplay="errors.length > 0"> | |
| 177 <div id="error-log">Errors</div> | |
| 178 <div class="error" jsselect="errors" jscontent="$this"> | |
| 179 Error Detail</div> | |
| 180 </div> | |
| 181 | |
| 182 <div class="extension-name" jsdisplay="extensions.length === 0"> | |
| 183 No Extensions Installed</div> | |
| 184 | |
| 185 <div jsdisplay="extensions.length > 0"> | |
| 186 <div class="extension" jsselect="extensions"> | |
| 187 <div class="extension-name" jscontent="name"> | |
| 188 sExtension Name</div> | |
| 189 <dl> | |
| 190 <dd> | |
| 191 <span jscontent="description">Extension Description</span> | |
| 192 </dd> | |
| 193 <dd>Version: <span jscontent="version">x.x.x.x</span></dd> | |
| 194 </dl> | |
| 195 | |
| 196 <table jsselect="content_scripts"> | |
| 197 <thead> | |
| 198 <tr><th colspan="2">Content Script</th></tr> | |
| 199 </thead> | |
| 200 <tbody> | |
| 201 <tr> | |
| 202 <td>JavaScript Files</td> | |
| 203 <td> | |
| 204 <span jsselect="js" | |
| 205 jscontent="(($index > 0) ? ', ' : '') + $this"> | |
| 206 </span> | |
| 207 </td> | |
| 208 </tr> | |
| 209 <tr> | |
| 210 <td>URL Match Patterns</td> | |
| 211 <td> | |
| 212 <span jsselect="matches" | |
| 213 jscontent="(($index > 0) ? ', ' : '') + $this"> | |
| 214 </span> | |
| 215 </td> | |
| 216 </tr> | |
| 217 </tbody> | |
| 218 </table> | |
| 219 </div> | |
| 220 </div> | |
| 221 </div> | |
| 222 </div> | |
| 223 </body> | |
| 224 </html> | |
| OLD | NEW |
