Reorganize and tidy up the graphics section of about:support. (bug 1263849, r=milan)

toolkit/content/aboutSupport.js

@@ -238,7 +238,42 @@ var snapshotFormatters = {
       return out;
     };
 
-    // graphics-info-properties tbody
+    // Create a <tr> element with key and value columns.
+    //
+    // @key      Text in the key column. Localized automatically, unless starts with "#".
+    // @value    Text in the value column. Not localized.
+    function buildRow(key, value) {
+      let title;
+      if (key[0] == "#") {
+        title = key.substr(1);
+      } else {
+        try {
+          title = strings.GetStringFromName(key);
+        } catch (e) {
+          title = key;
+        }
+      }
+      return $.new("tr", [
+        $.new("th", title, "column"),
+        $.new("td", value),
+      ]);
+    }
+
+    // @where    The name in "graphics-<name>-tbody", of the element to append to.
+    // @trs      Array of row elements.
+    function addRows(where, trs) {
+      $.append($('graphics-' + where + '-tbody'), trs);
+    }
+
+    // Build and append a row.
+    //
+    // @where    The name in "graphics-<name>-tbody", of the element to append to.
+    function addRow(where, key, value) {
+      addRows(where, [buildRow(key, value)]);
+    }
+    if (data.clearTypeParameters !== undefined) {
+      addRow("diagnostics", "clearTypeParameters", data.clearTypeParameters);
+    }
     if ("info" in data) {
       apzInfo = formatApzInfo(data.info);
 
@@ -248,7 +283,8 @@ var snapshotFormatters = {
           $.new("td", String(val)),
         ]);
       });
-      $.append($("graphics-info-properties"), trs);
+      addRows("diagnostics", trs);
+
       delete data.info;
     }
 
@@ -279,76 +315,115 @@ var snapshotFormatters = {
                           return $.new("p", val);
                        }))])]);
       }
-
-      delete data.failures;
+    } else {
+      $("graphics-failures-tbody").style.display = "none";
     }
 
-    // graphics-tbody tbody
+    // Add a new row to the table, and take the key (or keys) out of data.
+    //
+    // @where        Table section to add to.
+    // @key          Data key to use.
+    // @colKey       The localization key to use, if different from key.
+    function addRowFromKey(where, key, colKey) {
+      if (!(key in data))
+        return;
+      colKey = colKey || key;
 
-    let out = Object.create(data);
+      let value;
+      let messageKey = key + "Message";
+      if (messageKey in data) {
+        value = localizedMsg(data[messageKey]);
+        delete data[messageKey];
+      } else {
+        value = data[key];
+      }
+      delete data[key];
 
-    if (apzInfo.length == 0)
-      out.asyncPanZoom = localizedMsg(["apzNone"]);
-    else
-      out.asyncPanZoom = apzInfo.join("; ");
+      if (value) {
+        addRow(where, colKey, value);
+      }
+    }
 
-    out.acceleratedWindows =
-      data.numAcceleratedWindows + "/" + data.numTotalWindows;
-    if (data.windowLayerManagerType)
-      out.acceleratedWindows += " " + data.windowLayerManagerType;
-    if (data.windowLayerManagerRemote)
-      out.acceleratedWindows += " (OMTC)";
-    if (data.numAcceleratedWindowsMessage)
-      out.acceleratedWindows +=
-        " " + localizedMsg(data.numAcceleratedWindowsMessage);
-    delete data.numAcceleratedWindows;
-    delete data.numTotalWindows;
+    // graphics-features-tbody
+
+    let compositor = data.windowLayerManagerRemote
+                     ? data.windowLayerManagerType
+                     : "BasicLayers (" + strings.GetStringFromName("mainThreadNoOMTC") + ")";
+    addRow("features", "compositing", compositor);
+    delete data.windowLayerManagerRemote;
     delete data.windowLayerManagerType;
-    delete data.numAcceleratedWindowsMessage;
+    delete data.numTotalWindows;
+    delete data.numAcceleratedWindows;
 
-    if ("direct2DEnabledMessage" in data) {
-      out.direct2DEnabled = localizedMsg(data.direct2DEnabledMessage);
-      delete data.direct2DEnabledMessage;
-      delete data.direct2DEnabled;
-    }
+    addRow("features", "asyncPanZoom",
+           apzInfo.length
+           ? apzInfo.join("; ")
+           : localizedMsg(["apzNone"]));
+    addRowFromKey("features", "webglRenderer");
+    addRowFromKey("features", "supportsHardwareH264", "hardwareH264");
+    addRowFromKey("features", "direct2DEnabled", "#Direct2D");
 
     if ("directWriteEnabled" in data) {
-      out.directWriteEnabled = data.directWriteEnabled;
+      let message = data.directWriteEnabled;
       if ("directWriteVersion" in data)
-        out.directWriteEnabled += " (" + data.directWriteVersion + ")";
+        message += " (" + data.directWriteVersion + ")";
+      addRow("features", "#DirectWrite", message);
       delete data.directWriteEnabled;
       delete data.directWriteVersion;
     }
 
-    if ("webglRendererMessage" in data) {
-      out.webglRenderer = localizedMsg(data.webglRendererMessage);
-      delete data.webglRendererMessage;
-      delete data.webglRenderer;
-    }
+    // Adapter tbodies.
+    let adapterKeys = [
+      ["adapterDescription"],
+      ["adapterVendorID"],
+      ["adapterDeviceID"],
+      ["driverVersion"],
+      ["driverDate"],
+      ["adapterDrivers"],
+      ["adapterSubsysID"],
+      ["adapterRAM"],
+    ];
 
-    let localizedOut = {};
-    for (let prop in out) {
-      let val = out[prop];
-      if (typeof(val) == "string" && !val)
-        // Ignore properties that are empty strings.
-        continue;
-      try {
-        var localizedName = strings.GetStringFromName(prop);
+    function showGpu(id, suffix) {
+      function get(prop) {
+        return data[prop + suffix];
       }
-      catch (err) {
-        // This shouldn't happen, but if there's a reported graphics property
-        // that isn't in the string bundle, don't let it break the page.
-        localizedName = prop;
+
+      let trs = [];
+      for (let key of adapterKeys) {
+        let value = get(key);
+        if (value === undefined || value === "")
+          continue;
+        trs.push(buildRow(key, value));
       }
-      localizedOut[localizedName] = val;
+
+      if (trs.length == 0) {
+        $("graphics-" + id + "-tbody").style.display = "none";
+        return;
+      }
+
+      let active = "yes";
+      if ("isGPU2Active" in data && ((suffix == "2") != data.isGPU2Active)) {
+        active = "no";
+      }
+      addRow(id, "active", strings.GetStringFromName(active));
+      addRows(id, trs);
+    };
+    showGpu("gpu-1", "");
+    showGpu("gpu-2", "2");
+
+    // Remove adapter keys.
+    for (let key of adapterKeys) {
+      delete data[key];
+      delete data[key + "2"];
+    }
+    delete data.isGPU2Active;
+
+    // Now that we're done, grab any remaining keys in data and drop them into
+    // the diagnostics section.
+    for (let key in data) {
+      addRow("diagnostics", key, data[key]);
     }
-    let trs = sortedArrayFromObject(localizedOut).map(function ([prop, val]) {
-      return $.new("tr", [
-        $.new("th", prop, "column"),
-        $.new("td", val),
-      ]);
-    });
-    $.append($("graphics-tbody"), trs);
   },
 
   javaScript: function javaScript(data) {

toolkit/content/aboutSupport.xhtml

@@ -299,13 +299,47 @@
       </h2>
 
       <table>
+        <tbody id="graphics-features-tbody">
+          <tr>
+            <th colspan="2" class="title-column">
+              &aboutSupport.graphicsFeaturesTitle;
+            </th>
+          </tr>
+        </tbody>
+
         <tbody id="graphics-tbody">
         </tbody>
 
-        <tbody id="graphics-info-properties">
+        <tbody id="graphics-gpu-1-tbody">
+          <tr>
+            <th colspan="2" class="title-column">
+              &aboutSupport.graphicsGPU1Title;
+            </th>
+          </tr>
+        </tbody>
+
+        <tbody id="graphics-gpu-2-tbody">
+          <tr>
+            <th colspan="2" class="title-column">
+              &aboutSupport.graphicsGPU2Title;
+            </th>
+          </tr>
+        </tbody>
+
+        <tbody id="graphics-diagnostics-tbody">
+          <tr>
+            <th colspan="2" class="title-column">
+              &aboutSupport.graphicsDiagnosticsTitle;
+            </th>
+          </tr>
         </tbody>
 
         <tbody id="graphics-failures-tbody">
+          <tr>
+            <th colspan="2" class="title-column">
+              &aboutSupport.graphicsFailureLogTitle;
+            </th>
+          </tr>
         </tbody>
       </table>
 

toolkit/locales/en-US/chrome/global/aboutSupport.dtd

@@ -108,3 +108,9 @@ variant of aboutSupport.showDir.label. -->
 
 <!ENTITY aboutSupport.safeModeTitle "Try Safe Mode">
 <!ENTITY aboutSupport.restartInSafeMode.label "Restart with Add-ons Disabled…">
+
+<!ENTITY aboutSupport.graphicsFeaturesTitle "Features">
+<!ENTITY aboutSupport.graphicsDiagnosticsTitle "Diagnostics">
+<!ENTITY aboutSupport.graphicsFailureLogTitle "Failure Log">
+<!ENTITY aboutSupport.graphicsGPU1Title "GPU #1">
+<!ENTITY aboutSupport.graphicsGPU2Title "GPU #2">

toolkit/locales/en-US/chrome/global/aboutSupport.properties

@@ -27,18 +27,6 @@ crashesTimeDays=#1 day ago;#1 days ago
 # #1 number of pending crash reports
 pendingReports=All Crash Reports (including #1 pending crash in the given time range);All Crash Reports (including #1 pending crashes in the given time range)
 
-# LOCALIZATION NOTE In the following strings, "Direct2D", "DirectWrite" and "ClearType" 
-# are proper nouns and should not be translated. Feel free to leave english strings if 
-# there are no good translations, these are only used in about:support
-
-# LOCALIZATION NOTE: This can be localized with a more generic term, like
-# "Graphics-accelerated Windows". It describes a number of windows, e.g.:
-# "GPU Accelerated Windows: 2/2 (Direct3D 9)"
-# "GPU Accelerated Windows: 0/2"
-acceleratedWindows = GPU Accelerated Windows
-
-supportsHardwareH264 = Supports Hardware H264 Decoding
-
 # LOCALIZATION NOTE (rawDataCopied) Text displayed in a mobile "Toast" to user when the
 # raw data is successfully copied to the clipboard via button press.
 rawDataCopied=Raw data copied to clipboard
@@ -62,28 +50,29 @@ blockedOSVersion = Blocked for your operating system version.
 # LOCALIZATION NOTE The verb "blocked" here refers to a graphics feature such as "Direct2D" or "OpenGL layers".
 blockedMismatchedVersion = Blocked for your graphics driver version mismatch between registry and DLL.
 
-direct2DEnabled = Direct2D Enabled
-directWriteEnabled = DirectWrite Enabled
+# LOCALIZATION NOTE In the following strings, "Direct2D", "DirectWrite" and "ClearType" 
+# are proper nouns and should not be translated. Feel free to leave english strings if 
+# there are no good translations, these are only used in about:support
 clearTypeParameters = ClearType Parameters
-clearTypeParametersNotFound = ClearType parameters not found
-adapterDescription = Adapter Description
+
+compositing = Compositing
+hardwareH264 = Hardware H264 Decoding
+mainThreadNoOMTC = main thread, no OMTC
+yes = Yes
+no = No
+
+adapterDescription = Description
 adapterVendorID = Vendor ID
 adapterDeviceID = Device ID
 adapterSubsysID = Subsys ID
-adapterDrivers = Adapter Drivers
-adapterRAM = Adapter RAM
+adapterDrivers = Drivers
+adapterRAM = RAM
 driverVersion = Driver Version
 driverDate = Driver Date
-adapterDescription2 = Adapter Description (GPU #2) 
-adapterVendorID2 = Vendor ID (GPU #2) 
-adapterDeviceID2 = Device ID (GPU #2)
-adapterSubsysID2 = Subsys ID (GPU #2)
-adapterDrivers2 = Adapter Drivers (GPU #2)
-adapterRAM2 = Adapter RAM (GPU #2)
-driverVersion2 = Driver Version (GPU #2)
-driverDate2 = Driver Date (GPU #2)
-isGPU2Active = GPU #2 Active
+active = Active
 webglRenderer = WebGL Renderer
+GPU1 = GPU #1
+GPU2 = GPU #2
 
 minLibVersions = Expected minimum version
 loadedLibVersions = Version in use

toolkit/themes/shared/aboutSupport.css

@@ -53,6 +53,12 @@ th {
   color: var(--in-content-selected-text);
 }
 
+th.title-column {
+  white-space: nowrap;
+  width: 0px;
+  font-size: medium;
+}
+
 th.column {
   white-space: nowrap;
   width: 0px;