OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <html i18n-values="dir:textdirection;"> |
| 3 <head> |
| 4 <meta charset="utf-8"> |
| 5 <style> |
| 6 body { |
| 7 margin: 10px; |
| 8 min-width: 47em; |
| 9 } |
| 10 |
| 11 a { |
| 12 color: blue; |
| 13 font-size: 103%; |
| 14 } |
| 15 |
| 16 div#header { |
| 17 margin-bottom: 1.05em; |
| 18 /* 67px is the height of the header's background image. */ |
| 19 min-height: 67px; |
| 20 overflow: hidden; |
| 21 padding-bottom: 20px; |
| 22 padding-left: 0; |
| 23 padding-top: 20px; |
| 24 position: relative; |
| 25 -webkit-box-sizing: border-box; |
| 26 } |
| 27 |
| 28 html[dir=rtl] #header { |
| 29 padding-right: 0; |
| 30 } |
| 31 |
| 32 #header h1 { |
| 33 background: url('../../app/theme/conflicts_section.png') 0px 20px no-repeat; |
| 34 display: inline; |
| 35 margin: 0; |
| 36 padding-bottom: 43px; |
| 37 padding-left: 75px; |
| 38 padding-top: 40px; |
| 39 } |
| 40 |
| 41 html[dir=rtl] #header h1 { |
| 42 background: url('../../app/theme/conflicts_section.png') right no-repeat; |
| 43 padding-right: 95px; |
| 44 padding-left: 0; |
| 45 } |
| 46 |
| 47 h1 { |
| 48 font-size: 156%; |
| 49 font-weight: bold; |
| 50 padding: 0; |
| 51 margin: 0; |
| 52 } |
| 53 |
| 54 #blurb-container { |
| 55 padding-bottom: 1.5em; |
| 56 font-size: 120%; |
| 57 } |
| 58 |
| 59 div.content { |
| 60 font-size: 88%; |
| 61 margin-top: 5px; |
| 62 } |
| 63 |
| 64 .section-header { |
| 65 background: #ebeff9; |
| 66 border-top: 1px solid #b5c7de; |
| 67 font-size: 99%; |
| 68 padding-bottom: 2px; |
| 69 padding-left: 5px; |
| 70 padding-top: 3px; |
| 71 width: 100%; |
| 72 } |
| 73 |
| 74 html[dir=rtl] .section-header { |
| 75 padding-right: 5px; |
| 76 padding-left: 0; |
| 77 } |
| 78 |
| 79 .section-header > table > tr > td:first-child { |
| 80 width: 100%; |
| 81 } |
| 82 |
| 83 .section-header > table { |
| 84 width: 100%; |
| 85 } |
| 86 |
| 87 .section-header-title { |
| 88 font-weight: bold; |
| 89 } |
| 90 |
| 91 .vbox-container { |
| 92 display: -webkit-box; |
| 93 -webkit-box-orient: vertical; |
| 94 } |
| 95 |
| 96 .wbox { |
| 97 display: -webkit-box; |
| 98 -webkit-box-align: stretch; |
| 99 -webkit-box-flex: 1; |
| 100 } |
| 101 |
| 102 #top { |
| 103 padding-right: 5px; |
| 104 } |
| 105 |
| 106 html[dir=rtl] #top { |
| 107 padding-left: 5px; |
| 108 padding-right: 0; |
| 109 } |
| 110 |
| 111 .module-loaded > td { |
| 112 padding-bottom: 4px; |
| 113 padding-top: 5px; |
| 114 } |
| 115 |
| 116 .module { |
| 117 border-bottom: 1px solid #cdcdcd; |
| 118 } |
| 119 |
| 120 .module-name { |
| 121 font-weight: bold; |
| 122 } |
| 123 |
| 124 .no-modules { |
| 125 margin: 6em 0 0; |
| 126 text-align: center; |
| 127 font-size: 1.2em; |
| 128 } |
| 129 |
| 130 .suspected-bad { |
| 131 color: orange; |
| 132 } |
| 133 |
| 134 .confirmed-bad { |
| 135 color: red; |
| 136 } |
| 137 </style> |
| 138 <script> |
| 139 |
| 140 /** |
| 141 * This variable structure is here to document the structure that the template |
| 142 * expects to correctly populate the page. |
| 143 */ |
| 144 var moduleListDataFormat = { |
| 145 'moduleList': [ |
| 146 { |
| 147 'type': 'The type of module found', |
| 148 'type_description': |
| 149 'The type of module (string), defaults to blank for regular modules', |
| 150 'status': 'The module status', |
| 151 'location': 'The module path, not including filename', |
| 152 'name': 'The name of the module', |
| 153 'product_name': 'The name of the product the module belongs to', |
| 154 'description': 'The module description', |
| 155 'version': 'The module version', |
| 156 'digital_signer': 'The signer of the digital certificate for the module', |
| 157 'recommended_action': 'The help tips bitmask', |
| 158 'possible_resolution': 'The help tips in string form', |
| 159 'help_url': 'The link to the Help Center article' |
| 160 } |
| 161 ] |
| 162 }; |
| 163 |
| 164 /** |
| 165 * Takes the |moduleListData| input argument which represents data about |
| 166 * the currently available modules and populates the html jstemplate |
| 167 * with that data. It expects an object structure like the above. |
| 168 * @param {Object} moduleListData Information about available modules |
| 169 */ |
| 170 function renderTemplate(moduleListData) { |
| 171 // This is the javascript code that processes the template: |
| 172 var input = new JsEvalContext(moduleListData); |
| 173 var output = document.getElementById('modulesTemplate'); |
| 174 jstProcess(input, output); |
| 175 } |
| 176 |
| 177 /** |
| 178 * Asks the C++ ConflictsDOMHandler to get details about the available modules |
| 179 * and return detailed data about the configuration. The ConflictsDOMHandler |
| 180 * should reply to returnModuleList() (below). |
| 181 */ |
| 182 function requestModuleListData() { |
| 183 chrome.send('requestModuleList', []); |
| 184 } |
| 185 |
| 186 /** |
| 187 * Called by the dom_ui to re-populate the page with data representing the |
| 188 * current state of installed modules. |
| 189 */ |
| 190 function returnModuleList(moduleListData) { |
| 191 var bodyContainer = document.getElementById('body-container'); |
| 192 renderTemplate(moduleListData); |
| 193 bodyContainer.style.visibility = 'visible'; |
| 194 } |
| 195 |
| 196 // Get data and have it displayed upon loading. |
| 197 document.addEventListener('DOMContentLoaded', requestModuleListData); |
| 198 |
| 199 </script> |
| 200 </head> |
| 201 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> |
| 202 <div id="body-container" style="visibility:hidden"> |
| 203 |
| 204 <div id="header"><h1 i18n-content="modulesLongTitle">TITLE</h1></div> |
| 205 |
| 206 <div id="blurb-container"> |
| 207 <span i18n-content="modulesBlurb">MODULES BLURB</span> |
| 208 </div> |
| 209 |
| 210 <div id="modulesTemplate"> |
| 211 |
| 212 <div id="container" class="vbox-container"> |
| 213 <div id="top" class="wbox"> |
| 214 |
| 215 <div class="section-header"> |
| 216 <table cellpadding="0" cellspacing="0"><tr valign="center"> |
| 217 <td> |
| 218 <span class="section-header-title" |
| 219 jscontent="modulesTableTitle">TITLE</span> |
| 220 </td> |
| 221 </tr></table> |
| 222 </div> |
| 223 |
| 224 </div> |
| 225 </div> |
| 226 |
| 227 <div class="content"> |
| 228 <div class="module-name no-modules" |
| 229 jsdisplay="moduleList.length === 0"> |
| 230 <div i18n-content="modulesNoneLoaded">NO_MODULES_ARE_AVAILABLE</div> |
| 231 </div> |
| 232 |
| 233 <div jsdisplay="moduleList.length > 0"> |
| 234 <div class="module" jsselect="moduleList"> |
| 235 <table width="100%" cellpadding="0" cellspacing="0"> |
| 236 <tr class="module-loaded"> |
| 237 <td valign="top"> |
| 238 <table cellpadding="2" cellspacing="0"> |
| 239 <tr> |
| 240 <td colspan="2"><span class="module-name" dir="ltr" |
| 241 jscontent="name">NAME</span> |
| 242 </td> |
| 243 </tr> |
| 244 <tr> |
| 245 <td width="75"><span i18n-content="headerSoftware" /></td> |
| 246 <td><span dir="ltr" jsdisplay="type_description.length > 0"> |
| 247 <span dir="ltr" |
| 248 jscontent="type_description">MODULE_TYPE</span>: </span> |
| 249 <span dir="ltr" jsvalues=".innerHTML:description"></span> |
| 250 <span dir="ltr" jsdisplay="version.length > 0"> - </span> |
| 251 <span dir="ltr" jscontent="version">VERSION</span></td> |
| 252 </tr> |
| 253 <tr jsdisplay="digital_signer.length > 0"> |
| 254 <td><span i18n-content="headerSignedBy" /></td> |
| 255 <td><span dir="ltr" jscontent="digital_signer">SIGNER</span></td> |
| 256 </tr> |
| 257 <tr> |
| 258 <td><span i18n-content="headerLocation" /></td> |
| 259 <td><span dir="ltr" |
| 260 jscontent="location">LOCATION</span><span |
| 261 dir="ltr" jscontent="name">NAME</span></td> |
| 262 </tr> |
| 263 <tr jsdisplay="status == 2 || status == 3"> |
| 264 <td><span i18n-content="headerWarning" /></td> |
| 265 <td><span jsdisplay="status == 2" |
| 266 i18n-content="moduleSuspectedBad" |
| 267 class="suspected-bad">SUSPECTED_BAD</span> |
| 268 <span jsdisplay="status == 3" |
| 269 i18n-content="moduleConfirmedBad" |
| 270 class="confirmed-bad">CONFIRMED_BAD</span> |
| 271 <a jsdisplay="help_url.length > 0" |
| 272 jsvalues=".href:help_url"><span |
| 273 i18n-content="helpCenterLink">HELP_CENTER</span></a> |
| 274 </td> |
| 275 </tr> |
| 276 <tr jsdisplay="possibleResolution.length > 0"> |
| 277 <td><span i18n-content="headerHelpTip" /></td> |
| 278 <td><span |
| 279 jscontent="possibleResolution">POSSIBLE_RESOLUTION</span></td> |
| 280 </tr> |
| 281 </table> |
| 282 |
| 283 </td> |
| 284 </tr> |
| 285 </table> |
| 286 </div> |
| 287 </div> |
| 288 </div> |
| 289 </div> |
| 290 </div> |
| 291 </body> |
| 292 </html> |
OLD | NEW |