Bug 1486870 - Adapt SmartTrace component to the modified Frames component; r=bgrins.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Fri, 25 Jan 2019 17:13:38 +0000
changeset 515478 2fbbe85bb9923a7eb11ed36dd07343689dc8d071
parent 515477 c688c38605f9f12542afae478836c741d827fd03
child 515479 b546764bfc3cfa5e237412c27358836831217634
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1486870
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1486870 - Adapt SmartTrace component to the modified Frames component; r=bgrins. The Frames component changed significantly on Github, which means we need to do some adjustments in the SmartTrace component (pass the `selectable` prop, change CSS rules, …). For now, we also hide the Framework icons as we need to find a way to properly share the underlying CSS from the debugger (See https://github.com/devtools-html/debugger.html/issues/7782). Differential Revision: https://phabricator.services.mozilla.com/D17376
devtools/client/shared/components/SmartTrace.css
devtools/client/shared/components/SmartTrace.js
devtools/client/shared/components/test/mochitest/test_smart-trace-grouping.html
devtools/client/shared/components/test/mochitest/test_smart-trace-source-maps.html
devtools/client/themes/webconsole.css
--- a/devtools/client/shared/components/SmartTrace.css
+++ b/devtools/client/shared/components/SmartTrace.css
@@ -2,22 +2,30 @@
  * 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/. */
 
 /**
  * SmartTrace Component
  * Styles for React component at `devtools/client/shared/components/SmartTrace.js`
  */
 
-.frames ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+
+.frames-group .frame{
+  display: block;
+  padding-inline-start: 16px;
+}
+
+.img.annotation-logo{
+  background-color: var(--theme-body-color);
+}
+
+
+.frames [role="list"]{
   display: inline-grid;
-  grid-template-columns: auto auto 1fr;
+  grid-template-columns: auto 1fr;
   grid-column-gap: 8px;
 }
 
 .frames .frame {
   display: contents;
   cursor: pointer;
   white-space: normal;
 }
@@ -31,79 +39,119 @@
 
 .frames .location {
   color: var(--frame-link-source);
   grid-column: -1 / -2;
   /* Force the location to be on one line and crop at start */
   text-overflow: ellipsis;
   white-space: nowrap;
   direction: rtl;
+  text-align: end;
 }
 
 .frames .location .line {
   color: var(--frame-link-line-color);
 }
 
-.frames ul .frame:hover .location {
+.frames .frames-list .frame:hover .location {
   text-decoration: underline;
 }
 
 /******* Group styles *******/
-.frames .frames-group,
+.frames-group {
+  grid-column:1 / -1;
+}
+
 .frames .frames-group .group {
-  display: contents;
+  display: flex;
 }
 
-.frames-group .frames-list .frame {
+.group-description {
+  display: flex;
+  align-items: center;
+  color: var(--console-output-color);
+}
+
+.frames .frames-group .frames-list {
+  display: block;
+}
+
+.frames .frames-group .frames-list .frame {
   padding-inline-start: 16px;
   display: block;
-  grid-column: 1 / -1;
+  text-overflow: ellipsis;
 }
 
-.frames-list {
+.frames .frames-group .frames-list {
   grid-column: 1 / -1;
   margin-block-start: 2px;
 }
 
-.frames .frames-list .frame:first-of-type {
+.frames .frames-group .frames-list .frame:first-of-type {
   border-top: 1px solid var(--theme-splitter-color);
   padding-block-start: 4px;
 }
 
-.frames .frames-list .frame:last-of-type {
+.frames .frames-group .frames-list .frame:last-of-type {
   margin-block-end: 4px;
   border-bottom: 1px solid var(--theme-splitter-color);
 }
 
-.frames ul .frames-group.expanded,
-.frames ul .frames-group.expanded .location {
-  color: var(--theme-highlight-blue);
-}
-
-.frames ul .frames-group.expanded .react path {
-  fill: var(--theme-highlight-blue);
-}
-
-.frames ul .frames-group.expanded .badge {
-  color: var(--theme-highlight-blue);
-}
-
 .badge {
   background: var(--theme-toolbar-background-hover);
   color: var(--theme-body-color);
   border-radius: 8px;
   padding: 1px 4px;
   font-size: 0.9em;
   display: inline-block;
   text-align: center;
   cursor: default;
+  margin-inline-start: 4px;
+}
+
+.frames .frames-group.expanded .group-description,
+.frames .frames-group.expanded .badge {
+  color: var(--theme-highlight-blue);
 }
 
-.annotation-logo {
+/** Images **/
+
+.frames .img.annotation-logo {
+  /* FIXME: In order to display the Framework icons, we need to find a way to share CSS
+   * from the debugger, where the background images are defined.
+   * See https://github.com/devtools-html/debugger.html/issues/7782.
+   */
+  display: none;
+  /*
+  background-color:var(--theme-body-color);
   display: inline-block;
   width: 12px;
-  margin-inline-start: 4px;
+  height:12px;
   vertical-align: middle;
+  margin-inline-end:4px;
+  */
+}
+
+.expanded .img.annotation-logo {
+  background-color: currentColor;
 }
 
-:root.theme-dark .annotation-logo:not(.angular) svg path {
-  fill: var(--theme-highlight-blue);
+.group .img.arrow {
+    mask: url("resource://devtools/client/debugger/new/images/arrow.svg");
+    mask-size: auto;
+    margin-inline-end: 4px;
+    background-color: var(--theme-icon-dimmed-color);
+    width: 10px;
+    height: 10px;
+    mask-size: 100%;
+    display: inline-block;
+    transform: rotate(-90deg);
+    transition: transform 0.18s ease;
 }
+
+.group .img.arrow.expanded {
+  transform: rotate(0);
+}
+
+/* Frameworks */
+:root.theme-dark .annotation-logo:not(.angular) {
+  background-color: var(--theme-highlight-blue);
+}
--- a/devtools/client/shared/components/SmartTrace.js
+++ b/devtools/client/shared/components/SmartTrace.js
@@ -216,16 +216,17 @@ class SmartTrace extends Component {
       },
       getFrameTitle: url => {
         return l10n.getFormatStr("frame.viewsourceindebugger", url);
       },
       disableFrameTruncate: true,
       disableContextMenu: true,
       frameworkGroupingOn: true,
       displayFullUrl: !this.state || !this.state.isSourceMapped,
+      selectable: true,
     });
   }
 }
 
 SmartTrace.childContextTypes = {
   l10n: PropTypes.object,
 };
 
--- a/devtools/client/shared/components/test/mochitest/test_smart-trace-grouping.html
+++ b/devtools/client/shared/components/test/mochitest/test_smart-trace-grouping.html
@@ -71,74 +71,73 @@ window.onload = function() {
 
     const traceEl = ReactDOM.findDOMNode(trace);
     ok(traceEl, "Rendered SmartTrace has an element");
 
     isDeeply(getStacktraceText(traceEl), [
       `<anonymous> http://myfile.com/mahscripts.js:55`,
       `rootReducer Redux`,
       `loadFunc http://myfile.com/loadee.js:10`,
-      `▶︎ internalReact10 React`,
+      `▶︎ React 10`,
       `onClick http://myfile.com/mahscripts.js:10`,
     ], "React frames are grouped - Redux frame is not");
 
     info("Expand React group");
     let onReactGroupExpanded = waitFor(() =>
       traceEl.querySelector(".frames-group.expanded"));
-    traceEl.querySelector(".group .location").click();
+    traceEl.querySelector(".group").click();
     await onReactGroupExpanded;
 
     isDeeply(getStacktraceText(traceEl), [
       `<anonymous> http://myfile.com/mahscripts.js:55`,
       `rootReducer Redux`,
       `loadFunc http://myfile.com/loadee.js:10`,
-      `▼ internalReact10 React`,
+      `▼ React 10`,
       `| internalReact10`,
       `| internalReact9`,
       `| internalReact8`,
       `| internalReact7`,
       `| internalReact6`,
       `| internalReact5`,
       `| internalReact4`,
       `| internalReact3`,
       `| internalReact2`,
       `| internalReact1`,
       `onClick http://myfile.com/mahscripts.js:10`,
     ], "React frames can be expanded");
 
     info("Collapse React group");
     onReactGroupExpanded = waitFor(() =>
       !traceEl.querySelector(".frames-group.expanded"));
-    traceEl.querySelector(".group .location").click();
+    traceEl.querySelector(".group").click();
     await onReactGroupExpanded;
 
     isDeeply(getStacktraceText(traceEl), [
       `<anonymous> http://myfile.com/mahscripts.js:55`,
       `rootReducer Redux`,
       `loadFunc http://myfile.com/loadee.js:10`,
-      `▶︎ internalReact10 React`,
+      `▶︎ React 10`,
       `onClick http://myfile.com/mahscripts.js:10`,
     ], "React frames can be collapsed");
   });
 
   function getStacktraceText(traceElement) {
-    return Array.from(traceElement.querySelectorAll(".frame, .frames-group"))
-      .map(el => {
-        const title = el.querySelector(".title");
-        const location = el.querySelector(".location");
-
+    return Array.from(traceElement.querySelectorAll(".frame, .frames-group")).map(el => {
         // If it's a group, we want to append an arrow representing the group state
         if (el.classList.contains("frames-group")) {
           const arrow = el.classList.contains("expanded") ? "▼" : "▶︎";
-          return `${arrow} ${title.textContent} ${location.textContent}`;
+          const content = el.querySelector(".group").textContent.trim();
+          return `${arrow} ${content}`;
         }
 
+        const title = el.querySelector(".title");
         if (el.closest(".frames-group")) {
           return `| ${title.textContent}`;
         }
 
+        const location = el.querySelector(".location");
         return `${title.textContent} ${location.textContent}`;
       });
   }
 };
 </script>
 </body>
 </html>
--- a/devtools/client/shared/components/test/mochitest/test_smart-trace-source-maps.html
+++ b/devtools/client/shared/components/test/mochitest/test_smart-trace-source-maps.html
@@ -165,17 +165,17 @@ window.onload = function() {
     info("Check the the sourcemapped version is rendered after the sourcemapTimeout");
     await waitFor(() => !!traceEl.querySelector(".group"));
 
     frameEls = Array.from(traceEl.querySelectorAll(".frame"));
     is(frameEls.length, 0, "SmartTrace has no frame");
 
     const groups = Array.from(traceEl.querySelectorAll(".group"));
     is(groups.length, 1, "SmartTrace has a group");
-    is(groups[0].textContent, "last2React", "A collapsed React group is displayed");
+    is(groups[0].textContent.trim(), "React 2", "A collapsed React group is displayed");
 
     is(onReadyCount, 1, "onReady was only called once");
   });
 
   add_task(async function testFlakySourcemapService() {
     const stacktrace = [
       {
         filename: "http://myfile.com/bundle.js",
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -1014,8 +1014,16 @@ body {
 
 .sidebar-close-button::before {
   background-image: url(chrome://devtools/skin/images/close.svg);
 }
 
 .sidebar-contents .object-inspector {
   min-width: 100%;
 }
+
+/** Utils **/
+.clipboard-only {
+  position: absolute;
+  left: -9999px;
+  width: 0;
+  height: 0;
+}