mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-25 11:15:34 +00:00
93aa558934
This changeset is the bulk of the changes. It should contain most of the minimum necessary changes to have everything working correctly. Differential Revision: https://phabricator.services.mozilla.com/D43119 --HG-- rename : devtools/client/performance-new/popup/popup.html => devtools/client/performance-new/popup/popup.xhtml extra : moz-landing-system : lando
332 lines
6.0 KiB
CSS
332 lines
6.0 KiB
CSS
/* 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/. */
|
|
|
|
.perf {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.perf-popup {
|
|
padding: 7px 16px;
|
|
}
|
|
|
|
.perf-devtools {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
|
|
.perf-button-image {
|
|
vertical-align: text-top;
|
|
padding-inline-end: 4px;
|
|
}
|
|
|
|
.perf-button-container {
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.perf-devtools .perf-button-container {
|
|
margin-top: 65px;
|
|
}
|
|
|
|
.perf-additional-message {
|
|
margin: 10px;
|
|
}
|
|
|
|
.perf > * {
|
|
max-width: 440px;
|
|
}
|
|
|
|
.perf-description {
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.perf-external-link {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
color: var(--blue-60);
|
|
text-decoration: underline;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Settings */
|
|
|
|
.perf-settings {
|
|
width: 100%;
|
|
}
|
|
|
|
.perf-devtools .perf-settings {
|
|
margin: 50px 0 25px;
|
|
}
|
|
|
|
.perf-settings-title {
|
|
padding: 5px 10px;
|
|
margin-bottom: 15px;
|
|
background-color: var(--grey-10);
|
|
border: var(--grey-30) 1px solid;
|
|
font-size: 11px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.perf-settings-row {
|
|
display: flex;
|
|
overflow: hidden;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.perf-settings-controls > .tree {
|
|
height: 100%;
|
|
}
|
|
|
|
.perf-settings-row.focused {
|
|
background-color: var(--theme-selection-background);
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
.perf-settings-label {
|
|
height: 30px;
|
|
min-width: 110px;
|
|
}
|
|
|
|
.perf-settings-value {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
.perf-settings-range-input {
|
|
flex: 1;
|
|
}
|
|
|
|
.perf-settings-range-input-el {
|
|
width: 100%;
|
|
}
|
|
|
|
.perf-settings-range-value {
|
|
min-width: 70px;
|
|
text-align: end;
|
|
}
|
|
|
|
.perf-settings-notches {
|
|
height: 14px;
|
|
margin: 5px 0 10px;
|
|
margin-inline-start: 0.7em;
|
|
display: flex;
|
|
}
|
|
|
|
.perf-settings-notch {
|
|
margin-right: 1px;
|
|
flex: 1;
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.perf-settings-notch-normal.perf-settings-notch-active {
|
|
border-color: hsl(90, 90%, 40%);
|
|
background-color: hsla(90, 90%, 40%, 0.5);
|
|
}
|
|
|
|
.perf-settings-notch-warning.perf-settings-notch-active {
|
|
border-color: hsl(45, 100%, 49%);
|
|
background-color: hsla(45, 100%, 49%, 0.5);
|
|
}
|
|
|
|
.perf-settings-notch-critical.perf-settings-notch-active {
|
|
border-color: hsl(0, 90%, 40%);
|
|
background-color: hsla(0, 90%, 40%, 0.5);
|
|
}
|
|
|
|
.perf-settings-text-input {
|
|
width: 100%;
|
|
padding: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.perf-settings-text-label {
|
|
flex: 1;
|
|
}
|
|
|
|
.perf-settings-details-contents {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.perf-settings-details-contents-slider {
|
|
padding: 10px;
|
|
margin: 0 0 18px;
|
|
border: var(--grey-20) 1px solid;
|
|
background-color: var(--grey-10);
|
|
opacity: 0;
|
|
transform: translateY(-100px);
|
|
transition-duration: 250ms;
|
|
transition-timing-function: cubic-bezier(0.07, 0.95, 0, 1);
|
|
transition-property: transform, opacity;
|
|
}
|
|
|
|
.perf-settings-details[open] .perf-settings-details-contents-slider {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.perf-settings-summary {
|
|
/* This is a little bit odd, but in order to match the heights of the elements and
|
|
* have a fairly large hit area for the summary element, make the element position
|
|
* relative, and adjust the position up by a few pixels. This maintains positioning,
|
|
* but also provides a larger hit area for the dropdown with the padding property. */
|
|
position: relative;
|
|
top: -4px;
|
|
padding: 8px 0;
|
|
cursor: default;
|
|
user-select: none;
|
|
}
|
|
|
|
.perf-settings-thread-columns {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
line-height: 2;
|
|
}
|
|
|
|
.perf-settings-thread-column {
|
|
flex: 1;
|
|
}
|
|
|
|
.perf-settings-checkbox-label {
|
|
display: block;
|
|
}
|
|
|
|
.perf-settings-feature-label {
|
|
margin: 16px 0;
|
|
display: flex;
|
|
}
|
|
|
|
.perf-settings-feature-label {
|
|
margin: 16px 0;
|
|
display: flex;
|
|
}
|
|
|
|
.perf-settings-checkbox {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.perf-settings-feature-name {
|
|
width: 150px;
|
|
color: var(--blue-60);
|
|
}
|
|
|
|
.perf-settings-feature-title {
|
|
flex: 1;
|
|
}
|
|
|
|
.perf-settings-feature-name {
|
|
width: 130px;
|
|
color: var(--blue-60);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.perf-settings-subtext {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.perf-settings-dir-list {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100px;
|
|
border: 1px solid var(--grey-30);
|
|
padding: 0;
|
|
overflow-y: auto;
|
|
background-color: white;
|
|
}
|
|
|
|
.pref-settings-dir-list-item {
|
|
padding: 3px 5px;
|
|
}
|
|
|
|
.pref-settings-dir-list-item::before {
|
|
content: url(chrome://devtools/skin/images/folder.svg);
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-inline-end: 4px;
|
|
vertical-align: -2px;
|
|
}
|
|
|
|
.perf-settings-dir-list-button-group {
|
|
padding: 4px 2px;
|
|
}
|
|
|
|
/* See https://design.firefox.com/photon/components/buttons.html for the spec */
|
|
.perf-photon-button {
|
|
--blue-50-a30: rgba(10, 132, 255, 0.3);
|
|
padding: 0 8px;
|
|
border: none;
|
|
margin: 0;
|
|
|
|
/* reset default styles */
|
|
background: none;
|
|
|
|
/* photon styles */
|
|
background-color: var(--grey-90-a10);
|
|
border-radius: 2px;
|
|
color: var(--grey-90);
|
|
font: inherit;
|
|
}
|
|
|
|
/* This is a Firefox-specific style because Firefox adds a focusring at a bad
|
|
* position. We're adding our own below. */
|
|
.perf-photon-button::-moz-focus-inner {
|
|
border: none;
|
|
}
|
|
|
|
.perf-photon-button:hover:not([disabled]) {
|
|
background-color: var(--grey-90-a20);
|
|
}
|
|
|
|
.perf-photon-button:hover:active:not([disabled]) {
|
|
background-color: var(--grey-90-a30);
|
|
}
|
|
|
|
.perf-photon-button-primary,
|
|
.perf-photon-button-default {
|
|
min-width: 132px;
|
|
height: 32px;
|
|
padding: 0 8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.perf-photon-button-primary {
|
|
background-color: var(--blue-60);
|
|
color: #fff;
|
|
}
|
|
|
|
.perf-photon-button-primary:hover:not([disabled]) {
|
|
background-color: var(--blue-70);
|
|
}
|
|
|
|
.perf-photon-button-primary:hover:active:not([disabled]) {
|
|
background-color: var(--blue-80);
|
|
}
|
|
|
|
.perf-photon-button[disabled] {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.perf-photon-button.perf-button {
|
|
margin: 10px;
|
|
}
|
|
|
|
button.perf-photon-button:focus {
|
|
box-shadow: 0 0 0 1px var(--blue-50) inset, 0 0 0 1px var(--blue-50),
|
|
0 0 0 4px var(--blue-50-a30);
|
|
outline: 0;
|
|
}
|
|
|
|
a.perf-photon-button:focus {
|
|
box-shadow: 0 0 0 2px var(--blue-50), 0 0 0 6px var(--blue-50-a30);
|
|
outline: 0;
|
|
}
|