| <!DOCTYPE HTML> |
| <html i18n-values="dir:textdirection;"> |
| <head> |
| <meta charset="utf-8"> |
| <style> |
| body { |
| margin: 10px; |
| min-width: 47em; |
| } |
| |
| a { |
| color: blue; |
| font-size: 103%; |
| } |
| |
| div#header { |
| margin-bottom: 1.05em; |
| /* 67px is the height of the header's background image. */ |
| min-height: 67px; |
| overflow: hidden; |
| padding-bottom: 20px; |
| -webkit-padding-start: 0; |
| padding-top: 20px; |
| position: relative; |
| box-sizing: border-box; |
| } |
| |
| #header h1 { |
| background: url('../../app/theme/about_conflicts.png') 0px 20px no-repeat; |
| display: inline; |
| margin: 0; |
| padding-bottom: 43px; |
| padding-left: 75px; |
| padding-top: 40px; |
| } |
| |
| html[dir=rtl] #header h1 { |
| background: url('../../app/theme/about_conflicts.png') right no-repeat; |
| padding-right: 95px; |
| padding-left: 0; |
| } |
| |
| h1 { |
| font-size: 156%; |
| font-weight: bold; |
| padding: 0; |
| margin: 0; |
| } |
| |
| #blurb-container { |
| padding-bottom: 1.5em; |
| font-size: 120%; |
| } |
| |
| div.content { |
| font-size: 88%; |
| margin-top: 5px; |
| } |
| |
| .section-header { |
| background: #ebeff9; |
| border-top: 1px solid #b5c7de; |
| font-size: 99%; |
| padding-bottom: 2px; |
| -webkit-padding-start: 5px; |
| padding-top: 3px; |
| width: 100%; |
| } |
| |
| .section-header > table > tr > td:first-child { |
| width: 100%; |
| } |
| |
| .section-header > table { |
| width: 100%; |
| } |
| |
| .section-header-title { |
| font-weight: bold; |
| } |
| |
| .vbox-container { |
| display: -webkit-box; |
| -webkit-box-orient: vertical; |
| } |
| |
| .wbox { |
| display: -webkit-box; |
| -webkit-box-align: stretch; |
| -webkit-box-flex: 1; |
| } |
| |
| #top { |
| -webkit-padding-end: 5px; |
| } |
| |
| .module-loaded > td { |
| padding-bottom: 4px; |
| padding-top: 5px; |
| } |
| |
| .module { |
| border-bottom: 1px solid #cdcdcd; |
| } |
| |
| .module-name { |
| font-weight: bold; |
| } |
| |
| .no-modules { |
| margin: 6em 0 0; |
| text-align: center; |
| font-size: 1.2em; |
| } |
| |
| .suspected-bad { |
| color: #DD7700; |
| } |
| |
| .confirmed-bad { |
| color: red; |
| } |
| |
| .nowrap { |
| white-space: nowrap; |
| } |
| |
| .extra-info-text { |
| margin-top: -1em; |
| margin-bottom: 1em; |
| } |
| |
| .clearing { |
| clear: left; |
| float: left; |
| } |
| |
| html[dir=rtl] .clearing { |
| clear: right; |
| float: right; |
| } |
| |
| .datacell { |
| border-bottom: 1px solid #aaa; |
| } |
| </style> |
| <script> |
| |
| /** |
| * This variable structure is here to document the structure that the template |
| * expects to correctly populate the page. |
| */ |
| var moduleListDataFormat = { |
| 'moduleList': [ |
| { |
| 'type': 'The type of module found', |
| 'type_description': |
| 'The type of module (string), defaults to blank for regular modules', |
| 'status': 'The module status', |
| 'location': 'The module path, not including filename', |
| 'name': 'The name of the module', |
| 'product_name': 'The name of the product the module belongs to', |
| 'description': 'The module description', |
| 'version': 'The module version', |
| 'digital_signer': 'The signer of the digital certificate for the module', |
| 'recommended_action': 'The help tips bitmask', |
| 'possible_resolution': 'The help tips in string form', |
| 'help_url': 'The link to the Help Center article' |
| } |
| ] |
| }; |
| |
| /** |
| * Takes the |moduleListData| input argument which represents data about |
| * the currently available modules and populates the html jstemplate |
| * with that data. It expects an object structure like the above. |
| * @param {Object} moduleListData Information about available modules |
| */ |
| function renderTemplate(moduleListData) { |
| // This is the javascript code that processes the template: |
| var input = new JsEvalContext(moduleListData); |
| var output = document.getElementById('modulesTemplate'); |
| jstProcess(input, output); |
| } |
| |
| /** |
| * Asks the C++ ConflictsDOMHandler to get details about the available modules |
| * and return detailed data about the configuration. The ConflictsDOMHandler |
| * should reply to returnModuleList() (below). |
| */ |
| function requestModuleListData() { |
| chrome.send('requestModuleList', []); |
| } |
| |
| /** |
| * Called by the WebUI to re-populate the page with data representing the |
| * current state of installed modules. |
| */ |
| function returnModuleList(moduleListData) { |
| renderTemplate(moduleListData); |
| document.getElementById('loading-message').style.visibility = 'hidden'; |
| document.getElementById('body-container').style.visibility = 'visible'; |
| } |
| |
| // Get data and have it displayed upon loading. |
| document.addEventListener('DOMContentLoaded', requestModuleListData); |
| |
| </script> |
| </head> |
| <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> |
| <div id="loading-message" i18n-content="loadingMessage">LOADING_MESSAGE</div> |
| |
| <div id="body-container" style="visibility:hidden"> |
| |
| <div id="header"><h1 i18n-content="modulesLongTitle">TITLE</h1></div> |
| |
| <div id="blurb-container"> |
| <span i18n-content="modulesBlurb">MODULES BLURB</span> |
| </div> |
| |
| <div id="modulesTemplate"> |
| |
| <div id="container" class="vbox-container"> |
| <div id="top" class="wbox"> |
| |
| <div class="section-header"> |
| <table cellpadding="0" cellspacing="0"><tr valign="center"> |
| <td> |
| <span class="section-header-title" |
| jscontent="modulesTableTitle">TITLE</span> |
| </td> |
| </tr></table> |
| </div> |
| |
| </div> |
| </div> |
| |
| <div class="content"> |
| <div class="module-name no-modules" |
| jsdisplay="moduleList.length === 0"> |
| <div i18n-content="modulesNoneLoaded">NO_MODULES_ARE_AVAILABLE</div> |
| </div> |
| |
| <div jsdisplay="moduleList.length > 0"> |
| <table width="100%" cellpadding="0" cellspacing="0"> |
| <tr class="module-loaded"> |
| <td valign="top"> |
| <table cellpadding="2" cellspacing="0" border="0"> |
| <tr> |
| <td class="datacell"><span dir="ltr" i18n-content="headerSoftware" |
| >SOFTWARE</span></td> |
| <td class="datacell"><span dir="ltr" i18n-content="headerSignedBy" |
| >SIGNER</span></td> |
| <td class="datacell"><span dir="ltr" i18n-content="headerVersion" |
| >VERSION</span></td> |
| <td class="datacell"><span dir="ltr" i18n-content="headerLocation" |
| >LOCATION</span></td> |
| </tr> |
| <tr jsselect="moduleList"> |
| <td valign="top" class="datacell"> |
| <span dir="ltr" |
| jsvalues=".innerHTML:description" |
| class="clearing nowrap"></span> |
| <div jsdisplay="status == 2 || status == 3" |
| class="extra-info-text"> |
| <span class="clearing"> |
| <span jsdisplay="status == 2" |
| i18n-content="moduleSuspectedBad" |
| class="suspected-bad">SUSPECTED_BAD</span> |
| <span jsdisplay="status == 3" |
| i18n-content="moduleConfirmedBad" |
| class="confirmed-bad">CONFIRMED_BAD</span> |
| </span> |
| <span class="clearing"> |
| <span jsdisplay="possibleResolution.length > 0"> |
| <span jscontent="possibleResolution" |
| >POSSIBLE_RESOLUTION</span> |
| </span> |
| <a jsdisplay="help_url.length > 0" |
| jsvalues=".href:help_url" |
| i18n-content="helpCenterLink">HELP_CENTER</a> |
| </span> |
| </div> |
| </td> |
| <td valign="top" class="datacell"><span dir="ltr" |
| jscontent="digital_signer" |
| class="nowrap">SIGNER</span></td> |
| <td valign="top" class="datacell"><span dir="ltr" |
| jscontent="version" |
| class="nowrap">VERSION</span |
| ></td> |
| <td valign="top" class="datacell"> |
| <span class="nowrap"> |
| <span dir="ltr" jscontent="location">LOCATION</span><strong |
| ><span dir="ltr" jscontent="name">NAME</span></strong> |
| <span dir="ltr" |
| jsdisplay="type_description.length > 0" |
| >(<span dir="ltr" |
| jscontent="type_description">MODULE_TYPE</span |
| >)</span> |
| </span> |
| </td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| </table> |
| </div> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |
