Add entries header

_locales/en/messages.json

@@ -353,6 +353,18 @@
     "message": "Find more styles for this site",
     "description": "Text for a link that gets a list of styles for the current site"
   },
+  "headerTitleColumn": {
+    "message": "Title",
+    "description": "Entry title column header"
+  },
+  "headerActionsColumn": {
+    "message": "Actions",
+    "description": "Entry actions column header"
+  },
+  "headerAppliesToColumn": {
+    "message": "Sites",
+    "description": "Entry applies to (sites) column header"
+  },
   "helpAlt": {
     "message": "Help",
     "description": "Alternate text for help buttons"

manage/manage.css

@@ -104,6 +104,32 @@ label.nobreak input {
   border-top: none;
 }
 
+.newUI .entry:first-child > * {
+  position: relative;
+  padding-top: 20px;
+}
+
+.newUI .entry:first-child > :after {
+  font-weight: bold;
+  font-size: 14px;
+  border-bottom: 1px solid #ddd;
+  width: 100%;
+  height: 1.2rem;
+  position: absolute;
+  left: 0;
+  top: -1.1rem;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.entry:first-child .style-name:after {
+  text-indent: 1.2rem;
+}
+
+.entry:first-child .actions:after {
+  text-indent: -25px; /* adjust for svg negative margin */
+}
+
 .svg-icon {
   cursor: pointer;
   vertical-align: middle;
@@ -267,7 +293,7 @@ label.nobreak input {
 
 .newUI #installed {
   display: table;
-  margin-top: .75rem;
+  margin-top: 1.3rem;
   margin-bottom: .75rem;
 }
 
@@ -907,6 +933,7 @@ fieldset select {
 
   #installed {
     padding-left: 0;
+    margin-top: .75rem;
   }
 
   fieldset {

manage/manage.js

@@ -91,6 +91,7 @@ function initGlobalEvents() {
     #update-all-no-updates[data-skipped-edited="true"]:after {
       content: " ${t('updateAllCheckSucceededSomeEdited')}";
     }
+    ${getHeaderText()}
   `}));
 }
 
@@ -512,6 +513,20 @@ function switchUI({styleOnly} = {}) {
 }
 
 
+function getHeaderText() {
+  return `
+    .newUI .entry:first-child .style-name:after {
+      content: "${t('headerTitleColumn')}"
+    }
+    .newUI .entry:first-child .actions:after {
+      content: "${t('headerActionsColumn')}"
+    }
+    .newUI .entry:first-child .applies-to:after {
+      content: "${t('headerAppliesToColumn')}"
+    }`;
+}
+
+
 function rememberScrollPosition() {
   history.replaceState({scrollY: window.scrollY}, document.title);
 }