1 files changed, 22 insertions, 3 deletions
diff --git a/devtools/client/shared/widgets/Chart.jsm b/devtools/client/shared/widgets/Chart.jsm
index 0894a62ca..0b7cb71fb 100644
--- a/devtools/client/shared/widgets/Chart.jsm
+++ b/devtools/client/shared/widgets/Chart.jsm
@@ -105,7 +105,7 @@ function PieTableChart(node, pie, table) {
  *           - "mouseout", when the mouse leaves a slice or a row
  *           - "click", when the mouse enters a slice or a row
  */
-function createPieTableChart(document, { title, diameter, data, strings, totals, sorted }) {
+function createPieTableChart(document, { title, diameter, data, strings, totals, sorted, header }) {
   if (data && sorted) {
     data = data.slice().sort((a, b) => +(a.size < b.size));
   }
@@ -119,7 +119,8 @@ function createPieTableChart(document, { title, diameter, data, strings, totals,
     title: title,
     data: data,
     strings: strings,
-    totals: totals
+    totals: totals,
+    header: header,
   });
 
   let container = document.createElement("hbox");
@@ -338,7 +339,7 @@ function createPieChart(document, { data, width, height, centerX, centerY, radiu
  *           - "mouseout", when the mouse leaves a row
  *           - "click", when the mouse clicks a row
  */
-function createTableChart(document, { title, data, strings, totals }) {
+function createTableChart(document, { title, data, strings, totals, header }) {
   strings = strings || {};
   totals = totals || {};
   let isPlaceholder = false;
@@ -371,6 +372,24 @@ function createTableChart(document, { title, data, strings, totals }) {
   tableNode.className = "plain table-chart-grid";
   container.appendChild(tableNode);
 
+  const headerNode = document.createElement("div");
+  headerNode.className = "table-chart-row";
+
+  const headerBoxNode = document.createElement("div");
+  headerBoxNode.className = "table-chart-row-box";
+  headerNode.appendChild(headerBoxNode);
+
+  for (let [key, value] of Object.entries(header)) {
+    let headerLabelNode = document.createElement("span");
+    headerLabelNode.className = "plain table-chart-row-label";
+    headerLabelNode.setAttribute("name", key);
+    headerLabelNode.textContent = value;
+
+    headerNode.appendChild(headerLabelNode);
+  }
+
+  tableNode.appendChild(headerNode);
+
   for (let rowInfo of data) {
     let rowNode = document.createElement("hbox");
     rowNode.className = "table-chart-row";