Prettier PR error section.

Also, extract pr-reviewer-suggestions.js
1.0.20.xpi

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Sage's BitBucket Addon",
   "description": "Ensure searches don't include forks (and other enhancements)",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "manifest_version": 2,
   "browser_specific_settings": {
     "gecko": {

show-errored-prs.js

@@ -45,6 +45,72 @@ const getElementAfterErrorList = mainPanel => {
   return mainPanel.children[1]
 }
 
+const buildPrRow = pr => {
+  const row = document.createElement('tr')
+  row.className = 'pull-request-row'
+
+  const avatar = document.createElement('td')
+  avatar.className = 'avatar-column'
+  avatar.innerHTML = `
+    <div class="user-avatar author-avatar">
+      <div style="display: inline-block; position: relative; outline: 0px;">
+          <span class="css-1dyoea">
+              <span style="background-image: url('/users/${pr.author.user.name}/avatar.png?s=64'); border-radius: 50%;"
+              role="img" aria-label="Michael Mezzina" class="css-ob4lje"></span>
+          </span>
+      </div>
+    </div>
+  `
+  row.appendChild(avatar)
+
+  const summaryColumn = document.createElement('td')
+  summaryColumn.className = 'summary-column'
+  row.appendChild(summaryColumn)
+
+  const prSummary = document.createElement('div')
+  prSummary.className = 'pr-summary'
+  summaryColumn.appendChild(prSummary)
+
+  const title = document.createElement('div')
+  title.className = 'title'
+  prSummary.appendChild(title)
+
+  const link = document.createElement('a')
+  link.href = pr.links.self[0].href
+  link.innerText = pr.title
+  title.appendChild(link)
+
+  const details = document.createElement('div')
+  details.className = 'details'
+  prSummary.appendChild(details)
+  console.log('pr', JSON.stringify(pr, null, 2))
+  details.innerHTML = `
+  <span class="user-name details-item">${pr.author.user.displayName}</span>
+  <span class="details-item">-</span>
+  <span class="details-item pr-id">#${pr.id}</span>
+  <span class="details-item pr-project-repo">${pr.toRef.repository.project.name} / ${pr.toRef.repository.name}</span>
+  <span class="ref-lozenge details-item" data-project-key="${pr.toRef.repository.project.key}" data-repo-slug="${pr.toRef.repository.name}">
+      <span role="presentation">
+          <span class="ref-lozenge-content" role="presentation">
+              <span>${pr.toRef.displayId}</span>
+          </span>
+      </span>
+  </span>
+  `
+
+  const placeholderColumn = document.createElement('td')
+  placeholderColumn.className = 'placeholder-column'
+  placeholderColumn.innerHTML = '&nbsp;'
+  row.appendChild(placeholderColumn)
+
+  const buildColumn = document.createElement('td')
+  buildColumn.className = 'build-column'
+  buildColumn.innerHTML = '&nbsp'
+  row.appendChild(buildColumn)
+
+  return row
+}
+
 const showErroredPrs = async () => {
   if (getCurrentUser() !== 'sagevaillancourt') {
     return
@@ -53,33 +119,48 @@ const showErroredPrs = async () => {
   let errorParent = document.getElementById('bb-addon-pr-error-table')
   let errorList = document.getElementById('bb-addon-pr-error-list')
   if (!errorParent) {
-    errorParent = mainPanel.getElementsByClassName('dashboard-pull-request-table')[0].cloneNode()
+    errorParent = mainPanel.getElementsByClassName('closed-pull-requests')[0].cloneNode()
     errorParent.id = 'bb-addon-pr-error-table'
 
     const header = document.createElement('h3')
     header.innerText = 'Pull requests with errors'
     errorParent.appendChild(header)
 
-    errorList = document.createElement('ul')
+    const table = document.createElement('table')
+    errorParent.appendChild(table)
+
+    const thead = document.createElement('thead')
+    table.appendChild(thead)
+
+    const tr = document.createElement('tr')
+    thead.appendChild(tr)
+
+    const summaryColumn = document.createElement('th')
+    summaryColumn.className = 'summary-column'
+    summaryColumn.colSpan = 6
+    tr.appendChild(summaryColumn)
+
+    const reviewersColumn = document.createElement('th')
+    reviewersColumn.className = 'reviewers-column'
+    reviewersColumn.innerHTML = '&nbsp;'
+    tr.appendChild(reviewersColumn)
+
+    const buildsColumn = document.createElement('th')
+    buildsColumn.className = 'builds-column'
+    buildsColumn.innerHTML = '&nbsp;'
+    tr.appendChild(buildsColumn)
+
+    errorList = document.createElement('tbody')
+    table.appendChild(errorList)
+
     errorList.id = 'bb-addon-pr-error-list'
-    errorList.style.listStyle = 'none'
-    errorList.style.fontSize = '0.9em'
-    errorParent.appendChild(errorList)
 
     mainPanel.insertBefore(errorParent, getElementAfterErrorList(mainPanel))
   }
 
   const erroredPrs = await getErroredPrs()
   Array.from(errorList.children).forEach(child => errorList.removeChild(child))
-  erroredPrs.forEach(pr => {
+  erroredPrs.map(buildPrRow).forEach(row => errorList.appendChild(row))
-    const element = document.createElement('li')
-    const link = document.createElement('a')
-    link.href = pr.links.self[0].href
-    link.innerText = pr.title
-    link.style.color = 'black'
-    element.appendChild(link)
-    errorList.appendChild(element)
-  })
 }
 
 if (location.toString().includes('/dashboard')) {