browser/resources/about_conflicts.html

<!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 dom_ui to re-populate the page with data representing the
  * current state of installed modules.
  */
  function returnModuleList(moduleListData) {
    var bodyContainer = document.getElementById('body-container');
    renderTemplate(moduleListData);
    bodyContainer.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="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 &gt; 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 &gt; 0">
                    <span jscontent="possibleResolution"
                        >POSSIBLE_RESOLUTION</span>
                  </span>
                  <a jsdisplay="help_url.length &gt; 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 &gt; 0"
                    >(<span dir="ltr"
                            jscontent="type_description">MODULE_TYPE</span
                    >)</span>
              </span>
            </td>
          </tr>
        </table>
      </td>
      </tr>
      </table>
      </div>
    </div>
  </div>
</div>
</body>
</html>