diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /devtools/client/shared/sourceeditor/codemirror/mozilla.css | |
parent | Initial commit. (diff) | |
download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip |
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/client/shared/sourceeditor/codemirror/mozilla.css')
-rw-r--r-- | devtools/client/shared/sourceeditor/codemirror/mozilla.css | 320 |
1 files changed, 320 insertions, 0 deletions
diff --git a/devtools/client/shared/sourceeditor/codemirror/mozilla.css b/devtools/client/shared/sourceeditor/codemirror/mozilla.css new file mode 100644 index 0000000000..bd0cde8d82 --- /dev/null +++ b/devtools/client/shared/sourceeditor/codemirror/mozilla.css @@ -0,0 +1,320 @@ +/* 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 { + --breakpoint-active-color: rgba(44,187,15,.2); + --breakpoint-active-color-hover: rgba(44,187,15,.5); +} + +.theme-dark:root { + --breakpoint-active-color: rgba(0,255,175,.4); + --breakpoint-active-color-hover: rgba(0,255,175,.7); +} + +/* We don't want the focus style to be displayed on the CodeMirror scrollbars. + * See Bug 1590707. + */ +.CodeMirror-vscrollbar, .CodeMirror-hscrollbar { + outline: none !important; +} + +.CodeMirror .errors { + width: 16px; +} + +.CodeMirror .error { + display: inline-block; + margin-left: 5px; + width: 12px; + height: 12px; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + opacity: 0.75; +} + +.CodeMirror .hit-counts { + width: 6px; +} + +.CodeMirror .hit-count { + display: inline-block; + height: 12px; + border: solid rgba(0,0,0,0.2); + border-width: 1px 1px 1px 0; + border-radius: 0 3px 3px 0; + padding: 0 3px; + font-size: 10px; + pointer-events: none; +} + +.CodeMirror-linenumber:before { + content: " "; + display: block; + width: calc(100% - 3px); + position: absolute; + top: 1px; + left: 0; + height: 12px; + z-index: -1; + background-size: calc(100% - 2px) 12px; + background-repeat: no-repeat; + background-position: right center; + padding-inline-end: 9px; +} + +.breakpoint .CodeMirror-linenumber { + color: var(--theme-body-background); +} + +.debug-line .CodeMirror-linenumber { + background-color: var(--breakpoint-active-color); +} + +.theme-dark .debug-line .CodeMirror-linenumber { + color: #c0c0c0; +} + +.debug-line .CodeMirror-line { + background-color: var(--breakpoint-active-color) !important; +} + +/* Don't display the highlight color since the debug line + is already highlighted */ +.debug-line .CodeMirror-activeline-background { + display: none; +} + +.CodeMirror { + cursor: text; + height: 100%; +} + +.CodeMirror-gutters { + cursor: default; +} + +.cm-trailingspace { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg=="); + opacity: 0.75; + background-position: left bottom; + background-repeat: repeat-x; +} + +/* Search highlight style + * cm-searching is used in Style Editor, and cm-highlight in Debugger */ +.cm-searching, +.cm-highlight { + border-bottom: 1px solid var(--theme-contrast-border); + /* Use the translucent yellow background, because we want the text selection + background (CodeMirror-selected) to show through this. */ + background-color: var(--theme-contrast-background-alpha); +} + +/* CodeMirror dialogs styling */ + +.CodeMirror-dialog { + padding: 4px 3px; +} + +.CodeMirror-dialog, +.CodeMirror-dialog input { + font: message-box; +} + +/* Fold addon */ + +.CodeMirror-foldmarker { + display: inline-block; + font-family: sans-serif; + line-height: 10px; + margin: 0 1px; + padding: 0 2px; + border-radius: 3px; + border: solid 1px var(--theme-splitter-color); + color: var(--theme-body-color); + background-color: var(--theme-sidebar-background); + cursor: pointer; +} + +.CodeMirror-foldgutter { + width: 16px; /* Same as breakpoints gutter above */ +} + +.CodeMirror-foldgutter-open, +.CodeMirror-foldgutter-folded { + height: 14px; + margin-top: 1px; + background-image: url("chrome://devtools/skin/images/arrow.svg"); + background-position: center; + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: var(--theme-icon-dimmed-color); + /* make the icons smaller than regular twistys (10->8px) */ + background-size: 8px; + cursor: pointer; +} + +.CodeMirror-foldgutter-folded { + transform: rotate(-90deg); +} + +.CodeMirror-hints { + position: absolute; + z-index: 10; + overflow: hidden; + list-style: none; + margin: 0; + padding: 2px; + border-radius: 3px; + font-size: 90%; + max-height: 20em; + overflow-y: auto; +} + +.CodeMirror-hint { + margin: 0; + padding: 0 4px; + border-radius: 2px; + max-width: 19em; + overflow: hidden; + white-space: pre; + cursor: pointer; +} + +.CodeMirror-Tern-completion { + padding-inline-start: 22px; + position: relative; + line-height: 18px; +} + +.CodeMirror-Tern-completion:before { + position: absolute; + left: 2px; + bottom: 2px; + border-radius: 50%; + font-size: 12px; + font-weight: bold; + height: 15px; + width: 15px; + line-height: 16px; + text-align: center; + color: #ffffff; + box-sizing: border-box; +} + +.CodeMirror-Tern-completion-unknown:before { + content: "?"; +} + +.CodeMirror-Tern-completion-object:before { + content: "O"; +} + +.CodeMirror-Tern-completion-fn:before { + content: "F"; +} + +.CodeMirror-Tern-completion-array:before { + content: "A"; +} + +.CodeMirror-Tern-completion-number:before { + content: "N"; +} + +.CodeMirror-Tern-completion-string:before { + content: "S"; +} + +.CodeMirror-Tern-completion-bool:before { + content: "B"; +} + +.CodeMirror-Tern-completion-guess { + color: #999; +} + +.CodeMirror-Tern-tooltip { + border-radius: 3px; + padding: 2px 5px; + white-space: pre-wrap; + max-width: 40em; + position: absolute; + z-index: 10; +} + +.CodeMirror-Tern-hint-doc { + max-width: 25em; +} + +.CodeMirror-Tern-farg-current { + text-decoration: underline; +} + +.CodeMirror-Tern-fhint-guess { + opacity: .7; +} + +/* Override the background-color: white applied to filler elements in codemirror.css */ +.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + appearance: auto; + -moz-default-appearance: scrollcorner; +} + +/* Markup view and Event tooltip styles */ + +.CodeMirror.cm-s-markup-view pre { + font-size: var(--theme-code-font-size); + line-height: var(--theme-code-line-height); + min-height: 15px; +} + +/* Make our own cursor-blink animation */ +@keyframes cursor-blink { + 0% {} + 50% { opacity: 0; } + 100% {} +} + +.CodeMirror-focused .CodeMirror-cursor { + /* + * We're using the --caret-blink-time custom property for the animation duration. + * It is set in editor.js when we setup the CodeMirror instance, and will map either + * to the value of the ui.caretBlinkTime preference, or to CodeMirror's default for + * cursorBlinkRate. (See Bug 1609567 for more information on why this is needed). + */ + /* + * The animation should only be set when the editor is focused, otherwise the + * animation will continue even when devtools is in a background tab. + * This happens because the cursor is hidden using visiblity: hidden rather than + * display: none in codemirror.css. See bug 1661054 for details. + */ + animation: cursor-blink calc(var(--caret-blink-time, 0.53s) * 2) steps(1) infinite; +} + + +/* + * Always align CodeMirror lines to the left. + * See Bug 1651443 for more information. + */ +.CodeMirror-lines { + text-align: left; +} + +/* CodeMirror matchhighlight styling */ +.cm-matchhighlight { + outline: 1px solid var(--theme-contrast-border); + border-radius: 2px; +} + +.cm-non-printable-char { + color: var(--theme-comment); + font-size: 0.9em; + border-radius: 2px; + outline: 1px solid currentColor; + margin-inline: 2px; + padding-inline: 2px; +} |