Bug 1136299 - Move the console input in-line with the logs;r=bgrins.
MozReview-Commit-ID: CvmhJrFqCM
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -275,116 +275,82 @@ html .jsterm-input-node-html,
html #webconsole-notificationbox {
flex: 0;
width: 100vw;
}
.jsterm-input-container {
background-color: var(--theme-tab-toolbar-background);
border-top: 1px solid var(--theme-splitter-color);
+ position: relative;
}
.jsterm-input-node {
- /* Always allow scrolling on input - it auto expands in js by setting height,
- but don't want it to get bigger than the window. 24px = toolbar height. */
- max-height: calc(90vh - 24px);
background-image: var(--theme-command-line-image);
background-repeat: no-repeat;
background-size: 16px 16px;
- background-position: 4px 50%;
+ background-position: 4px 4px;
color: var(--theme-content-color1);
box-sizing: border-box;
+ height: 100%;
}
.jsterm-complete-node {
color: var(--theme-comment);
}
.theme-light .jsterm-input-container {
/* For light theme use a white background for the input - it looks better
than off-white */
background-color: #fff;
border-top-color: #e0e0e0;
}
textarea.jsterm-input-node,
textarea.jsterm-complete-node {
width: 100%;
- border: 1px solid transparent;
margin: 0;
+ border: none;
background-color: transparent;
resize: none;
font-size: inherit;
line-height: 16px;
overflow-x: hidden;
- /* Set padding for console input on textarea to make sure it is included in
- scrollHeight that is used when resizing JSTerminal's input. */
padding: 4px 0;
padding-inline-start: 20px;
}
textarea.jsterm-complete-node {
position: absolute;
top: 0;
left: 0;
height: 100%;
pointer-events: none;
}
textarea.jsterm-input-node:focus {
background-image: var(--theme-command-line-image-focus);
box-shadow: none;
- border: 1px solid var(--blue-50);
- transition: border-color 0.2s ease-in-out;
outline: none;
}
-:root[platform="mac"] textarea.jsterm-input-node,
-:root[platform="mac"] textarea.jsterm-complete-node {
- border-radius: 0 0 4px 4px;
-}
-
-/* Unset the bottom right radius on the jsterm inputs when the sidebar is visible */
-:root[platform="mac"] .sidebar ~ .jsterm-input-container textarea.jsterm-input-node,
-:root[platform="mac"] .sidebar ~ .jsterm-input-container textarea.jsterm-complete-node {
- border-bottom-right-radius: 0;
-}
-
/* CodeMirror-powered JsTerm */
-.jsterm-cm .jsterm-input-container {
- /* Always allow scrolling on input - it auto expands in js by setting height,
- but don't want it to get bigger than the window. 24px = toolbar height. */
- max-height: calc(90vh - 24px);
-}
-
.jsterm-cm .jsterm-input-container > .CodeMirror {
- border: 1px solid transparent;
font-size: inherit;
line-height: 16px;
padding-inline-start: 20px;
/* input icon */
background-image: var(--theme-command-line-image);
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: 4px 4px;
}
.jsterm-cm .jsterm-input-container > .CodeMirror-focused {
background-image: var(--theme-command-line-image-focus);
- border: 1px solid var(--blue-50);
- transition: border-color 0.2s ease-in-out;
-}
-
-:root[platform="mac"] .jsterm-cm .jsterm-input-container > .CodeMirror {
- border-radius: 0 0 4px 4px;
-}
-
-/* Unset the bottom right radius on the jsterm inputs when the sidebar is visible */
-:root[platform="mac"] .jsterm-cm .sidebar ~ .jsterm-input-container > .CodeMirror {
- border-bottom-right-radius: 0;
}
.jsterm-cm .cm-auto-complete-shadow-text::after {
content: attr(title);
color: var(--theme-comment);
}
/* Security styles */
@@ -501,30 +467,16 @@ a.learn-more-link.webconsole-learn-more-
display: none;
}
}
#output-container {
height: 100%;
}
-.webconsole-output-wrapper {
- display: flex;
- flex-direction: column;
- height: 100%;
- -moz-user-focus: normal;
- color: var(--console-output-color);
- --console-output-indent-border-color: var(--theme-selection-background);
- --icon-top-margin: 3px;
- --object-inspector-hover-background: transparent;
- --attachment-margin-block-end: 3px;
- --primary-toolbar-height: 29px;
- --close-button-image: url(chrome://devtools/skin/images/close.svg);
-}
-
/* Webconsole specific theme variables */
.theme-light .webconsole-output-wrapper {
--error-color: var(--red-70);
--error-background-color: #FDF2F5;
--warning-color: var(--yellow-80);
--warning-background-color: #FFFBD5;
--console-output-color: var(--grey-90);
--repeat-bubble-background-color: var(--theme-highlight-blue);
@@ -666,20 +618,16 @@ a.learn-more-link.webconsole-learn-more-
font-style: italic;
-moz-user-select: none;
}
.webconsole-filterbar-filtered-messages .reset-filters-button {
margin-inline-start: 0.5em;
}
-.webconsole-output {
- overflow: auto;
-}
-
.webconsole-output-wrapper .message {
--border-size: 3px;
border-inline-start: var(--border-size) solid transparent;
}
.webconsole-output-wrapper .message:hover {
border-inline-start-color: var(--theme-highlight-blue);
}
@@ -940,22 +888,20 @@ a.learn-more-link.webconsole-learn-more-
}
.new-consoletable > [role=gridcell].even {
background-color: var(--table-zebra-background);
}
/* Layout */
.webconsole-output {
- flex: 1;
direction: ltr;
overflow: auto;
-moz-user-select: text;
position: relative;
- grid-row: 2 / 3;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
@@ -975,46 +921,76 @@ body #output-container {
overflow: hidden;
}
/*
* Here's what the layout of the console looks like:
*
* +------------------------------+--------------+
- * | FILTER BAR | |
- * +------------------------------+ |
- * | | |
- * | CONSOLE OUTPUT | SIDEBAR |
* | | |
- * +------------------------------+ |
- * | NOTIFICATION BOX | |
- * +------------------------------+ |
- * | JSTERM CONTAINER | |
+ * | WEBCONSOLE FLEX WRAPPER | SIDEBAR |
+ * | | |
* +------------------------------+--------------+
*/
.webconsole-output-wrapper {
+ -moz-user-focus: normal;
+ color: var(--console-output-color);
+ --console-output-indent-border-color: var(--theme-selection-background);
+ --icon-top-margin: 3px;
+ --object-inspector-hover-background: transparent;
+ --attachment-margin-block-end: 3px;
+ --primary-toolbar-height: 29px;
+ --close-button-image: url(chrome://devtools/skin/images/close.svg);
display: grid;
grid-template-columns: minmax(200px, 1fr) auto;
- grid-template-rows: auto 1fr auto auto;
- height: 100%;
- max-height: 100%;
+ max-height: 100vh !important;
+ height: 100vh !important;
width: 100vw;
+ overflow: hidden;
+}
+
+.webconsole-flex-wrapper {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ max-height: 100vh;
+ overflow: hidden;
}
+.webconsole-flex-wrapper .webconsole-filteringbar-wrapper {
+ flex-shrink: 0;
+}
+
+.webconsole-flex-wrapper .webconsole-output {
+ flex-shrink: 100000;
+}
+
+.webconsole-flex-wrapper > .webconsole-output:not(:empty) {
+ min-height: 19px;
+}
+
+
.webconsole-output-wrapper #webconsole-notificationbox {
- grid-column: 1 / 2;
- grid-row: 3 / 4;
+ flex-shrink: 0;
}
.webconsole-output-wrapper .jsterm-input-container {
- grid-column: 1 / 2;
- grid-row: -1 / -2;
- position: relative;
- z-index: 1;
+ min-height: 28px;
+ overflow: auto;
+ padding-top: 1px;
+}
+
+.webconsole-flex-wrapper > .webconsole-output:empty ~ .jsterm-input-container {
+ border-top: none;
+}
+
+/* Last item in the flex wrapper should take the whole remaining height */
+.webconsole-flex-wrapper > :last-child {
+ flex-grow: 1;
}
/* Object Inspector */
.webconsole-output-wrapper .object-inspector.tree {
display: inline-block;
}
.webconsole-output-wrapper .object-inspector.tree .tree-indent {
--- a/devtools/client/webconsole/components/App.js
+++ b/devtools/client/webconsole/components/App.js
@@ -138,40 +138,42 @@ class App extends Component {
// * NotificationBox - Notifications for JSTerm (self-xss warning at the moment)
// * JSTerm - Input command line.
return (
div({
className: classNames.join(" "),
ref: node => {
this.node = node;
}},
- FilterBar({
- hidePersistLogsCheckbox: hud.isBrowserConsole,
- serviceContainer: {
- attachRefToHud
- },
- closeSplitConsole
- }),
- ConsoleOutput({
- serviceContainer,
- onFirstMeaningfulPaint,
- }),
+ div({className: "webconsole-flex-wrapper"},
+ FilterBar({
+ hidePersistLogsCheckbox: hud.isBrowserConsole,
+ serviceContainer: {
+ attachRefToHud
+ },
+ closeSplitConsole
+ }),
+ ConsoleOutput({
+ serviceContainer,
+ onFirstMeaningfulPaint,
+ }),
+ NotificationBox({
+ id: "webconsole-notificationbox",
+ notifications,
+ }),
+ JSTerm({
+ hud,
+ serviceContainer,
+ onPaste: this.onPaste,
+ codeMirrorEnabled: jstermCodeMirror,
+ }),
+ ),
SideBar({
serviceContainer,
}),
- NotificationBox({
- id: "webconsole-notificationbox",
- notifications,
- }),
- JSTerm({
- hud,
- serviceContainer,
- onPaste: this.onPaste,
- codeMirrorEnabled: jstermCodeMirror,
- }),
)
);
}
}
const mapStateToProps = state => ({
notifications: getAllNotifications(state),
});