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
--- 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;
}