mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-01 22:55:23 +00:00
fa6cf14cb1
The autocomplete popup defines its width by finding the longest label to display and then applying a "width:Xch" to its content, where X is the length of the longest label + 3. In order to support this, the HTMLTooltip setContent() methods allows to use width: "auto" (which also becomes the default value). In this case, the HTMLTooltip show() method will automatically compute the preferred width for the tooltip. It will first calculate the tooltip height, then measure the width of the tooltip for this computed height and use it as the preferred width. MozReview-Commit-ID: KDxZNB3KDdR --HG-- extra : rebase_source : 8ceedd73434551050f8d63cbf03d66870e275b03
377 lines
7.1 KiB
CSS
377 lines
7.1 KiB
CSS
/* vim:set ts=2 sw=2 sts=2 et: */
|
|
/* 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/. */
|
|
|
|
|
|
/* Tooltip widget (see devtools/client/shared/widgets/Tooltip.js) */
|
|
|
|
.devtools-tooltip .panel-arrowcontent {
|
|
padding: 4px;
|
|
}
|
|
|
|
.devtools-tooltip .panel-arrowcontainer {
|
|
/* Reseting the transition used when panels are shown */
|
|
transition: none;
|
|
/* Panels slide up/down/left/right when they appear using a transform.
|
|
Since we want to remove the transition, we don't need to transform anymore
|
|
plus it can interfeer by causing mouseleave events on the underlying nodes */
|
|
transform: none;
|
|
}
|
|
|
|
.devtools-tooltip[clamped-dimensions] {
|
|
min-height: 100px;
|
|
max-height: 400px;
|
|
min-width: 100px;
|
|
max-width: 400px;
|
|
}
|
|
.devtools-tooltip[clamped-dimensions-no-min-height] {
|
|
min-height: 0;
|
|
max-height: 400px;
|
|
min-width: 100px;
|
|
max-width: 400px;
|
|
}
|
|
.devtools-tooltip[clamped-dimensions-no-max-or-min-height] {
|
|
min-width: 400px;
|
|
max-width: 400px;
|
|
}
|
|
.devtools-tooltip[clamped-dimensions] .panel-arrowcontent,
|
|
.devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent,
|
|
.devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent {
|
|
overflow: hidden;
|
|
}
|
|
.devtools-tooltip[wide] {
|
|
max-width: 600px;
|
|
}
|
|
|
|
/* Tooltip: Simple Text */
|
|
|
|
.devtools-tooltip-simple-text {
|
|
max-width: 400px;
|
|
margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
|
|
padding: 8px 12px;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.devtools-tooltip-simple-text:first-child {
|
|
margin-top: -4px;
|
|
}
|
|
|
|
.devtools-tooltip-simple-text:last-child {
|
|
margin-bottom: -4px;
|
|
}
|
|
|
|
/* Tooltip: Alert Icon */
|
|
|
|
.devtools-tooltip-alert-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin: 6px;
|
|
margin-inline-end: 20px;
|
|
}
|
|
|
|
.devtools-tooltip-alert-icon {
|
|
list-style-image: url("chrome://global/skin/icons/warning-32.png");
|
|
}
|
|
|
|
/* Tooltip: Variables View */
|
|
|
|
.devtools-tooltip-variables-view-box {
|
|
margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
|
|
}
|
|
|
|
.devtools-tooltip-variables-view-box .variable-or-property > .title {
|
|
padding-inline-end: 6px;
|
|
}
|
|
|
|
/* Tooltip: Tiles */
|
|
|
|
.devtools-tooltip-tiles {
|
|
background-color: #eee;
|
|
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
|
|
linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
|
|
background-size: 20px 20px;
|
|
background-position: 0 0, 10px 10px;
|
|
}
|
|
|
|
.devtools-tooltip-iframe {
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.tooltip-container {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 9999;
|
|
display: none;
|
|
background: transparent;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tooltip-top {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tooltip-bottom {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.tooltip-panel{
|
|
background-color: var(--theme-tooltip-background);
|
|
pointer-events: all;
|
|
}
|
|
|
|
.tooltip-visible {
|
|
display: flex;
|
|
}
|
|
|
|
.tooltip-hidden {
|
|
display: flex;
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* Tooltip : arrow style */
|
|
|
|
.tooltip-container[type="arrow"] {
|
|
filter: drop-shadow(0 3px 4px var(--theme-tooltip-shadow));
|
|
}
|
|
|
|
.tooltip-container[type="arrow"] > .tooltip-panel {
|
|
position: relative;
|
|
flex-grow: 0;
|
|
min-height: 10px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
|
|
border: 3px solid var(--theme-tooltip-border);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.tooltip-top[type="arrow"] .tooltip-panel {
|
|
top: 0;
|
|
}
|
|
|
|
.tooltip-bottom[type="arrow"] .tooltip-panel {
|
|
bottom: 0;
|
|
}
|
|
|
|
.tooltip-arrow {
|
|
position: relative;
|
|
height: 16px;
|
|
width: 32px;
|
|
overflow: hidden;
|
|
pointer-events: all;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tooltip-arrow:-moz-locale-dir(rtl) {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.tooltip-filler {
|
|
flex: 1;
|
|
}
|
|
|
|
.tooltip-top .tooltip-arrow {
|
|
margin-top: -3px;
|
|
}
|
|
|
|
.tooltip-bottom .tooltip-arrow {
|
|
margin-bottom: -3px;
|
|
}
|
|
|
|
.tooltip-arrow:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 21px;
|
|
height: 21px;
|
|
margin-left: 4px;
|
|
background: linear-gradient(-45deg,
|
|
var(--theme-tooltip-background) 50%, transparent 50%);
|
|
border-color: var(--theme-tooltip-border);
|
|
border-style: solid;
|
|
border-width: 0px 3px 3px 0px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.tooltip-bottom .tooltip-arrow:before {
|
|
margin-top: 4px;
|
|
transform: rotate(225deg);
|
|
}
|
|
|
|
.tooltip-top .tooltip-arrow:before {
|
|
margin-top: -12px;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/* Tooltip: Events */
|
|
|
|
.event-header {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.event-header:first-child {
|
|
border-width: 0;
|
|
}
|
|
|
|
.event-header:not(:first-child) {
|
|
border-width: 1px 0 0 0;
|
|
}
|
|
|
|
.devtools-tooltip-events-container {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.event-tooltip-event-type,
|
|
.event-tooltip-filename,
|
|
.event-tooltip-attributes {
|
|
margin-inline-start: 0;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.event-tooltip-event-type {
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.event-tooltip-filename {
|
|
margin: 0 5px;
|
|
font-size: 100%;
|
|
flex-shrink: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
/* Force ellipsis to be displayed on the left */
|
|
direction: rtl;
|
|
}
|
|
|
|
.event-tooltip-debugger-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-inline-end: 4px;
|
|
opacity: 0.6;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.event-tooltip-debugger-icon:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.event-tooltip-content-box {
|
|
display: none;
|
|
height: 54px;
|
|
overflow: hidden;
|
|
margin-inline-end: 0;
|
|
border: 1px solid var(--theme-splitter-color);
|
|
border-width: 1px 0 0 0;
|
|
}
|
|
|
|
.event-toolbox-content-box iframe {
|
|
height: 100%;
|
|
border-style: none;
|
|
}
|
|
|
|
.event-tooltip-content-box[open] {
|
|
display: block;
|
|
}
|
|
|
|
.event-tooltip-source-container {
|
|
margin-top: 5px;
|
|
margin-bottom: 10px;
|
|
margin-inline-start: 5px;
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
.event-tooltip-source {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.event-tooltip-attributes-container {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
flex-grow: 1;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.event-tooltip-attributes-box {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
height: 14px;
|
|
border-radius: 3px;
|
|
padding: 2px;
|
|
margin-inline-start: 5px;
|
|
background-color: var(--theme-body-color-alt);
|
|
color: var(--theme-toolbar-background);
|
|
}
|
|
|
|
.event-tooltip-attributes {
|
|
margin: 0;
|
|
font-size: 9px;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
/*
|
|
* Tooltip: JS stack traces
|
|
*/
|
|
|
|
.stack-trace-tooltip {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.stack-trace-tooltip > .stack-frame {
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.stack-trace-tooltip > .stack-frame:first-child {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.stack-trace-tooltip > .stack-frame:last-child {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stack-frame-call {
|
|
color: var(--theme-body-color-alt);
|
|
cursor: pointer;
|
|
display: flex;
|
|
}
|
|
|
|
.stack-frame-call:hover {
|
|
background-color: var(--theme-selection-background-semitransparent);
|
|
}
|
|
|
|
.stack-frame-async {
|
|
color: var(--theme-body-color-inactive);
|
|
}
|
|
|
|
.stack-frame-function-name {
|
|
color: var(--theme-highlight-blue);
|
|
max-width: 50%;
|
|
margin-inline-end: 1em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.stack-frame-source-name {
|
|
flex: 1 1;
|
|
direction: rtl;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.stack-frame-line {
|
|
color: var(--theme-highlight-orange);
|
|
}
|