Reps 0.21.1 (#5714)

Author: nchevobbe

.travis.yml

@@ -10,7 +10,7 @@ env:
   global:
     - DISPLAY=':99.0'
     - YARN_VERSION='0.24.5'
-    - MC_COMMIT='97160a734959' # https://hg.mozilla.org/mozilla-central/shortlog
+    - MC_COMMIT='0b997836c7cf' # https://hg.mozilla.org/mozilla-central/shortlog
 
 notifications:
   slack:

bin/dev-server.js

@@ -17,5 +17,13 @@ let { app } = toolbox.startDevServer(envConfig, webpackConfig, __dirname);
 app.use("/integration/examples", express.static("src/test/mochitest/examples"));
 app.use("/images", serve(path.join(__dirname, "../assets/images")));
 
+// Serve devtools-reps images
+app.use("/devtools-reps/images/", serve(path.join(__dirname, "../src/shared/images")));
+
+// As well as devtools-components ones, with a different path, which we are going to
+// write in the postCSS config in development mode.
+app.use("/devtools-components/images/",
+  serve(path.join(__dirname, "../node_modules/devtools-components/src/images")));
+
 console.log("View debugger examples here:");
 console.log("https://github.com/devtools-html/debugger-examples");

circle.yml

@@ -1,6 +1,6 @@
 machine:
   node:
-    version: 8.5.0
+    version: 8.9.4
   services:
     - docker
   environment:

package.json

@@ -70,7 +70,7 @@
     "codemirror": "^5.28.0",
     "devtools-launchpad": "^0.0.117",
     "devtools-linters": "^0.0.4",
-    "devtools-reps": "^0.20.0",
+    "devtools-reps": "^0.21.1",
     "devtools-source-map": "^0.14.8",
     "devtools-splitter": "^0.0.6",
     "devtools-utils": "^0.0.11",
@@ -102,6 +102,7 @@
   "main": "src/main.js",
   "author": "Jason Laster <[email protected]>",
   "devDependencies": {
+    "@sucrase/webpack-object-rest-spread-plugin": "^1.0.0",
     "babel-eslint": "^8.2.1",
     "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
     "babel-plugin-transform-class-properties": "^6.24.1",

src/components/SecondaryPanes/tests/__snapshots__/Expressions.spec.js.snap

@@ -12,7 +12,7 @@ exports[`Expressions should always have unique keys 1`] = `
     <div
       className="expression-content"
     >
-      <ObjectInspector
+      <OI
         autoExpandDepth={0}
         createObjectClient={[Function]}
         disableWrap={true}
@@ -49,7 +49,7 @@ exports[`Expressions should always have unique keys 1`] = `
     <div
       className="expression-content"
     >
-      <ObjectInspector
+      <OI
         autoExpandDepth={0}
         createObjectClient={[Function]}
         disableWrap={true}
@@ -119,7 +119,7 @@ exports[`Expressions should render 1`] = `
     <div
       className="expression-content"
     >
-      <ObjectInspector
+      <OI
         autoExpandDepth={0}
         createObjectClient={[Function]}
         disableWrap={true}
@@ -156,7 +156,7 @@ exports[`Expressions should render 1`] = `
     <div
       className="expression-content"
     >
-      <ObjectInspector
+      <OI
         autoExpandDepth={0}
         createObjectClient={[Function]}
         disableWrap={true}

src/components/shared/Svg.css

@@ -95,8 +95,20 @@ html[dir="rtl"] img.arrow {
   transform: rotate(90deg);
 }
 
-/* TODO (Amit): html is just for specificity. keep it like this? */
-html .arrow.expanded svg {
+.arrow svg {
+  transition: transform 0.125s ease;
+  width: 10px;
+  margin-inline-end: 5px;
+  transform: rotate(-90deg);
+}
+
+html[dir="rtl"] .arrow svg,
+.arrow svg:dir(rtl),
+.arrow svg:-moz-locale-dir(rtl) {
+  transform: rotate(90deg);
+}
+
+.arrow.expanded.expanded svg {
   transform: rotate(0deg);
 }
 

src/components/shared/tests/__snapshots__/ManagedTree.spec.js.snap

@@ -283,7 +283,7 @@ exports[`ManagedTree sets expanded items 1`] = `
         >
           <div
             aria-expanded={true}
-            aria-level={0}
+            aria-level={1}
             className="tree-node"
             data-expandable={false}
             id="a-$"
@@ -311,7 +311,7 @@ exports[`ManagedTree sets expanded items 1`] = `
         >
           <div
             aria-expanded={true}
-            aria-level={0}
+            aria-level={1}
             className="tree-node"
             data-expandable={false}
             id={1}
@@ -339,7 +339,7 @@ exports[`ManagedTree sets expanded items 1`] = `
         >
           <div
             aria-expanded={true}
-            aria-level={0}
+            aria-level={1}
             className="tree-node"
             data-expandable={false}
             id={2}
@@ -423,7 +423,7 @@ exports[`ManagedTree sets expanded items 2`] = `
           renderItem={[Function]}
         >
           <div
-            aria-level={0}
+            aria-level={1}
             className="tree-node focused"
             data-expandable={false}
             id="a-$"
@@ -451,7 +451,7 @@ exports[`ManagedTree sets expanded items 2`] = `
         >
           <div
             aria-expanded={true}
-            aria-level={0}
+            aria-level={1}
             className="tree-node"
             data-expandable={false}
             id={1}
@@ -479,7 +479,7 @@ exports[`ManagedTree sets expanded items 2`] = `
         >
           <div
             aria-expanded={true}
-            aria-level={0}
+            aria-level={1}
             className="tree-node"
             data-expandable={false}
             id={2}

src/components/tests/__snapshots__/ProjectSearch.spec.js.snap

@@ -261,7 +261,7 @@ exports[`ProjectSearch found search results 1`] = `
               >
                 <div
                   aria-expanded={true}
-                  aria-level={0}
+                  aria-level={1}
                   className="tree-node"
                   data-expandable={true}
                   id="undefined-$"
@@ -329,7 +329,7 @@ exports[`ProjectSearch found search results 1`] = `
                 renderItem={[Function]}
               >
                 <div
-                  aria-level={1}
+                  aria-level={2}
                   className="tree-node"
                   data-expandable={false}
                   id="undefined-undefined-30-1"
@@ -391,7 +391,7 @@ exports[`ProjectSearch found search results 1`] = `
                 renderItem={[Function]}
               >
                 <div
-                  aria-level={1}
+                  aria-level={2}
                   className="tree-node"
                   data-expandable={false}
                   id="undefined-undefined-60-2"
@@ -453,7 +453,7 @@ exports[`ProjectSearch found search results 1`] = `
                 renderItem={[Function]}
               >
                 <div
-                  aria-level={1}
+                  aria-level={2}
                   className="tree-node"
                   data-expandable={false}
                   id="undefined-undefined-90-3"
@@ -528,7 +528,7 @@ exports[`ProjectSearch found search results 1`] = `
               >
                 <div
                   aria-expanded={true}
-                  aria-level={0}
+                  aria-level={1}
                   className="tree-node"
                   data-expandable={true}
                   id="undefined-4"
@@ -596,7 +596,7 @@ exports[`ProjectSearch found search results 1`] = `
                 renderItem={[Function]}
               >
                 <div
-                  aria-level={1}
+                  aria-level={2}
                   className="tree-node"
                   data-expandable={false}
                   id="undefined-undefined-80-5"
@@ -658,7 +658,7 @@ exports[`ProjectSearch found search results 1`] = `
                 renderItem={[Function]}
               >
                 <div
-                  aria-level={1}
+                  aria-level={2}
                   className="tree-node"
                   data-expandable={false}
                   id="undefined-undefined-40-6"

src/test/mochitest/browser_dbg-babel-scopes.js

@@ -58,7 +58,7 @@ async function breakpointScopes(dbg, fixture, { line, column }, scopes) {
 async function expandAllScopes(dbg) {
   const scopes = await waitForElement(dbg, "scopes");
   const scopeElements = scopes.querySelectorAll(
-    `.tree-node[aria-level="0"][data-expandable="true"]:not([aria-expanded="true"])`
+    `.tree-node[aria-level="1"][data-expandable="true"]:not([aria-expanded="true"])`
   );
   const indices = Array.from(scopeElements, el => {
     return Array.prototype.indexOf.call(el.parentNode.childNodes, el);

src/test/mochitest/head.js

@@ -401,8 +401,8 @@ function isPaused(dbg) {
 async function waitForLoadedScopes(dbg) {
   const scopes = await waitForElement(dbg, "scopes");
   // Since scopes auto-expand, we can assume they are loaded when there is a tree node
-  // with the aria-level attribute equal to "1".
-  await waitUntil(() => scopes.querySelector(`.tree-node[aria-level="1"]`));
+  // with the aria-level attribute equal to "2".
+  await waitUntil(() => scopes.querySelector(`.tree-node[aria-level="2"]`));
 }
 
 /**