Bug 1383017 - Remove border for top-level messages. r=bgrins
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Tue, 18 Jul 2017 17:00:14 +0100
changeset 420183 f3cb981a0f37f6b0f0f87785b609a174ade48a4b
parent 420182 7f9034bfd0c60fc5ec4097640f1197833e060f4a
child 420184 6f13b6990f426088776cad32fbef814dd13f5cab
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1383017
milestone56.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 1383017 - Remove border for top-level messages. r=bgrins This adds a data-indent attribute to the message indent component so we can target it in CSS. MozReview-Commit-ID: DEUTHe42Pa0
devtools/client/themes/webconsole.css
devtools/client/webconsole/new-console-output/components/message-indent.js
devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js
devtools/client/webconsole/new-console-output/test/components/evaluation-result.test.js
devtools/client/webconsole/new-console-output/test/components/network-event-message.test.js
devtools/client/webconsole/new-console-output/test/components/page-error.test.js
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -802,16 +802,19 @@ a.learn-more-link.webconsole-learn-more-
 .network .message-flex-body > .message-body {
   display: flex;
 }
 
 .webconsole-output-wrapper .message .indent {
   display: inline-block;
   border-inline-end: solid 1px var(--theme-splitter-color);
 }
+.webconsole-output-wrapper .message .indent[data-indent="0"] {
+  border-inline-end: none;
+}
 
 .message.startGroup .indent,
 .message.startGroupCollapsed .indent {
   border-inline-end-color: transparent;
   margin-inline-end: 5px;
 }
 
 .message.startGroup .icon,
--- a/devtools/client/webconsole/new-console-output/components/message-indent.js
+++ b/devtools/client/webconsole/new-console-output/components/message-indent.js
@@ -14,18 +14,21 @@ const {
 const INDENT_WIDTH = 12;
 
 // Store common indents so they can be used without recreating the element
 // during render.
 const CONSTANT_INDENTS = [getIndentElement(0), getIndentElement(1)];
 
 function getIndentElement(indent) {
   return dom.span({
+    "data-indent": indent,
     className: "indent",
-    style: {"width": indent * INDENT_WIDTH}
+    style: {
+      "width": indent * INDENT_WIDTH
+    }
   });
 }
 
 function MessageIndent(props) {
   const { indent } = props;
   return CONSTANT_INDENTS[indent] || getIndentElement(indent);
 }
 
--- a/devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js
@@ -85,21 +85,24 @@ describe("ConsoleAPICall component:", ()
     it("has the expected indent", () => {
       const message = stubPreparedMessages.get("console.log('foobar', 'test')");
 
       const indent = 10;
       let wrapper = render(ConsoleApiCall({
         message: Object.assign({}, message, {indent}),
         serviceContainer
       }));
-      expect(wrapper.find(".indent").prop("style").width)
-        .toBe(`${indent * INDENT_WIDTH}px`);
+      let indentEl = wrapper.find(".indent");
+      expect(indentEl.prop("style").width).toBe(`${indent * INDENT_WIDTH}px`);
+      expect(indentEl.prop("data-indent")).toBe(`${indent}`);
 
       wrapper = render(ConsoleApiCall({ message, serviceContainer}));
-      expect(wrapper.find(".indent").prop("style").width).toBe(`0`);
+      indentEl = wrapper.find(".indent");
+      expect(indentEl.prop("style").width).toBe(`0`);
+      expect(indentEl.prop("data-indent")).toBe(`0`);
     });
 
     it("renders a timestamp when passed a truthy timestampsVisible prop", () => {
       const message = stubPreparedMessages.get("console.log('foobar', 'test')");
       const wrapper = render(ConsoleApiCall({
         message,
         serviceContainer,
         timestampsVisible: true,
--- a/devtools/client/webconsole/new-console-output/test/components/evaluation-result.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/evaluation-result.test.js
@@ -79,21 +79,24 @@ describe("EvaluationResult component:", 
 
   it("has the expected indent", () => {
     const message = stubPreparedMessages.get("new Date(0)");
 
     const indent = 10;
     let wrapper = render(EvaluationResult({
       message: Object.assign({}, message, {indent}),
     }));
-    expect(wrapper.find(".indent").prop("style").width)
-        .toBe(`${indent * INDENT_WIDTH}px`);
+    let indentEl = wrapper.find(".indent");
+    expect(indentEl.prop("style").width).toBe(`${indent * INDENT_WIDTH}px`);
+    expect(indentEl.prop("data-indent")).toBe(`${indent}`);
 
     wrapper = render(EvaluationResult({ message}));
-    expect(wrapper.find(".indent").prop("style").width).toBe(`0`);
+    indentEl = wrapper.find(".indent");
+    expect(indentEl.prop("style").width).toBe(`0`);
+    expect(indentEl.prop("data-indent")).toBe(`0`);
   });
 
   it("has location information", () => {
     const message = stubPreparedMessages.get("1 + @");
     const wrapper = render(EvaluationResult({ message }));
 
     const locationLink = wrapper.find(`.message-location`);
     expect(locationLink.length).toBe(1);
--- a/devtools/client/webconsole/new-console-output/test/components/network-event-message.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/network-event-message.test.js
@@ -56,21 +56,24 @@ describe("NetworkEventMessage component:
     it("has the expected indent", () => {
       const message = stubPreparedMessages.get("GET request");
 
       const indent = 10;
       let wrapper = render(NetworkEventMessage({
         message: Object.assign({}, message, {indent}),
         serviceContainer
       }));
-      expect(wrapper.find(".indent").prop("style").width)
-        .toBe(`${indent * INDENT_WIDTH}px`);
+      let indentEl = wrapper.find(".indent");
+      expect(indentEl.prop("style").width).toBe(`${indent * INDENT_WIDTH}px`);
+      expect(indentEl.prop("data-indent")).toBe(`${indent}`);
 
       wrapper = render(NetworkEventMessage({ message, serviceContainer }));
-      expect(wrapper.find(".indent").prop("style").width).toBe(`0`);
+      indentEl = wrapper.find(".indent");
+      expect(indentEl.prop("style").width).toBe(`0`);
+      expect(indentEl.prop("data-indent")).toBe(`0`);
     });
   });
 
   describe("XHR GET request", () => {
     it("renders as expected", () => {
       const message = stubPreparedMessages.get("XHR GET request");
       const update = stubPreparedMessages.get("XHR GET request update");
       const wrapper = render(NetworkEventMessage({
--- a/devtools/client/webconsole/new-console-output/test/components/page-error.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/page-error.test.js
@@ -141,21 +141,24 @@ describe("PageError component:", () => {
 
   it("has the expected indent", () => {
     const message = stubPreparedMessages.get("ReferenceError: asdf is not defined");
     const indent = 10;
     let wrapper = render(PageError({
       message: Object.assign({}, message, {indent}),
       serviceContainer
     }));
-    expect(wrapper.find(".indent").prop("style").width)
-        .toBe(`${indent * INDENT_WIDTH}px`);
+    let indentEl = wrapper.find(".indent");
+    expect(indentEl.prop("style").width).toBe(`${indent * INDENT_WIDTH}px`);
+    expect(indentEl.prop("data-indent")).toBe(`${indent}`);
 
     wrapper = render(PageError({ message, serviceContainer}));
-    expect(wrapper.find(".indent").prop("style").width).toBe(`0`);
+    indentEl = wrapper.find(".indent");
+    expect(indentEl.prop("style").width).toBe(`0`);
+    expect(indentEl.prop("data-indent")).toBe(`0`);
   });
 
   it("has empty error notes", () => {
     const message = stubPreparedMessages.get("ReferenceError: asdf is not defined");
     let wrapper = render(PageError({ message, serviceContainer }));
 
     const notes = wrapper.find(".error-note");