Bug 1622820 - Fix evaluation context selector button UI. r=jlast.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Mon, 23 Mar 2020 15:36:30 +0000
changeset 520107 fb47d464184570c8597ccaf738cdc857cbac4f0c
parent 520106 57e207a0b9e5a3f69c30b0154fc1d66db645fdc9
child 520108 f40f22f7220a6f5dd8fa4151992e93b1233db82e
push id110873
push usernchevobbe@mozilla.com
push dateMon, 23 Mar 2020 15:47:01 +0000
treeherderautoland@fb47d4641845 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjlast
bugs1622820
milestone76.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 1622820 - Fix evaluation context selector button UI. r=jlast. The button was stretching vertically as the console input grew, which looked weird. This is fixed by aligning the item of the container differently and adjusting padding and margins in order to properly aligh the context selector and the editor switch button. We take this as an opportunity to set a max width on the button, since it could be quite large if the context name is long. Differential Revision: https://phabricator.services.mozilla.com/D67860
devtools/client/webconsole/components/App.css
devtools/client/webconsole/components/Input/EvaluationContextSelector.css
--- a/devtools/client/webconsole/components/App.css
+++ b/devtools/client/webconsole/components/App.css
@@ -172,16 +172,17 @@ body {
   height: var(--console-row-height);
   margin: 0;
   padding-block: 0;
 }
 
 .webconsole-input-buttons {
   grid-column: -1 / -2;
   display: flex;
+  align-items: flex-start;
 }
 
 :root:dir(rtl) .webconsole-input-openEditorButton {
   transform: scaleX(-1);
 }
 
 .webconsole-input-openEditorButton::before {
   background-image: url("chrome://devtools/skin/images/webconsole/editor.svg");
--- a/devtools/client/webconsole/components/Input/EvaluationContextSelector.css
+++ b/devtools/client/webconsole/components/Input/EvaluationContextSelector.css
@@ -1,20 +1,23 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .webconsole-evaluation-selector-button {
-  padding-inline: 8px 16px !important;
+  padding: 1px 16px 1px 8px !important;
+  margin-top: 2px;
   background-position-x: calc(100% - 4px) !important;
+  max-width: 150px;
 }
 
 .jsterm-editor .webconsole-editor-toolbar .webconsole-evaluation-selector-button {
   height: 20px;
   margin-inline-start: 5px;
+  margin-top: 1px;
 }
 
 .webconsole-evaluation-selector-button-non-top.devtools-dropdown-button {
   background-color: var(--blue-60);
   color: white;
   fill: currentColor;
 }