Source code
Revision control
Copy as Markdown
Other Tools
/* 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
/* Main container: Displays the filters and presets in 2 columns */
#filter-container {
width: 510px;
height: 200px;
display: flex;
position: relative;
padding: 5px;
box-sizing: border-box;
/* when opened in a xul:panel, a gray color is applied to text */
color: var(--theme-body-color);
}
#filter-container.dragging {
user-select: none;
}
#filter-container .filters-list,
#filter-container .presets-list {
display: flex;
flex-direction: column;
box-sizing: border-box;
}
#filter-container .filters-list {
/* Allow the filters list to take the full width when the presets list is
hidden */
flex-grow: 1;
padding: 0 6px;
}
#filter-container .presets-list {
/* Make sure that when the presets list is shown, it has a fixed width */
width: 200px;
padding-left: 6px;
transition: width .1s;
flex-shrink: 0;
border-left: 1px solid var(--theme-splitter-color);
}
#filter-container:not(.show-presets) .presets-list {
width: 0;
border-left: none;
padding-left: 0;
/* To hide also element's children, not on only the element */
overflow: hidden;
}
#filter-container.show-presets .filters-list {
width: 300px;
}
/* The list of filters and list of presets should push their footers to the
bottom, so they can take as much space as there is */
#filter-container #filters,
#filter-container #presets {
flex-grow: 1;
/* Avoid pushing below the tooltip's area */
overflow-y: auto;
}
/* The filters and presets list both have footers displayed at the bottom.
These footers have some input (taking up as much space as possible) and an
add button next */
#filter-container .footer {
display: flex;
margin: 10px 3px;
align-items: center;
}
#filter-container .footer :not(button) {
flex-grow: 1;
margin-right: 3px;
}
/* Styles for 1 filter function item */
#filter-container .filter,
#filter-container .filter-name,
#filter-container .filter-value {
display: flex;
align-items: center;
}
#filter-container .filter {
margin: 5px 0;
}
#filter-container .filter-name {
width: 120px;
margin-right: 10px;
}
#filter-container .filter-name label {
user-select: none;
flex-grow: 1;
}
#filter-container .filter-name label.devtools-draglabel {
cursor: ew-resize;
}
/* drag/drop handle */
#filter-container .filter-name i {
width: 10px;
height: 10px;
margin-right: 10px;
cursor: grab;
background: linear-gradient(to bottom,
currentColor 0,
currentcolor 1px,
transparent 1px,
transparent 2px);
background-repeat: repeat-y;
background-size: auto 4px;
background-position: 0 1px;
}
#filter-container .filter-value {
min-width: 150px;
margin-right: 10px;
flex: 1;
}
#filter-container .filter-value input {
flex-grow: 1;
}
/* Fix the size of inputs */
/* Especially needed on Linux where input are bigger */
#filter-container input {
width: 8em;
}
#filter-container .preset {
display: flex;
margin-bottom: 10px;
cursor: pointer;
padding: 3px 5px;
flex-direction: row;
flex-wrap: wrap;
}
#filter-container .preset label,
#filter-container .preset span {
display: flex;
align-items: center;
}
#filter-container .preset label {
flex: 1 0;
cursor: pointer;
color: var(--theme-body-color);
}
#filter-container .preset:hover {
background: var(--theme-selection-background);
}
#filter-container .preset:hover label,
#filter-container .preset:hover span {
color: var(--theme-selection-color);
}
#filter-container .preset .remove-button {
order: 2;
}
#filter-container .preset span {
flex: 2 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
order: 3;
color: var(--theme-text-color-alt);
}
#filter-container .remove-button {
width: 16px;
height: 16px;
background: url(chrome://devtools/skin/images/close.svg);
background-size: cover;
font-size: 0;
border: none;
cursor: pointer;
}
#filter-container .hidden {
display: none !important;
}
#filter-container .dragging {
position: relative;
z-index: 10;
cursor: grab;
}
/* message shown when there's no filter specified */
#filter-container p {
text-align: center;
line-height: 20px;
}
#filter-container .add,
#toggle-presets {
background-size: cover;
border: none;
width: 16px;
height: 16px;
font-size: 0;
vertical-align: middle;
cursor: pointer;
margin: 0 5px;
}
#filter-container .add {
background: url(chrome://devtools/skin/images/add.svg);
}
#toggle-presets {
background: url(chrome://devtools/skin/images/pseudo-class.svg);
}
#filter-container .add,
#filter-container .remove-button,
#toggle-presets {
-moz-context-properties: fill;
fill: var(--theme-icon-color);
}
.show-presets #toggle-presets {
fill: var(--theme-icon-checked-color);
}