Bug 1531350 - [release 128] Fix reps launchpad (#8015). r=dwalsh
authorNicolas Chevobbe <nchevobbe@users.noreply.github.com>
Thu, 28 Feb 2019 14:34:35 -0500
changeset 519999 58001e734b3330592849703f0b0e4bffc23c7e73
parent 519998 db37efddbcb6192acab86badf6fc7bc935c19790
child 520000 7961797a2f828936ac082268fb28a2f68c45084a
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdwalsh
bugs1531350
milestone67.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 1531350 - [release 128] Fix reps launchpad (#8015). r=dwalsh
devtools/client/debugger/new/dist/debugger.css
devtools/client/debugger/new/packages/devtools-reps/src/launchpad/components/Console.css
devtools/client/debugger/new/packages/devtools-reps/src/launchpad/components/Result.js
devtools/client/debugger/new/packages/devtools-reps/src/launchpad/index.js
--- a/devtools/client/debugger/new/dist/debugger.css
+++ b/devtools/client/debugger/new/dist/debugger.css
@@ -2711,16 +2711,20 @@ menuseparator {
   stroke: var(--blue-40);
 }
 
 .theme-dark .column-breakpoint.disabled svg {
   fill: var(--blue-50);
   stroke: var(--blue-60);
   fill-opacity: 0.5;
 }
+
+.img.column-marker {
+  background-image: url("resource://devtools/client/debugger/new/images/column-marker.svg");
+}
 /* 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/>. */
 
 .conditional-breakpoint-panel {
   cursor: initial;
   margin: 1em 0;
   position: relative;
--- a/devtools/client/debugger/new/packages/devtools-reps/src/launchpad/components/Console.css
+++ b/devtools/client/debugger/new/packages/devtools-reps/src/launchpad/components/Console.css
@@ -54,36 +54,45 @@ main {
   display: inline-block;
   font-size: 0.75rem;
   padding: 0.1rem 0.25rem;
   margin-right: 0.25rem;
   border-radius: 0.25rem;
 }
 
 .packet header {
-  display: flex;
   background-color: var(--theme-toolbar-background-alt);
   border-top: var(--default-border);
   color: var(--theme-body-color);
   padding: 0.5rem;
 }
 
 .packet header::before {
   display: inline-block;
   padding-right: 0.5rem;
 }
 
+.packet header .copy-label {
+  margin: 0 0.5em;
+  padding-inline-start: 0.5em;
+  border-inline-start: 1px solid rgba(0,0,0, 0.2);
+}
+
 .packet header.packet-expanded::before {
   content: "−";
 }
 
 .packet header.packet-collapsed::before {
   content: "+";
 }
 
 .copy-packet-button {
   margin-left: auto;
   margin-right: 0.5rem;
 }
 
+.packet header + .packet-rep {
+  padding-top: 1rem;
+}
+
 .packet .packet-rep {
-  padding: 1rem;
+  padding-inline-start: 1rem;
 }
--- a/devtools/client/debugger/new/packages/devtools-reps/src/launchpad/components/Result.js
+++ b/devtools/client/debugger/new/packages/devtools-reps/src/launchpad/components/Result.js
@@ -106,27 +106,41 @@ class Result extends Component {
     return dom.div(
       { className: "packet" },
       dom.header(
         {
           className: headerClassName,
           onClick: this.onHeaderClick
         },
         headerLabel,
-        showPacket &&
-          dom.button(
-            {
-              className: "copy-packet-button",
-              onClick: e => this.copyPacketToClipboard(e, packet)
-            },
-            "Copy as JSON"
+        dom.span({ className: "copy-label" }, "Copy"),
+        dom.button(
+          {
+            className: "copy-packet-button",
+            onClick: e => this.copyPacketToClipboard(e, packet.result)
+          },
+          "grip"
+        ),
+        dom.button(
+          {
+            className: "copy-packet-button",
+            onClick: e => this.copyPacketToClipboard(e, packet)
+          },
+          "packet"
+        )
+      ),
+      ...(showPacket
+        ? Object.keys(packet).map(k =>
+            dom.div(
+              { className: "packet-rep" },
+              `${k}: `,
+              Rep({ object: packet[k], noGrip: true, mode: MODE.LONG })
+            )
           )
-      ),
-      showPacket &&
-        dom.div({ className: "packet-rep" }, Rep({ object: packet }))
+        : [])
     );
   }
 
   render() {
     const { expression } = this.props;
     const { input, packet } = expression;
     return dom.div(
       { className: "rep-row" },
--- a/devtools/client/debugger/new/packages/devtools-reps/src/launchpad/index.js
+++ b/devtools/client/debugger/new/packages/devtools-reps/src/launchpad/index.js
@@ -19,22 +19,17 @@ require("./launchpad.css");
 function onConnect(connection) {
   if (!connection) {
     return;
   }
 
   const client = {
     clientCommands: {
       evaluate: input =>
-        new Promise(resolve => {
-          connection.tabConnection.tabTarget.activeConsole.evaluateJS(
-            input,
-            result => resolve(result)
-          );
-        })
+        connection.tabConnection.tabTarget.activeConsole.evaluateJSAsync(input)
     },
 
     createObjectClient: function(grip) {
       return connection.tabConnection.threadClient.pauseGrip(grip);
     },
     createLongStringClient: function(grip) {
       return connection.tabConnection.tabTarget.activeConsole.longString(grip);
     },