diff options
Diffstat (limited to 'devtools/client/themes/tooltips.css')
| -rw-r--r-- | devtools/client/themes/tooltips.css | 930 |
1 files changed, 930 insertions, 0 deletions
diff --git a/devtools/client/themes/tooltips.css b/devtools/client/themes/tooltips.css new file mode 100644 index 0000000000..5bddcf6a11 --- /dev/null +++ b/devtools/client/themes/tooltips.css @@ -0,0 +1,930 @@ +/* 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/. */ + +/* Import stylesheets for specific tooltip widgets */ +@import url(chrome://devtools/skin/accessibility-color-contrast.css); +@import url(chrome://devtools/skin/badge.css); +@import url(chrome://devtools/content/shared/widgets/cubic-bezier.css); +@import url(chrome://devtools/content/shared/widgets/filter-widget.css); +@import url(chrome://devtools/content/shared/widgets/linear-widget.css); +@import url(chrome://devtools/content/shared/widgets/spectrum.css); +@import url(chrome://devtools/skin/variables.css); +/* + * compatibility.css is primarily used by the Compatibility panel, so import it in a layer + * to give it a lower importance than the rule here and mitigate styling mismatch. + */ +@import url(chrome://devtools/skin/compatibility.css) layer(shared); + +/* Tooltip specific theme variables */ +.theme-dark { + --bezier-diagonal-color: #eee; + --bezier-grid-color: rgba(255, 255, 255, 0.1); + + /* Tooltips */ + --theme-tooltip-color: var(--theme-text-color-strong); + --theme-tooltip-background: var(--theme-popup-background); + --theme-tooltip-shadow-color: rgba(25, 25, 25, 0.76); + + /* Doorhangers */ + /* These colors are based on the colors used for doorhangers elsewhere in + * Firefox. */ + --theme-arrowpanel-background: var(--theme-popup-background); + --theme-arrowpanel-color: var(--theme-popup-color); + --theme-arrowpanel-border-color: var(--theme-popup-border-color); + --theme-arrowpanel-separator: rgba(249,249,250,.1); + --theme-arrowpanel-dimmed: var(--theme-popup-dimmed); + --theme-arrowpanel-dimmed-further: rgba(249,249,250,.15); + --theme-arrowpanel-disabled-color: rgba(249,249,250,.5); +} + +.theme-light { + --bezier-diagonal-color: rgba(0, 0, 0, 0.2); + --bezier-grid-color: rgba(0, 0, 0, 0.05); + + /* Tooltips */ + --theme-tooltip-color: var(--theme-body-color); + --theme-tooltip-background: rgb(255, 255, 255); + --theme-tooltip-shadow-color: var(--grey-90-a10); + + /* Doorhangers */ + /* These colors are based on the colors used for doorhangers elsewhere in + * Firefox. */ + --theme-arrowpanel-background: var(--theme-popup-background); + --theme-arrowpanel-color: var(--theme-popup-color); + --theme-arrowpanel-border-color: var(--theme-popup-border-color); + --theme-arrowpanel-separator: ThreeDShadow; + --theme-arrowpanel-dimmed: var(--theme-popup-dimmed); + --theme-arrowpanel-dimmed-further: hsla(0,0%,80%,.45); + --theme-arrowpanel-disabled-color: GrayText; +} + +:root { + --theme-arrowpanel-border-radius: 3.5px; +} + +:root[platform="mac"].theme-light { + --theme-arrowpanel-separator: hsla(210,4%,10%,.14); +} + +/* + There's a specific color-scheme defined for panels in https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/toolkit/themes/shared/popup.css#9-13 + This could create issues when the Firefox theme is at odd with the DevTools one (e.g. + if Firefox uses a dark theme but the user has a DevTools light theme. + Unset the color-scheme on those element so it uses the one we set on :root in common.css, + which matches our light/dark theme. +*/ +menupopup, panel { + color-scheme: unset +} + +strong { + font-weight: bold; +} + +/* Tooltip: CSS variables tooltip */ + +.devtools-tooltip-css-variable { + color: var(--theme-body-color); + padding: 2px 8px; + direction: ltr; + /* Try to show the content of the tooltip on a single line */ + inline-size: max-content; + word-break: break-word; + max-inline-size: 100vw; +} + + +/* Tooltip: Compatibility tooltip */ + +.devtools-tooltip-css-compatibility { + color: var(--theme-body-color); + padding: 2px; + direction: ltr; +} + +/* Tooltip: JS Evaluation Context */ + +#webconsole-input-evaluationsButton > .tooltip-panel { + /* helps the JS Context selector to have scrollbars when content exceed the vertical size of the popup */ + overflow-y: auto; +} + + +/* Tooltip: Inactive CSS tooltip */ + +.devtools-tooltip-inactive-css, +.devtools-tooltip-css-compatibility { + color: var(--theme-arrowpanel-color); + margin: 0; + padding: 10px 14px 12px 14px; + font-size: 12px; +} + +.devtools-tooltip-inactive-css, +.devtools-tooltip-css-compatibility, +.devtools-tooltip-inactive-css strong, +.devtools-tooltip-css-compatibility strong { + user-select: text; + -moz-user-focus: normal; +} + +.devtools-tooltip-inactive-css p, +.devtools-tooltip-css-compatibility p { + margin-block-start: 0; + margin-block-end: calc(1em - 4px); +} + +.devtools-tooltip-inactive-css p:last-child, +.devtools-tooltip-css-compatibility p:last-child { + margin-block-end: 0; +} + +.devtools-tooltip-inactive-css .link, +.devtools-tooltip-css-compatibility .link { + color: var(--theme-link-color); + cursor: pointer; +} + +/* Tooltip: Compatibility tooltip */ + +.tooltip-container[type="doorhanger"] .tooltip-panel ul.compatibility-unsupported-browser-list { + width: 100%; + padding: 0; + display: flex; + justify-content: start; +} + +/* Tooltip: query container info */ +.devtools-tooltip-query-container { + color: var(--theme-arrowpanel-color); + margin: 0; + padding: 10px 14px 12px; + font-size: 12px; + user-select: text; + -moz-user-focus: normal; +} + +.devtools-tooltip-query-container header { + --block-end-space: 5px; + border-block-end: 1px solid var(--theme-arrowpanel-dimmed); + padding-block-end: var(--block-end-space); + margin-block-end: var(--block-end-space); + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + color: var(--theme-body-color); +} + +.devtools-tooltip-query-container ul { + padding: 0; + margin: 0; + list-style: none; +} + +.devtools-tooltip-query-container .objectBox-node .tag-name { + color: var(--theme-highlight-blue); +} + +.devtools-tooltip-query-container .objectBox-node .attribute-name { + color: var(--theme-highlight-red); +} + +.devtools-tooltip-query-container .property-name { + color: var(--theme-highlight-blue); +} + +.devtools-tooltip-query-container .property-value { + color: var(--theme-highlight-red); +} + + +/* 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; +} + +.tooltip-container { + display: none; + position: fixed; + z-index: 9999; + background: transparent; + pointer-events: none; + overflow: clip; + filter: drop-shadow(0 2px 8px var(--theme-tooltip-shadow-color)); +} + +.tooltip-xul-wrapper { + /* All these are drawn by the tooltip-container, effectively */ + appearance: none; + background: transparent; + border: none; + padding: 0; + -moz-window-shadow: none; + --panel-border-radius: 0px; + --panel-padding: 0px; + --panel-background: transparent; + --panel-border-color: transparent; + --panel-shadow: none; + + /* This is enough room for the shadow of the tooltip-container */ + --panel-shadow-margin: 10px; + + &::part(content) { + border: none; + /* Avoid clipping the drop-shadow */ + overflow: visible; + } + + &.non-interactive-toggle { + /* We need to make toggled-on-hover panels transparent to events, otherwise + * hovering over the panel shadow would toggle the panel. */ + pointer-events: none; + } + + /* The panel is absolutely positioned itself. */ + > .tooltip-container { + position: relative; + } +} + +.tooltip-top { + flex-direction: column; +} + +.tooltip-bottom { + flex-direction: column-reverse; +} + +.tooltip-panel { + background-color: var(--theme-tooltip-background); + pointer-events: all; + flex-grow: 1; +} + +.tooltip-visible { + display: flex; +} + +.tooltip-hidden { + display: flex; + visibility: hidden; +} + +/* Tooltip : flexible height styles */ + +.tooltip-flexible-height .tooltip-panel { + /* In flexible mode the tooltip panel should only grow according to its content. */ + flex-grow: 0; +} + +.tooltip-flexible-height .tooltip-filler { + /* In flexible mode the filler should grow as much as possible. */ + flex-grow: 1; +} + +/* Tooltip : arrow style */ + +.tooltip-container[type="arrow"] > .tooltip-panel { + position: relative; + min-height: 10px; + box-sizing: border-box; + width: 100%; + border-radius: var(--theme-arrowpanel-border-radius); +} + +.tooltip-top[type="arrow"] .tooltip-panel { + top: 0; +} + +.tooltip-bottom[type="arrow"] .tooltip-panel { + bottom: 0; +} + +.tooltip-arrow { + position: relative; + box-sizing: border-box; + height: 16px; + width: 32px; + overflow: hidden; + flex-shrink: 0; +} + +/* In RTL locales and context, only use RTL on the tooltip content, keep LTR for positioning */ +.tooltip-container:-moz-locale-dir(rtl), +.tooltip-container:dir(rtl) { + direction: ltr; +} + +.tooltip-panel:-moz-locale-dir(rtl), +.tooltip-panel:dir(rtl) { + direction: rtl; +} + +.tooltip-top .tooltip-arrow { + /** + * The -1px margin is there to make sure the middle of the arrow overlaps with + * the border of the tooltip container. + * The -2px is there because the rotated arrow is not visually as tall as its + * container. Since the positioning logic relies on measuring the size of the + * tooltip, this -2px ensures the measured size matches the visuals (and not + * simply the box model). + */ + margin-bottom: -2px; + margin-top: -1px; +} + +.tooltip-bottom .tooltip-arrow { + /* See comment in .tooltip-top .tooltip-arrow (inverted here) */ + margin-bottom: -1px; + margin-top: -2px; +} + +.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: 0 none; + pointer-events: all; + box-sizing: border-box; +} + +.tooltip-bottom .tooltip-arrow::before { + margin-top: 5px; + transform: rotate(225deg); +} + +.tooltip-top .tooltip-arrow::before { + margin-top: -12px; + transform: rotate(45deg); +} + +/* XUL panels have a default border, but pure HTML tooltips don't have one. */ +.tooltip-container[type="arrow"] > .tooltip-panel, +.tooltip-container[type="arrow"] > .tooltip-arrow::before { + border: 1px solid var(--theme-arrowpanel-border-color); +} + +/* Tooltip : doorhanger style */ + +.tooltip-container[type="doorhanger"] { + > .tooltip-panel { + color: var(--theme-arrowpanel-color); + margin: 0; + padding: 0; + max-width: 320px; + } + + > .tooltip-panel, + > .tooltip-arrow::before { + background: var(--theme-arrowpanel-background); + border: 1px solid var(--theme-arrowpanel-border-color); + border-radius: var(--theme-arrowpanel-border-radius); + box-shadow: 0 0 4px hsla(210,4%,10%,.2); + } + + > .tooltip-arrow { + /* Desired width of the arrow */ + --arrow-width: 20px; + + /* Amount of room to allow for the shadow. Should be about half the radius. */ + --shadow-radius: 4px; + --shadow-margin: calc(var(--shadow-radius) / 2); + + /* + * Crop the arrow region to show half the arrow plus allow room for margins. + * + * The ARROW_WIDTH in HTMLTooltip.js needs to match the following value. + */ + width: calc(var(--arrow-width) + 2 * var(--shadow-margin)); + height: calc(var(--arrow-width) / 2 + var(--shadow-margin)); + + /** + * The rotated box slightly overlaps the left edge of the arrow container. + * This means the arrow is not centered in its own box by default. + */ + padding-left: 1px; + + &::before { + /* Don't inherit any rounded corners. */ + border-radius: 0; + + /* + * When the box is rotated, it should have width <arrow-width>. + * That makes the length of one side of the box equal to: + * + * (<arrow-width> / 2) / sin 45 + */ + --sin-45: 0.707106781; + --square-side: calc(var(--arrow-width) / 2 / var(--sin-45)); + width: var(--square-side); + height: var(--square-side); + + /* + * The rotated square will overshoot the left side + * and need to be shifted in by: + * + * (<arrow-width> - square side) / 2 + * + * But we also want to shift it in so that the box-shadow + * is not clipped when we clip the parent so we add + * a suitable margin for that. + */ + --overhang: calc((var(--arrow-width) - var(--square-side)) / 2); + margin-left: calc(var(--overhang) + var(--shadow-margin)); + } + } + + &.tooltip-top > .tooltip-arrow { + /* Overlap the arrow with the 1px border of the doorhanger */ + margin-top: -1px; + + &::before { + /* Show only the bottom half of the box */ + margin-top: calc(var(--square-side) / -2); + } + } + + &.tooltip-bottom > .tooltip-arrow { + /* Overlap the arrow with the 1px border of the doorhanger */ + margin-bottom: -1px; + + &::before { + /* Shift the rotated box in so that it is not clipped */ + margin-top: calc(var(--overhang) + var(--shadow-margin)); + } + } + + .menu-standard-padding { + margin: 0; + padding: 6px 0; + } + + .tooltip-panel ul { + /* Override the display: flex declaration in xul.css + * or else menu items won't stack. */ + display: block; + list-style: none; + } + + .tooltip-panel li { + list-style: none; + } + + .menuitem > .command { + display: flex; + align-items: baseline; + margin: 0; + padding: 4px 12px; + /* + * It doesn't really make sense, since if this is just about making the items + * easier to click we should be using min-width instead. + */ + margin-inline-end: 15px; + + &:focus-visible { + --theme-outline-offset: -2px; + } + + &:not([disabled],[open],:active):hover { + background-color: var(--theme-arrowpanel-dimmed); + } + + &:not([disabled]):is([open],:hover:active) { + background-color: var(--theme-arrowpanel-dimmed-further); + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; + } + + &[disabled] { + opacity: 0.5; + } + + &[aria-checked="true"] { + list-style-image: none; + -moz-context-properties: fill; + fill: currentColor; + background: url(chrome://devtools/skin/images/check.svg) no-repeat transparent; + background-position: 7px center; + + &:dir(rtl), + &:-moz-locale-dir(rtl) { + background-position-x: right 7px; + } + } + + > .label { + flex: 1; + font: menu; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + > .accelerator { + margin-inline-start: 10px; + color: var(--theme-arrowpanel-disabled-color); + font: message-box; + } + } + + .menuitem > button.command:is([role="menuitem"],[role="menuitemcheckbox"],[role="link"]) { + appearance: none; + border: none; + color: var(--theme-arrowpanel-color); + background-color: transparent; + text-align: start; + width: 100%; + } + + .checkbox-container .menuitem > .command > .label { + padding-inline-start: 16px; + } + + hr { + display: block; + border: none; + border-top: 1px solid var(--theme-arrowpanel-separator); + margin: 6px 0; + padding: 0; + } + + [role="menuseparator"] { + border: none; + border-bottom: 1px solid #cacdd3; + width: 100%; + height: 2px; + display: block; + background: none; + pointer-events: none; + } +} + +.menu-button--iconic::before, +.tooltip-container[type="doorhanger"] .menuitem > .command.iconic > .label::before { + content: " "; + display: inline-block; + margin-inline-end: 8px; + width: 16px; + height: 16px; + /* Better optical alignment than with 'vertical-align: middle'. + Works well with font sizes between 12px and 16px. */ + vertical-align: -3px; + -moz-context-properties: fill; + fill: currentColor; + background-image: var(--menuitem-icon-image); + background-size: contain; + background-repeat: no-repeat; + /* + * The icons in the sidebar menu have opacity: 0.8 here, but those in the + * hamburger menu don't. For now we match the hamburger menu styling, + * especially because the 80% opacity makes the icons look dull in dark mode. + */ +} + +/* Tooltip: Events */ + +.devtools-tooltip-events-container { + border-radius: var(--theme-arrowpanel-border-radius); + height: 100%; + overflow-y: auto; + margin: 0; + padding: 0; +} + +@media (-moz-overlay-scrollbars) { + .devtools-tooltip-events-container { + padding-inline: calc(env(scrollbar-inline-size) / 2); + } +} + +.devtools-tooltip-events-container .event-header { + display: flex; + align-items: center; + box-sizing: content-box; + height: 24px; + padding: 0 4px; + cursor: pointer; + overflow: hidden; + color: var(--theme-tooltip-color); + background-color: var(--theme-tooltip-background); +} + +.devtools-tooltip-events-container > li + li .event-header { + border-top: 1px solid var(--theme-splitter-color); +} + +.event-header .theme-twisty { + flex: none; + width: 12px; + height: 12px; + margin-inline-end: 4px; + fill: currentColor; + border: none; + background-color: transparent; +} + +.event-header .theme-twisty[aria-expanded="true"] { + transform: none; +} + +.event-tooltip-listener-toggle-checkbox { + flex-shrink: 0; +} + +.event-tooltip-debugger-icon { + -moz-context-properties: stroke; + stroke: var(--theme-icon-color); + background-image: url("chrome://devtools/content/shared/components/reps/images/jump-definition.svg"); + background-repeat: no-repeat; + background-position: center; + background-color: transparent; + border: none; + width: 20px; + height: 20px; + border-radius: 2px; + margin-inline-end: 4px; + flex-shrink: 0; + cursor: pointer; +} + +.event-tooltip-debugger-icon:hover { + background-color: var(--toolbarbutton-hover-background); +} + +.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: 12px; + line-height: 16px; +} + +.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-content-box { + display: none; + height: 100px; + 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: 1px 3px; + margin-inline-start: 4px; + background-color: var(--theme-text-color-alt); + color: var(--theme-body-background); +} + +.event-tooltip-attributes { + margin: 0; + font-size: 9px; + line-height: 14px; +} + +.event-tooltip-editor-frame { + border-style: none; + height: 100%; + width: 100%; +} + +/* Tooltip: HTML Search */ + +#searchbox-panel-listbox { + width: 250px; + max-width: 250px; + overflow-x: hidden; +} + +#searchbox-panel-listbox .autocomplete-item, +#searchbox-panel-listbox .autocomplete-item[selected] { + overflow-x: hidden; +} + +/* Tooltip: Image tooltip */ + +/* + * Overview of the Image Tooltip layout. + * + * ┌─────────────────────────────────────────┐ + * │ .devtools-tooltip-image-container │ + * │ ┌─────────────────────────────────────┐ │ + * │ │ .devtools-tooltip-image-wrapper │ │ + * │ │ ┌─────────────────────────────────┐ │ │ + * │ │ │ .devtools-tooltip-image │ │ │ + * │ │ │ (the actual image tag) │ │ │ + * │ │ └─────────────────────────────────┘ │ │ + * │ └─────────────────────────────────────┘ │ + * │ ┌─────────────────────────────────────┐ │ + * │ │ .devtools-tooltip-image-dimensions │ │ + * │ └─────────────────────────────────────┘ │ + * └─────────────────────────────────────────┘ + * + */ + +.devtools-tooltip-image-container { + /* Saved as variables to be synchronized easily with ImageTooltipHelper.js */ + --image-tooltip-image-padding: 4px; + --image-tooltip-label-height: 20px; + + display: flex; + flex-direction: column; + height: 100%; + min-width: 100px; + text-align: center; +} + +.devtools-tooltip-image-wrapper { + align-items: center; + display: flex; + flex: 1; + padding: var(--image-tooltip-image-padding); + justify-content: center; + min-height: 1px +} + +.devtools-tooltip-image { + max-height: 100%; +} + +.devtools-tooltip-image-dimensions { + height: var(--image-tooltip-label-height); + text-align: center; +} + +.devtools-tooltip-image-broken { + box-sizing: border-box; + height: 100%; + padding: 7px; +} + +/* Tooltip: Invoke getter confirm Tooltip */ + +.invoke-confirm { + color: var(--theme-popup-color); + border: 1px solid rgba(0,0,0, 0.1); + max-width: 212px; +} + +.invoke-confirm .close-confirm-dialog-button::before { + background-image: url("chrome://devtools/skin/images/close.svg"); +} + +.invoke-confirm .confirm-label { + margin: 0; + padding: 4px; + background-color: var(--theme-toolbar-background-alt); + display: flex; + align-items: start; +} + +.invoke-confirm .confirm-label p { + margin: 0; + padding: 0; + flex-grow: 1; + hyphens: auto; +} + +.invoke-confirm .emphasized { + font-family: var(--monospace-font-family); + font-weight: bold; + overflow-wrap: break-word; +} + +.invoke-confirm .close-confirm-dialog-button { + padding: 0; + margin: 0; + flex-grow: 0; +} + +.invoke-confirm .confirm-button { + background-color: var(--theme-selection-background); + color: white; + border: none; + padding: 6px; + display: block; + width: 100%; + text-align: left; +} + +/* The button already has a "selected" style, we can remove the focus rings. */ +.confirm-button:focus-visible { + outline: none; +} + +.invoke-confirm .learn-more-link { + color: var(--theme-link-color); + padding-inline-end: 4px; + display: flex; + align-items: center; + justify-content: end; + min-height: 20px; + cursor: pointer; +} + +.invoke-confirm .learn-more-link::after { + content: ""; + width: 14px; + height: 14px; + fill: currentColor; + -moz-context-properties: fill; + background-image: url(chrome://devtools/skin/images/help.svg); + background-size: contain; + background-repeat: no-repeat; + margin-inline-start: 4px; +} + +/* Tooltip: Rule Preview */ + +.rule-preview-tooltip-container { + display: flex; + flex-direction: column; + max-width: 200px; + color: var(--theme-body-color); + padding: 5px; +} + +.rule-preview-tooltip-message { + white-space: pre-wrap; +} + +.rule-preview-tooltip-source-rule-footer { + align-self: center; + border-top: 1px solid var(--theme-body-color); + margin-top: 5px; + margin-right: 5px; + margin-left: 5px; + padding: 3px; +} + +/* Tooltip: Selector warning */ +.devtools-tooltip-selector-warnings { + margin: 0; + padding: 10px; + list-style: none; + + & > li { + padding: 0; + + & + li { + border-block-start: 1px solid var(--theme-splitter-color); + } + } +} |