--- a/browser/extensions/pdfjs/README.mozilla
+++ b/browser/extensions/pdfjs/README.mozilla
@@ -1,5 +1,5 @@
 This is the PDF.js project output, https://github.com/mozilla/pdf.js
 
-Current extension version is: 2.1.153
+Current extension version is: 2.1.176
 
-Taken from upstream commit: 5a2bd9fc
+Taken from upstream commit: e4d2a160

--- a/browser/extensions/pdfjs/content/PdfJsDefaultPreferences.jsm
+++ b/browser/extensions/pdfjs/content/PdfJsDefaultPreferences.jsm
@@ -37,11 +37,12 @@ var PdfJsDefaultPreferences = Object.fre
  "useOnlyCssZoom": false,
  "externalLinkTarget": 0,
  "renderer": "canvas",
  "renderInteractiveForms": false,
  "enablePrintAutoRotate": false,
  "disableOpenActionDestination": true,
  "disablePageMode": false,
  "disablePageLabels": false,
+ "historyUpdateUrl": false,
  "scrollModeOnLoad": 0,
  "spreadModeOnLoad": 0
 });

--- a/browser/extensions/pdfjs/content/build/pdf.js
+++ b/browser/extensions/pdfjs/content/build/pdf.js
@@ -118,18 +118,18 @@ return /******/ (function(modules) { // 
 /************************************************************************/
 /******/ ([
 /* 0 */
 /***/ (function(module, exports, __w_pdfjs_require__) {
 
 "use strict";
 
 
-var pdfjsVersion = '2.1.153';
-var pdfjsBuild = '5a2bd9fc';
+var pdfjsVersion = '2.1.176';
+var pdfjsBuild = 'e4d2a160';
 
 var pdfjsSharedUtil = __w_pdfjs_require__(1);
 
 var pdfjsDisplayAPI = __w_pdfjs_require__(7);
 
 var pdfjsDisplayTextLayer = __w_pdfjs_require__(19);
 
 var pdfjsDisplayAnnotationLayer = __w_pdfjs_require__(20);
@@ -5149,17 +5149,17 @@ function _fetchDocument(worker, source, 
 
   if (pdfDataRangeTransport) {
     source.length = pdfDataRangeTransport.length;
     source.initialData = pdfDataRangeTransport.initialData;
   }
 
   return worker.messageHandler.sendWithPromise('GetDocRequest', {
     docId,
-    apiVersion: '2.1.153',
+    apiVersion: '2.1.176',
     source: {
       data: source.data,
       url: source.url,
       password: source.password,
       disableAutoFetch: source.disableAutoFetch,
       rangeChunkSize: source.rangeChunkSize,
       length: source.length
     },
@@ -6880,19 +6880,19 @@ const InternalRenderTask = function Inte
       }
     }
 
   }
 
   return InternalRenderTask;
 }();
 
-const version = '2.1.153';
+const version = '2.1.176';
 exports.version = version;
-const build = '5a2bd9fc';
+const build = 'e4d2a160';
 exports.build = build;
 
 /***/ }),
 /* 8 */
 /***/ (function(module, exports, __w_pdfjs_require__) {
 
 "use strict";
 
@@ -10694,17 +10694,17 @@ function isWhitespaceString(s) {
     }
   }
 
   return true;
 }
 
 class XMLParserBase {
   _resolveEntities(s) {
-    return s.replace(/&([^;]+);/g, function (all, entity) {
+    return s.replace(/&([^;]+);/g, (all, entity) => {
       if (entity.substring(0, 2) === '#x') {
         return String.fromCharCode(parseInt(entity.substring(2), 16));
       } else if (entity.substring(0, 1) === '#') {
         return String.fromCharCode(parseInt(entity.substring(1), 10));
       }
 
       switch (entity) {
         case 'lt':
@@ -10984,16 +10984,21 @@ class SimpleDOMNode {
   get nextSibling() {
     const childNodes = this.parentNode.childNodes;
 
     if (!childNodes) {
       return undefined;
     }
 
     const index = childNodes.indexOf(this);
+
+    if (index === -1) {
+      return undefined;
+    }
+
     return childNodes[index + 1];
   }
 
   get textContent() {
     if (!this.childNodes) {
       return this.nodeValue || '';
     }
 
@@ -11073,19 +11078,23 @@ class SimpleXMLParser extends XMLParserB
     }
 
     this._stack.push(this._currentFragment);
 
     this._currentFragment = node.childNodes;
   }
 
   onEndElement(name) {
-    this._currentFragment = this._stack.pop();
+    this._currentFragment = this._stack.pop() || [];
     const lastElement = this._currentFragment[this._currentFragment.length - 1];
 
+    if (!lastElement) {
+      return;
+    }
+
     for (let i = 0, ii = lastElement.childNodes.length; i < ii; i++) {
       lastElement.childNodes[i].parentNode = lastElement;
     }
   }
 
   onError(code) {
     this._errorCode = code;
   }

--- a/browser/extensions/pdfjs/content/build/pdf.worker.js
+++ b/browser/extensions/pdfjs/content/build/pdf.worker.js
@@ -118,18 +118,18 @@ return /******/ (function(modules) { // 
 /************************************************************************/
 /******/ ([
 /* 0 */
 /***/ (function(module, exports, __w_pdfjs_require__) {
 
 "use strict";
 
 
-var pdfjsVersion = '2.1.153';
-var pdfjsBuild = '5a2bd9fc';
+var pdfjsVersion = '2.1.176';
+var pdfjsBuild = 'e4d2a160';
 
 var pdfjsCoreWorker = __w_pdfjs_require__(1);
 
 exports.WorkerMessageHandler = pdfjsCoreWorker.WorkerMessageHandler;
 
 /***/ }),
 /* 1 */
 /***/ (function(module, exports, __w_pdfjs_require__) {
@@ -370,17 +370,17 @@ var WorkerMessageHandler = {
   },
 
   createDocumentHandler(docParams, port) {
     var pdfManager;
     var terminated = false;
     var cancelXHRs = null;
     var WorkerTasks = [];
     let apiVersion = docParams.apiVersion;
-    let workerVersion = '2.1.153';
+    let workerVersion = '2.1.176';
 
     if (apiVersion !== workerVersion) {
       throw new Error(`The API version "${apiVersion}" does not match ` + `the Worker version "${workerVersion}".`);
     }
 
     var docId = docParams.docId;
     var docBaseUrl = docParams.docBaseUrl;
     var workerHandlerName = docParams.docId + '_worker';
@@ -14937,360 +14937,356 @@ exports.Jbig2Image = Jbig2Image;
 
 "use strict";
 
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ArithmeticDecoder = void 0;
-
-var ArithmeticDecoder = function ArithmeticDecoderClosure() {
-  var QeTable = [{
-    qe: 0x5601,
-    nmps: 1,
-    nlps: 1,
-    switchFlag: 1
-  }, {
-    qe: 0x3401,
-    nmps: 2,
-    nlps: 6,
-    switchFlag: 0
-  }, {
-    qe: 0x1801,
-    nmps: 3,
-    nlps: 9,
-    switchFlag: 0
-  }, {
-    qe: 0x0AC1,
-    nmps: 4,
-    nlps: 12,
-    switchFlag: 0
-  }, {
-    qe: 0x0521,
-    nmps: 5,
-    nlps: 29,
-    switchFlag: 0
-  }, {
-    qe: 0x0221,
-    nmps: 38,
-    nlps: 33,
-    switchFlag: 0
-  }, {
-    qe: 0x5601,
-    nmps: 7,
-    nlps: 6,
-    switchFlag: 1
-  }, {
-    qe: 0x5401,
-    nmps: 8,
-    nlps: 14,
-    switchFlag: 0
-  }, {
-    qe: 0x4801,
-    nmps: 9,
-    nlps: 14,
-    switchFlag: 0
-  }, {
-    qe: 0x3801,
-    nmps: 10,
-    nlps: 14,
-    switchFlag: 0
-  }, {
-    qe: 0x3001,
-    nmps: 11,
-    nlps: 17,
-    switchFlag: 0
-  }, {
-    qe: 0x2401,
-    nmps: 12,
-    nlps: 18,
-    switchFlag: 0
-  }, {
-    qe: 0x1C01,
-    nmps: 13,
-    nlps: 20,
-    switchFlag: 0
-  }, {
-    qe: 0x1601,
-    nmps: 29,
-    nlps: 21,
-    switchFlag: 0
-  }, {
-    qe: 0x5601,
-    nmps: 15,
-    nlps: 14,
-    switchFlag: 1
-  }, {
-    qe: 0x5401,
-    nmps: 16,
-    nlps: 14,
-    switchFlag: 0
-  }, {
-    qe: 0x5101,
-    nmps: 17,
-    nlps: 15,
-    switchFlag: 0
-  }, {
-    qe: 0x4801,
-    nmps: 18,
-    nlps: 16,
-    switchFlag: 0
-  }, {
-    qe: 0x3801,
-    nmps: 19,
-    nlps: 17,
-    switchFlag: 0
-  }, {
-    qe: 0x3401,
-    nmps: 20,
-    nlps: 18,
-    switchFlag: 0
-  }, {
-    qe: 0x3001,
-    nmps: 21,
-    nlps: 19,
-    switchFlag: 0
-  }, {
-    qe: 0x2801,
-    nmps: 22,
-    nlps: 19,
-    switchFlag: 0
-  }, {
-    qe: 0x2401,
-    nmps: 23,
-    nlps: 20,
-    switchFlag: 0
-  }, {
-    qe: 0x2201,
-    nmps: 24,
-    nlps: 21,
-    switchFlag: 0
-  }, {
-    qe: 0x1C01,
-    nmps: 25,
-    nlps: 22,
-    switchFlag: 0
-  }, {
-    qe: 0x1801,
-    nmps: 26,
-    nlps: 23,
-    switchFlag: 0
-  }, {
-    qe: 0x1601,
-    nmps: 27,
-    nlps: 24,
-    switchFlag: 0
-  }, {
-    qe: 0x1401,
-    nmps: 28,
-    nlps: 25,
-    switchFlag: 0
-  }, {
-    qe: 0x1201,
-    nmps: 29,
-    nlps: 26,
-    switchFlag: 0
-  }, {
-    qe: 0x1101,
-    nmps: 30,
-    nlps: 27,
-    switchFlag: 0
-  }, {
-    qe: 0x0AC1,
-    nmps: 31,
-    nlps: 28,
-    switchFlag: 0
-  }, {
-    qe: 0x09C1,
-    nmps: 32,
-    nlps: 29,
-    switchFlag: 0
-  }, {
-    qe: 0x08A1,
-    nmps: 33,
-    nlps: 30,
-    switchFlag: 0
-  }, {
-    qe: 0x0521,
-    nmps: 34,
-    nlps: 31,
-    switchFlag: 0
-  }, {
-    qe: 0x0441,
-    nmps: 35,
-    nlps: 32,
-    switchFlag: 0
-  }, {
-    qe: 0x02A1,
-    nmps: 36,
-    nlps: 33,
-    switchFlag: 0
-  }, {
-    qe: 0x0221,
-    nmps: 37,
-    nlps: 34,
-    switchFlag: 0
-  }, {
-    qe: 0x0141,
-    nmps: 38,
-    nlps: 35,
-    switchFlag: 0
-  }, {
-    qe: 0x0111,
-    nmps: 39,
-    nlps: 36,
-    switchFlag: 0
-  }, {
-    qe: 0x0085,
-    nmps: 40,
-    nlps: 37,
-    switchFlag: 0
-  }, {
-    qe: 0x0049,
-    nmps: 41,
-    nlps: 38,
-    switchFlag: 0
-  }, {
-    qe: 0x0025,
-    nmps: 42,
-    nlps: 39,
-    switchFlag: 0
-  }, {
-    qe: 0x0015,
-    nmps: 43,
-    nlps: 40,
-    switchFlag: 0
-  }, {
-    qe: 0x0009,
-    nmps: 44,
-    nlps: 41,
-    switchFlag: 0
-  }, {
-    qe: 0x0005,
-    nmps: 45,
-    nlps: 42,
-    switchFlag: 0
-  }, {
-    qe: 0x0001,
-    nmps: 45,
-    nlps: 43,
-    switchFlag: 0
-  }, {
-    qe: 0x5601,
-    nmps: 46,
-    nlps: 46,
-    switchFlag: 0
-  }];
-
-  function ArithmeticDecoder(data, start, end) {
+const QeTable = [{
+  qe: 0x5601,
+  nmps: 1,
+  nlps: 1,
+  switchFlag: 1
+}, {
+  qe: 0x3401,
+  nmps: 2,
+  nlps: 6,
+  switchFlag: 0
+}, {
+  qe: 0x1801,
+  nmps: 3,
+  nlps: 9,
+  switchFlag: 0
+}, {
+  qe: 0x0AC1,
+  nmps: 4,
+  nlps: 12,
+  switchFlag: 0
+}, {
+  qe: 0x0521,
+  nmps: 5,
+  nlps: 29,
+  switchFlag: 0
+}, {
+  qe: 0x0221,
+  nmps: 38,
+  nlps: 33,
+  switchFlag: 0
+}, {
+  qe: 0x5601,
+  nmps: 7,
+  nlps: 6,
+  switchFlag: 1
+}, {
+  qe: 0x5401,
+  nmps: 8,
+  nlps: 14,
+  switchFlag: 0
+}, {
+  qe: 0x4801,
+  nmps: 9,
+  nlps: 14,
+  switchFlag: 0
+}, {
+  qe: 0x3801,
+  nmps: 10,
+  nlps: 14,
+  switchFlag: 0
+}, {
+  qe: 0x3001,
+  nmps: 11,
+  nlps: 17,
+  switchFlag: 0
+}, {
+  qe: 0x2401,
+  nmps: 12,
+  nlps: 18,
+  switchFlag: 0
+}, {
+  qe: 0x1C01,
+  nmps: 13,
+  nlps: 20,
+  switchFlag: 0
+}, {
+  qe: 0x1601,
+  nmps: 29,
+  nlps: 21,
+  switchFlag: 0
+}, {
+  qe: 0x5601,
+  nmps: 15,
+  nlps: 14,
+  switchFlag: 1
+}, {
+  qe: 0x5401,
+  nmps: 16,
+  nlps: 14,
+  switchFlag: 0
+}, {
+  qe: 0x5101,
+  nmps: 17,
+  nlps: 15,
+  switchFlag: 0
+}, {
+  qe: 0x4801,
+  nmps: 18,
+  nlps: 16,
+  switchFlag: 0
+}, {
+  qe: 0x3801,
+  nmps: 19,
+  nlps: 17,
+  switchFlag: 0
+}, {
+  qe: 0x3401,
+  nmps: 20,
+  nlps: 18,
+  switchFlag: 0
+}, {
+  qe: 0x3001,
+  nmps: 21,
+  nlps: 19,
+  switchFlag: 0
+}, {
+  qe: 0x2801,
+  nmps: 22,
+  nlps: 19,
+  switchFlag: 0
+}, {
+  qe: 0x2401,
+  nmps: 23,
+  nlps: 20,
+  switchFlag: 0
+}, {
+  qe: 0x2201,
+  nmps: 24,
+  nlps: 21,
+  switchFlag: 0
+}, {
+  qe: 0x1C01,
+  nmps: 25,
+  nlps: 22,
+  switchFlag: 0
+}, {
+  qe: 0x1801,
+  nmps: 26,
+  nlps: 23,
+  switchFlag: 0
+}, {
+  qe: 0x1601,
+  nmps: 27,
+  nlps: 24,
+  switchFlag: 0
+}, {
+  qe: 0x1401,
+  nmps: 28,
+  nlps: 25,
+  switchFlag: 0
+}, {
+  qe: 0x1201,
+  nmps: 29,
+  nlps: 26,
+  switchFlag: 0
+}, {
+  qe: 0x1101,
+  nmps: 30,
+  nlps: 27,
+  switchFlag: 0
+}, {
+  qe: 0x0AC1,
+  nmps: 31,
+  nlps: 28,
+  switchFlag: 0
+}, {
+  qe: 0x09C1,
+  nmps: 32,
+  nlps: 29,
+  switchFlag: 0
+}, {
+  qe: 0x08A1,
+  nmps: 33,
+  nlps: 30,
+  switchFlag: 0
+}, {
+  qe: 0x0521,
+  nmps: 34,
+  nlps: 31,
+  switchFlag: 0
+}, {
+  qe: 0x0441,
+  nmps: 35,
+  nlps: 32,
+  switchFlag: 0
+}, {
+  qe: 0x02A1,
+  nmps: 36,
+  nlps: 33,
+  switchFlag: 0
+}, {
+  qe: 0x0221,
+  nmps: 37,
+  nlps: 34,
+  switchFlag: 0
+}, {
+  qe: 0x0141,
+  nmps: 38,
+  nlps: 35,
+  switchFlag: 0
+}, {
+  qe: 0x0111,
+  nmps: 39,
+  nlps: 36,
+  switchFlag: 0
+}, {
+  qe: 0x0085,
+  nmps: 40,
+  nlps: 37,
+  switchFlag: 0
+}, {
+  qe: 0x0049,
+  nmps: 41,
+  nlps: 38,
+  switchFlag: 0
+}, {
+  qe: 0x0025,
+  nmps: 42,
+  nlps: 39,
+  switchFlag: 0
+}, {
+  qe: 0x0015,
+  nmps: 43,
+  nlps: 40,
+  switchFlag: 0
+}, {
+  qe: 0x0009,
+  nmps: 44,
+  nlps: 41,
+  switchFlag: 0
+}, {
+  qe: 0x0005,
+  nmps: 45,
+  nlps: 42,
+  switchFlag: 0
+}, {
+  qe: 0x0001,
+  nmps: 45,
+  nlps: 43,
+  switchFlag: 0
+}, {
+  qe: 0x5601,
+  nmps: 46,
+  nlps: 46,
+  switchFlag: 0
+}];
+
+class ArithmeticDecoder {
+  constructor(data, start, end) {
     this.data = data;
     this.bp = start;
     this.dataEnd = end;
     this.chigh = data[start];
     this.clow = 0;
     this.byteIn();
     this.chigh = this.chigh << 7 & 0xFFFF | this.clow >> 9 & 0x7F;
     this.clow = this.clow << 7 & 0xFFFF;
     this.ct -= 7;
     this.a = 0x8000;
   }
 
-  ArithmeticDecoder.prototype = {
-    byteIn: function ArithmeticDecoder_byteIn() {
-      var data = this.data;
-      var bp = this.bp;
-
-      if (data[bp] === 0xFF) {
-        var b1 = data[bp + 1];
-
-        if (b1 > 0x8F) {
-          this.clow += 0xFF00;
-          this.ct = 8;
-        } else {
-          bp++;
-          this.clow += data[bp] << 9;
-          this.ct = 7;
-          this.bp = bp;
-        }
+  byteIn() {
+    const data = this.data;
+    let bp = this.bp;
+
+    if (data[bp] === 0xFF) {
+      if (data[bp + 1] > 0x8F) {
+        this.clow += 0xFF00;
+        this.ct = 8;
       } else {
         bp++;
-        this.clow += bp < this.dataEnd ? data[bp] << 8 : 0xFF00;
-        this.ct = 8;
+        this.clow += data[bp] << 9;
+        this.ct = 7;
         this.bp = bp;
       }
-
-      if (this.clow > 0xFFFF) {
-        this.chigh += this.clow >> 16;
-        this.clow &= 0xFFFF;
-      }
-    },
-    readBit: function ArithmeticDecoder_readBit(contexts, pos) {
-      var cx_index = contexts[pos] >> 1,
-          cx_mps = contexts[pos] & 1;
-      var qeTableIcx = QeTable[cx_index];
-      var qeIcx = qeTableIcx.qe;
-      var d;
-      var a = this.a - qeIcx;
-
-      if (this.chigh < qeIcx) {
-        if (a < qeIcx) {
-          a = qeIcx;
-          d = cx_mps;
-          cx_index = qeTableIcx.nmps;
-        } else {
-          a = qeIcx;
-          d = 1 ^ cx_mps;
-
-          if (qeTableIcx.switchFlag === 1) {
-            cx_mps = d;
-          }
-
-          cx_index = qeTableIcx.nlps;
-        }
-      } else {
-        this.chigh -= qeIcx;
-
-        if ((a & 0x8000) !== 0) {
-          this.a = a;
-          return cx_mps;
-        }
-
-        if (a < qeIcx) {
-          d = 1 ^ cx_mps;
-
-          if (qeTableIcx.switchFlag === 1) {
-            cx_mps = d;
-          }
-
-          cx_index = qeTableIcx.nlps;
-        } else {
-          d = cx_mps;
-          cx_index = qeTableIcx.nmps;
-        }
-      }
-
-      do {
-        if (this.ct === 0) {
-          this.byteIn();
-        }
-
-        a <<= 1;
-        this.chigh = this.chigh << 1 & 0xFFFF | this.clow >> 15 & 1;
-        this.clow = this.clow << 1 & 0xFFFF;
-        this.ct--;
-      } while ((a & 0x8000) === 0);
-
-      this.a = a;
-      contexts[pos] = cx_index << 1 | cx_mps;
-      return d;
-    }
-  };
-  return ArithmeticDecoder;
-}();
+    } else {
+      bp++;
+      this.clow += bp < this.dataEnd ? data[bp] << 8 : 0xFF00;
+      this.ct = 8;
+      this.bp = bp;
+    }
+
+    if (this.clow > 0xFFFF) {
+      this.chigh += this.clow >> 16;
+      this.clow &= 0xFFFF;
+    }
+  }
+
+  readBit(contexts, pos) {
+    let cx_index = contexts[pos] >> 1,
+        cx_mps = contexts[pos] & 1;
+    const qeTableIcx = QeTable[cx_index];
+    const qeIcx = qeTableIcx.qe;
+    let d;
+    let a = this.a - qeIcx;
+
+    if (this.chigh < qeIcx) {
+      if (a < qeIcx) {
+        a = qeIcx;
+        d = cx_mps;
+        cx_index = qeTableIcx.nmps;
+      } else {
+        a = qeIcx;
+        d = 1 ^ cx_mps;
+
+        if (qeTableIcx.switchFlag === 1) {
+          cx_mps = d;
+        }
+
+        cx_index = qeTableIcx.nlps;
+      }
+    } else {
+      this.chigh -= qeIcx;
+
+      if ((a & 0x8000) !== 0) {
+        this.a = a;
+        return cx_mps;
+      }
+
+      if (a < qeIcx) {
+        d = 1 ^ cx_mps;
+
+        if (qeTableIcx.switchFlag === 1) {
+          cx_mps = d;
+        }
+
+        cx_index = qeTableIcx.nlps;
+      } else {
+        d = cx_mps;
+        cx_index = qeTableIcx.nmps;
+      }
+    }
+
+    do {
+      if (this.ct === 0) {
+        this.byteIn();
+      }
+
+      a <<= 1;
+      this.chigh = this.chigh << 1 & 0xFFFF | this.clow >> 15 & 1;
+      this.clow = this.clow << 1 & 0xFFFF;
+      this.ct--;
+    } while ((a & 0x8000) === 0);
+
+    this.a = a;
+    contexts[pos] = cx_index << 1 | cx_mps;
+    return d;
+  }
+
+}
 
 exports.ArithmeticDecoder = ArithmeticDecoder;
 
 /***/ }),
 /* 20 */
 /***/ (function(module, exports, __w_pdfjs_require__) {
 
 "use strict";
@@ -21980,17 +21976,18 @@ class AnnotationBorderStyle {
     this.style = _util.AnnotationBorderStyleType.SOLID;
     this.dashArray = [3];
     this.horizontalCornerRadius = 0;
     this.verticalCornerRadius = 0;
   }
 
   setWidth(width) {
     if ((0, _primitives.isName)(width)) {
-      width = parseFloat(width.name);
+      this.width = 0;
+      return;
     }
 
     if (Number.isInteger(width)) {
       this.width = width;
     }
   }
 
   setStyle(style) {
@@ -28764,17 +28761,29 @@ var Font = function FontClosure() {
           if (metrics) {
             metrics.data = null;
           }
 
           return;
         }
 
         font.pos = (font.start ? font.start : 0) + header.offset;
-        font.pos += header.length - 2;
+        font.pos += 4;
+        font.pos += 2;
+        font.pos += 2;
+        font.pos += 2;
+        font.pos += 2;
+        font.pos += 2;
+        font.pos += 2;
+        font.pos += 2;
+        font.pos += 2;
+        font.pos += 2;
+        font.pos += 2;
+        font.pos += 8;
+        font.pos += 2;
         var numOfMetrics = font.getUint16();
 
         if (numOfMetrics > numGlyphs) {
           (0, _util.info)('The numOfMetrics (' + numOfMetrics + ') should not be ' + 'greater than the numGlyphs (' + numGlyphs + ')');
           numOfMetrics = numGlyphs;
           header.data[34] = (numOfMetrics & 0xff00) >> 8;
           header.data[35] = numOfMetrics & 0x00ff;
         }
@@ -32255,21 +32264,21 @@ exports.CFFCompiler = CFFCompiler;
 
 "use strict";
 
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExpertSubsetCharset = exports.ExpertCharset = exports.ISOAdobeCharset = void 0;
-var ISOAdobeCharset = ['.notdef', 'space', 'exclam', 'quotedbl', 'numbersign', 'dollar', 'percent', 'ampersand', 'quoteright', 'parenleft', 'parenright', 'asterisk', 'plus', 'comma', 'hyphen', 'period', 'slash', 'zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'colon', 'semicolon', 'less', 'equal', 'greater', 'question', 'at', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'bracketleft', 'backslash', 'bracketright', 'asciicircum', 'underscore', 'quoteleft', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'braceleft', 'bar', 'braceright', 'asciitilde', 'exclamdown', 'cent', 'sterling', 'fraction', 'yen', 'florin', 'section', 'currency', 'quotesingle', 'quotedblleft', 'guillemotleft', 'guilsinglleft', 'guilsinglright', 'fi', 'fl', 'endash', 'dagger', 'daggerdbl', 'periodcentered', 'paragraph', 'bullet', 'quotesinglbase', 'quotedblbase', 'quotedblright', 'guillemotright', 'ellipsis', 'perthousand', 'questiondown', 'grave', 'acute', 'circumflex', 'tilde', 'macron', 'breve', 'dotaccent', 'dieresis', 'ring', 'cedilla', 'hungarumlaut', 'ogonek', 'caron', 'emdash', 'AE', 'ordfeminine', 'Lslash', 'Oslash', 'OE', 'ordmasculine', 'ae', 'dotlessi', 'lslash', 'oslash', 'oe', 'germandbls', 'onesuperior', 'logicalnot', 'mu', 'trademark', 'Eth', 'onehalf', 'plusminus', 'Thorn', 'onequarter', 'divide', 'brokenbar', 'degree', 'thorn', 'threequarters', 'twosuperior', 'registered', 'minus', 'eth', 'multiply', 'threesuperior', 'copyright', 'Aacute', 'Acircumflex', 'Adieresis', 'Agrave', 'Aring', 'Atilde', 'Ccedilla', 'Eacute', 'Ecircumflex', 'Edieresis', 'Egrave', 'Iacute', 'Icircumflex', 'Idieresis', 'Igrave', 'Ntilde', 'Oacute', 'Ocircumflex', 'Odieresis', 'Ograve', 'Otilde', 'Scaron', 'Uacute', 'Ucircumflex', 'Udieresis', 'Ugrave', 'Yacute', 'Ydieresis', 'Zcaron', 'aacute', 'acircumflex', 'adieresis', 'agrave', 'aring', 'atilde', 'ccedilla', 'eacute', 'ecircumflex', 'edieresis', 'egrave', 'iacute', 'icircumflex', 'idieresis', 'igrave', 'ntilde', 'oacute', 'ocircumflex', 'odieresis', 'ograve', 'otilde', 'scaron', 'uacute', 'ucircumflex', 'udieresis', 'ugrave', 'yacute', 'ydieresis', 'zcaron'];
+const ISOAdobeCharset = ['.notdef', 'space', 'exclam', 'quotedbl', 'numbersign', 'dollar', 'percent', 'ampersand', 'quoteright', 'parenleft', 'parenright', 'asterisk', 'plus', 'comma', 'hyphen', 'period', 'slash', 'zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'colon', 'semicolon', 'less', 'equal', 'greater', 'question', 'at', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'bracketleft', 'backslash', 'bracketright', 'asciicircum', 'underscore', 'quoteleft', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'braceleft', 'bar', 'braceright', 'asciitilde', 'exclamdown', 'cent', 'sterling', 'fraction', 'yen', 'florin', 'section', 'currency', 'quotesingle', 'quotedblleft', 'guillemotleft', 'guilsinglleft', 'guilsinglright', 'fi', 'fl', 'endash', 'dagger', 'daggerdbl', 'periodcentered', 'paragraph', 'bullet', 'quotesinglbase', 'quotedblbase', 'quotedblright', 'guillemotright', 'ellipsis', 'perthousand', 'questiondown', 'grave', 'acute', 'circumflex', 'tilde', 'macron', 'breve', 'dotaccent', 'dieresis', 'ring', 'cedilla', 'hungarumlaut', 'ogonek', 'caron', 'emdash', 'AE', 'ordfeminine', 'Lslash', 'Oslash', 'OE', 'ordmasculine', 'ae', 'dotlessi', 'lslash', 'oslash', 'oe', 'germandbls', 'onesuperior', 'logicalnot', 'mu', 'trademark', 'Eth', 'onehalf', 'plusminus', 'Thorn', 'onequarter', 'divide', 'brokenbar', 'degree', 'thorn', 'threequarters', 'twosuperior', 'registered', 'minus', 'eth', 'multiply', 'threesuperior', 'copyright', 'Aacute', 'Acircumflex', 'Adieresis', 'Agrave', 'Aring', 'Atilde', 'Ccedilla', 'Eacute', 'Ecircumflex', 'Edieresis', 'Egrave', 'Iacute', 'Icircumflex', 'Idieresis', 'Igrave', 'Ntilde', 'Oacute', 'Ocircumflex', 'Odieresis', 'Ograve', 'Otilde', 'Scaron', 'Uacute', 'Ucircumflex', 'Udieresis', 'Ugrave', 'Yacute', 'Ydieresis', 'Zcaron', 'aacute', 'acircumflex', 'adieresis', 'agrave', 'aring', 'atilde', 'ccedilla', 'eacute', 'ecircumflex', 'edieresis', 'egrave', 'iacute', 'icircumflex', 'idieresis', 'igrave', 'ntilde', 'oacute', 'ocircumflex', 'odieresis', 'ograve', 'otilde', 'scaron', 'uacute', 'ucircumflex', 'udieresis', 'ugrave', 'yacute', 'ydieresis', 'zcaron'];
 exports.ISOAdobeCharset = ISOAdobeCharset;
-var ExpertCharset = ['.notdef', 'space', 'exclamsmall', 'Hungarumlautsmall', 'dollaroldstyle', 'dollarsuperior', 'ampersandsmall', 'Acutesmall', 'parenleftsuperior', 'parenrightsuperior', 'twodotenleader', 'onedotenleader', 'comma', 'hyphen', 'period', 'fraction', 'zerooldstyle', 'oneoldstyle', 'twooldstyle', 'threeoldstyle', 'fouroldstyle', 'fiveoldstyle', 'sixoldstyle', 'sevenoldstyle', 'eightoldstyle', 'nineoldstyle', 'colon', 'semicolon', 'commasuperior', 'threequartersemdash', 'periodsuperior', 'questionsmall', 'asuperior', 'bsuperior', 'centsuperior', 'dsuperior', 'esuperior', 'isuperior', 'lsuperior', 'msuperior', 'nsuperior', 'osuperior', 'rsuperior', 'ssuperior', 'tsuperior', 'ff', 'fi', 'fl', 'ffi', 'ffl', 'parenleftinferior', 'parenrightinferior', 'Circumflexsmall', 'hyphensuperior', 'Gravesmall', 'Asmall', 'Bsmall', 'Csmall', 'Dsmall', 'Esmall', 'Fsmall', 'Gsmall', 'Hsmall', 'Ismall', 'Jsmall', 'Ksmall', 'Lsmall', 'Msmall', 'Nsmall', 'Osmall', 'Psmall', 'Qsmall', 'Rsmall', 'Ssmall', 'Tsmall', 'Usmall', 'Vsmall', 'Wsmall', 'Xsmall', 'Ysmall', 'Zsmall', 'colonmonetary', 'onefitted', 'rupiah', 'Tildesmall', 'exclamdownsmall', 'centoldstyle', 'Lslashsmall', 'Scaronsmall', 'Zcaronsmall', 'Dieresissmall', 'Brevesmall', 'Caronsmall', 'Dotaccentsmall', 'Macronsmall', 'figuredash', 'hypheninferior', 'Ogoneksmall', 'Ringsmall', 'Cedillasmall', 'onequarter', 'onehalf', 'threequarters', 'questiondownsmall', 'oneeighth', 'threeeighths', 'fiveeighths', 'seveneighths', 'onethird', 'twothirds', 'zerosuperior', 'onesuperior', 'twosuperior', 'threesuperior', 'foursuperior', 'fivesuperior', 'sixsuperior', 'sevensuperior', 'eightsuperior', 'ninesuperior', 'zeroinferior', 'oneinferior', 'twoinferior', 'threeinferior', 'fourinferior', 'fiveinferior', 'sixinferior', 'seveninferior', 'eightinferior', 'nineinferior', 'centinferior', 'dollarinferior', 'periodinferior', 'commainferior', 'Agravesmall', 'Aacutesmall', 'Acircumflexsmall', 'Atildesmall', 'Adieresissmall', 'Aringsmall', 'AEsmall', 'Ccedillasmall', 'Egravesmall', 'Eacutesmall', 'Ecircumflexsmall', 'Edieresissmall', 'Igravesmall', 'Iacutesmall', 'Icircumflexsmall', 'Idieresissmall', 'Ethsmall', 'Ntildesmall', 'Ogravesmall', 'Oacutesmall', 'Ocircumflexsmall', 'Otildesmall', 'Odieresissmall', 'OEsmall', 'Oslashsmall', 'Ugravesmall', 'Uacutesmall', 'Ucircumflexsmall', 'Udieresissmall', 'Yacutesmall', 'Thornsmall', 'Ydieresissmall'];
+const ExpertCharset = ['.notdef', 'space', 'exclamsmall', 'Hungarumlautsmall', 'dollaroldstyle', 'dollarsuperior', 'ampersandsmall', 'Acutesmall', 'parenleftsuperior', 'parenrightsuperior', 'twodotenleader', 'onedotenleader', 'comma', 'hyphen', 'period', 'fraction', 'zerooldstyle', 'oneoldstyle', 'twooldstyle', 'threeoldstyle', 'fouroldstyle', 'fiveoldstyle', 'sixoldstyle', 'sevenoldstyle', 'eightoldstyle', 'nineoldstyle', 'colon', 'semicolon', 'commasuperior', 'threequartersemdash', 'periodsuperior', 'questionsmall', 'asuperior', 'bsuperior', 'centsuperior', 'dsuperior', 'esuperior', 'isuperior', 'lsuperior', 'msuperior', 'nsuperior', 'osuperior', 'rsuperior', 'ssuperior', 'tsuperior', 'ff', 'fi', 'fl', 'ffi', 'ffl', 'parenleftinferior', 'parenrightinferior', 'Circumflexsmall', 'hyphensuperior', 'Gravesmall', 'Asmall', 'Bsmall', 'Csmall', 'Dsmall', 'Esmall', 'Fsmall', 'Gsmall', 'Hsmall', 'Ismall', 'Jsmall', 'Ksmall', 'Lsmall', 'Msmall', 'Nsmall', 'Osmall', 'Psmall', 'Qsmall', 'Rsmall', 'Ssmall', 'Tsmall', 'Usmall', 'Vsmall', 'Wsmall', 'Xsmall', 'Ysmall', 'Zsmall', 'colonmonetary', 'onefitted', 'rupiah', 'Tildesmall', 'exclamdownsmall', 'centoldstyle', 'Lslashsmall', 'Scaronsmall', 'Zcaronsmall', 'Dieresissmall', 'Brevesmall', 'Caronsmall', 'Dotaccentsmall', 'Macronsmall', 'figuredash', 'hypheninferior', 'Ogoneksmall', 'Ringsmall', 'Cedillasmall', 'onequarter', 'onehalf', 'threequarters', 'questiondownsmall', 'oneeighth', 'threeeighths', 'fiveeighths', 'seveneighths', 'onethird', 'twothirds', 'zerosuperior', 'onesuperior', 'twosuperior', 'threesuperior', 'foursuperior', 'fivesuperior', 'sixsuperior', 'sevensuperior', 'eightsuperior', 'ninesuperior', 'zeroinferior', 'oneinferior', 'twoinferior', 'threeinferior', 'fourinferior', 'fiveinferior', 'sixinferior', 'seveninferior', 'eightinferior', 'nineinferior', 'centinferior', 'dollarinferior', 'periodinferior', 'commainferior', 'Agravesmall', 'Aacutesmall', 'Acircumflexsmall', 'Atildesmall', 'Adieresissmall', 'Aringsmall', 'AEsmall', 'Ccedillasmall', 'Egravesmall', 'Eacutesmall', 'Ecircumflexsmall', 'Edieresissmall', 'Igravesmall', 'Iacutesmall', 'Icircumflexsmall', 'Idieresissmall', 'Ethsmall', 'Ntildesmall', 'Ogravesmall', 'Oacutesmall', 'Ocircumflexsmall', 'Otildesmall', 'Odieresissmall', 'OEsmall', 'Oslashsmall', 'Ugravesmall', 'Uacutesmall', 'Ucircumflexsmall', 'Udieresissmall', 'Yacutesmall', 'Thornsmall', 'Ydieresissmall'];
 exports.ExpertCharset = ExpertCharset;
-var ExpertSubsetCharset = ['.notdef', 'space', 'dollaroldstyle', 'dollarsuperior', 'parenleftsuperior', 'parenrightsuperior', 'twodotenleader', 'onedotenleader', 'comma', 'hyphen', 'period', 'fraction', 'zerooldstyle', 'oneoldstyle', 'twooldstyle', 'threeoldstyle', 'fouroldstyle', 'fiveoldstyle', 'sixoldstyle', 'sevenoldstyle', 'eightoldstyle', 'nineoldstyle', 'colon', 'semicolon', 'commasuperior', 'threequartersemdash', 'periodsuperior', 'asuperior', 'bsuperior', 'centsuperior', 'dsuperior', 'esuperior', 'isuperior', 'lsuperior', 'msuperior', 'nsuperior', 'osuperior', 'rsuperior', 'ssuperior', 'tsuperior', 'ff', 'fi', 'fl', 'ffi', 'ffl', 'parenleftinferior', 'parenrightinferior', 'hyphensuperior', 'colonmonetary', 'onefitted', 'rupiah', 'centoldstyle', 'figuredash', 'hypheninferior', 'onequarter', 'onehalf', 'threequarters', 'oneeighth', 'threeeighths', 'fiveeighths', 'seveneighths', 'onethird', 'twothirds', 'zerosuperior', 'onesuperior', 'twosuperior', 'threesuperior', 'foursuperior', 'fivesuperior', 'sixsuperior', 'sevensuperior', 'eightsuperior', 'ninesuperior', 'zeroinferior', 'oneinferior', 'twoinferior', 'threeinferior', 'fourinferior', 'fiveinferior', 'sixinferior', 'seveninferior', 'eightinferior', 'nineinferior', 'centinferior', 'dollarinferior', 'periodinferior', 'commainferior'];
+const ExpertSubsetCharset = ['.notdef', 'space', 'dollaroldstyle', 'dollarsuperior', 'parenleftsuperior', 'parenrightsuperior', 'twodotenleader', 'onedotenleader', 'comma', 'hyphen', 'period', 'fraction', 'zerooldstyle', 'oneoldstyle', 'twooldstyle', 'threeoldstyle', 'fouroldstyle', 'fiveoldstyle', 'sixoldstyle', 'sevenoldstyle', 'eightoldstyle', 'nineoldstyle', 'colon', 'semicolon', 'commasuperior', 'threequartersemdash', 'periodsuperior', 'asuperior', 'bsuperior', 'centsuperior', 'dsuperior', 'esuperior', 'isuperior', 'lsuperior', 'msuperior', 'nsuperior', 'osuperior', 'rsuperior', 'ssuperior', 'tsuperior', 'ff', 'fi', 'fl', 'ffi', 'ffl', 'parenleftinferior', 'parenrightinferior', 'hyphensuperior', 'colonmonetary', 'onefitted', 'rupiah', 'centoldstyle', 'figuredash', 'hypheninferior', 'onequarter', 'onehalf', 'threequarters', 'oneeighth', 'threeeighths', 'fiveeighths', 'seveneighths', 'onethird', 'twothirds', 'zerosuperior', 'onesuperior', 'twosuperior', 'threesuperior', 'foursuperior', 'fivesuperior', 'sixsuperior', 'sevensuperior', 'eightsuperior', 'ninesuperior', 'zeroinferior', 'oneinferior', 'twoinferior', 'threeinferior', 'fourinferior', 'fiveinferior', 'sixinferior', 'seveninferior', 'eightinferior', 'nineinferior', 'centinferior', 'dollarinferior', 'periodinferior', 'commainferior'];
 exports.ExpertSubsetCharset = ExpertSubsetCharset;
 
 /***/ }),
 /* 33 */
 /***/ (function(module, exports, __w_pdfjs_require__) {
 
 "use strict";
 
@@ -36866,17 +36875,17 @@ exports.getDingbatsGlyphsUnicode = getDi
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSupplementalGlyphMapForCalibri = exports.getSupplementalGlyphMapForArialBlack = exports.getGlyphMapForStandardFonts = exports.getSymbolsFonts = exports.getSerifFonts = exports.getNonStdFontMap = exports.getStdFontMap = void 0;
 
 var _util = __w_pdfjs_require__(2);
 
-var getStdFontMap = (0, _util.getLookupTableFactory)(function (t) {
+const getStdFontMap = (0, _util.getLookupTableFactory)(function (t) {
   t['ArialNarrow'] = 'Helvetica';
   t['ArialNarrow-Bold'] = 'Helvetica-Bold';
   t['ArialNarrow-BoldItalic'] = 'Helvetica-BoldOblique';
   t['ArialNarrow-Italic'] = 'Helvetica-Oblique';
   t['ArialBlack'] = 'Helvetica';
   t['ArialBlack-Bold'] = 'Helvetica-Bold';
   t['ArialBlack-BoldItalic'] = 'Helvetica-BoldOblique';
   t['ArialBlack-Italic'] = 'Helvetica-Oblique';
@@ -36925,17 +36934,17 @@ var getStdFontMap = (0, _util.getLookupT
   t['TimesNewRomanPS-Italic'] = 'Times-Italic';
   t['TimesNewRomanPS-ItalicMT'] = 'Times-Italic';
   t['TimesNewRomanPSMT'] = 'Times-Roman';
   t['TimesNewRomanPSMT-Bold'] = 'Times-Bold';
   t['TimesNewRomanPSMT-BoldItalic'] = 'Times-BoldItalic';
   t['TimesNewRomanPSMT-Italic'] = 'Times-Italic';
 });
 exports.getStdFontMap = getStdFontMap;
-var getNonStdFontMap = (0, _util.getLookupTableFactory)(function (t) {
+const getNonStdFontMap = (0, _util.getLookupTableFactory)(function (t) {
   t['Calibri'] = 'Helvetica';
   t['Calibri-Bold'] = 'Helvetica-Bold';
   t['Calibri-BoldItalic'] = 'Helvetica-BoldOblique';
   t['Calibri-Italic'] = 'Helvetica-Oblique';
   t['CenturyGothic'] = 'Helvetica';
   t['CenturyGothic-Bold'] = 'Helvetica-Bold';
   t['CenturyGothic-BoldItalic'] = 'Helvetica-BoldOblique';
   t['CenturyGothic-Italic'] = 'Helvetica-Oblique';
@@ -36963,17 +36972,17 @@ var getNonStdFontMap = (0, _util.getLook
   t['MS-PMincho'] = 'MS PMincho';
   t['MS-PMincho-Bold'] = 'MS PMincho-Bold';
   t['MS-PMincho-BoldItalic'] = 'MS PMincho-BoldItalic';
   t['MS-PMincho-Italic'] = 'MS PMincho-Italic';
   t['NuptialScript'] = 'Times-Italic';
   t['Wingdings'] = 'ZapfDingbats';
 });
 exports.getNonStdFontMap = getNonStdFontMap;
-var getSerifFonts = (0, _util.getLookupTableFactory)(function (t) {
+const getSerifFonts = (0, _util.getLookupTableFactory)(function (t) {
   t['Adobe Jenson'] = true;
   t['Adobe Text'] = true;
   t['Albertus'] = true;
   t['Aldus'] = true;
   t['Alexandria'] = true;
   t['Algerian'] = true;
   t['American Typewriter'] = true;
   t['Antiqua'] = true;
@@ -37099,23 +37108,23 @@ var getSerifFonts = (0, _util.getLookupT
   t['Versailles'] = true;
   t['Wanted'] = true;
   t['Weiss'] = true;
   t['Wide Latin'] = true;
   t['Windsor'] = true;
   t['XITS'] = true;
 });
 exports.getSerifFonts = getSerifFonts;
-var getSymbolsFonts = (0, _util.getLookupTableFactory)(function (t) {
+const getSymbolsFonts = (0, _util.getLookupTableFactory)(function (t) {
   t['Dingbats'] = true;
   t['Symbol'] = true;
   t['ZapfDingbats'] = true;
 });
 exports.getSymbolsFonts = getSymbolsFonts;
-var getGlyphMapForStandardFonts = (0, _util.getLookupTableFactory)(function (t) {
+const getGlyphMapForStandardFonts = (0, _util.getLookupTableFactory)(function (t) {
   t[2] = 10;
   t[3] = 32;
   t[4] = 33;
   t[5] = 34;
   t[6] = 35;
   t[7] = 36;
   t[8] = 37;
   t[9] = 38;
@@ -37501,23 +37510,23 @@ var getGlyphMapForStandardFonts = (0, _u
   t[3182] = 7623;
   t[3282] = 11799;
   t[3316] = 578;
   t[3379] = 42785;
   t[3393] = 1159;
   t[3416] = 8377;
 });
 exports.getGlyphMapForStandardFonts = getGlyphMapForStandardFonts;
-var getSupplementalGlyphMapForArialBlack = (0, _util.getLookupTableFactory)(function (t) {
+const getSupplementalGlyphMapForArialBlack = (0, _util.getLookupTableFactory)(function (t) {
   t[227] = 322;
   t[264] = 261;
   t[291] = 346;
 });
 exports.getSupplementalGlyphMapForArialBlack = getSupplementalGlyphMapForArialBlack;
-let getSupplementalGlyphMapForCalibri = (0, _util.getLookupTableFactory)(function (t) {
+const getSupplementalGlyphMapForCalibri = (0, _util.getLookupTableFactory)(function (t) {
   t[1] = 32;
   t[4] = 65;
   t[17] = 66;
   t[18] = 67;
   t[24] = 68;
   t[28] = 69;
   t[38] = 70;
   t[39] = 71;

--- a/browser/extensions/pdfjs/content/web/viewer.js
+++ b/browser/extensions/pdfjs/content/web/viewer.js
@@ -1016,18 +1016,21 @@ let PDFViewerApplication = {
     let pagesPromise = pdfViewer.pagesPromise;
     let onePageRendered = pdfViewer.onePageRendered;
     let pdfThumbnailViewer = this.pdfThumbnailViewer;
     pdfThumbnailViewer.setDocument(pdfDocument);
     firstPagePromise.then(pdfPage => {
       this.loadingBar.setWidth(this.appConfig.viewerContainer);
 
       if (!_app_options.AppOptions.get('disableHistory') && !this.isViewerEmbedded) {
-        let resetHistory = !_app_options.AppOptions.get('showPreviousViewOnLoad');
-        this.pdfHistory.initialize(pdfDocument.fingerprint, resetHistory);
+        this.pdfHistory.initialize({
+          fingerprint: pdfDocument.fingerprint,
+          resetHistory: !_app_options.AppOptions.get('showPreviousViewOnLoad'),
+          updateUrl: _app_options.AppOptions.get('historyUpdateUrl')
+        });
 
         if (this.pdfHistory.initialBookmark) {
           this.initialBookmark = this.pdfHistory.initialBookmark;
           this.initialRotation = this.pdfHistory.initialRotation;
         }
       }
 
       let storePromise = store.getMultiple({
@@ -3923,16 +3926,20 @@ const defaultOptions = {
   externalLinkRel: {
     value: 'noopener noreferrer nofollow',
     kind: OptionKind.VIEWER
   },
   externalLinkTarget: {
     value: 0,
     kind: OptionKind.VIEWER
   },
+  historyUpdateUrl: {
+    value: false,
+    kind: OptionKind.VIEWER
+  },
   imageResourcesPath: {
     value: './images/',
     kind: OptionKind.VIEWER
   },
   maxCanvasPixels: {
     value: _viewer_compatibility.viewerCompatibilityParams.maxCanvasPixels || 16777216,
     kind: OptionKind.VIEWER
   },
@@ -5793,24 +5800,29 @@ class PDFHistory {
     this.eventBus.on('presentationmodechanged', evt => {
       this._isViewerInPresentationMode = evt.active || evt.switchInProgress;
     });
     this.eventBus.on('pagesloaded', evt => {
       this._isPagesLoaded = !!evt.pagesCount;
     });
   }
 
-  initialize(fingerprint, resetHistory = false) {
+  initialize({
+    fingerprint,
+    resetHistory = false,
+    updateUrl = false
+  }) {
     if (!fingerprint || typeof fingerprint !== 'string') {
       console.error('PDFHistory.initialize: The "fingerprint" must be a non-empty string.');
       return;
     }
 
     let reInitialized = this.initialized && this.fingerprint !== fingerprint;
     this.fingerprint = fingerprint;
+    this._updateUrl = updateUrl === true;
 
     if (!this.initialized) {
       this._bindEvents();
     }
 
     let state = window.history.state;
     this.initialized = true;
     this.initialBookmark = null;
@@ -5818,17 +5830,17 @@ class PDFHistory {
     this._popStateInProgress = false;
     this._blockHashChange = 0;
     this._currentHash = getCurrentHash();
     this._numPositionUpdates = 0;
     this._uid = this._maxUid = 0;
     this._destination = null;
     this._position = null;
 
-    if (!this._isValidState(state) || resetHistory) {
+    if (!this._isValidState(state, true) || resetHistory) {
       let {
         hash,
         page,
         rotation
       } = parseCurrentHash(this.linkService);
 
       if (!hash || reInitialized || resetHistory) {
         this._pushOrReplaceState(null, true);
@@ -5965,21 +5977,31 @@ class PDFHistory {
     let newState = {
       fingerprint: this.fingerprint,
       uid: shouldReplace ? this._uid : this._uid + 1,
       destination
     };
 
     this._updateInternalState(destination, newState.uid);
 
+    let newUrl;
+
+    if (this._updateUrl && destination && destination.hash) {
+      const baseUrl = document.location.href.split('#')[0];
+
+      if (!baseUrl.startsWith('file://')) {
+        newUrl = `${baseUrl}#${destination.hash}`;
+      }
+    }
+
     if (shouldReplace) {
-      window.history.replaceState(newState, '');
+      window.history.replaceState(newState, '', newUrl);
     } else {
       this._maxUid = this._uid;
-      window.history.pushState(newState, '');
+      window.history.pushState(newState, '', newUrl);
     }
   }
 
   _tryPushCurrentPosition(temporary = false) {
     if (!this._position) {
       return;
     }
 
@@ -6018,23 +6040,35 @@ class PDFHistory {
       }
 
       forceReplace = true;
     }
 
     this._pushOrReplaceState(position, forceReplace);
   }
 
-  _isValidState(state) {
+  _isValidState(state, checkReload = false) {
     if (!state) {
       return false;
     }
 
     if (state.fingerprint !== this.fingerprint) {
-      return false;
+      if (checkReload) {
+        if (typeof state.fingerprint !== 'string' || state.fingerprint.length !== this.fingerprint.length) {
+          return false;
+        }
+
+        const [perfEntry] = performance.getEntriesByType('navigation');
+
+        if (!perfEntry || perfEntry.type !== 'reload') {
+          return false;
+        }
+      } else {
+        return false;
+      }
     }
 
     if (!Number.isInteger(state.uid) || state.uid < 0) {
       return false;
     }
 
     if (state.destination === null || typeof state.destination !== 'object') {
       return false;
@@ -11595,16 +11629,17 @@ function getDefaultPreferences() {
       "useOnlyCssZoom": false,
       "externalLinkTarget": 0,
       "renderer": "canvas",
       "renderInteractiveForms": false,
       "enablePrintAutoRotate": false,
       "disableOpenActionDestination": true,
       "disablePageMode": false,
       "disablePageLabels": false,
+      "historyUpdateUrl": false,
       "scrollModeOnLoad": 0,
       "spreadModeOnLoad": 0
     });
   }
 
   return defaultPreferences;
 }
 

--- a/browser/extensions/pdfjs/moz.yaml
+++ b/browser/extensions/pdfjs/moz.yaml
@@ -15,15 +15,15 @@ origin:
   description: Portable Document Format (PDF) viewer that is built with HTML5
 
   # Full URL for the package's homepage/etc
   # Usually different from repository url
   url: https://github.com/mozilla/pdf.js
 
   # Human-readable identifier for this version/release
   # Generally "version NNN", "tag SSS", "bookmark SSS"
-  release: version 2.1.153
+  release: version 2.1.176
 
   # The package's license, where possible using the mnemonic from
   # https://spdx.org/licenses/
   # Multiple licenses can be specified (as a YAML list)
   # A "LICENSE" file must exist containing the full license text
   license: Apache-2.0

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/.babelrc
@@ -0,0 +1,45 @@
+{
+  "presets": [
+    "react",
+
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": ["last 1 Chrome version", "last 1 Firefox version"]
+        },
+        "modules": "commonjs"
+      }
+    ]
+  ],
+  "plugins": [
+    "transform-flow-strip-types",
+    "transform-class-properties",
+    "syntax-trailing-function-commas",
+    "syntax-object-rest-spread",
+    [
+      "module-resolver",
+      {
+        "alias": {
+          "devtools/client/shared/vendor/react": "react",
+          "devtools/client/shared/vendor/react-dom": "react-dom"
+        }
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "env",
+          {
+            "targets": {
+              "node": 7
+            },
+            "modules": "commonjs"
+          }
+        ]
+      ]
+    }
+  }
+}

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/images/Svg.js
@@ -0,0 +1,109 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+const React = require("react");
+import InlineSVG from "svg-inline-react";
+
+const svg = {
+  "angle-brackets": require("./angle-brackets.svg"),
+  angular: require("./angular.svg"),
+  arrow: require("./arrow.svg"),
+  babel: require("./babel.svg"),
+  backbone: require("./backbone.svg"),
+  blackBox: require("./blackBox.svg"),
+  breadcrumb: require("./breadcrumbs-divider.svg"),
+  breakpoint: require("./breakpoint.svg"),
+  "column-breakpoint": require("./column-breakpoint.svg"),
+  "column-marker": require("./column-marker.svg"),
+  "case-match": require("./case-match.svg"),
+  choo: require("./choo.svg"),
+  close: require("./close.svg"),
+  coffeescript: require(`./coffeescript.svg`),
+  dojo: require("./dojo.svg"),
+  domain: require("./domain.svg"),
+  extension: require("./extension.svg"),
+  file: require("./file.svg"),
+  folder: require("./folder.svg"),
+  globe: require("./globe.svg"),
+  home: require("./home.svg"),
+  javascript: require("./javascript.svg"),
+  jquery: require("./jquery.svg"),
+  underscore: require("./underscore.svg"),
+  lodash: require("./lodash.svg"),
+  ember: require("./ember.svg"),
+  vuejs: require("./vuejs.svg"),
+  "magnifying-glass": require("./magnifying-glass.svg"),
+  "arrow-up": require("./arrow-up.svg"),
+  "arrow-down": require("./arrow-down.svg"),
+  pause: require("./pause.svg"),
+  "pause-exceptions": require("./pause-exceptions.svg"),
+  plus: require("./plus.svg"),
+  preact: require("./preact.svg"),
+  aframe: require("./aframe.svg"),
+  prettyPrint: require("./prettyPrint.svg"),
+  react: require("./react.svg"),
+  "regex-match": require("./regex-match.svg"),
+  redux: require("./redux.svg"),
+  immutable: require("./immutable.svg"),
+  resume: require("./resume.svg"),
+  settings: require("./settings.svg"),
+  stepIn: require("./stepIn.svg"),
+  stepOut: require("./stepOut.svg"),
+  stepOver: require("./stepOver.svg"),
+  subSettings: require("./subSettings.svg"),
+  tab: require("./tab.svg"),
+  toggleBreakpoints: require("./toggle-breakpoints.svg"),
+  togglePanes: require("./toggle-panes.svg"),
+  typescript: require("./typescript.svg"),
+  "whole-word-match": require("./whole-word-match.svg"),
+  worker: require("./worker.svg"),
+  "sad-face": require("devtools-mc-assets/assets/devtools/client/themes/images/sad-face.svg"),
+  refresh: require("devtools-mc-assets/assets/devtools/client/themes/images/reload.svg"),
+  webpack: require("./webpack.svg"),
+  node: require("./node.svg"),
+  express: require("./express.svg"),
+  pug: require("./pug.svg"),
+  extjs: require("./sencha-extjs.svg"),
+  mobx: require("./mobx.svg"),
+  marko: require("./marko.svg"),
+  nextjs: require("./nextjs.svg"),
+  showSources: require("./showSources.svg"),
+  showOutline: require("./showOutline.svg"),
+  nuxtjs: require("./nuxtjs.svg"),
+  rxjs: require("./rxjs.svg"),
+  loader: require('./loader.svg')
+};
+
+type SvgType = {
+  name: string,
+  className?: string,
+  onClick?: () => void,
+  "aria-label"?: string
+};
+
+function Svg({ name, className, onClick, "aria-label": ariaLabel }) {
+  if (!svg[name]) {
+    const error = `Unknown SVG: ${name}`;
+    console.warn(error);
+    return null;
+  }
+
+  className = `${name} ${className || ""}`;
+  if (name === "subSettings") {
+    className = "";
+  }
+
+  const props = {
+    className,
+    onClick,
+    ["aria-label"]: ariaLabel,
+    src: svg[name]
+  };
+
+  return <InlineSVG {...props} />;
+}
+
+Svg.displayName = "Svg";
+
+module.exports = Svg;

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/jest-test.config.js
@@ -0,0 +1,40 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+const { resolve } = require("path");
+const rootDir = resolve(__dirname);
+module.exports = {
+  rootDir,
+  displayName: "test",
+  testURL: "http://localhost/",
+  testPathIgnorePatterns: [
+    "/node_modules/",
+    "/helpers/",
+    "/fixtures/",
+    "src/test/mochitest/examples/",
+    "<rootDir>/firefox",
+    "package.json",
+    "<rootDir>/packages"
+  ],
+  modulePathIgnorePatterns: ["src/test/mochitest", "firefox"],
+  collectCoverageFrom: [
+    "src/**/*.js",
+    "!src/**/fixtures/*.js",
+    "!src/test/**/*.js",
+    "!src/components/stories/**/*.js",
+    "!**/*.mock.js",
+    "!**/*.spec.js"
+  ],
+  transformIgnorePatterns: ["node_modules/(?!devtools-)"],
+  setupTestFrameworkScriptFile: "<rootDir>/src/test/tests-setup.js",
+  setupFiles: ["<rootDir>/src/test/shim.js", "jest-localstorage-mock"],
+  snapshotSerializers: [
+    "jest-serializer-babel-ast",
+    "enzyme-to-json/serializer"
+  ],
+  moduleNameMapper: {
+    "\\.css$": "<rootDir>/src/test/__mocks__/styleMock.js",
+    "\\.svg$": "<rootDir>/src/test/__mocks__/svgMock.js"
+  }
+};

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/jest.config.js
@@ -0,0 +1,14 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+const { resolve } = require("path");
+const rootDir = resolve(__dirname);
+module.exports = {
+  rootDir,
+  reporters: ["default"],
+  projects: [
+    "<rootDir>/jest-test.config.js",
+    "<rootDir>/packages/*/jest.config.js"
+  ]
+};

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/package.json
@@ -0,0 +1,137 @@
+{
+  "name": "debugger.html",
+  "version": "0.6.0",
+  "license": "MPL-2.0",
+  "repository": {
+    "url": "git://github.com/devtools-html/debugger.html.git",
+    "type": "git"
+  },
+  "bugs": {
+    "url": "https://github.com/devtools-html/debugger.html/issues"
+  },
+  "homepage": "https://github.com/devtools-html/debugger.html#readme",
+  "engineStrict": true,
+  "engines": {
+    "node": ">=7.7.0"
+  },
+  "scripts": {
+  },
+  "dependencies": {
+    "@babel/core": "^7.0.0-beta.55",
+    "@babel/parser": "^7.0.0-beta.55",
+    "@babel/template": "^7.0.0-beta.55",
+    "@babel/types": "^7.0.0-beta.55",
+    "babel-plugin-transform-imports": "^1.5.0",
+    "codemirror": "^5.28.0",
+    "devtools-environment": "^0.0.6",
+    "devtools-launchpad": "^0.0.141",
+    "devtools-linters": "^0.0.4",
+    "devtools-reps": "0.23.0",
+    "devtools-source-map": "0.16.0",
+    "devtools-splitter": "^0.0.8",
+    "devtools-utils": "0.0.14",
+    "fuzzaldrin-plus": "^0.6.0",
+    "immutable": "^3.8.2",
+    "lodash": "^4.17.4",
+    "lodash-move": "^1.1.1",
+    "lodash.kebabcase": "^4.1.1",
+    "md5": "^2.2.1",
+    "parse-script-tags": "^0.1.6",
+    "pretty-fast": "^0.2.3",
+    "prop-types": "^15.6.0",
+    "react": "16.4.1",
+    "react-aria-components": "^0.0.4",
+    "react-dom": "16.4.1",
+    "react-immutable-proptypes": "^2.1.0",
+    "react-inlinesvg": "^0.8.1",
+    "react-redux": "^5.0.7",
+    "react-transition-group": "^2.2.1",
+    "reselect": "^4.0.0",
+    "svg-inline-react": "^3.0.0",
+    "wasmparser": "^0.7.0"
+  },
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
+  "files": [
+    "src",
+    "assets"
+  ],
+  "greenkeeper": {
+    "ignore": [
+      "react",
+      "react-dom",
+      "react-redux",
+      "redux",
+      "codemirror"
+    ]
+  },
+  "main": "src/main.js",
+  "author": "Jason Laster <jlaster@mozilla.com>",
+  "devDependencies": {
+    "@sucrase/webpack-object-rest-spread-plugin": "^1.0.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.0.0",
+    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
+    "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "chalk": "^2.1.0",
+    "copy-paste": "^1.3.0",
+    "copy-webpack-plugin": "^4.5.2",
+    "devtools-license-check": "^0.7.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "3.3.4",
+    "eslint": "^5.0.0",
+    "eslint-config-prettier": "^3.0.0",
+    "eslint-plugin-babel": "^5.0.0",
+    "eslint-plugin-file-header": "0.0.1",
+    "eslint-plugin-flowtype": "^3.0.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jest": "^21.15.1",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-mozilla": "1.0.4",
+    "eslint-plugin-prettier": "^3.0.0",
+    "eslint-plugin-react": "^7.2.1",
+    "expect.js": "^0.3.1",
+    "flow-bin": "^0.89.0",
+    "glob": "^7.0.3",
+    "husky": "^1.0.1",
+    "jest": "^23.0.0",
+    "jest-environment-jsdom": "^23.0.0",
+    "jest-in-case": "^1.0.2",
+    "jest-junit": "^5.0.0",
+    "jest-localstorage-mock": "^2.2.0",
+    "jest-serializer-babel-ast": "^0.0.5",
+    "lint-staged": "^8.0.0",
+    "mochii": "^0.0.32",
+    "mock-require": "^3.0.0",
+    "node-emoji": "^1.8.1",
+    "npm-run-all": "^4.0.2",
+    "prettier": "^1.12.1",
+    "pretty-quick": "^1.4.1",
+    "remark-cli": "^6.0.0",
+    "remark-lint": "^6.0.1",
+    "remark-lint-list-item-bullet-indent": "^1.0.1",
+    "remark-lint-list-item-indent": "^1.0.1",
+    "remark-lint-no-shortcut-reference-image": "^1.0.1",
+    "remark-lint-no-shortcut-reference-link": "^1.0.2",
+    "remark-lint-no-table-indentation": "^1.0.0",
+    "remark-lint-no-unused-definitions": "^1.0.1",
+    "remark-lint-ordered-list-marker-style": "^1.0.1",
+    "remark-lint-table-cell-padding": "^1.0.0",
+    "remark-lint-table-pipes": "^1.0.0",
+    "remark-preset-lint-recommended": "^3.0.0",
+    "remark-validate-links": "^7.0.0",
+    "rimraf": "^2.6.1",
+    "single-line-log": "^1.1.2",
+    "stylelint": "^9.0.0",
+    "webpack": "^3.5.5",
+    "webpack-visualizer-plugin": "^0.1.11",
+    "workerjs": "github:jasonLaster/workerjs#a2425aaeebacae7a7640e496a54c2a41962f3890"
+  }
+}

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/packages/devtools-components/.babelrc
@@ -0,0 +1,7 @@
+{
+  "presets": ["react", "flow"],
+  "plugins": [
+    "transform-es2015-modules-commonjs",
+    "transform-flow-strip-types"
+  ]
+}
\ No newline at end of file

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/packages/devtools-components/.storybook/config.js
@@ -0,0 +1,11 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const { configure } = require("@storybook/react");
+
+function loadStories() {
+  require("../stories/index");
+}
+
+configure(loadStories, module);

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/packages/devtools-components/.storybook/webpack.config.js
@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+module.exports = require("../webpack.config.js");
\ No newline at end of file

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/packages/devtools-components/LICENSE
@@ -0,0 +1,362 @@
+Mozilla Public License, version 2.0
+
+1. Definitions
+
+1.1. "Contributor"
+
+     means each individual or legal entity that creates, contributes to the
+     creation of, or owns Covered Software.
+
+1.2. "Contributor Version"
+
+     means the combination of the Contributions of others (if any) used by a
+     Contributor and that particular Contributor's Contribution.
+
+1.3. "Contribution"
+
+     means Covered Software of a particular Contributor.
+
+1.4. "Covered Software"
+
+     means Source Code Form to which the initial Contributor has attached the
+     notice in Exhibit A, the Executable Form of such Source Code Form, and
+     Modifications of such Source Code Form, in each case including portions
+     thereof.
+
+1.5. "Incompatible With Secondary Licenses"
+     means
+
+     a. that the initial Contributor has attached the notice described in
+        Exhibit B to the Covered Software; or
+
+     b. that the Covered Software was made available under the terms of
+        version 1.1 or earlier of the License, but not also under the terms of
+        a Secondary License.
+
+1.6. "Executable Form"
+
+     means any form of the work other than Source Code Form.
+
+1.7. "Larger Work"
+
+     means a work that combines Covered Software with other material, in a
+     separate file or files, that is not Covered Software.
+
+1.8. "License"
+
+     means this document.
+
+1.9. "Licensable"
+
+     means having the right to grant, to the maximum extent possible, whether
+     at the time of the initial grant or subsequently, any and all of the
+     rights conveyed by this License.
+
+1.10. "Modifications"
+
+     means any of the following:
+
+     a. any file in Source Code Form that results from an addition to,
+        deletion from, or modification of the contents of Covered Software; or
+
+     b. any new file in Source Code Form that contains any Covered Software.
+
+1.11. "Patent Claims" of a Contributor
+
+      means any patent claim(s), including without limitation, method,
+      process, and apparatus claims, in any patent Licensable by such
+      Contributor that would be infringed, but for the grant of the License,
+      by the making, using, selling, offering for sale, having made, import,
+      or transfer of either its Contributions or its Contributor Version.
+
+1.12. "Secondary License"
+
+      means either the GNU General Public License, Version 2.0, the GNU Lesser
+      General Public License, Version 2.1, the GNU Affero General Public
+      License, Version 3.0, or any later versions of those licenses.
+
+1.13. "Source Code Form"
+
+      means the form of the work preferred for making modifications.
+
+1.14. "You" (or "Your")
+
+      means an individual or a legal entity exercising rights under this
+      License. For legal entities, "You" includes any entity that controls, is
+      controlled by, or is under common control with You. For purposes of this
+      definition, "control" means (a) the power, direct or indirect, to cause
+      the direction or management of such entity, whether by contract or
+      otherwise, or (b) ownership of more than fifty percent (50%) of the
+      outstanding shares or beneficial ownership of such entity.
+
+
+2. License Grants and Conditions
+
+2.1. Grants
+
+     Each Contributor hereby grants You a world-wide, royalty-free,
+     non-exclusive license:
+
+     a. under intellectual property rights (other than patent or trademark)
+        Licensable by such Contributor to use, reproduce, make available,
+        modify, display, perform, distribute, and otherwise exploit its
+        Contributions, either on an unmodified basis, with Modifications, or
+        as part of a Larger Work; and
+
+     b. under Patent Claims of such Contributor to make, use, sell, offer for
+        sale, have made, import, and otherwise transfer either its
+        Contributions or its Contributor Version.
+
+2.2. Effective Date
+
+     The licenses granted in Section 2.1 with respect to any Contribution
+     become effective for each Contribution on the date the Contributor first
+     distributes such Contribution.
+
+2.3. Limitations on Grant Scope
+
+     The licenses granted in this Section 2 are the only rights granted under
+     this License. No additional rights or licenses will be implied from the
+     distribution or licensing of Covered Software under this License.
+     Notwithstanding Section 2.1(b) above, no patent license is granted by a
+     Contributor:
+
+     a. for any code that a Contributor has removed from Covered Software; or
+
+     b. for infringements caused by: (i) Your and any other third party's
+        modifications of Covered Software, or (ii) the combination of its
+        Contributions with other software (except as part of its Contributor
+        Version); or
+
+     c. under Patent Claims infringed by Covered Software in the absence of
+        its Contributions.
+
+     This License does not grant any rights in the trademarks, service marks,
+     or logos of any Contributor (except as may be necessary to comply with
+     the notice requirements in Section 3.4).
+
+2.4. Subsequent Licenses
+
+     No Contributor makes additional grants as a result of Your choice to
+     distribute the Covered Software under a subsequent version of this
+     License (see Section 10.2) or under the terms of a Secondary License (if
+     permitted under the terms of Section 3.3).
+
+2.5. Representation
+
+     Each Contributor represents that the Contributor believes its
+     Contributions are its original creation(s) or it has sufficient rights to
+     grant the rights to its Contributions conveyed by this License.
+
+2.6. Fair Use
+
+     This License is not intended to limit any rights You have under
+     applicable copyright doctrines of fair use, fair dealing, or other
+     equivalents.
+
+2.7. Conditions
+
+     Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted in
+     Section 2.1.
+
+
+3. Responsibilities
+
+3.1. Distribution of Source Form
+
+     All distribution of Covered Software in Source Code Form, including any
+     Modifications that You create or to which You contribute, must be under
+     the terms of this License. You must inform recipients that the Source
+     Code Form of the Covered Software is governed by the terms of this
+     License, and how they can obtain a copy of this License. You may not
+     attempt to alter or restrict the recipients' rights in the Source Code
+     Form.
+
+3.2. Distribution of Executable Form
+
+     If You distribute Covered Software in Executable Form then:
+
+     a. such Covered Software must also be made available in Source Code Form,
+        as described in Section 3.1, and You must inform recipients of the
+        Executable Form how they can obtain a copy of such Source Code Form by
+        reasonable means in a timely manner, at a charge no more than the cost
+        of distribution to the recipient; and
+
+     b. You may distribute such Executable Form under the terms of this
+        License, or sublicense it under different terms, provided that the
+        license for the Executable Form does not attempt to limit or alter the
+        recipients' rights in the Source Code Form under this License.
+
+3.3. Distribution of a Larger Work
+
+     You may create and distribute a Larger Work under terms of Your choice,
+     provided that You also comply with the requirements of this License for
+     the Covered Software. If the Larger Work is a combination of Covered
+     Software with a work governed by one or more Secondary Licenses, and the
+     Covered Software is not Incompatible With Secondary Licenses, this
+     License permits You to additionally distribute such Covered Software
+     under the terms of such Secondary License(s), so that the recipient of
+     the Larger Work may, at their option, further distribute the Covered
+     Software under the terms of either this License or such Secondary
+     License(s).
+
+3.4. Notices
+
+     You may not remove or alter the substance of any license notices
+     (including copyright notices, patent notices, disclaimers of warranty, or
+     limitations of liability) contained within the Source Code Form of the
+     Covered Software, except that You may alter any license notices to the
+     extent required to remedy known factual inaccuracies.
+
+3.5. Application of Additional Terms
+
+     You may choose to offer, and to charge a fee for, warranty, support,
+     indemnity or liability obligations to one or more recipients of Covered
+     Software. However, You may do so only on Your own behalf, and not on
+     behalf of any Contributor. You must make it absolutely clear that any
+     such warranty, support, indemnity, or liability obligation is offered by
+     You alone, and You hereby agree to indemnify every Contributor for any
+     liability incurred by such Contributor as a result of warranty, support,
+     indemnity or liability terms You offer. You may include additional
+     disclaimers of warranty and limitations of liability specific to any
+     jurisdiction.
+
+4. Inability to Comply Due to Statute or Regulation
+
+   If it is impossible for You to comply with any of the terms of this License
+   with respect to some or all of the Covered Software due to statute,
+   judicial order, or regulation then You must: (a) comply with the terms of
+   this License to the maximum extent possible; and (b) describe the
+   limitations and the code they affect. Such description must be placed in a
+   text file included with all distributions of the Covered Software under
+   this License. Except to the extent prohibited by statute or regulation,
+   such description must be sufficiently detailed for a recipient of ordinary
+   skill to be able to understand it.
+
+5. Termination
+
+5.1. The rights granted under this License will terminate automatically if You
+     fail to comply with any of its terms. However, if You become compliant,
+     then the rights granted under this License from a particular Contributor
+     are reinstated (a) provisionally, unless and until such Contributor
+     explicitly and finally terminates Your grants, and (b) on an ongoing
+     basis, if such Contributor fails to notify You of the non-compliance by
+     some reasonable means prior to 60 days after You have come back into
+     compliance. Moreover, Your grants from a particular Contributor are
+     reinstated on an ongoing basis if such Contributor notifies You of the
+     non-compliance by some reasonable means, this is the first time You have
+     received notice of non-compliance with this License from such
+     Contributor, and You become compliant prior to 30 days after Your receipt
+     of the notice.
+
+5.2. If You initiate litigation against any entity by asserting a patent
+     infringement claim (excluding declaratory judgment actions,
+     counter-claims, and cross-claims) alleging that a Contributor Version
+     directly or indirectly infringes any patent, then the rights granted to
+     You by any and all Contributors for the Covered Software under Section
+     2.1 of this License shall terminate.
+
+5.3. In the event of termination under Sections 5.1 or 5.2 above, all end user
+     license agreements (excluding distributors and resellers) which have been
+     validly granted by You or Your distributors under this License prior to
+     termination shall survive termination.
+
+6. Disclaimer of Warranty
+
+   Covered Software is provided under this License on an "as is" basis,
+   without warranty of any kind, either expressed, implied, or statutory,
+   including, without limitation, warranties that the Covered Software is free
+   of defects, merchantable, fit for a particular purpose or non-infringing.
+   The entire risk as to the quality and performance of the Covered Software
+   is with You. Should any Covered Software prove defective in any respect,
+   You (not any Contributor) assume the cost of any necessary servicing,
+   repair, or correction. This disclaimer of warranty constitutes an essential
+   part of this License. No use of  any Covered Software is authorized under
+   this License except under this disclaimer.
+
+7. Limitation of Liability
+
+   Under no circumstances and under no legal theory, whether tort (including
+   negligence), contract, or otherwise, shall any Contributor, or anyone who
+   distributes Covered Software as permitted above, be liable to You for any
+   direct, indirect, special, incidental, or consequential damages of any
+   character including, without limitation, damages for lost profits, loss of
+   goodwill, work stoppage, computer failure or malfunction, or any and all
+   other commercial damages or losses, even if such party shall have been
+   informed of the possibility of such damages. This limitation of liability
+   shall not apply to liability for death or personal injury resulting from
+   such party's negligence to the extent applicable law prohibits such
+   limitation. Some jurisdictions do not allow the exclusion or limitation of
+   incidental or consequential damages, so this exclusion and limitation may
+   not apply to You.
+
+8. Litigation
+
+   Any litigation relating to this License may be brought only in the courts
+   of a jurisdiction where the defendant maintains its principal place of
+   business and such litigation shall be governed by laws of that
+   jurisdiction, without reference to its conflict-of-law provisions. Nothing
+   in this Section shall prevent a party's ability to bring cross-claims or
+   counter-claims.
+
+9. Miscellaneous
+
+   This License represents the complete agreement concerning the subject
+   matter hereof. If any provision of this License is held to be
+   unenforceable, such provision shall be reformed only to the extent
+   necessary to make it enforceable. Any law or regulation which provides that
+   the language of a contract shall be construed against the drafter shall not
+   be used to construe this License against a Contributor.
+
+
+10. Versions of the License
+
+10.1. New Versions
+
+      Mozilla Foundation is the license steward. Except as provided in Section
+      10.3, no one other than the license steward has the right to modify or
+      publish new versions of this License. Each version will be given a
+      distinguishing version number.
+
+10.2. Effect of New Versions
+
+      You may distribute the Covered Software under the terms of the version
+      of the License under which You originally received the Covered Software,
+      or under the terms of any subsequent version published by the license
+      steward.
+
+10.3. Modified Versions
+
+      If you create software not governed by this License, and you want to
+      create a new license for such software, you may create and use a
+      modified version of this License if you rename the license and remove
+      any references to the name of the license steward (except to note that
+      such modified license differs from this License).
+
+10.4. Distributing Source Code Form that is Incompatible With Secondary
+      Licenses If You choose to distribute Source Code Form that is
+      Incompatible With Secondary Licenses under the terms of this version of
+      the License, the notice described in Exhibit B of this License must be
+      attached.
+
+Exhibit A - Source Code Form License Notice
+
+      This Source Code Form is subject to the
+      terms of the Mozilla Public License, v.
+      2.0. If a copy of the MPL was not
+      distributed with this file, You can
+      obtain one at
+      http://mozilla.org/MPL/2.0/.
+
+If it is not possible or desirable to put the notice in a particular file,
+then You may include the notice in a location (such as a LICENSE file in a
+relevant directory) where a recipient would be likely to look for such a
+notice.
+
+You may add additional accurate notices of copyright ownership.
+
+Exhibit B - "Incompatible With Secondary Licenses" Notice
+
+      This Source Code Form is "Incompatible
+      With Secondary Licenses", as defined by
+      the Mozilla Public License, v. 2.0.

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/packages/devtools-components/README.md
@@ -0,0 +1,5 @@
+## Devtools Components
+
+Devtools shared Components
+
+* _Tree_ - A performant tree

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/packages/devtools-components/index.js
@@ -0,0 +1,9 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import Tree from "./src/tree";
+
+module.exports = {
+  Tree
+};

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/packages/devtools-components/jest.config.js
@@ -0,0 +1,20 @@
+const { resolve } = require("path");
+const rootDir = resolve(__dirname, "src");
+module.exports = {
+  rootDir,
+  displayName: "devtools-components test",
+  setupFiles: [
+    "<rootDir>/../../../src/test/__mocks__/request-animation-frame.js",
+    "<rootDir>/tests/setup.js"
+  ],
+  testMatch: ["**/tests/**/*.js"],
+  testPathIgnorePatterns: [
+    "/node_modules/",
+    "<rootDir>/tests/__mocks__/",
+    "<rootDir>/tests/setup.js"
+  ],
+  testURL: "http://localhost/",
+  moduleNameMapper: {
+    "\\.css$": "<rootDir>/../../../src/test/__mocks__/styleMock.js"
+  }
+};

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/packages/devtools-components/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "devtools-components",
+  "version": "0.6.0",
+  "description": "DevTools HTML Components",
+  "main": "index.js",
+  "scripts": {
+    "copy-assets": "node bin/copy-assets",
+    "license-check": "devtools-license-check",
+    "storybook":
+      "NODE_ENV=storybook start-storybook -p 9002 -c .storybook -s ./src",
+    "test": "jest --projects jest.config.js"
+  },
+  "author": "Jason Laster",
+  "license": "MPL-2.0",
+  "dependencies": {
+    "prop-types": "^15.6.0",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-dom-factories": "^1.0.2"
+  },
+  "devDependencies": {
+    "@storybook/react": "^3.3.14",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+    "babel-preset-react": "^6.24.1",
+    "devtools-license-check": "^0.7.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^5.0.0",
+    "eslint-plugin-mozilla": "1.0.4",
+    "fs-extra": "^7.0.0",
+    "lodash": "^4.17.2"
+  }
+}

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/packages/devtools-components/postcss.config.js
@@ -0,0 +1,37 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const mapUrl = require("postcss-url-mapper");
+const MC_PATH = "resource://devtools/client/debugger/new/images/";
+const EXPRESS_PATH = "/devtools-components/images/";
+
+function mapUrlProduction(url, type) {
+  return url.replace("/images/arrow.svg", MC_PATH + "arrow.svg");
+}
+
+function mapUrlDevelopment(url) {
+  return url.replace("/images/arrow.svg", EXPRESS_PATH + "arrow.svg");
+}
+
+module.exports = ({ file, options, env }) => {
+  // Here we don't want to do anything for storybook since we serve the images thanks
+  // to the `-s ./src` option in the `storybook` command (see package.json).
+  if (env === "storybook") {
+    return {};
+  }
+
+  // This will be used when creating a bundle for mozilla-central (from devtools-reps
+  // or debugger.html).
+  if (env === "production") {
+    return {
+      plugins: [mapUrl(mapUrlProduction)]
+    };
+  }
+
+  // This will be used when using this module in launchpad mode. We set a unique path so
+  // we can serve images from express.
+  return {
+    plugins: [mapUrl(mapUrlDevelopment)]
+  };
+};

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/packages/devtools-components/src/images/arrow.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #9B9B9B">
+  <path d="M8 13.4c-.5 0-.9-.2-1.2-.6L.4 5.2C0 4.7-.1 4.3.2 3.7S1 3 1.6 3h12.8c.6 0 1.2.1 1.4.7.3.6.2 1.1-.2 1.6l-6.4 7.6c-.3.4-.7.5-1.2.5z"/>
+</svg>

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/packages/devtools-components/src/tests/__snapshots__/tree.js.snap
@@ -0,0 +1,908 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tree Don't auto expand root with very large number of children 1`] = `
+Array [
+  "key-A",
+  "key-B",
+  "key-E",
+  "key-F",
+  "key-G",
+  "key-C",
+  "key-H",
+  "key-I",
+  "key-D",
+  "key-J",
+  "key-M",
+  "key-N",
+]
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 1`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 2`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 3`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 4`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 5`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 6`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 7`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 8`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 9`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 10`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 11`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 12`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 13`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 14`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 15`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 16`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree ignores key strokes when pressing modifiers 17`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders arrows as expected when nodes are collapsed 1`] = `
+"
+▶︎ A
+▶︎ M
+"
+`;
+
+exports[`Tree renders arrows as expected when nodes are expanded 1`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    L
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected 1`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    L
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected navigating down with keyboard on last node 1`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    L
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    [O]
+"
+`;
+
+exports[`Tree renders as expected navigating down with keyboard on last node 2`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    L
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    [O]
+"
+`;
+
+exports[`Tree renders as expected navigating up with the keyboard on a root 1`] = `
+"
+▼ [A]
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    L
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected navigating up with the keyboard on a root 2`] = `
+"
+▼ [A]
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    L
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected navigating with arrows on unexpandable roots 1`] = `
+"
+  [A]
+  M
+"
+`;
+
+exports[`Tree renders as expected navigating with arrows on unexpandable roots 2`] = `
+"
+  A
+  [M]
+"
+`;
+
+exports[`Tree renders as expected navigating with arrows on unexpandable roots 3`] = `
+"
+  [A]
+  M
+"
+`;
+
+exports[`Tree renders as expected when given a focused item 1`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    L
+|  |    F
+|  |    [G]
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected when given a focused item 2`] = `
+"
+▶︎ [A]
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected when given a focused item 3`] = `
+"
+▼ [A]
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    L
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected when given a focused item 4`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    L
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected when navigating down with the keyboard 1`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    [K]
+|  |  |    L
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected when navigating down with the keyboard 2`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected when navigating down with the keyboard 3`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    L
+|  |    [F]
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected when navigating up with the keyboard 1`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected when navigating up with the keyboard 2`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    [K]
+|  |  |    L
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected when navigating up with the keyboard 3`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ [E]
+|  |  |    K
+|  |  |    L
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected when navigating with home/end 1`] = `
+"
+▶︎ A
+▶︎ [M]
+"
+`;
+
+exports[`Tree renders as expected when navigating with home/end 2`] = `
+"
+▶︎ [A]
+▶︎ M
+"
+`;
+
+exports[`Tree renders as expected when navigating with home/end 3`] = `
+"
+▶︎ [A]
+▶︎ M
+"
+`;
+
+exports[`Tree renders as expected when navigating with home/end 4`] = `
+"
+▶︎ A
+▶︎ [M]
+"
+`;
+
+exports[`Tree renders as expected when navigating with home/end 5`] = `
+"
+▶︎ A
+▶︎ [M]
+"
+`;
+
+exports[`Tree renders as expected when navigating with home/end 6`] = `
+"
+▶︎ A
+▼ [M]
+|  ▶︎ N
+"
+`;
+
+exports[`Tree renders as expected when navigating with home/end 7`] = `
+"
+▶︎ A
+▼ M
+|  ▶︎ [N]
+"
+`;
+
+exports[`Tree renders as expected when navigating with home/end 8`] = `
+"
+▶︎ A
+▼ M
+|  ▶︎ [N]
+"
+`;
+
+exports[`Tree renders as expected when navigating with home/end 9`] = `
+"
+▶︎ [A]
+▼ M
+|  ▶︎ N
+"
+`;
+
+exports[`Tree renders as expected when navigating with left arrows on roots 1`] = `
+"
+▶︎ A
+▶︎ [M]
+"
+`;
+
+exports[`Tree renders as expected when navigating with left arrows on roots 2`] = `
+"
+▶︎ [A]
+▶︎ M
+"
+`;
+
+exports[`Tree renders as expected when navigating with left arrows on roots 3`] = `
+"
+▶︎ [A]
+▶︎ M
+"
+`;
+
+exports[`Tree renders as expected when navigating with right/left arrows 1`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    K
+|  |  |    [L]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected when navigating with right/left arrows 2`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ [E]
+|  |  |    K
+|  |  |    L
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected when navigating with right/left arrows 3`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▶︎ [E]
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected when navigating with right/left arrows 4`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ [E]
+|  |  |    K
+|  |  |    L
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected when navigating with right/left arrows 5`] = `
+"
+▼ A
+|  ▼ B
+|  |  ▼ E
+|  |  |    [K]
+|  |  |    L
+|  |    F
+|  |    G
+|  ▼ C
+|  |    H
+|  |    I
+|  ▼ D
+|  |    J
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree renders as expected when passed autoDepth:1 1`] = `
+"
+▼ A
+|  ▶︎ B
+|  ▶︎ C
+|  ▶︎ D
+▼ M
+|  ▶︎ N
+"
+`;
+
+exports[`Tree renders as expected with collapsed nodes 1`] = `
+"
+▶︎ A
+▼ M
+|  ▼ N
+|  |    O
+"
+`;
+
+exports[`Tree uses isExpandable prop if it exists to render tree nodes 1`] = `
+"
+▶︎ A
+  M
+"
+`;

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/packages/devtools-components/src/tests/setup.js
@@ -0,0 +1,8 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+// Configure enzyme with React 16 adapter.
+const Enzyme = require("enzyme");
+const Adapter = require("enzyme-adapter-react-16");
+Enzyme.configure({ adapter: new Adapter() });

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/packages/devtools-components/src/tests/tree.js
@@ -0,0 +1,762 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+/* global jest */
+
+import React from "react";
+import { mount } from "enzyme";
+import Components from "../../index";
+import dom from "react-dom-factories";
+
+const { Component, createFactory } = React;
+const Tree = createFactory(Components.Tree);
+
+function mountTree(overrides = {}) {
+  return mount(
+    createFactory(
+      class container extends Component {
+        constructor(props) {
+          super(props);
+          const state = {
+            expanded: overrides.expanded || new Set(),
+            focused: overrides.focused
+          };
+          delete overrides.focused;
+          this.state = state;
+        }
+
+        render() {
+          return Tree(
+            Object.assign(
+              {
+                getParent: x => TEST_TREE.parent[x],
+                getChildren: x => TEST_TREE.children[x],
+                renderItem: (x, depth, focused, arrow) => {
+                  return dom.div(
+                    {},
+                    arrow,
+                    focused ? "[" : null,
+                    x,
+                    focused ? "]" : null
+                  );
+                },
+                getRoots: () => ["A", "M"],
+                getKey: x => `key-${x}`,
+                itemHeight: 1,
+                onFocus: x => {
+                  this.setState(previousState => {
+                    return { focused: x };
+                  });
+                },
+                onExpand: x => {
+                  this.setState(previousState => {
+                    const expanded = new Set(previousState.expanded);
+                    expanded.add(x);
+                    return { expanded };
+                  });
+                },
+                onCollapse: x => {
+                  this.setState(previousState => {
+                    const expanded = new Set(previousState.expanded);
+                    expanded.delete(x);
+                    return { expanded };
+                  });
+                },
+                isExpanded: x => this.state && this.state.expanded.has(x),
+                focused: this.state.focused
+              },
+              overrides
+            )
+          );
+        }
+      }
+    )()
+  );
+}
+
+describe("Tree", () => {
+  it("does not throw", () => {
+    expect(mountTree()).toBeTruthy();
+  });
+
+  it("Don't auto expand root with very large number of children", () => {
+    const children = Array.from(
+      { length: 51 },
+      (_, i) => `should-not-be-visible-${i + 1}`
+    );
+    // N has a lot of children, so it won't be automatically expanded
+    const wrapper = mountTree({
+      autoExpandDepth: 2,
+      autoExpandNodeChildrenLimit: 50,
+      getChildren: item => {
+        if (item === "N") {
+          return children;
+        }
+
+        return TEST_TREE.children[item] || [];
+      }
+    });
+    const ids = getTreeNodes(wrapper).map(node => node.prop("id"));
+    expect(ids).toMatchSnapshot();
+  });
+
+  it("is accessible", () => {
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJMN".split(""))
+    });
+    expect(wrapper.getDOMNode().getAttribute("role")).toBe("tree");
+    expect(wrapper.getDOMNode().getAttribute("tabIndex")).toBe("0");
+
+    const expected = {
+      A: { id: "key-A", level: 1, expanded: true },
+      B: { id: "key-B", level: 2, expanded: true },
+      C: { id: "key-C", level: 2, expanded: true },
+      D: { id: "key-D", level: 2, expanded: true },
+      E: { id: "key-E", level: 3, expanded: true },
+      F: { id: "key-F", level: 3, expanded: true },
+      G: { id: "key-G", level: 3, expanded: true },
+      H: { id: "key-H", level: 3, expanded: true },
+      I: { id: "key-I", level: 3, expanded: true },
+      J: { id: "key-J", level: 3, expanded: true },
+      K: { id: "key-K", level: 4, expanded: undefined },
+      L: { id: "key-L", level: 4, expanded: undefined },
+      M: { id: "key-M", level: 1, expanded: true },
+      N: { id: "key-N", level: 2, expanded: true },
+      O: { id: "key-O", level: 3, expanded: undefined }
+    };
+
+    getTreeNodes(wrapper).forEach(node => {
+      const key = node.prop("id").replace("key-", "");
+      const item = expected[key];
+
+      expect(node.prop("id")).toBe(item.id);
+      expect(node.prop("role")).toBe("treeitem");
+      expect(node.prop("aria-level")).toBe(item.level);
+      expect(node.prop("aria-expanded")).toBe(item.expanded);
+    });
+  });
+
+  it("renders as expected", () => {
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split(""))
+    });
+
+    expect(formatTree(wrapper)).toMatchSnapshot();
+  });
+
+  it("renders as expected when passed a className", () => {
+    const wrapper = mountTree({
+      className: "testClassName"
+    });
+
+    expect(wrapper.find(".tree").hasClass("testClassName")).toBe(true);
+  });
+
+  it("renders as expected when passed a style", () => {
+    const wrapper = mountTree({
+      style: {
+        color: "red"
+      }
+    });
+
+    expect(wrapper.getDOMNode().style.color).toBe("red");
+  });
+
+  it("renders as expected when passed a label", () => {
+    const wrapper = mountTree({
+      label: "testAriaLabel"
+    });
+    expect(wrapper.getDOMNode().getAttribute("aria-label")).toBe(
+      "testAriaLabel"
+    );
+  });
+
+  it("renders as expected when passed an aria-labelledby", () => {
+    const wrapper = mountTree({
+      labelledby: "testAriaLabelBy"
+    });
+    expect(wrapper.getDOMNode().getAttribute("aria-labelledby")).toBe(
+      "testAriaLabelBy"
+    );
+  });
+
+  it("renders as expected with collapsed nodes", () => {
+    const wrapper = mountTree({
+      expanded: new Set("MNO".split(""))
+    });
+    expect(formatTree(wrapper)).toMatchSnapshot();
+  });
+
+  it("renders as expected when passed autoDepth:1", () => {
+    const wrapper = mountTree({
+      autoExpandDepth: 1
+    });
+    expect(formatTree(wrapper)).toMatchSnapshot();
+  });
+
+  it("renders as expected when given a focused item", () => {
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split("")),
+      focused: "G"
+    });
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-G"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-G");
+
+    getTreeNodes(wrapper)
+      .first()
+      .simulate("click");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-A"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-A");
+
+    getTreeNodes(wrapper)
+      .first()
+      .simulate("click");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-A"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-A");
+
+    wrapper.simulate("blur");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().hasAttribute("aria-activedescendant")).toBe(
+      false
+    );
+    expect(wrapper.find(".focused").exists()).toBe(false);
+  });
+
+  it("renders as expected when navigating up with the keyboard", () => {
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split("")),
+      focused: "L"
+    });
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-L"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-L");
+
+    simulateKeyDown(wrapper, "ArrowUp");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-K"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-K");
+
+    simulateKeyDown(wrapper, "ArrowUp");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-E"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-E");
+  });
+
+  it("renders as expected navigating up with the keyboard on a root", () => {
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split("")),
+      focused: "A"
+    });
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-A"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-A");
+
+    simulateKeyDown(wrapper, "ArrowUp");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-A"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-A");
+  });
+
+  it("renders as expected when navigating down with the keyboard", () => {
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split("")),
+      focused: "K"
+    });
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-K"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-K");
+
+    simulateKeyDown(wrapper, "ArrowDown");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-L"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-L");
+
+    simulateKeyDown(wrapper, "ArrowDown");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-F"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-F");
+  });
+
+  it("renders as expected navigating down with keyboard on last node", () => {
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split("")),
+      focused: "O"
+    });
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-O"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-O");
+
+    simulateKeyDown(wrapper, "ArrowDown");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-O"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-O");
+  });
+
+  it("renders as expected when navigating with right/left arrows", () => {
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split("")),
+      focused: "L"
+    });
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-L"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-L");
+
+    simulateKeyDown(wrapper, "ArrowLeft");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-E"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-E");
+
+    simulateKeyDown(wrapper, "ArrowLeft");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-E"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-E");
+
+    simulateKeyDown(wrapper, "ArrowRight");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-E"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-E");
+
+    simulateKeyDown(wrapper, "ArrowRight");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-K"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-K");
+  });
+
+  it("renders as expected when navigating with left arrows on roots", () => {
+    const wrapper = mountTree({
+      focused: "M"
+    });
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-M"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-M");
+
+    simulateKeyDown(wrapper, "ArrowLeft");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-A"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-A");
+
+    simulateKeyDown(wrapper, "ArrowLeft");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-A"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-A");
+  });
+
+  it("renders as expected when navigating with home/end", () => {
+    const wrapper = mountTree({
+      focused: "M"
+    });
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-M"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-M");
+
+    simulateKeyDown(wrapper, "Home");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-A"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-A");
+
+    simulateKeyDown(wrapper, "Home");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-A"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-A");
+
+    simulateKeyDown(wrapper, "End");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-M"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-M");
+
+    simulateKeyDown(wrapper, "End");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-M"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-M");
+
+    simulateKeyDown(wrapper, "ArrowRight");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-M"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-M");
+
+    simulateKeyDown(wrapper, "End");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-N"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-N");
+
+    simulateKeyDown(wrapper, "End");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-N"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-N");
+
+    simulateKeyDown(wrapper, "Home");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-A"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-A");
+  });
+
+  it("renders as expected navigating with arrows on unexpandable roots", () => {
+    const wrapper = mountTree({
+      focused: "A",
+      isExpandable: item => false
+    });
+    expect(formatTree(wrapper)).toMatchSnapshot();
+
+    simulateKeyDown(wrapper, "ArrowRight");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-M"
+    );
+
+    simulateKeyDown(wrapper, "ArrowLeft");
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-A"
+    );
+  });
+
+  it("calls onFocus when expected", () => {
+    const onFocus = jest.fn(x => {
+      wrapper &&
+        wrapper.setState(() => {
+          return { focused: x };
+        });
+    });
+
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split("")),
+      focused: "I",
+      onFocus
+    });
+
+    simulateKeyDown(wrapper, "ArrowUp");
+    expect(onFocus.mock.calls[0][0]).toBe("H");
+
+    simulateKeyDown(wrapper, "ArrowUp");
+    expect(onFocus.mock.calls[1][0]).toBe("C");
+
+    simulateKeyDown(wrapper, "ArrowLeft");
+    simulateKeyDown(wrapper, "ArrowLeft");
+    expect(onFocus.mock.calls[2][0]).toBe("A");
+
+    simulateKeyDown(wrapper, "ArrowRight");
+    expect(onFocus.mock.calls[3][0]).toBe("B");
+
+    simulateKeyDown(wrapper, "ArrowDown");
+    expect(onFocus.mock.calls[4][0]).toBe("E");
+  });
+
+  it("focus treeRef when a node is clicked", () => {
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split(""))
+    });
+    const treeRef = wrapper
+      .find("Tree")
+      .first()
+      .instance().treeRef;
+    treeRef.focus = jest.fn();
+
+    getTreeNodes(wrapper)
+      .first()
+      .simulate("click");
+    expect(treeRef.focus.mock.calls).toHaveLength(1);
+  });
+
+  it("doesn't focus treeRef when focused is null", () => {
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split("")),
+      focused: "A"
+    });
+    const treeRef = wrapper
+      .find("Tree")
+      .first()
+      .instance().treeRef;
+    treeRef.focus = jest.fn();
+    wrapper.simulate("blur");
+    expect(treeRef.focus.mock.calls).toHaveLength(0);
+  });
+
+  it("calls onActivate when expected", () => {
+    const onActivate = jest.fn();
+
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split("")),
+      focused: "A",
+      onActivate
+    });
+
+    simulateKeyDown(wrapper, "Enter");
+    expect(onActivate.mock.calls).toHaveLength(1);
+    expect(onActivate.mock.calls[0][0]).toBe("A");
+
+    simulateKeyDown(wrapper, "Enter");
+    expect(onActivate.mock.calls).toHaveLength(2);
+    expect(onActivate.mock.calls[1][0]).toBe("A");
+
+    simulateKeyDown(wrapper, "ArrowDown");
+    simulateKeyDown(wrapper, "Enter");
+    expect(onActivate.mock.calls).toHaveLength(3);
+    expect(onActivate.mock.calls[2][0]).toBe("B");
+
+    wrapper.simulate("blur");
+    simulateKeyDown(wrapper, "Enter");
+    expect(onActivate.mock.calls).toHaveLength(3);
+  });
+
+  it("does not throw when onActivate is undefined and Enter is pressed", () => {
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split("")),
+      focused: "A"
+    });
+
+    simulateKeyDown(wrapper, "Enter");
+  });
+
+  it("ignores key strokes when pressing modifiers", () => {
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split("")),
+      focused: "L"
+    });
+    expect(formatTree(wrapper)).toMatchSnapshot();
+    expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+      "key-L"
+    );
+    expect(wrapper.find(".focused").prop("id")).toBe("key-L");
+
+    const testKeys = [
+      { key: "ArrowDown" },
+      { key: "ArrowUp" },
+      { key: "ArrowLeft" },
+      { key: "ArrowRight" }
+    ];
+    const modifiers = [
+      { altKey: true },
+      { ctrlKey: true },
+      { metaKey: true },
+      { shiftKey: true }
+    ];
+
+    for (const key of testKeys) {
+      for (const modifier of modifiers) {
+        wrapper.simulate("keydown", Object.assign({}, key, modifier));
+        expect(formatTree(wrapper)).toMatchSnapshot();
+        expect(wrapper.getDOMNode().getAttribute("aria-activedescendant")).toBe(
+          "key-L"
+        );
+      }
+    }
+  });
+
+  it("renders arrows as expected when nodes are expanded", () => {
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split(""))
+    });
+    expect(formatTree(wrapper)).toMatchSnapshot();
+
+    getTreeNodes(wrapper).forEach(n => {
+      if ("ABECDMN".split("").includes(getSanitizedNodeText(n))) {
+        expect(n.find(".arrow.expanded").exists()).toBe(true);
+      } else {
+        expect(n.find(".arrow").exists()).toBe(false);
+      }
+    });
+  });
+
+  it("renders arrows as expected when nodes are collapsed", () => {
+    const wrapper = mountTree();
+    expect(formatTree(wrapper)).toMatchSnapshot();
+
+    getTreeNodes(wrapper).forEach(n => {
+      const arrow = n.find(".arrow");
+      expect(arrow.exists()).toBe(true);
+      expect(arrow.hasClass("expanded")).toBe(false);
+    });
+  });
+
+  it("uses isExpandable prop if it exists to render tree nodes", () => {
+    const wrapper = mountTree({
+      isExpandable: item => item === "A"
+    });
+    expect(formatTree(wrapper)).toMatchSnapshot();
+  });
+
+  it("adds the expected data-expandable attribute", () => {
+    const wrapper = mountTree({
+      isExpandable: item => item === "A"
+    });
+    const nodes = getTreeNodes(wrapper);
+    expect(nodes.at(0).prop("data-expandable")).toBe(true);
+    expect(nodes.at(1).prop("data-expandable")).toBe(false);
+  });
+});
+
+function getTreeNodes(wrapper) {
+  return wrapper.find(".tree-node");
+}
+
+function simulateKeyDown(wrapper, key) {
+  wrapper.simulate("keydown", {
+    key,
+    preventDefault: () => {},
+    stopPropagation: () => {}
+  });
+}
+
+/*
+ * Takes an Enzyme wrapper (obtained with mount/mount/…) and
+ * returns a stringified version of the Tree, e.g.
+ *
+ *   ▼ A
+ *   |   ▼ B
+ *   |   |   ▼ E
+ *   |   |   |   K
+ *   |   |   |   L
+ *   |   |   F
+ *   |   |   G
+ *   |   ▼ C
+ *   |   |   H
+ *   |   |   I
+ *   |   ▼ D
+ *   |   |   J
+ *   ▼ M
+ *   |   ▼ N
+ *   |   |   O
+ *
+ */
+function formatTree(wrapper) {
+  const textTree = getTreeNodes(wrapper)
+    .map(node => {
+      const level = (node.prop("aria-level") || 1) - 1;
+      const indentStr = "|  ".repeat(level);
+      const arrow = node.find(".arrow");
+      let arrowStr = "  ";
+      if (arrow.exists()) {
+        arrowStr = arrow.hasClass("expanded") ? "▼ " : "▶︎ ";
+      }
+
+      return `${indentStr}${arrowStr}${getSanitizedNodeText(node)}`;
+    })
+    .join("\n");
+
+  // Wrap in new lines so tree nodes are aligned as expected.
+  return `\n${textTree}\n`;
+}
+
+function getSanitizedNodeText(node) {
+  // Stripping off the invisible space used in the indent.
+  return node.text().replace(/^\u200B+/, "");
+}
+
+// Encoding of the following tree/forest:
+//
+// A
+// |-- B
+// |   |-- E
+// |   |   |-- K
+// |   |   `-- L
+// |   |-- F
+// |   `-- G
+// |-- C
+// |   |-- H
+// |   `-- I
+// `-- D
+//     `-- J
+// M
+// `-- N
+//     `-- O
+
+var TEST_TREE = {
+  children: {
+    A: ["B", "C", "D"],
+    B: ["E", "F", "G"],
+    C: ["H", "I"],
+    D: ["J"],
+    E: ["K", "L"],
+    F: [],
+    G: [],
+    H: [],
+    I: [],
+    J: [],
+    K: [],
+    L: [],
+    M: ["N"],
+    N: ["O"],
+    O: []
+  },
+  parent: {
+    A: null,
+    B: "A",
+    C: "A",
+    D: "A",
+    E: "B",
+    F: "B",
+    G: "B",
+    H: "C",
+    I: "C",
+    J: "D",
+    K: "E",
+    L: "E",
+    M: null,
+    N: "M",
+    O: "N"
+  }
+};

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/packages/devtools-components/src/tree.css
@@ -0,0 +1,90 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+ /* We can remove the outline since we do add our own focus style on nodes */
+.tree:focus {
+  outline: none;
+}
+
+.tree.inline {
+  display: inline-block;
+}
+
+.tree.nowrap {
+  white-space: nowrap;
+}
+
+.tree.noselect {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+.tree .tree-node {
+  display: flex;
+}
+
+.tree .tree-node:not(.focused):hover {
+  background-color: var(--theme-selection-background-hover);
+}
+
+.tree-indent {
+  display: inline-block;
+  width: 12px;
+  margin-inline-start: 5px;
+  border-inline-start: 1px solid #A2D1FF;
+  flex-shrink: 0;
+}
+
+/* Align with expandables siblings (where we have the arrow) */
+.tree-node[data-expandable="false"] .tree-indent:last-of-type {
+  margin-inline-end: 15px;
+}
+
+/* For non expandable root nodes, we don't have .tree-indent elements, so we declare
+   the margin on the start of the node */
+.tree-node[data-expandable="false"][aria-level="1"] {
+  padding-inline-start: 15px
+}
+
+.tree .tree-node[data-expandable="true"] {
+  cursor: default;
+}
+
+.tree-node button.arrow {
+  background:url(/images/arrow.svg) no-repeat;
+  background-size:contain;
+  background-position:center center;
+  width: 9px;
+  height: 9px;
+  border:0;
+  padding:0;
+  margin-inline-start: 1px;
+  margin-inline-end: 4px;
+  transform: rotate(-90deg);
+  transform-origin: center center;
+  transition: transform 0.125s ease;
+  align-self: center;
+  -moz-context-properties: fill;
+  fill: var(--theme-splitter-color, #9B9B9B);
+}
+
+html[dir="rtl"] .tree-node button.arrow {
+  transform: rotate(90deg);
+}
+
+.tree-node button.arrow.expanded.expanded {
+  transform: rotate(0deg);
+ }
+
+.tree .tree-node.focused {
+  color: white;
+  background-color: var(--theme-selection-background, #0a84ff);
+}
+
+.tree-node.focused button.arrow {
+  fill: currentColor;
+}