Enhance readability of chrome://conflicts page

- Enable hover highlighting for rows of the conflicts page.
- Allow filtering module list by hosting process type.
- Remove dead CSS classes.

Bug: 1010574
Change-Id: Ib02da5a17931ebfff963cff5cc0718f0f1e03b22
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1834947
Commit-Queue: Eric Lawrence [MSFT] <ericlaw@microsoft.com>
Reviewed-by: Patrick Monette <pmonette@chromium.org>
Cr-Commit-Position: refs/heads/master@{#702924}

chrome/browser/resources/conflicts/about_conflicts.html

@@ -11,7 +11,7 @@ body {
 
 a {
   color: blue;
-  font-size: 103%;
+  text-decoration: none;
 }
 
 #header {
@@ -96,8 +96,8 @@ div.content {
   padding-top: 5px;
 }
 
-.module {
-  border-bottom: 1px solid #cdcdcd;
+.module:hover {
+  background: rgb(255, 255, 170);
 }
 
 .module-name {
@@ -110,23 +110,10 @@ div.content {
   text-align: center;
 }
 
-.suspected-bad {
-  color: rgb(221, 119, 0);
-}
-
-.confirmed-bad {
-  color: red;
-}
-
 .nowrap {
   white-space: nowrap;
 }
 
-.extra-info-text {
-  margin-bottom: 1em;
-  margin-top: -1em;
-}
-
 .clearing {
   clear: left;
   float: left;
@@ -150,7 +137,9 @@ html[dir=rtl] .clearing {
   <div id="header"><h1>Modules loaded</h1></div>
 
   <div id="blurb-container">
-    <span>This page lists all modules loaded into the browser and renderer processes and modules registered to load at a later point.</span>
+    <span>This page lists <a href="#">all</a> modules loaded into the
+       <a href="#B">browser</a> and <a href="#R">renderer</a> processes and
+       modules registered to load at a <a href="#None">later</a> point.</span>
   </div>
 
   <div id="modulesTemplate">
@@ -211,7 +200,8 @@ html[dir=rtl] .clearing {
               <span dir="ltr">Conflicts Status</span>
             </td>
           </tr>
-          <tr jsselect="moduleList">
+          <tr jsvalues="data-process:process_types.toLowerCase()"
+            jsselect="moduleList" class="module">
             <td valign="top" class="datacell">
               <span dir="ltr"
                     jsvalues=".innerHTML:description"

chrome/browser/resources/conflicts/about_conflicts.js

@@ -42,6 +42,22 @@ function requestModuleListData() {
   cr.sendWithPromise('requestModuleList').then(returnModuleList);
 }
 
+/**
+ * Filters list of displayed modules to those listed in the process types
+ * specified in the url fragment. For instance, chrome://conflicts/#r will show
+ * only those modules that have loaded into a renderer.
+ */
+function filterModuleListData() {
+  const filter = window.location.hash.substr(1).toLowerCase();
+  const modules = document.getElementsByClassName('module');
+
+  // Loop through all modules, and hide all that don't match the filter.
+  for (i = 0; i < modules.length; ++i) {
+    modules[i].style.display =
+        modules[i].dataset.process.includes(filter) ? '' : 'none';
+  }
+}
+
 /**
  * Called by the WebUI to re-populate the page with data representing the
  * current state of installed modules.
@@ -49,9 +65,13 @@ function requestModuleListData() {
  */
 function returnModuleList(moduleListData) {
   renderTemplate(moduleListData);
+  if (window.location.hash.length > 1) {
+    filterModuleListData();
+  }
   $('loading-message').style.visibility = 'hidden';
   $('body-container').style.visibility = 'visible';
 }
 
 // Get data and have it displayed upon loading.
 document.addEventListener('DOMContentLoaded', requestModuleListData);
+window.addEventListener('hashchange', filterModuleListData, false);