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