.theme-firebug {
--even-animation-timeline-background-color: rgba(160,144,144,0.03);
--command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
- --pause-image: url(chrome://devtools/skin/images/debugger-pause.png);
- --pause-image-2x: url(chrome://devtools/skin/images/debugger-pause@2x.png);
- --rewind-image: url(chrome://devtools/skin/images/rewind.png);
- --rewind-image-2x: url(chrome://devtools/skin/images/rewind@2x.png);
- --play-image: url(chrome://devtools/skin/images/debugger-play.png);
- --play-image-2x: url(chrome://devtools/skin/images/debugger-play@2x.png);
+ --pause-image: url(chrome://devtools/skin/images/pause.svg);
+ --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
+ --play-image: url(chrome://devtools/skin/images/play.svg);
}
:root {
--timeline-animation-height: 20px;
/* The size of a keyframe marker in the keyframes diagram */
--keyframes-marker-size: 10px;
- /* The color of the time graduation borders. This should match the the color
- devtools/client/animationinspector/utils.js */
+ /* The color of the time graduation borders */
--time-graduation-border-color: rgba(160, 144, 144, .5);
}
/* The main animations container */
+#sidebar-panel-animationinspector {
+ height: 100%;
+ width: 100%;
+}
+
#players {
height: calc(100% - var(--toolbar-height));
- overflow: auto;
+ overflow-x: hidden;
+ overflow-y: auto;
}
[empty] #players {
border-width: 0 1px 0 0;
}
+#element-picker {
+ height: 18px;
+}
+
#element-picker::before {
background-image: var(--command-pick-image);
}
background-image: var(--play-image);
}
-@media (min-resolution: 1.1dppx) {
- .pause-button::before {
- background-image: var(--pause-image-2x);
- }
-
- .pause-button.paused::before {
- background-image: var(--play-image-2x);
- }
-
- #rewind-timeline::before {
- background-image: var(--rewind-image-2x);
- }
-}
-
#timeline-rate select.devtools-button {
-moz-appearance: none;
text-align: center;
/* Animation timeline component */
.animation-timeline {
- height: 100%;
- overflow: hidden;
position: relative;
- /* The timeline gets its background-image from a canvas element created in
- /devtools/client/animationinspector/utils.js drawGraphElementBackground
- thanks to document.mozSetImageElement("time-graduations", canvas)
- This is done so that the background can be built dynamically from script */
- background-image: -moz-element(#time-graduations);
- background-repeat: repeat-y;
- /* Make the background be 100% of the timeline area so that it resizes with
- it and subtract the width of the sidebar and the buffer at the right of the
- timeline */
- background-size: calc(100% - var(--timeline-sidebar-width) - var(--keyframes-marker-size)) 100%;
- background-position: var(--timeline-sidebar-width) 0;
display: flex;
flex-direction: column;
}
}
.animation-timeline .scrubber-wrapper {
- z-index: 2;
- pointer-events: none;
+ position: absolute;
+ left: var(--timeline-sidebar-width);
+ /* Leave the width of a marker right of a track so the 100% markers can be
+ selected easily */
+ right: var(--keyframes-marker-size);
height: 100%;
}
.animation-timeline .scrubber {
+ z-index: 5;
+ pointer-events: none;
position: absolute;
- height: 100%;
+ /* Make the scrubber as tall as the viewport minus the toolbar height and the
+ header-wrapper's borders */
+ height: calc(100vh - var(--toolbar-height) - 1px);
+ min-height: 100%;
width: 0;
border-right: 1px solid #FF0000;
box-sizing: border-box;
}
-.animation-timeline .scrubber::before {
- content: "";
- position: absolute;
- top: 0;
- width: 1px;
- right: -6px;
- border-top: 5px solid #FF0000;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
-}
-
/* The scrubber handle is a transparent element displayed on top of the scrubber
line that allows users to drag it */
.animation-timeline .scrubber .scrubber-handle {
position: absolute;
height: 100%;
- top: 0;
/* Make it thick enough for easy dragging */
width: 6px;
- right: -3px;
+ right: -1.5px;
cursor: col-resize;
pointer-events: all;
}
+.animation-timeline .scrubber .scrubber-handle::before {
+ content: "";
+ position: sticky;
+ top: 0;
+ width: 1px;
+ border-top: 5px solid red;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+}
+
.animation-timeline .time-header {
- min-height: var(--toolbar-height);
+ min-height: var(--timeline-animation-height);
cursor: col-resize;
-moz-user-select: none;
}
+.animation-timeline .time-header .header-item {
+ position: absolute;
+ height: 100%;
+ padding-top: 3px;
+ border-left: 0.5px solid var(--time-graduation-border-color);
+}
+
+.animation-timeline .header-wrapper {
+ position: sticky;
+ top: 0;
+ background-color: var(--theme-body-background);
+ border-bottom: 1px solid var(--time-graduation-border-color);
+ z-index: 3;
+ height: var(--timeline-animation-height);
+ overflow: hidden;
+}
+
+.animation-timeline .time-body {
+ height: 100%;
+}
+
.animation-timeline .time-header .time-tick {
+ -moz-user-select: none;
position: absolute;
- top: 3px;
+ width: 0;
+ /* When scroll bar is shown, make it covers entire time-body */
+ height: 100%;
+ /* When scroll bar is hidden, make it as tall as the viewport minus the
+ timeline animation height and the header-wrapper's borders */
+ min-height: calc(100vh - var(--timeline-animation-height) - 1px);
+ border-left: 0.5px solid var(--time-graduation-border-color);
}
.animation-timeline .animations {
width: 100%;
height: 100%;
- overflow-y: auto;
- overflow-x: hidden;
- /* Leave some space for the header */
- margin-top: var(--timeline-animation-height);
padding: 0;
list-style-type: none;
- border-top: 1px solid var(--time-graduation-border-color);
+ margin-top: 0;
}
/* Animation block widgets */
align-items: center;
padding: 0 2px;
box-sizing: border-box;
- --fast-track-icon-width: 12px;
+ --fast-track-icon-width: 15px;
z-index: 1;
}
content: "";
display: block;
position: absolute;
- top: 0;
+ top: 1px;
right: 0;
height: 100%;
width: var(--fast-track-icon-width);
z-index: 1;
+}
- background-image: url("images/animation-fast-track.svg");
+.animation-timeline .all-properties .name::after {
+ background-color: white;
+ clip-path: url(images/animation-fast-track.svg#thunderbolt);
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+.animation-timeline .some-properties .name::after {
+ background-color: var(--theme-content-color3);
+ clip-path: url(images/animation-fast-track.svg#thunderbolt);
background-repeat: no-repeat;
background-position: center;
}
text-overflow: ellipsis;
}
+.animated-properties.cssanimation {
+ --background-color: var(--theme-contrast-background);
+}
+
+.animated-properties.csstransition {
+ --background-color: var(--theme-highlight-blue);
+}
+
+.animated-properties.scriptanimation {
+ --background-color: var(--theme-graphs-green);
+}
+
+.animation-timeline .animated-properties .oncompositor::before {
+ content: "";
+ display: inline-block;
+ width: 17px;
+ height: 17px;
+ background-color: var(--background-color);
+ clip-path: url(images/animation-fast-track.svg#thunderbolt);
+ vertical-align: middle;
+}
+
+.animation-timeline .animated-properties .warning {
+ text-decoration: underline dotted;
+}
+
.animation-timeline .animated-properties .frames {
/* The frames list is absolutely positioned and the left and width properties
are dynamically set from javascript to match the animation's startTime and
--- /dev/null
+/* 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/ */
+
+#boxmodel-wrapper {
+ border-bottom-style: solid;
+ border-bottom-width: 1px;
+ border-color: var(--theme-splitter-color);
+}
+
+#boxmodel-container {
+ /* The view will grow bigger as the window gets resized, until 400px */
+ max-width: 400px;
+ margin: 0px auto;
+ padding: 0;
+}
+
+/* Header */
+
+#boxmodel-header,
+#boxmodel-info {
+ display: flex;
+ align-items: center;
+ padding: 4px 17px;
+}
+
+#layout-geometry-editor {
+ visibility: hidden;
+}
+
+#layout-geometry-editor::before {
+ background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
+}
+
+/* Main: contains the box-model regions */
+
+#boxmodel-main {
+ position: relative;
+ box-sizing: border-box;
+ /* The regions are semi-transparent, so the white background is partly
+ visible */
+ background-color: #FF9F00;
+ color: var(--theme-selection-color);
+ /* Make sure there is some space between the window's edges and the regions */
+ margin: 0 14px 4px 14px;
+ width: calc(100% - 2 * 14px);
+}
+
+.boxmodel-margin,
+.boxmodel-size {
+/* color: var(--theme-highlight-blue); */
+}
+
+/* Regions are 3 nested elements with wide borders and outlines */
+
+#boxmodel-content {
+ height: 18px;
+}
+
+#boxmodel-margins,
+#boxmodel-borders,
+#boxmodel-padding {
+ border-color: var(--theme-splitter-color);
+ border-width: 18px;
+ border-style: solid;
+ outline: dotted 1px var(--theme-splitter-color);
+}
+
+#boxmodel-margins {
+ /* This opacity applies to all of the regions, since they are nested */
+ opacity: .8;
+}
+
+/* Regions colors */
+
+#boxmodel-margins {
+ border-color: #FFCF00;
+}
+
+#boxmodel-borders {
+ border-color: #A09090;
+}
+
+#boxmodel-padding {
+ border-color: #8050B0;
+}
+
+#boxmodel-content {
+ background-color: #008484;
+}
+/*
+.theme-firebug #boxmodel-main,
+.theme-firebug #boxmodel-borders,
+.theme-firebug #boxmodel-content {
+ border-style: solid;
+}
+
+.theme-firebug #boxmodel-main,
+.theme-firebug #boxmodel-header {
+ font-family: var(--proportional-font-family);
+}
+
+.theme-firebug #boxmodel-main {
+ color: var(--theme-body-color);
+ font-size: var(--theme-toolbar-font-size);
+}
+
+.theme-firebug #boxmodel-header {
+ font-size: var(--theme-toolbar-font-size);
+}
+*/
+/* Editable region sizes are contained in absolutely positioned <p> */
+
+#boxmodel-main > p {
+ position: absolute;
+ pointer-events: none;
+ margin: 0;
+ text-align: center;
+}
+
+#boxmodel-main > p > span,
+#boxmodel-main > p > input {
+ vertical-align: middle;
+ pointer-events: auto;
+}
+
+/* Coordinates for the region sizes */
+
+.boxmodel-top,
+.boxmodel-bottom {
+ width: calc(100% - 2px);
+ text-align: center;
+}
+
+.boxmodel-padding.boxmodel-top {
+ top: 37px;
+}
+
+.boxmodel-padding.boxmodel-bottom {
+ bottom: 38px;
+}
+
+.boxmodel-border.boxmodel-top {
+ top: 19px;
+}
+
+.boxmodel-border.boxmodel-bottom {
+ bottom: 20px;
+}
+
+.boxmodel-margin.boxmodel-top {
+ top: 1px;
+}
+
+.boxmodel-margin.boxmodel-bottom {
+ bottom: 2px;
+}
+
+.boxmodel-size,
+.boxmodel-margin.boxmodel-left,
+.boxmodel-margin.boxmodel-right,
+.boxmodel-border.boxmodel-left,
+.boxmodel-border.boxmodel-right,
+.boxmodel-padding.boxmodel-left,
+.boxmodel-padding.boxmodel-right {
+ top: 22px;
+ line-height: 80px;
+}
+
+.boxmodel-size {
+ width: calc(100% - 2px);
+}
+
+.boxmodel-margin.boxmodel-right,
+.boxmodel-margin.boxmodel-left,
+.boxmodel-border.boxmodel-left,
+.boxmodel-border.boxmodel-right,
+.boxmodel-padding.boxmodel-right,
+.boxmodel-padding.boxmodel-left {
+ width: 21px;
+}
+
+.boxmodel-padding.boxmodel-left {
+ left: 35px;
+}
+
+.boxmodel-padding.boxmodel-right {
+ right: 35px;
+}
+
+.boxmodel-border.boxmodel-left {
+ left: 16px;
+}
+
+.boxmodel-border.boxmodel-right {
+ right: 17px;
+}
+
+.boxmodel-margin.boxmodel-right {
+ right: 0;
+}
+
+.boxmodel-margin.boxmodel-left {
+ left: 0;
+}
+
+.boxmodel-rotate.boxmodel-left:not(.boxmodel-editing) {
+ transform: rotate(-90deg);
+}
+
+.boxmodel-rotate.boxmodel-right:not(.boxmodel-editing) {
+ transform: rotate(90deg);
+}
+
+/* Legend: displayed inside regions */
+
+.boxmodel-legend {
+ position: absolute;
+ margin: 2px 6px;
+ z-index: 1;
+}
+
+.boxmodel-legend[data-box="margin"] {
+ color: #000000; /*var(--theme-highlight-blue);*/
+}
+
+/* Editable fields */
+
+.boxmodel-editable {
+ border: 1px dashed transparent;
+ -moz-user-select: text;
+}
+
+.boxmodel-editable:hover {
+ border-bottom-color: #E7ADE7;
+}
+
+.styleinspector-propertyeditor {
+ border: 1px solid #008484;
+ padding: 0;
+}
+
+/* Make sure the content size doesn't appear as editable like the other sizes */
+
+.boxmodel-size > span {
+ cursor: default;
+}
+
+/* Box Model Info: contains the position and size of the element */
+
+#boxmodel-element-size {
+ flex: 1;
+}
+
+#boxmodel-position-group {
+ display: flex;
+ align-items: center;
+}
list-style-image: url("chrome://devtools/skin/images/profiler-stopwatch-tbutton.svg");
}
+#import-snapshot {
+ list-style-image: url("images/import.svg");
+}
+
/* Snapshots items */
.snapshot-item-thumbnail {
.frame-link .frame-link-line,
.frame-link .frame-link-colon {
color: var(--theme-highlight-orange);
- display: block;
+/* display: block;*/
}
.focused .frame-link .frame-link-filename,
@import url(variables.css);
@import url(common.css);
@import url(toolbars.css);
+@import url(tooltips.css);
body, html {
padding: 0;
}
.devtools-textinput,
+.devtools-filterinput,
.devtools-searchinput {
background-color: #000000;
color: #E7ADE7;
}
.devtools-textinput:focus,
+.devtools-filterinput:focus,
.devtools-searchinput:focus {
border-color: #008484;
}
}
xul|scrollbar xul|scrollbarbutton,
+xul|scrollbar xul|scrollbarbutton[sbattr="scrollbar-up-top"],
+xul|scrollbar xul|scrollbarbutton[sbattr="scrollbar-down-bottom"],
xul|scrollbar xul|gripper {
display: none !important; /* need !important to override forced display in LCARStrek */
}
}
scrollbar scrollbarbutton,
+scrollbar scrollbarbutton[sbattr="scrollbar-up-top"],
+scrollbar scrollbarbutton[sbattr="scrollbar-down-bottom"],
scrollbar gripper {
display: none !important; /* need !important to override forced display in LCARStrek */
}
border-radius: 300px;
border: none;
background-color: var(--fonts-button-background);
- color: var(--fonts-selected-text);
+ color: var(--fonts-button-text);
margin: 3px;
+ padding: 0 6px;
cursor: pointer;
position: fixed;
bottom: 0;
--- /dev/null
+<!-- This Source Code Form is subject to the terms of the Mozilla Public\r
+ - License, v. 2.0. If a copy of the MPL was not distributed with this\r
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->\r
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4">\r
+ <polygon points="0,0 4,4 8,0" fill="#FFCF00"/>\r
+</svg>\r
--- /dev/null
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="#FFCF00">
+ <style>
+ /* Use a fill that's visible on both light and dark themes for filter inputs */
+ #filterinput:target + #icon {
+ fill: #aaa;
+ }
+ </style>
+ <g id="filterinput"/>
+ <g id="icon">
+ <path fill-opacity=".3" d="M6.6 8.4c0-.6-1.7.3-1.7-.3 0-.4-1.7-2.7-1.7-2.7H13s-1.8 2-1.8 2.7c0 .3-2.1-.1-2.1.3v6.1H7s-.4-4.1-.4-6.1z"/>
+ <path d="M2 2v2.3L4.7 9H6v5.4l2.1 1 1.8-.9V9h1.3L14 4.3V2H2zm11 2l-2.2 4H9v5.8l-.9.4-1.1-.5V8H5.2L3 4V3h10v1z"/>
+ </g>
+</svg>
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg height="0" xmlns="http://www.w3.org/2000/svg">
- <filter id="checked-icon-state">
+ <filter id="checked-icon-state"><!-- make every icon be fully black, but keep alpha channel -->
<feColorMatrix in="SourceGraphic" type="matrix"
values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0"/>
</filter>
+ <filter id="disabled-icon-state"><!-- move any icon to #8050B0 / rgb(128,80,176), keeping alpha channel -->
+ <feColorMatrix in="SourceGraphic" type="matrix" color-interpolation-filters="sRGB"
+ values="0 0 0 0 0.50
+ 0 0 0 0 0.31
+ 0 0 0 0 0.69
+ 0 0 0 1 0"/>
+ </filter>
<!-- Web Audio Gradients -->
<linearGradient id="bypass-light" x1="6%" y1="8%" x2="12%" y2="12%" spreadMethod="repeat">
--- /dev/null
+<!-- 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/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#FFCF00">
+ <circle cx="8" cy="8.5" r="1.5"/>
+ <path d="M15.498 8.28l-.001-.03v-.002-.004l-.002-.018-.004-.031c0-.002 0-.002 0 0l-.004-.035.006.082c-.037-.296-.133-.501-.28-.661-.4-.522-.915-1.042-1.562-1.604-1.36-1.182-2.74-1.975-4.178-2.309a6.544 6.544 0 0 0-2.755-.042c-.78.153-1.565.462-2.369.91C3.252 5.147 2.207 6 1.252 7.035c-.216.233-.36.398-.499.577-.338.437-.338 1 0 1.437.428.552.941 1.072 1.59 1.635 1.359 1.181 2.739 1.975 4.177 2.308.907.21 1.829.223 2.756.043.78-.153 1.564-.462 2.369-.91 1.097-.612 2.141-1.464 3.097-2.499.217-.235.36-.398.498-.578.12-.128.216-.334.248-.554 0 .01 0 .01-.008.04l.013-.079-.001.011.003-.031.001-.017v.005l.001-.02v.008l.002-.03.001-.05-.001-.044v-.004-.004zm-.954.045v.007l.001.004V8.33v.012l-.001.01v-.005-.005l.002-.015-.001.008c-.002.014-.002.014 0 0l-.007.084c.003-.057-.004-.041-.014-.031-.143.182-.27.327-.468.543-.89.963-1.856 1.752-2.86 2.311-.724.404-1.419.677-2.095.81a5.63 5.63 0 0 1-2.374-.036c-1.273-.295-2.523-1.014-3.774-2.101-.604-.525-1.075-1.001-1.457-1.496-.054-.07-.054-.107 0-.177.117-.152.244-.298.442-.512.89-.963 1.856-1.752 2.86-2.311.724-.404 1.419-.678 2.095-.81a5.631 5.631 0 0 1 2.374.036c1.272.295 2.523 1.014 3.774 2.101.603.524 1.074 1 1.457 1.496.035.041.043.057.046.076 0 .01 0 .01.008.043l-.009-.047.003.02-.002-.013v-.008.016c0-.004 0-.004 0 0v-.004z"/>
+</svg>
--- /dev/null
+<!-- 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/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#FFCF00">
+ <path d="M5 12.503l.052-9a.5.5 0 0 0-1-.006l-.052 9a.5.5 0 0 0 1 .006zM12 12.497l-.05-9A.488.488 0 0 0 11.474 3a.488.488 0 0 0-.473.503l.05 9a.488.488 0 0 0 .477.497.488.488 0 0 0 .473-.503z"/>
+</svg>
--- /dev/null
+<!-- 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/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#FFCF00b">
+ <path d="M4 12.5l8-5-8-5v10zm-1 0v-10a1 1 0 0 1 1.53-.848l8 5a1 1 0 0 1 0 1.696l-8 5A1 1 0 0 1 3 12.5z" fill-rule="evenodd"/>
+</svg>
--- /dev/null
+<!-- 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/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#FFCF00">
+ <path d="M13 2.5l-8 5 8 5v-10zm1 0v10a1 1 0 0 1-1.53.848l-8-5a1 1 0 0 1 0-1.696l8-5A1 1 0 0 1 14 2.5zM2 12.497l-.04-7.342-.01-1.658A.488.488 0 0 0 1.474 3 .488.488 0 0 0 1 3.503l.05 9a.488.488 0 0 0 .477.497.488.488 0 0 0 .473-.503z"/>
+</svg>
- 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/. -->
<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
- <path fill="#000000" d="m11.5,13.9l-.6-1.5c.3-.2 .5-.4 .8-.6 .2-.2 .4-.5 .6-.7l1.5,.6c.3,.1 .6,0 .7-.3l.4-1c.1-.3 0-.6-.3-.7l-1.5-.6c.1-.6 .1-1.3 0-2l1.5-.6c.3-.1 .4-.4 .3-.7l-.4-1c-.1-.3-.4-.4-.7-.3l-1.5,.6c-.2-.3-.4-.5-.6-.8-.2-.1-.5-.3-.7-.5l.6-1.5c.1-.3 0-.6-.3-.7l-.9-.4c-.3-.1-.6,0-.7,.3l-.6,1.5c-.6-.1-1.3-.1-2,0l-.6-1.5c-.1-.3-.4-.4-.7-.3l-1,.4c-.2,.1-.3,.4-.2,.6l.6,1.5c-.3,.3-.5,.5-.8,.7-.2,.3-.4,.5-.6,.8l-1.5-.7c-.3-.1-.6,0-.7,.3l-.4,.9c-.1,.3 0,.6 .3,.7l1.5,.7c-.1,.6-.1,1.3 0,1.9l-1.5,.6c-.3,.1-.4,.4-.3,.7l.4,1c.1,.3 .4,.4 .7,.3l1.5-.6c.2,.3 .4,.5 .6,.8 .2,.2 .5,.4 .7,.6l-.6,1.5c-.1,.3 0,.6 .3,.7l1,.4c.3,.1 .6,0 .7-.3l.6-1.5c.6,.1 1.3,.1 2,0l.6,1.5c.1,.3 .4,.4 .7,.3l1-.4c.1-.1 .3-.4 .1-.7zm-5.1-4.2c-.9-.9-.9-2.4 0-3.3 .9-.9 2.4-.9 3.3,0 .9,.9 .9,2.4 0,3.3-.9,.9-2.4,.9-3.3,0z"/>
+ <path fill="#FFCF00" d="m11.5,13.9l-.6-1.5c.3-.2 .5-.4 .8-.6 .2-.2 .4-.5 .6-.7l1.5,.6c.3,.1 .6,0 .7-.3l.4-1c.1-.3 0-.6-.3-.7l-1.5-.6c.1-.6 .1-1.3 0-2l1.5-.6c.3-.1 .4-.4 .3-.7l-.4-1c-.1-.3-.4-.4-.7-.3l-1.5,.6c-.2-.3-.4-.5-.6-.8-.2-.1-.5-.3-.7-.5l.6-1.5c.1-.3 0-.6-.3-.7l-.9-.4c-.3-.1-.6,0-.7,.3l-.6,1.5c-.6-.1-1.3-.1-2,0l-.6-1.5c-.1-.3-.4-.4-.7-.3l-1,.4c-.2,.1-.3,.4-.2,.6l.6,1.5c-.3,.3-.5,.5-.8,.7-.2,.3-.4,.5-.6,.8l-1.5-.7c-.3-.1-.6,0-.7,.3l-.4,.9c-.1,.3 0,.6 .3,.7l1.5,.7c-.1,.6-.1,1.3 0,1.9l-1.5,.6c-.3,.1-.4,.4-.3,.7l.4,1c.1,.3 .4,.4 .7,.3l1.5-.6c.2,.3 .4,.5 .6,.8 .2,.2 .5,.4 .7,.6l-.6,1.5c-.1,.3 0,.6 .3,.7l1,.4c.3,.1 .6,0 .7-.3l.6-1.5c.6,.1 1.3,.1 2,0l.6,1.5c.1,.3 .4,.4 .7,.3l1-.4c.1-.1 .3-.4 .1-.7zm-5.1-4.2c-.9-.9-.9-2.4 0-3.3 .9-.9 2.4-.9 3.3,0 .9,.9 .9,2.4 0,3.3-.9,.9-2.4,.9-3.3,0z"/>
</svg>
* 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 {
+ --eyedropper-image: url(images/command-eyedropper.svg);
+}
+
window {
padding: 0;
}
+/* Use flex layout for the Inspector toolbar. For now, it's done
+ specifically for the Inspector toolbar since general rule applied
+ on .devtools-toolbar breaks breadcrubs and also toolbars in other
+ panels (e.g. webconsole, debugger), these are not ready for HTML
+ layout yet. */
+div#inspector-toolbar.devtools-toolbar {
+ display: flex;
+ background-size: calc(100% - 30px);
+ background-image: linear-gradient(90deg,#9C9CFF,#9C9CFF);
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+
+div#inspector-toolbar.devtools-toolbar .devtools-toolbar-spacer {
+ flex-grow: 1;
+ display: inline-block;
+}
+
+div#inspector-toolbar.devtools-toolbar::before,
+div#inspector-toolbar.devtools-toolbar::after {
+ display: flex;
+ content: "";
+ width: 12px;
+ min-height: 16px;
+ background-color: #FF9F00;
+}
+
+div#inspector-toolbar.devtools-toolbar::before {
+ border-radius: 8px 0px 0px 8px;
+ border: none;
+ border-inline-end: 3px solid black;
+ margin-inline-end: 2px;
+}
+
+div#inspector-toolbar.devtools-toolbar::after {
+ border-radius: 0px 8px 8px 0px;
+ border: none;
+ border-inline-start: 3px solid black;
+ margin-inline-start: 2px;
+}
+
+
#inspector-toolbar {
border-top: none;
}
list-style-image: url("chrome://devtools/skin/images/add.svg");
}
+button#inspector-element-add-button::before {
+ background-image: url("chrome://devtools/skin/images/add.svg");
+ list-style-image: url("chrome://devtools/skin/images/add.svg");
+ -moz-user-focus: normal;
+}
+
+#inspector-search {
+ flex: unset;
+}
+
+/* TODO: bug 1265759: should apply to .devtools-searchinput once all searchbox
+ is converted to html*/
+#inspector-searchbox {
+ width: 100%;
+}
+
+/* Eyedropper toolbar button */
+
+#inspector-eyedropper-toggle {
+ /* hidden by default, until we can check that the required highlighter exists */
+ display: none;
+}
+
+#inspector-eyedropper-toggle::before {
+ background-image: var(--eyedropper-image);
+}
+
+#inspector-sidebar-toggle-box {
+ line-height: initial;
+}
+
+button#sidebar-toggle {
+ height: 100%;
+}
+
+/* Set the minimum width for the side bar so, all tabs are
+ properly visible. The value can be decreased when bug 1281789
+ is fixed and the all-tabs-menu is available again. */
+#inspector-sidebar-container {
+ overflow: hidden;
+ min-width: 300px;
+ position: relative;
+}
+
+div#inspector-sidebar {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+/* Sidebar tabs */
+
+.tabs .tabs-navigation {
+ height: auto !important;
+}
+
+.tabs .tabs-menu-item {
+ border-radius: 8px 8px 0px 0px;
+ margin-top: 2px;
+ border: 0 !important;
+ border-inline-end: 2px solid transparent !important;
+ border-bottom: none;
+ padding: 2px 4px 1px;
+ background-color: var(--theme-button-background);
+ color: var(--theme-button-color);
+ background-clip: padding-box;
+ height: auto !important;
+}
+
+.tabs .tabs-menu-item a {
+ color: inherit !important;
+ padding: 0 !important;
+ border: 0;
+}
+
+.tabs .tabs-menu-item:hover {
+ background-color: var(--theme-hover-background);
+ color: var(--theme-hover-color);
+}
+
+.tabs .tabs-menu-item:hover:active {
+ background-color: var(--theme-active-background);
+ color: var(--theme-active-color);
+}
+
/* Tooltip: Events */
#devtools-tooltip-events-container {
*/
display: flex;
align-items: center;
+ background-size: calc(100% - 30px);
+ background-image: linear-gradient(90deg,#9C9CFF,#9C9CFF);
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+
+.devtools-toolbar::before,
+.devtools-toolbar::after {
+ display: flex;
+ content: "";
+ width: 12px;
+ min-height: 16px;
+ height: 100%;
+ background-color: #FF9F00;
+}
+
+.devtools-toolbar::before {
+ border-radius: 8px 0px 0px 8px;
+ border: none;
+ border-inline-end: 3px solid black;
+ margin-inline-end: 2px;
+}
+
+.devtools-toolbar::after {
+ border-radius: 0px 8px 8px 0px;
+ border: none;
+ border-inline-start: 3px solid black;
+ margin-inline-start: 2px;
}
.devtools-toolbar > .toolbar-group:nth-of-type(1) {
/**
* We want this to be exactly at a `--sidebar-width` distance from the
- * toolbar's start boundary. A `.devtools-toolbar` has a 3px start padding.
+ * toolbar's start boundary. We want the end border to be after the sidebar,
+ * and the startcap has to be subtracted.
*/
- flex: 0 0 calc(var(--sidebar-width) - 4px);
- border-inline-end: 1px solid var(--theme-splitter-color);
+ flex: 0 0 calc(var(--sidebar-width) - 2px - 15px);
+ border-inline-end: 3px solid var(--theme-toolbar-background);
margin-inline-end: 5px;
padding-right: 1px;
}
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ height: 100%;
}
.devtools-toolbar > .toolbar-group > label {
display: flex;
align-items: center;
margin-inline-end: 5px;
+ color: var(--theme-button-color);
}
.devtools-toolbar > .toolbar-group > label.display-by > span {
.devtools-toolbar > label {
margin-inline-end: 5px;
+ flex: 1;
+ color: var(--theme-button-color);
}
#select-view {
#pop-view-button-label {
border-inline-end: 1px solid var(--theme-splitter-color);
padding-inline-end: 5px;
+ flex: none;
}
/**
#import-snapshot,
#clear-snapshots {
-moz-box-align: center;
- flex-grow: 1;
+/* flex-grow: 1;
padding: 1px;
margin: 2px 1px;
- min-width: unset;
+ min-width: unset;*/
}
.spacer {
#filter {
align-self: stretch;
- margin: 2px;
+/* margin: 2px; */
+ font: inherit;
}
/**
text {
fill: var(--theme-body-color-alt);
}
+
+
+
+/* Hide the actual checkbox */
+input[type="checkbox"] {
+ opacity: 0;
+ width: 0;
+ pointer-events: none;
+ position: absolute;
+}
+
+/* Create a box to style as the checkbox */
+input[type="checkbox"] + span::before {
+ display: inline-block;
+ content: "";
+ vertical-align: -3px;
+}
+
+input[type="checkbox"] + span {
+ line-height: 0px;
+}
+
+input[type="checkbox"] + span::before {
+ -moz-appearance: none;
+ width: 1em;
+ height: 1em;
+ border-radius: 0;
+ border: 1px solid var(--theme-body-color);
+ -moz-margin-end: 10px;
+ background-color: var(--theme-toolbar-background);
+ background-position: center center;
+ background-repeat: no-repeat;
+}
+
+input[type="checkbox"]:not(:disabled) + span:hover::before {
+ border-color: var(--theme-hover-background);
+}
+input[type="checkbox"]:not(:disabled) + span:hover {
+ color: var(--theme-hover-background);
+}
+input[type="checkbox"]:checked + span::before {
+ background-image: url("chrome://global/skin/in-content/check.svg#check");
+}
+
+input[type="checkbox"]:checked:disabled + span::before {
+ background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
+}
+input[type="checkbox"]:checked:not(:disabled) + span:hover::before {
+ background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
+}
+input[type="checkbox"]:disabled + span::before {
+ border-color: var(--theme-body-color-inactive);
+}
+input[type="checkbox"]:disabled + span {
+ color: var(--theme-body-color-inactive);
+}
+
+select {
+ border: 1px solid var(--theme-body-color);
+ background-color: var(--theme-toolbar-background);
+ color: var(--theme-body-color);
+ background-image: url("chrome://global/skin/arrow/arrow-down.gif");
+ background-repeat: no-repeat;
+ background-position: calc(100% - 2px) center;
+ border-radius: 3px;
+ padding: 1px;
+ margin: 1px;
+ font: inherit;
+}
+select:hover {
+ background-color: var(--theme-hover-background);
+ color: var(--theme-hover-color);
+ background-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
+}
+select:hover:active {
+ background-color: var(--theme-active-background);
+ color: var(--theme-active-color);
+}
#requests-menu-reload-notice-button {
min-height: 26px;
margin: 0;
- background-color: var(--theme-toolbar-background);
}
/* Network requests table */
.requests-menu-header-button {
background-color: transparent;
border-image: linear-gradient(transparent 15%,
- var(--theme-splitter-color) 15%,
- var(--theme-splitter-color) 85%,
+ var(--theme-toolbar-background) 15%,
+ var(--theme-toolbar-background) 85%,
transparent 85%) 1 1;
border-style: solid;
border-width: 0;
width: 8vw;
}
+.requests-menu-cause {
+ max-width: 8em;
+ width: 8vw;
+}
+
+.requests-menu-cause-stack {
+ background-color: var(--theme-body-color-alt);
+ color: var(--theme-body-background);
+ font-size: 8px;
+ font-weight: bold;
+ line-height: 10px;
+ border-radius: 3px;
+ padding: 0 2px;
+ margin: 0;
+ margin-inline-end: 3px;
+ -moz-user-select: none;
+}
+
.requests-menu-transferred {
max-width: 8em;
text-align: center;
padding: 0 5px;
margin: 2px;
color: var(--theme-body-color);*/
+ margin-top: 0;
+ margin-bottom: 0;
}
.requests-menu-filter-button:hover {
/* Performance analysis buttons */
#requests-menu-network-summary-button {
- background: none;
box-shadow: none;
border-color: transparent;
- list-style-image: url("images/profiler-stopwatch.svg");
- -moz-padding-end: 0;
+ list-style-image: url("images/profiler-stopwatch-tbutton.svg");
cursor: pointer;
- margin-inline-end: 1em;
min-width: 0;
}
/* Recording buttons */
-#main-record-button {
- list-style-image: url(images/profiler-stopwatch.svg);
+#recordings-controls {
+ background-color: #9C9CFF;
+}
+
+#clear-button::before {
+ background-image: var(--clear-icon-url);
+}
+
+#main-record-button::before {
+ background-image: url(images/profiler-stopwatch-tbutton.svg);
+}
+
+#import-button::before {
+ background-image: url(images/import.svg);
+}
+
+#main-record-button .button-icon, #import-button .button-icon {
+ margin: 0;
+}
+
+#main-record-button .button-text, #import-button .button-text {
+ display: none;
}
#main-record-button .button-icon {
.theme-dark,
.theme-firebug {
--rule-highlight-background-color: #402000;
- --rule-filter-icon: url(images/magnifying-glass.png);
}
/* Rule View Tabpanel */
-moz-user-select: text;
overflow: auto;
flex: auto;
+ height: 100%;
+}
+
+/* This extra wrapper only serves as a way to get the content of the view focusable.
+ So that when the user reaches it either via keyboard or mouse, we know that the view
+ is focused and therefore can handle shortcuts.
+ However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
+ through it, and the outline is hidden. */
+#ruleview-container-focusable {
+ height: 100%;
+ outline: none;
}
#ruleview-container.non-interactive {
}
.ruleview-overridden-rule-filter {
- background-image: var(--rule-filter-icon);
+ background-image: url(images/filter.svg#filterinput);
background-size: 11px 11px;
margin-inline-start: 5px;
display: inline-block;
}
#style-editor-chrome {
+ -moz-box-flex: 1;
background-color: #000000;
}
+.splitview-nav > li,
+.stylesheet-info,
+.stylesheet-more,
+.stylesheet-rule-count,
+li.splitview-active > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton,
+li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton {
+ display: -moz-box;
+}
+
+.devtools-toolbar > spacer {
+ -moz-box-flex: 1;
+}
+
+.style-editor-newButton {
+ list-style-image: url(images/add.svg);
+}
+
+.style-editor-importButton {
+ list-style-image: url(images/import.svg);
+}
+
+.stylesheet-details-container {
+ -moz-box-flex: 1;
+}
+
+.stylesheet-media-container {
+ overflow-y: auto;
+}
+
+.stylesheet-error-message {
+ display: none;
+}
+
+li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message {
+ display: block;
+}
+
.stylesheet-title,
.stylesheet-name {
text-decoration: none;
.stylesheet-name {
font-size: 13px;
+ white-space: nowrap;
+}
+
+.stylesheet-name > label {
+ display: inline;
+ cursor: pointer;
+}
+
+.stylesheet-info > h1 {
+ -moz-box-flex: 1;
+}
+
+.splitview-nav > li > hgroup.stylesheet-info {
+ -moz-box-pack: center;
+}
+
+.stylesheet-more > spacer {
+ -moz-box-flex: 1;
}
.stylesheet-rule-count,
outline: 0; /* focus ring is on the stylesheet name */
}
+.splitview-nav > li {
+ -moz-box-orient: horizontal;
+}
+
+.splitview-nav > li > hgroup {
+ display: -moz-box;
+ -moz-box-orient: vertical;
+ -moz-box-flex: 1;
+}
+
.splitview-nav > li.unsaved > hgroup .stylesheet-name {
font-style: italic;
}
}
.media-rule-label {
- border-bottom: 1px solid #A09090; /* Grey */
+ border-bottom: 1px solid var(--theme-splitter-color);
}
.media-rule-label {
+ display: flex;
padding: 4px;
cursor: pointer;
+ border-bottom: 1px solid;
}
.media-responsive-mode-toggle {
}
.media-rule-line {
- -moz-padding-start: 4px;
+ padding-inline-start: 4px;
}
.media-condition-unmatched {
/* opacity: 0.4;*/
}
+.media-rule-condition {
+ flex: 1;
+ overflow: hidden;
+}
+
.stylesheet-enabled {
+ display: -moz-box;
+ cursor: pointer;
padding: 8px 0;
margin: 0 8px;
- background-image: url("images/itemToggle.png");
+ background-image: url("images/itemToggle.svg");
background-repeat: no-repeat;
background-clip: content-box;
- background-position: 0 8px;
- background-size: 48px 24px;
+ background-position: center;
+ background-size: 16px;
width: 24px;
height: 40px;
-}
-
-@media (min-resolution: 1.1dppx) {
- .stylesheet-enabled {
- background-image: url("images/itemToggle@2x.png");
- }
+/* filter: var(--icon-filter);*/
}
.disabled > .stylesheet-enabled {
- background-position: -24px 8px;
+ filter: url(images/filters.svg#disabled-icon-state);
}
.splitview-nav > li > .stylesheet-enabled:focus,
}
.stylesheet-linked-file:not(:empty){
- -moz-margin-end: 0.4em;
+ margin-inline-end: 0.4em;
}
.stylesheet-linked-file:not(:empty):before {
- -moz-margin-start: 0.4em;
+ margin-inline-start: 0.4em;
+ content: " ↳ ";
+}
+
+li.unsaved > hgroup > h1 > .stylesheet-name:before {
+ content: "*";
+}
+
+li.linked-file-error .stylesheet-linked-file {
+ text-decoration: line-through;
}
li.linked-file-error .stylesheet-linked-file:after {
font-size: 110%;
+ content: " ✘";
+}
+
+li.linked-file-error .stylesheet-rule-count {
+ visibility: hidden;
}
.stylesheet-more > h3 {
-moz-margin-end: 2px;
}
-.devtools-searchinput {
+.devtools-searchinput,
+.devtools-filterinput {
max-width: 25ex;
font-size: 11px;
}
/* portrait mode */
@media (max-width: 550px) {
+ li.splitview-active > hgroup > .stylesheet-more > .stylesheet-rule-count,
+ li:hover > hgroup > .stylesheet-more > .stylesheet-rule-count {
+ display: none;
+ }
+
.splitview-nav {
box-shadow: none;
}
.splitview-nav > li > hgroup.stylesheet-info {
-moz-box-align: baseline;
+ -moz-box-orient: horizontal;
+ -moz-box-flex: 1;
}
.stylesheet-sidebar {
width: 180px;
}
+
+ .stylesheet-more {
+ -moz-box-flex: 1;
+ -moz-box-pack: end;
+ }
+
+ .stylesheet-more > spacer {
+ -moz-box-flex: 0;
+ }
}
.csscoverage-report {
background-color: var(--theme-contrastsidebar-background);
+ -moz-box-orient: horizontal;
}
.csscoverage-report-container {
height: 100vh;
- padding: 10px;
+ padding: 0 10px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ -moz-box-flex: 1;
}
.csscoverage-report-content {
margin: 20px auto;
-moz-column-width: 300px;
font-size: 13px;
+ -moz-user-select: text;
+}
+
+.csscoverage-report-summary,
+.csscoverage-report-unused,
+.csscoverage-report-optimize {
+ display: inline-block;
+}
+
+.csscoverage-report-unused,
+.csscoverage-report-optimize {
+ flex: 1;
+ min-width: 0;
+}
+
+@media (max-width: 950px) {
+ .csscoverage-report-content {
+ display: block;
+ }
+
+ .csscoverage-report-summary {
+ display: block;
+ text-align: center;
+ }
}
.csscoverage-report h1 {
margin: 10px 0;
}
+.csscoverage-report code,
+.csscoverage-report textarea {
+ font-family: var(--monospace-font-family);
+ font-size: inherit;
+}
+
.csscoverage-list:after {
content: ', ';
}
border-radius: 0;
border-top: none;
border-bottom: none;
- -moz-border-start: none;
+ border-inline-start: none;
+}
+
+.csscoverage-report .pie-table-chart-container {
+ -moz-box-orient: vertical;
+ text-align: start;
}
.chart-colored-blob[name="Used Preload"] {
}
.csscoverage-report-chart {
- margin: 0 50px;
+ margin: 0 20px;
}
--searchbox-border-color: #9C9CFF;
--searcbox-no-match-background-color: #400000;
--searcbox-no-match-border-color: #FF0000;
- --magnifying-glass-image: url(images/magnifying-glass-light.png);
- --magnifying-glass-image-2x: url(images/magnifying-glass-light@2x.png);
- --tool-options-image: url(images/tool-options.svg);
+ --magnifying-glass-image: url(images/search.svg);
+ --filter-image: url(images/filter.svg);
+ --tool-options-image: url(images/tool-options-tbutton.svg);
--close-button-image: url(chrome://devtools/skin/images/close.svg);
--icon-filter: invert(1);
--dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg);
--command-measure-image: url(images/command-measure.svg);
}
+#toolbox-container {
+ padding-top: 3px;
+}
+
/* Toolbars */
.devtools-toolbar,
.devtools-sidebar-tabs tabs {
}
.devtools-toolbar {
+ border-bottom: 3px solid var(--theme-body-background);
}
.devtools-toolbar checkbox {
.devtools-button {
margin: 0;
padding: 0;
+ border: none;
+ border-radius: 3px;
min-width: 16px;
+ height: 100%;
+ margin-inline-start: 2px;
background: var(--theme-toolbar-background);
color: var(--theme-body-color);
/* The icon is absolutely positioned in the button using ::before */
border: none;
/* min-height: 32px; */
background-color: var(--theme-button-background);
+ color: var(--theme-button-color);
+ border-radius: 300px;
+}
+
+.devtools-button[standalone]:hover,
+.devtools-button[data-standalone]:hover,
+.devtools-toolbarbutton[standalone]:hover,
+.devtools-toolbarbutton[data-standalone]:hover {
+ background-color: var(--theme-hover-background);
+ color: var(--theme-hover-color);
+}
+
+.devtools-button[standalone]:hover:active,
+.devtools-button[data-standalone]:hover:active,
+.devtools-toolbarbutton[standalone]:hover:active,
+.devtools-toolbarbutton[data-standalone]:hover:active {
+ background-color: var(--theme-active-background);
+ color: var(--theme-active-color);
}
.devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] {
/* opacity: 0.5 !important;*/
}
+.devtools-button[standalone]::before,
+.devtools-button[data-standalone]::before,
+.devtools-toolbarbutton[standalone]::before,
+.devtools-toolbarbutton[data-standalone]::before,
+.devtools-button:not([disabled]):hover::before,
+.devtools-button:not([disabled]):hover:active::before,
.devtools-button[checked]:empty::before,
.devtools-button[open]:empty::before,
-.devtools-toolbarbutton:not([label]):hover > image,
-.devtools-toolbarbutton:not([label]):hover:active > image,
-.devtools-toolbarbutton:not([label])[checked=true] > image,
-.devtools-toolbarbutton:not([label])[open=true] > image {
+.devtools-button[standalone] > image,
+.devtools-button[data-standalone] > image,
+.devtools-toolbarbutton[standalone] > image,
+.devtools-toolbarbutton[data-standalone] > image,
+.devtools-toolbarbutton:not([disabled]):hover > image,
+.devtools-toolbarbutton:not([disabled]):hover:active > image,
+.devtools-toolbarbutton[checked=true] > image,
+.devtools-toolbarbutton[open=true] > image {
+ filter: url(images/filters.svg#checked-icon-state);
+}
+
+#toolbox-close:hover::before,
+#toolbox-close:hover:active::before,
+.toolbox-dock-button:hover::before,
+.toolbox-dock-button:hover:active::before,
+.command-button:hover::before,
+.command-button:hover:active::before,
+.command-button[checked=true]::before,
+.command-button[open=true]::before,
+#toolbox-close:hover > image,
+#toolbox-close:hover:active > image,
+.toolbox-dock-button:hover > image,
+.toolbox-dock-button:hover:active > image,
+.command-button:hover > image,
+.command-button:hover:active > image,
+.command-button[checked=true] > image,
+.command-button[open=true] > image {
filter: url(images/filters.svg#checked-icon-state);
}
+.devtools-button[disabled]::before,
+.devtools-toolbarbutton[disabled] > image {
+ filter: url(images/filters.svg#disabled-icon-state);
+}
+
/* Icon-and-text buttons */
.devtools-toolbarbutton.icon-and-text .toolbarbutton-text {
margin-inline-start: .5em !important;
/* Text input */
.devtools-textinput,
+.devtools-filterinput,
.devtools-searchinput {
/* -moz-appearance: none;
margin: 1 3px;
border-radius: 2px;
padding: 4px 6px;
border-color: var(--theme-splitter-color);*/
+ margin-top: 0;
+ margin-bottom: 0;
}
:root[platform="mac"] .devtools-textinput,
-moz-image-region: rect(0, 32px, 16px, 16px);
}
-@media (min-resolution: 1.1dppx) {
- .devtools-searchinput {
- background-image: var(--magnifying-glass-image-2x);
- }
-}
-
/* Close button */
.devtools-closebutton {
background-repeat: no-repeat;
}
+button#toolbox-close {
+ margin-inline-start: 2px;
+ margin-inline-end: 10px;
+}
+
.devtools-closebutton > .toolbarbutton-icon {
/* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
use evil CSS to give the impression of smaller content */
/* In-tools sidebar */
-.devtools-sidebar-tabs {
+div.devtools-sidebar-tabs {
+ height: 100%;
}
.devtools-sidebar-tabs > tabpanels {
.command-button {
-moz-appearance: none;
border: none;
-/* padding: 0 8px; */
-/* margin: 0; */
- width: 16px;
+ margin-inline-start: 2px;
+ width: 20px;
+ height: 100%;
position: relative;
-moz-user-focus: normal;
}
+button.toolbox-dock-button,
+button.command-button {
+ padding: 8px;
+}
+
.command-button:hover {
/* background-color: var(--toolbar-tab-hover); */
}
background-repeat: no-repeat;
}
-#toolbox-close:hover::before,
-#toolbox-close:hover:active::before,
-.toolbox-dock-button:hover::before,
-.toolbox-dock-button:hover:active::before,
-.command-button:hover::before,
-.command-button:hover:active::before,
-.command-button[checked=true]::before,
-.command-button[open=true]::before,
-.command-button:hover > image,
-.command-button:hover:active > image,
-.command-button[checked=true] > image,
-.command-button[open=true] > image {
- filter: url(images/filters.svg#checked-icon-state);
-}
-
/* Toolbox buttons images */
#command-button-paintflashing > image,
--- /dev/null
+/* 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 specific theme variables */
+
+.theme-dark,
+.theme-light {
+ --bezier-diagonal-color: #A09090;
+ --bezier-grid-color: rgba(0, 0, 0, 0.2);
+}
+
+/* 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;
+ filter: drop-shadow(0 3px 4px var(--theme-tooltip-shadow));
+}
+
+.tooltip-xul-wrapper {
+ -moz-appearance: none;
+ background: transparent;
+ overflow: visible;
+ border-style: none;
+}
+
+.tooltip-xul-wrapper .tooltip-container {
+ position: absolute;
+}
+
+.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;
+}
+
+/* type="arrow" overrides: remove arrow decorations for the xul <panel> wrapper */
+
+.tooltip-xul-wrapper[type="arrow"] {
+ margin: 0;
+}
+
+/* The arrow image is hidden because the panel is opened using openPopupAtScreen(). */
+
+/* Remove all decorations on .panel-arrowcontent is the tooltip content container. */
+.tooltip-xul-wrapper[type="arrow"] .panel-arrowcontent {
+ margin: 0;
+ padding: 0;
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+
+/* Tooltip : arrow style */
+
+.tooltip-xul-wrapper .tooltip-container {
+ /* When displayed in a XUL panel the drop shadow would be abruptly cut by the panel */
+ filter: none;
+}
+
+.tooltip-container[type="arrow"] > .tooltip-panel {
+ position: relative;
+ 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;
+ flex-shrink: 0;
+}
+
+/* In RTL locales, only use RTL on the tooltip content, keep LTR for positioning */
+.tooltip-container:-moz-locale-dir(rtl) {
+ direction: ltr;
+}
+
+.tooltip-panel:-moz-locale-dir(rtl) {
+ direction: rtl;
+}
+
+.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;
+ pointer-events: all;
+}
+
+.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: 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: 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 {
+ direction: ltr;
+ 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;
+ /* Makes the file name truncated (and ellipsis shown) on the left side */
+ direction: rtl;
+ text-align: right;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+/* Enforce LTR direction for the file name - fixes bug 1290056 */
+.stack-frame-source-name-inner {
+ direction: ltr;
+ unicode-bidi: embed;
+}
+
+.stack-frame-line {
+ color: var(--theme-highlight-orange);
+}
+
+/* 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;
+}
+
+#searchbox-panel-listbox .autocomplete-item > .initial-value {
+ max-width: 130px;
+ margin-left: 15px;
+}
+
+#searchbox-panel-listbox .autocomplete-item > .autocomplete-value {
+ max-width: 150px;
+}
--theme-tab-toolbar-background: #402800;
--theme-toolbar-background: #000000;
--theme-button-background: #C09070;
+ --theme-button-color: #000000;
--theme-hover-background: #FFCF00;
--theme-hover-color: #000000;
--theme-active-background: #FFCF00;
<use id="check" xlink:href="#check-shape"/>
<use id="check-inverted" xlink:href="#check-shape"/>
<use id="check-native" xlink:href="#check-shape"/>
+ <use id="check-hover" xlink:href="#check-shape"/>
+ <use id="check-disabled" xlink:href="#check-shape"/>
</svg>
}
/* Create a box to style as the checkbox */
-html|input[type="checkbox"] + html|label:before {
+html|input[type="checkbox"] + html|label::before {
display: inline-block;
content: "";
vertical-align: middle;
}
*/
/* xul|*.checkbox-check, */
-html|input[type="checkbox"] + html|label:before {
+html|input[type="checkbox"] + html|label::before {
-moz-appearance: none;
width: 23px;
height: 23px;
}
/* xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, */
-html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
+html|input[type="checkbox"]:not(:disabled) + html|label:hover::before {
border-color: var(--in-content-border-focus);
}
html|input[type="checkbox"]:not(:disabled) + html|label:hover {
linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
}
*/
-html|input[type="checkbox"]:checked + html|label:before {
+html|input[type="checkbox"]:checked + html|label::before {
background-image: url("chrome://global/skin/in-content/check.svg#check");
}
/*xul|checkbox[checked][disabled="true"] > xul|*.checkbox-check,*/
-html|input[type="checkbox"]:checked:disabled + html|label:before {
+html|input[type="checkbox"]:checked:disabled + html|label::before {
background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
}
-html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
+html|input[type="checkbox"]:checked:not(:disabled) + html|label:hover::before {
background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
}
-html|input[type="checkbox"]:disabled + html|label:before {
+html|input[type="checkbox"]:disabled + html|label::before {
border-color: var(--in-content-border-disabled);
}
html|input[type="checkbox"]:disabled + html|label {
--panel-arrowcontent-padding: 6px;
--panel-arrowcontent-background: #000000;
--panel-arrowcontent-color: #FF9F00;
- --panel-arrowcontent-border: 1px solid #FF9F00;
+ --panel-arrowcontent-border-color: #FF9F00;
}
/* ::::: menupopup ::::: */
color: var(--panel-arrowcontent-color);
background: var(--panel-arrowcontent-background);
background-clip: padding-box;
- border: var(--panel-arrowcontent-border);
+ border: 1px solid var(--panel-arrowcontent-border-color);
margin: 0px;
}
projects / themes.git / commitdiff
