Bug 1455645 - Ensure we don't show an horizontal scrollbar in the console; r=bgrins.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Fri, 27 Apr 2018 16:17:27 +0200
changeset 472908 2df67c1f498034276cb118e3476d099b80a2807f
parent 472907 9f041f2662c850a728396b88aece9ceb5c794a3a
child 472909 23400e395408c6816d3afc0d4c192013b4cd8e69
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1455645
milestone61.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 1455645 - Ensure we don't show an horizontal scrollbar in the console; r=bgrins. Switching the body to a grid and adding some constraints seems to do nicely the trick. This was tested with the STR in this bug as well as with repeatable messages and plain messages. MozReview-Commit-ID: GI1tugaomFv
devtools/client/themes/webconsole.css
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -100,27 +100,29 @@ a {
   font-weight: 600;
 }
 
 .message-repeats[value="1"] {
   display: none;
 }
 
 .message-location {
-  max-width: 40%;
+  max-width: 40vw;
+  grid-column: -1 / -2;
+  color: var(--frame-link-source);
 }
 
 .stack-trace {
   /* The markup contains extra whitespace to improve formatting of clipboard text.
      Make sure this whitespace doesn't affect the HTML rendering */
   white-space: normal;
 }
 
-.stack-trace .frame-link-source,
-.message-location .frame-link-source {
+.message-location,
+.stack-trace .frame-link-source {
   /* Makes the file name truncated (and ellipsis shown) on the left side */
   direction: rtl;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: end;
 }
 
@@ -133,17 +135,19 @@ a {
 
 .stack-trace .frame-link-function-display-name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .message-flex-body {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto max-content;
+  grid-gap: 5px;
 }
 
 .message-body {
   white-space: pre-wrap;
   word-wrap: break-word;
 }
 
 .message-flex-body > .message-body {
@@ -640,18 +644,17 @@ a.learn-more-link.webconsole-learn-more-
   color: var(--theme-body-color);
 }
 .theme-dark .webconsole-output-wrapper .message.error .tree.object-inspector,
 .theme-dark .webconsole-output-wrapper .message.warn .tree.object-inspector {
   --console-output-indent-border-color: var(--theme-body-color);
 }
 
 .webconsole-output-wrapper .message-flex-body > .message-body {
-  display: inline-block;
-  max-width: 100%;
+  overflow-x: auto;
 }
 
 .webconsole-output-wrapper .message-body > * {
   flex-shrink: 0;
   vertical-align: top;
 }
 
 .message.startGroup .message-body > .objectBox-string,
@@ -949,16 +952,17 @@ body #output-container {
 }
 
 /*
  * Make console.group, exception and XHR message's arrow look the same as the arrow
  * used in the ObjectInspector (same background-image, width, transition).
  * Properties were copied from devtools/client/shared/components/reps/reps.css.
  */
 .webconsole-output-wrapper img.collapse-button.arrow {
+  flex: none;
   mask: url("chrome://devtools/skin/images/devtools-components/arrow.svg") no-repeat;
   mask-size: 100%;
   width: 9px;
   height: 9px;
   margin-block-start: 5px;
   margin-inline-start: 4px;
   margin-inline-end: 1px;
   transform: rotate(-90deg);