Bug 1335869 - Add triangular callout to GCLI tooltip r?nchevobbe
Changes:
- Callout now changed to a triangle.
- Finally found a way to make the GCLI window 80% of viewport width (80vw).
- overflow-x is now hidden as the output width should be plenty wide enough to display any text.
The implementation is much prettier and works far better than it previously did. It is still not perfect e.g. when the output is scrollable we lose the triangular callout. I believe this was intentional in an effort to fit as much text in the output box as possible.
MozReview-Commit-ID: 3xEl9nmU47Z
--- a/devtools/client/themes/commandline-browser.css
+++ b/devtools/client/themes/commandline-browser.css
@@ -117,17 +117,23 @@ html|*#gcli-output-frame {
border-width: 0;
background-color: transparent;
}
#gcli-output,
#gcli-tooltip {
border-width: 0;
background-color: transparent;
- -moz-appearance: none; appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+
+ /* We always wanted this to be a percentage of the viewport size but width: x% does not
+ * work. vw is the obvious solution.
+ */
+ width: 80vw;
}
.gclitoolbar-input-node,
.gclitoolbar-complete-node {
margin: 0;
-moz-box-align: center;
padding-top: 0;
padding-bottom: 0;
--- a/devtools/client/themes/commandline.css
+++ b/devtools/client/themes/commandline.css
@@ -1,12 +1,15 @@
/* 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/. */
+:root {
+ overflow-x: hidden;
+}
/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
We are copy/pasting variables from light-theme and dark-theme,
since they aren't loaded in this context (within commandlineoutput.xhtml
and commandlinetooltip.xhtml). */
:root[devtoolstheme="light"] {
--gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */
--gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */
@@ -38,26 +41,28 @@
padding: 5px 10px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: 0;
}
#gcli-tooltip-root {
padding: 5px 0px;
+ overflow-x: hidden;
}
#gcli-tooltip-connector {
margin-top: -1px;
margin-left: 8px;
- width: 20px;
- height: 10px;
- border-left: 1px solid var(--gcli-border-color);
- border-right: 1px solid var(--gcli-border-color);
- background-color: var(--gcli-background-color);
+ width: 0;
+ height: 0;
+ border-left: 10px solid transparent;
+ border-right: 10px solid transparent;
+ background-color: transparent;
+ border-top: 10px solid var(--gcli-background-color);
}
.gcli-tt-description,
.gcli-tt-error {
padding: 0 10px;
}
.gcli-row-out {