Bug 1444302 - Part 2. Make the filtered message element of the split console to be displayed in a new line when devtool width is narrow. r=nchevobbe
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Fri, 18 May 2018 16:18:15 +0900
changeset 419062 2af84ea1c49dbf09d9f4349ff7899f98e53eeb4e
parent 419061 b7ebe102efa20de8b384aa603c8df1a9cdb61429
child 419063 440073e5e466ea0662537569b6b1539b089b35fe
push id34025
push userapavel@mozilla.com
push dateMon, 21 May 2018 09:46:09 +0000
treeherdermozilla-central@8850728602d6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1444302
milestone62.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 1444302 - Part 2. Make the filtered message element of the split console to be displayed in a new line when devtool width is narrow. r=nchevobbe Previous part 1 patch will display close button on the right of a primary element of filter bar. However, a filtered message element will display in the right of a close button. So this patch will make the filtered message element to be displayed in a new line if devtools width is narrow. This patch uses "media query" as the trigger of replacement, this media query width size is based on Greek language string since a localized string of this filtered message is longer than other localized strings. MozReview-Commit-ID: Ledhrw5I4S5
devtools/client/themes/webconsole.css
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -524,18 +524,19 @@ a.learn-more-link.webconsole-learn-more-
   | Clear button - Open filter bar button - Filter Input                             | Close button |
   ---------------------------------------------------------------------------------------------------
   |                                               X items hidden by filters  - Reset Filters button |
   ---------------------------------------------------------------------------------------------------
   | Error - Warning - Log - Info - Debug - CSS - Network - XHR                                      |
   ---------------------------------------------------------------------------------------------------
 */
 .webconsole-filteringbar-wrapper {
-  display: flex;
+  display: grid;
   grid-row: 1 / 2;
+  grid-template-columns: 1fr auto auto;
   /* Wrap so the "Hidden messages" bar can go to its own row if needed */
   flex-wrap: wrap;
   --primary-toolbar-height: 29px;
 }
 
 .webconsole-filterbar-primary {
   display: flex;
   /* We want the toolbar (which contain the text search input) to fit
@@ -545,20 +546,24 @@ a.learn-more-link.webconsole-learn-more-
   min-height: var(--primary-toolbar-height);
 }
 
 .devtools-toolbar.webconsole-filterbar-secondary {
   display: flex;
   width: 100%;
   align-items: center;
   -moz-user-select: none;
+  grid-column: 1 / -1;
 }
 
 .split-console-close-button-wrapper {
-    min-height: var(--primary-toolbar-height);
+  min-height: var(--primary-toolbar-height);
+  /* We will need to display the close button in the right-top always. */
+  grid-column: -1 / -2;
+  grid-row: 1 / 2;
 }
 
 .webconsole-filterbar-primary .devtools-plaininput {
   flex: 1 1 100%;
   align-self: stretch;
   margin-left: 1px;
   padding-inline-start: 4px;
   border: 1px solid transparent;
@@ -588,16 +593,27 @@ a.learn-more-link.webconsole-learn-more-
   justify-content: flex-end;
   color: var(--theme-comment);
   text-align: end;
   align-items: center;
   min-height: var(--primary-toolbar-height);
   line-height: var(--primary-toolbar-height);
 }
 
+@media (max-width: 965px) {
+  /* This media query will make filtered message element to be displayed in new
+    line. This width is based on greek localized size since it will longer than
+    other localized strings. */
+  .webconsole-filterbar-filtered-messages {
+    grid-row: 2 / 3;
+    grid-column: 1 / -1;
+    justify-self: stretch;
+  }
+}
+
 .webconsole-filterbar-filtered-messages .filter-message-text {
   font-style: italic;
   -moz-user-select: none;
 }
 
 .webconsole-filterbar-filtered-messages .reset-filters-button {
   margin-inline-start: 0.5em;
 }