Fix stylelint-config-standard violations
Bug: chromium:1083142
Change-Id: I5ea4cc5d0f83e52856383ba37a47472e33eb19a2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2204113
Commit-Queue: Mathias Bynens <[email protected]>
Commit-Queue: Changhao Han <[email protected]>
Auto-Submit: Mathias Bynens <[email protected]>
Reviewed-by: Changhao Han <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
diff --git a/front_end/accessibility/accessibilityNode.css b/front_end/accessibility/accessibilityNode.css
index 04b3394..17a408a 100644
--- a/front_end/accessibility/accessibilityNode.css
+++ b/front_end/accessibility/accessibilityNode.css
@@ -74,6 +74,7 @@
.ax-value-source-unused {
opacity: 1;
}
+
.tree-outline-disclosure:hover li.parent::before {
background-color: ButtonText;
}
diff --git a/front_end/accessibility/axBreadcrumbs.css b/front_end/accessibility/axBreadcrumbs.css
index d912039..88c31a0 100644
--- a/front_end/accessibility/axBreadcrumbs.css
+++ b/front_end/accessibility/axBreadcrumbs.css
@@ -5,150 +5,156 @@
*/
.ax-breadcrumbs-ignored-node {
- font-style: italic;
- opacity: 0.7;
+ font-style: italic;
+ opacity: 0.7;
}
.ax-breadcrumbs {
- padding-top: 1px;
- margin: 0;
- position: relative;
+ padding-top: 1px;
+ margin: 0;
+ position: relative;
}
.ax-breadcrumbs .ax-node {
- align-items: center;
- margin-top: 1px;
- min-height: 16px;
- overflow-x: hidden;
- padding-left: 4px;
- padding-right: 4px;
- padding-top: 1px;
- position: relative;
- text-overflow: ellipsis;
- white-space: nowrap;
+ align-items: center;
+ margin-top: 1px;
+ min-height: 16px;
+ overflow-x: hidden;
+ padding-left: 4px;
+ padding-right: 4px;
+ padding-top: 1px;
+ position: relative;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.ax-breadcrumbs .ax-node span {
- flex-shrink: 0;
- text-overflow: ellipsis;
- white-space: nowrap;
+ flex-shrink: 0;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.ax-breadcrumbs .ax-node .wrapper {
- padding-left: 12px;
- overflow-x: hidden;
+ padding-left: 12px;
+ overflow-x: hidden;
}
.ax-breadcrumbs .ax-node::before {
- -webkit-mask-image: url(Images/chevrons.svg);
- -webkit-mask-position: 0 0;
- -webkit-mask-size: 30px 10px;
- -webkit-mask-repeat: no-repeat;
- background-color: rgb(48, 57, 66);
- content: "";
- text-shadow: none;
- margin-right: -2px;
- height: 12px;
- width: 14px;
- position: absolute;
- display: inline-block;
+ -webkit-mask-image: url(Images/chevrons.svg);
+ -webkit-mask-position: 0 0;
+ -webkit-mask-size: 30px 10px;
+ -webkit-mask-repeat: no-repeat;
+ background-color: rgb(48, 57, 66);
+ content: "";
+ text-shadow: none;
+ margin-right: -2px;
+ height: 12px;
+ width: 14px;
+ position: absolute;
+ display: inline-block;
}
.ax-breadcrumbs .ax-node:not(.parent):not(.children-unloaded)::before {
- background-color: transparent;
+ background-color: transparent;
}
.ax-breadcrumbs .ax-node.parent::before {
- -webkit-mask-position: -20px 1px;
+ -webkit-mask-position: -20px 1px;
}
.ax-breadcrumbs .ax-node.children-unloaded::before {
- -webkit-mask-position: 0px 1px;
- width: 13px;
+ -webkit-mask-position: 0 1px;
+ width: 13px;
}
.ax-breadcrumbs .ax-node.no-dom-node {
- opacity: 0.7;
+ opacity: 0.7;
}
.ax-breadcrumbs .ax-node.children-unloaded::before {
- opacity: 0.4;
+ opacity: 0.4;
}
.ax-breadcrumbs .ax-node.preselected:not(.inspected) .selection,
.ax-breadcrumbs .ax-node.hovered:not(.inspected) .selection {
- display: block;
- left: 2px;
- right: 2px;
- background-color: var(--item-hover-color);
- border-radius: 5px;
+ display: block;
+ left: 2px;
+ right: 2px;
+ background-color: var(--item-hover-color);
+ border-radius: 5px;
}
.ax-breadcrumbs .ax-node.preselected:not(.inspected):focus .selection {
- border: 1px solid rgba(56, 121, 217, 0.4);
+ border: 1px solid rgba(56, 121, 217, 0.4);
}
.ax-breadcrumbs .ax-node .selection {
- display: none;
- z-index: -1;
+ display: none;
+ z-index: -1;
}
.ax-breadcrumbs .ax-node.inspected .selection {
- display: block;
- background-color: #ddd;
+ display: block;
+ background-color: #ddd;
}
.ax-breadcrumbs .ax-node.inspected:focus .selection {
- background-color: var(--selection-bg-color);
+ background-color: var(--selection-bg-color);
}
.ax-breadcrumbs .ax-node.parent.inspected:focus::before {
- background-color: white;
+ background-color: white;
}
.ax-breadcrumbs .ax-node.inspected:focus {
- color: white;
+ color: white;
}
.ax-breadcrumbs .ax-node.inspected:focus * {
- color: inherit;
+ color: inherit;
}
@media (forced-colors: active) {
- .ax-value-source-unused,
- .ax-breadcrumbs .ax-node.children-unloaded::before {
- opacity: 1;
- }
- .ax-breadcrumbs .ax-node.parent::before,
- .ax-breadcrumbs .ax-node.children-unloaded::before {
- forced-color-adjust: none;
- background-color: ButtonText;
- }
- .ax-breadcrumbs .ax-node.parent.inspected:focus::before,
- .ax-breadcrumbs .ax-node.parent.inspected::before {
- background-color: HighlightText;
- }
- .ax-breadcrumbs .ax-node.inspected .selection {
- forced-color-adjust: none;
- background: Highlight !important;
- }
- .ax-breadcrumbs .ax-node.inspected .wrapper {
- forced-color-adjust: none;
- color: HighlightText;
- }
- .ax-breadcrumbs .ax-node.preselected:not(.inspected) .selection,
- .ax-breadcrumbs .ax-node.hovered:not(.inspected) .selection,
- .ax-breadcrumbs .ax-node.hovered:not(.inspected) .wrapper,
- .ax-breadcrumbs .ax-node[data-keyboard-focus="true"]:focus:not(.inspected) .wrapper {
- forced-color-adjust: none;
- background-color: Highlight;
- color: HighlightText;
- border-radius: 0;
- }
- .ax-breadcrumbs .ax-node.parent.hovered:not(.inspected)::before,
- .ax-breadcrumbs .ax-node.parent[data-keyboard-focus="true"]:focus:not(.inspected)::before,
- .ax-breadcrumbs .ax-node.children-unloaded[data-keyboard-focus="true"]:focus:not(.inspected)::before,
- .ax-breadcrumbs .ax-node.hovered:not(.inspected).children-unloaded::before {
- background-color: HighlightText;
- }
+ .ax-value-source-unused,
+ .ax-breadcrumbs .ax-node.children-unloaded::before {
+ opacity: 1;
+ }
+
+ .ax-breadcrumbs .ax-node.parent::before,
+ .ax-breadcrumbs .ax-node.children-unloaded::before {
+ forced-color-adjust: none;
+ background-color: ButtonText;
+ }
+
+ .ax-breadcrumbs .ax-node.parent.inspected:focus::before,
+ .ax-breadcrumbs .ax-node.parent.inspected::before {
+ background-color: HighlightText;
+ }
+
+ .ax-breadcrumbs .ax-node.inspected .selection {
+ forced-color-adjust: none;
+ background: Highlight !important;
+ }
+
+ .ax-breadcrumbs .ax-node.inspected .wrapper {
+ forced-color-adjust: none;
+ color: HighlightText;
+ }
+
+ .ax-breadcrumbs .ax-node.preselected:not(.inspected) .selection,
+ .ax-breadcrumbs .ax-node.hovered:not(.inspected) .selection,
+ .ax-breadcrumbs .ax-node.hovered:not(.inspected) .wrapper,
+ .ax-breadcrumbs .ax-node[data-keyboard-focus="true"]:focus:not(.inspected) .wrapper {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ color: HighlightText;
+ border-radius: 0;
+ }
+
+ .ax-breadcrumbs .ax-node.parent.hovered:not(.inspected)::before,
+ .ax-breadcrumbs .ax-node.parent[data-keyboard-focus="true"]:focus:not(.inspected)::before,
+ .ax-breadcrumbs .ax-node.children-unloaded[data-keyboard-focus="true"]:focus:not(.inspected)::before,
+ .ax-breadcrumbs .ax-node.hovered:not(.inspected).children-unloaded::before {
+ background-color: HighlightText;
+ }
}
diff --git a/front_end/animation/animationScreenshotPopover.css b/front_end/animation/animationScreenshotPopover.css
index f769794..401b420 100644
--- a/front_end/animation/animationScreenshotPopover.css
+++ b/front_end/animation/animationScreenshotPopover.css
@@ -5,14 +5,14 @@
*/
img {
- max-height: 300px;
- border-radius: 2px;
+ max-height: 300px;
+ border-radius: 2px;
}
.animation-progress {
- position: absolute;
- height: 2px;
- bottom: 0;
- left: 0;
- background: var(--selection-bg-color);
+ position: absolute;
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ background: var(--selection-bg-color);
}
diff --git a/front_end/animation/animationTimeline.css b/front_end/animation/animationTimeline.css
index bb4d57f..8df0d8a 100644
--- a/front_end/animation/animationTimeline.css
+++ b/front_end/animation/animationTimeline.css
@@ -5,466 +5,478 @@
*/
:host {
- overflow: hidden;
+ overflow: hidden;
}
.animation-node-row {
- width: 100%;
- display: flex;
- border-bottom: 1px dashed hsla(0,0%,94%,1);
+ width: 100%;
+ display: flex;
+ border-bottom: 1px dashed hsla(0, 0%, 94%, 1);
}
.animation-node-description {
- width: 150px;
- padding-left: 8px;
- overflow: hidden;
- position: relative;
- transform-style: preserve-3d;
- border-bottom: 1px solid hsl(0, 0%, 90%);
- margin-bottom: -1px;
- background-color: hsl(0, 0%, 98%);
- display: flex;
- align-items: center;
- flex: 0 0 150px;
+ width: 150px;
+ padding-left: 8px;
+ overflow: hidden;
+ position: relative;
+ transform-style: preserve-3d;
+ border-bottom: 1px solid hsl(0, 0%, 90%);
+ margin-bottom: -1px;
+ background-color: hsl(0, 0%, 98%);
+ display: flex;
+ align-items: center;
+ flex: 0 0 150px;
}
.animation-node-description[data-keyboard-focus="true"]:focus {
- overflow: auto;
- box-shadow: 0px 0px 0px 2px var(--accent-color) inset;
+ overflow: auto;
+ box-shadow: 0 0 0 2px var(--accent-color) inset;
}
.animation-node-description > * {
- flex: 0 0 auto;
+ flex: 0 0 auto;
}
.animation-timeline-row {
- height: 32px;
- position: relative;
+ height: 32px;
+ position: relative;
}
path.animation-keyframe {
- fill-opacity: 0.2;
+ fill-opacity: 0.2;
}
svg.animation-ui g:first-child:hover path.animation-keyframe {
- fill-opacity: 0.4;
+ fill-opacity: 0.4;
}
.animation-node-selected path.animation-keyframe {
- fill-opacity: 0.4;
+ fill-opacity: 0.4;
}
line.animation-line {
- stroke-width: 2px;
- stroke-linecap: round;
- fill: none;
+ stroke-width: 2px;
+ stroke-linecap: round;
+ fill: none;
}
line.animation-delay-line {
- stroke-width: 2px;
- stroke-dasharray: 6, 4;
+ stroke-width: 2px;
+ stroke-dasharray: 6, 4;
}
line.animation-delay-line.animation-fill {
- stroke-dasharray: none;
+ stroke-dasharray: none;
}
-circle.animation-endpoint, circle.animation-keyframe-point {
- stroke-width: 2px;
- transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
- transform: scale(1);
- transform-box: fill-box;
- transform-origin: 50% 50%;
+circle.animation-endpoint,
+circle.animation-keyframe-point {
+ stroke-width: 2px;
+ transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
+ transform: scale(1);
+ transform-box: fill-box;
+ transform-origin: 50% 50%;
}
-.animation-ui circle.animation-endpoint:hover, .animation-ui circle.animation-keyframe-point:hover {
- transform: scale(1.2);
+.animation-ui circle.animation-endpoint:hover,
+.animation-ui circle.animation-keyframe-point:hover {
+ transform: scale(1.2);
}
-circle.animation-endpoint:active, circle.animation-keyframe-point:active {
- transform: scale(1);
+circle.animation-endpoint:active,
+circle.animation-keyframe-point:active {
+ transform: scale(1);
}
circle.animation-keyframe-point {
- fill: white;
+ fill: white;
}
.animation-name {
- position: absolute;
- top: 8px;
- color: #333;
- text-align: center;
- margin-left: -8px;
- white-space: nowrap;
+ position: absolute;
+ top: 8px;
+ color: #333;
+ text-align: center;
+ margin-left: -8px;
+ white-space: nowrap;
}
.animation-timeline-toolbar-container {
- display: flex;
- background-color: var(--toolbar-bg-color);
- border-bottom: var(--divider-border);
- flex: 0 0 auto;
+ display: flex;
+ background-color: var(--toolbar-bg-color);
+ border-bottom: var(--divider-border);
+ flex: 0 0 auto;
}
.animation-timeline-toolbar {
- display: inline-block;
+ display: inline-block;
}
.animation-timeline-header {
- height: 28px;
- border-bottom: 1px solid #ccc;
- flex-shrink: 0;
- display: flex;
+ height: 28px;
+ border-bottom: 1px solid #ccc;
+ flex-shrink: 0;
+ display: flex;
}
-.animation-timeline-header:after {
- content: "";
- height: calc(100% - 48px - 28px);
- position: absolute;
- width: 150px;
- left: 0;
- margin-top: 28px;
- background-color: hsl(0, 0%, 98%);
- z-index: 0;
- border-right: 1px solid hsl(0, 0%, 90%);
+.animation-timeline-header::after {
+ content: "";
+ height: calc(100% - 48px - 28px);
+ position: absolute;
+ width: 150px;
+ left: 0;
+ margin-top: 28px;
+ background-color: hsl(0, 0%, 98%);
+ z-index: 0;
+ border-right: 1px solid hsl(0, 0%, 90%);
}
.animation-controls {
- flex: 0 0 150px;
- position: relative;
- display: flex;
- justify-content: flex-end;
- padding-right: 8px;
+ flex: 0 0 150px;
+ position: relative;
+ display: flex;
+ justify-content: flex-end;
+ padding-right: 8px;
}
-.animation-timeline-current-time {flex: 0 0 auto;line-height: 28px;margin-right: 5px;}
+.animation-timeline-current-time { flex: 0 0 auto; line-height: 28px; margin-right: 5px; }
+
.animation-grid-header {
- flex: 1 0 auto;
- z-index: 1;
- cursor: text;
+ flex: 1 0 auto;
+ z-index: 1;
+ cursor: text;
}
-.animation-timeline-buffer, .animation-timeline-buffer-hint {
- height: 48px;
- flex: 0 0 auto;
- border-bottom: 1px solid #ccc;
- display: flex;
- padding: 0 2px;
+.animation-timeline-buffer,
+.animation-timeline-buffer-hint {
+ height: 48px;
+ flex: 0 0 auto;
+ border-bottom: 1px solid #ccc;
+ display: flex;
+ padding: 0 2px;
}
-.animation-timeline-buffer:empty, .animation-timeline-buffer-hint {
- display: none;
+.animation-timeline-buffer:empty,
+.animation-timeline-buffer-hint {
+ display: none;
}
.animation-timeline-buffer:empty ~ .animation-timeline-buffer-hint {
- align-items: center;
- justify-content: center;
- font-size: 14px;
- z-index: 101;
- display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ z-index: 101;
+ display: flex;
}
.animation-time-overlay {
- background-color: black;
- opacity: 0.05;
- position: absolute;
- height: 100%;
- width: 100%;
- z-index: -1;
+ background-color: black;
+ opacity: 0.05;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ z-index: -1;
}
.animation-timeline-end > .animation-time-overlay {
- visibility: hidden;
+ visibility: hidden;
}
.animation-scrubber {
- opacity: 1;
- position: absolute;
- left: 150px;
- height: calc(100% - 103px);
- width: calc(100% - 150px);
- top: 103px;
- border-left: 1px solid hsla(4,90%,58%,1);
- z-index: 1;
+ opacity: 1;
+ position: absolute;
+ left: 150px;
+ height: calc(100% - 103px);
+ width: calc(100% - 150px);
+ top: 103px;
+ border-left: 1px solid hsla(4, 90%, 58%, 1);
+ z-index: 1;
}
.animation-scrubber-line {
- width: 11px;
- background: linear-gradient(to right, transparent 5px, hsla(4,90%,58%,1) 5px, hsla(4,90%,58%,1) 6px, transparent 6px);
- position: absolute;
- top: -28px;
- height: 28px;
- left: -6px;
- padding: 0 5px;
- z-index: 2;
+ width: 11px;
+ background: linear-gradient(to right, transparent 5px, hsla(4, 90%, 58%, 1) 5px, hsla(4, 90%, 58%, 1) 6px, transparent 6px);
+ position: absolute;
+ top: -28px;
+ height: 28px;
+ left: -6px;
+ padding: 0 5px;
+ z-index: 2;
}
.animation-scrubber-head {
- width: 7px;
- height: 7px;
- transform: rotate(45deg);
- background: red;
- position: absolute;
- left: 2px;
- top: 1px;
+ width: 7px;
+ height: 7px;
+ transform: rotate(45deg);
+ background: red;
+ position: absolute;
+ left: 2px;
+ top: 1px;
}
svg.animation-timeline-grid {
- position: absolute;
- left: 140px;
- top: 76px;
- z-index: 0;
+ position: absolute;
+ left: 140px;
+ top: 76px;
+ z-index: 0;
}
rect.animation-timeline-grid-line {
- fill: hsla(0,0%,93%,1);
+ fill: hsla(0, 0%, 93%, 1);
}
.animation-timeline-row > svg.animation-ui {
- position: absolute;
+ position: absolute;
}
.animation-node-timeline {
- flex-grow: 1;
+ flex-grow: 1;
}
.animation-node-description > div {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- max-height: 100%;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ max-height: 100%;
}
.animation-node-removed {
- -webkit-filter: saturate(0);
- cursor: not-allowed;
+ -webkit-filter: saturate(0);
+ cursor: not-allowed;
}
svg.animation-ui g:first-child {
- opacity: 1;
+ opacity: 1;
}
svg.animation-ui circle[data-keyboard-focus="true"],
svg.animation-ui path[data-keyboard-focus="true"] {
- outline: 2px solid -webkit-focus-ring-color;
+ outline: 2px solid -webkit-focus-ring-color;
}
.animation-tail-iterations {
- opacity: 0.5;
+ opacity: 0.5;
}
.animation-keyframe-step line {
- stroke-width: 2;
- stroke-opacity: 0.3;
+ stroke-width: 2;
+ stroke-opacity: 0.3;
}
text.animation-timeline-grid-label {
- font-size: 10px;
- fill: #5a5a5a;
- text-anchor: middle;
+ font-size: 10px;
+ fill: #5a5a5a;
+ text-anchor: middle;
}
-.animation-timeline-rows, .animation-timeline-rows-hint {
- flex-grow: 1;
- overflow-y: auto;
- z-index: 1;
- overflow-x: hidden;
+.animation-timeline-rows,
+.animation-timeline-rows-hint {
+ flex-grow: 1;
+ overflow-y: auto;
+ z-index: 1;
+ overflow-x: hidden;
}
.animation-timeline-rows-hint {
- display: none;
+ display: none;
}
.animation-timeline-buffer:not(:empty) ~ .animation-timeline-rows:empty {
- flex-grow: 0;
+ flex-grow: 0;
}
.animation-timeline-buffer:not(:empty) ~ .animation-timeline-rows:empty ~ .animation-timeline-rows-hint {
- font-size: 14px;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-left: 150px;
- padding: 10px;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 150px;
+ padding: 10px;
}
.toolbar.animation-controls-toolbar {
- flex: 0 0 auto;
+ flex: 0 0 auto;
}
.animation-node-row.animation-node-selected {
- background-color: hsla(216, 71%, 53%, 0.08);
+ background-color: hsla(216, 71%, 53%, 0.08);
}
.animation-node-selected > .animation-node-description {
- background-color: #EFF4FD;
+ background-color: #eff4fd;
}
.animation-buffer-preview {
- height: 40px;
- margin: 4px 2px;
- background-color: var(--toolbar-bg-color);
- border: 1px solid transparent;
- border-radius: 2px;
- flex: 1 1;
- padding: 4px;
- max-width: 100px;
- animation: newGroupAnim 200ms;
- position: relative;
+ height: 40px;
+ margin: 4px 2px;
+ background-color: var(--toolbar-bg-color);
+ border: 1px solid transparent;
+ border-radius: 2px;
+ flex: 1 1;
+ padding: 4px;
+ max-width: 100px;
+ animation: newGroupAnim 200ms;
+ position: relative;
}
.animation-buffer-preview-animation {
- width: 100%;
- height: 100%;
- border-radius: 2px 0 0 2px;
- position: absolute;
- top: 0;
- left: 0;
- background: hsla(219, 100%, 66%, 0.27);
- opacity: 0;
- border-right: 1px solid #A7A7A7;
- cursor: pointer;
+ width: 100%;
+ height: 100%;
+ border-radius: 2px 0 0 2px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: hsla(219, 100%, 66%, 0.27);
+ opacity: 0;
+ border-right: 1px solid #a7a7a7;
+ cursor: pointer;
}
.animation-buffer-preview[data-keyboard-focus="true"]:not(.selected):focus,
.animation-buffer-preview:not(.selected):hover {
- background-color: hsla(217,90%,92%,1);
+ background-color: hsla(217, 90%, 92%, 1);
}
.animation-buffer-preview[data-keyboard-focus="true"]:focus {
- outline: -webkit-focus-ring-color auto 5px;
+ outline: -webkit-focus-ring-color auto 5px;
}
.animation-buffer-preview.selected {
- background-color: var(--selection-bg-color);
+ background-color: var(--selection-bg-color);
}
.animation-paused {
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: hsla(0,0%,70%,0.5);
- display: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: hsla(0, 0%, 70%, 0.5);
+ display: none;
}
-.animation-paused:before, .animation-paused:after {
- content: "";
- background: hsl(0, 100%, 100%);
- width: 7px;
- height: 20px;
- border-radius: 2px;
- margin: 2px;
- border: 1px solid #ccc;
+.animation-paused::before,
+.animation-paused::after {
+ content: "";
+ background: hsl(0, 100%, 100%);
+ width: 7px;
+ height: 20px;
+ border-radius: 2px;
+ margin: 2px;
+ border: 1px solid #ccc;
}
.animation-buffer-preview.paused .animation-paused {
- display: flex;
+ display: flex;
}
.animation-buffer-preview.selected > svg > line {
- stroke: white !important;
+ stroke: white !important;
}
.animation-buffer-preview > svg > line {
- stroke-width: 1px;
+ stroke-width: 1px;
}
@keyframes newGroupAnim {
- from {
- -webkit-clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
- }
- to {
- -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
- }
+ from {
+ -webkit-clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
+ }
+
+ to {
+ -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
+ }
}
.animation-playback-rate-control {
- margin: 4px 0 4px 2px;
- display: flex;
- width: 120px;
+ margin: 4px 0 4px 2px;
+ display: flex;
+ width: 120px;
}
.animation-playback-rate-button:first-child {
- border-radius: 4px 0 0 4px;
+ border-radius: 4px 0 0 4px;
}
.animation-playback-rate-button:last-child {
- border-radius: 0 4px 4px 0;
+ border-radius: 0 4px 4px 0;
}
.animation-playback-rate-button {
- border: 1px solid #ccc;
- color: #000;
- display: inline-block;
- margin-right: -1px;
- padding: 1px 4px;
- background: white;
- flex: 1 0 auto;
- text-align: center;
- cursor: pointer;
+ border: 1px solid #ccc;
+ color: #000;
+ display: inline-block;
+ margin-right: -1px;
+ padding: 1px 4px;
+ background: white;
+ flex: 1 0 auto;
+ text-align: center;
+ cursor: pointer;
}
.animation-playback-rate-button[data-keyboard-focus="true"].selected:first-child:focus,
.animation-playback-rate-button[data-keyboard-focus="true"]:focus {
- background-color: var(--focus-bg-color);
+ background-color: var(--focus-bg-color);
}
.animation-playback-rate-button:not(.selected):hover {
- background: hsl(211, 100%, 95%);
+ background: hsl(211, 100%, 95%);
}
.animation-playback-rate-button.selected {
- color: hsl(0, 100%, 100%);
- background-color: var(--selection-bg-color);
- border-color: var(--selection-bg-color);
- z-index: 1;
+ color: hsl(0, 100%, 100%);
+ background-color: var(--selection-bg-color);
+ border-color: var(--selection-bg-color);
+ z-index: 1;
}
.animation-playback-rate-button.selected:first-child {
- color: var(--selection-bg-color);
- background-color: hsl(217, 89%, 100%);
+ color: var(--selection-bg-color);
+ background-color: hsl(217, 89%, 100%);
}
-.animation-remove-button, -theme-preserve {
- position: absolute;
- top: -3px;
- right: -3px;
- background: #7B7B7B;
- border-radius: 12px;
- height: 16px;
- width: 16px;
- align-items: center;
- font-size: 10px;
- justify-content: center;
- box-shadow: 0 1px 4px 0 rgb(185, 185, 185);
- z-index: 100;
- display: none;
- cursor: pointer;
- font-weight: 700;
- color: white;
+.animation-remove-button,
+-theme-preserve {
+ position: absolute;
+ top: -3px;
+ right: -3px;
+ background: #7b7b7b;
+ border-radius: 12px;
+ height: 16px;
+ width: 16px;
+ align-items: center;
+ font-size: 10px;
+ justify-content: center;
+ box-shadow: 0 1px 4px 0 rgb(185, 185, 185);
+ z-index: 100;
+ display: none;
+ cursor: pointer;
+ font-weight: 700;
+ color: white;
}
.animation-remove-button:hover {
- background: #585858;
+ background: #585858;
}
.animation-buffer-preview:hover .animation-remove-button {
- display: flex;
+ display: flex;
}
@media (forced-colors: active) {
- .animation-playback-rate-button[data-keyboard-focus="true"].selected:first-child:focus,
- .animation-playback-rate-button[data-keyboard-focus="true"]:focus,
- .animation-playback-rate-button.selected,
- .animation-playback-rate-button.selected:first-child {
- forced-color-adjust: none;
- color: HighlightText;
- background-color: Highlight;
- }
- .animation-node-description[data-keyboard-focus="true"]:focus {
- background-color: Canvas;
- forced-color-adjust: none;
- }
- .monospace {
- forced-color-adjust: auto;
- }
+ .animation-playback-rate-button[data-keyboard-focus="true"].selected:first-child:focus,
+ .animation-playback-rate-button[data-keyboard-focus="true"]:focus,
+ .animation-playback-rate-button.selected,
+ .animation-playback-rate-button.selected:first-child {
+ forced-color-adjust: none;
+ color: HighlightText;
+ background-color: Highlight;
+ }
+
+ .animation-node-description[data-keyboard-focus="true"]:focus {
+ background-color: canvas;
+ forced-color-adjust: none;
+ }
+
+ .monospace {
+ forced-color-adjust: auto;
+ }
}
diff --git a/front_end/browser_debugger/domBreakpointsSidebarPane.css b/front_end/browser_debugger/domBreakpointsSidebarPane.css
index d90e101..5fbdc53 100644
--- a/front_end/browser_debugger/domBreakpointsSidebarPane.css
+++ b/front_end/browser_debugger/domBreakpointsSidebarPane.css
@@ -5,48 +5,49 @@
*/
.breakpoint-list {
- padding-bottom: 3px;
+ padding-bottom: 3px;
}
.breakpoint-list .dom-breakpoint > div {
- overflow: hidden;
- text-overflow: ellipsis;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.breakpoint-entry {
- display: flex;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- padding: 2px 0;
+ display: flex;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ padding: 2px 0;
}
.breakpoint-entry[data-keyboard-focus="true"] {
- background-color: var(--focus-bg-color);
+ background-color: var(--focus-bg-color);
}
.breakpoint-list .breakpoint-entry:hover {
- background-color: #eee;
+ background-color: #eee;
}
.breakpoint-hit {
- background-color: rgb(255, 255, 194);
- border-right: 3px solid rgb(107, 97, 48);
+ background-color: rgb(255, 255, 194);
+ border-right: 3px solid rgb(107, 97, 48);
}
:host-context(.-theme-with-dark-background) .breakpoint-hit {
- background-color: hsl(46, 98%, 22%);
- color: #ccc;
+ background-color: hsl(46, 98%, 22%);
+ color: #ccc;
}
@media (forced-colors: active) {
- .breakpoint-list .breakpoint-entry:hover,
- .breakpoint-entry[data-keyboard-focus="true"] {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- .breakpoint-list .breakpoint-entry:hover *,
- .breakpoint-entry[data-keyboard-focus="true"] * {
- color: HighlightText;
- }
+ .breakpoint-list .breakpoint-entry:hover,
+ .breakpoint-entry[data-keyboard-focus="true"] {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ .breakpoint-list .breakpoint-entry:hover *,
+ .breakpoint-entry[data-keyboard-focus="true"] * {
+ color: HighlightText;
+ }
}
diff --git a/front_end/browser_debugger/eventListenerBreakpoints.css b/front_end/browser_debugger/eventListenerBreakpoints.css
index fb0e1fe..ec0a10a 100644
--- a/front_end/browser_debugger/eventListenerBreakpoints.css
+++ b/front_end/browser_debugger/eventListenerBreakpoints.css
@@ -5,49 +5,49 @@
*/
:host {
- margin: 0;
- padding: 2px 4px;
- min-height: 18px;
+ margin: 0;
+ padding: 2px 4px;
+ min-height: 18px;
}
.tree-outline {
- padding: 0;
+ padding: 0;
}
.tree-outline li {
- margin-left: 14px;
- user-select: text;
- cursor: default;
+ margin-left: 14px;
+ user-select: text;
+ cursor: default;
}
.tree-outline li.parent {
- margin-left: 1px;
+ margin-left: 1px;
}
.tree-outline li:not(.parent)::before {
- display: none;
+ display: none;
}
.breakpoint-hit {
- background-color: rgb(255, 255, 194);
+ background-color: rgb(255, 255, 194);
}
:host-context(.-theme-with-dark-background) .breakpoint-hit {
- background-color: hsl(46, 98%, 22%);
- color: #ccc;
+ background-color: hsl(46, 98%, 22%);
+ color: #ccc;
}
.breakpoint-hit .breakpoint-hit-marker {
- background-color: rgb(255, 255, 194);
- border-right: 3px solid rgb(107, 97, 48);
- height: 18px;
- left: 0;
- margin-left: -30px;
- position: absolute;
- right: -4px;
- z-index: -1;
+ background-color: rgb(255, 255, 194);
+ border-right: 3px solid rgb(107, 97, 48);
+ height: 18px;
+ left: 0;
+ margin-left: -30px;
+ position: absolute;
+ right: -4px;
+ z-index: -1;
}
:host-context(.-theme-with-dark-background) .breakpoint-hit .breakpoint-hit-marker {
- background-color: hsl(46, 98%, 22%);
+ background-color: hsl(46, 98%, 22%);
}
diff --git a/front_end/browser_debugger/xhrBreakpointsSidebarPane.css b/front_end/browser_debugger/xhrBreakpointsSidebarPane.css
index 665833e..ff2d5f2 100644
--- a/front_end/browser_debugger/xhrBreakpointsSidebarPane.css
+++ b/front_end/browser_debugger/xhrBreakpointsSidebarPane.css
@@ -5,65 +5,66 @@
*/
.breakpoint-list {
- padding-bottom: 3px;
+ padding-bottom: 3px;
}
.breakpoint-list .editing.being-edited {
- overflow: hidden;
- white-space: nowrap;
+ overflow: hidden;
+ white-space: nowrap;
}
.breakpoint-condition {
- display: block;
- margin-top: 4px;
- margin-bottom: 4px;
- margin-left: 23px;
- margin-right: 8px;
+ display: block;
+ margin-top: 4px;
+ margin-bottom: 4px;
+ margin-left: 23px;
+ margin-right: 8px;
}
.breakpoint-condition-input {
- display: block;
- margin-left: 0;
- margin-right: 0;
- outline: none !important;
- border: 1px solid rgb(66%, 66%, 66%);
+ display: block;
+ margin-left: 0;
+ margin-right: 0;
+ outline: none !important;
+ border: 1px solid rgb(66%, 66%, 66%);
}
.breakpoint-entry {
- white-space: nowrap;
- padding: 2px 0;
+ white-space: nowrap;
+ padding: 2px 0;
}
.breakpoint-list .breakpoint-entry:hover {
- background-color: #eee;
+ background-color: #eee;
}
.breakpoint-list .breakpoint-entry[data-keyboard-focus="true"] {
- background-color: var(--focus-bg-color);
+ background-color: var(--focus-bg-color);
}
.breakpoint-entry [is=dt-checkbox] {
- max-width: 100%;
+ max-width: 100%;
}
.breakpoint-hit {
- background-color: rgb(255, 255, 194);
- border-right: 3px solid rgb(107, 97, 48);
+ background-color: rgb(255, 255, 194);
+ border-right: 3px solid rgb(107, 97, 48);
}
:host-context(.-theme-with-dark-background) .breakpoint-hit {
- background-color: hsl(46, 98%, 22%);
- color: #ccc;
+ background-color: hsl(46, 98%, 22%);
+ color: #ccc;
}
@media (forced-colors: active) {
- .breakpoint-list .breakpoint-entry:hover,
- .breakpoint-list .breakpoint-entry[data-keyboard-focus="true"] {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- .breakpoint-list .breakpoint-entry:hover *,
- .breakpoint-list .breakpoint-entry[data-keyboard-focus="true"] * {
- color: HighlightText;
- }
+ .breakpoint-list .breakpoint-entry:hover,
+ .breakpoint-list .breakpoint-entry[data-keyboard-focus="true"] {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ .breakpoint-list .breakpoint-entry:hover *,
+ .breakpoint-list .breakpoint-entry[data-keyboard-focus="true"] * {
+ color: HighlightText;
+ }
}
diff --git a/front_end/changes/changesView.css b/front_end/changes/changesView.css
index 6250ab5..c026d67 100644
--- a/front_end/changes/changesView.css
+++ b/front_end/changes/changesView.css
@@ -3,76 +3,79 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
-[slot=insertion-point-main]{
- flex-direction: column;
- display: flex;
+
+[slot=insertion-point-main] {
+ flex-direction: column;
+ display: flex;
}
[slot=insertion-point-sidebar] {
- overflow: auto;
+ overflow: auto;
}
-.editor-container{
- flex: 1;
+.editor-container {
+ flex: 1;
}
:focus.selected {
- background-color: var(--selection-bg-color);
- color: #FFF;
+ background-color: var(--selection-bg-color);
+ color: #fff;
}
.CodeMirror-lines:not(:active) {
- cursor: default !important;
+ cursor: default !important;
}
.CodeMirror-line:hover {
- cursor: default !important;
- background-color: rgba(0,0,255,0.05);
+ cursor: default !important;
+ background-color: rgba(0, 0, 255, 0.05);
}
.CodeMirror .CodeMirror-linebackground.spacer {
- text-align: center;
- color: rgba(0, 0, 0, 0.5);
- background-color: rgba(0, 0, 255, 0.1);
+ text-align: center;
+ color: rgba(0, 0, 0, 0.5);
+ background-color: rgba(0, 0, 255, 0.1);
}
.CodeMirror .equal > span > span {
- opacity: .5;
+ opacity: 0.5;
}
.CodeMirror .CodeMirror-selectedtext:not(.CodeMirror-persist-highlight) {
- opacity: 1.0;
+ opacity: 1;
}
.CodeMirror .CodeMirror-linebackground.addition,
-theme-preserve,
.changes-diff-gutter-marker.addition {
- background-color: hsla(144, 55%, 49%, .2);
+ background-color: hsla(144, 55%, 49%, 0.2);
}
.CodeMirror .CodeMirror-linebackground.deletion,
-theme-preserve,
.changes-diff-gutter-marker.deletion {
- background-color: rgba(255, 0, 0, .2);
+ background-color: rgba(255, 0, 0, 0.2);
}
-.CodeMirror .addition .cm-inner-diff:not(.CodeMirror-selectedtext), -theme-preserve {
- background-color: hsla(144, 55%, 49%, .3);
+.CodeMirror .addition .cm-inner-diff:not(.CodeMirror-selectedtext),
+-theme-preserve {
+ background-color: hsla(144, 55%, 49%, 0.3);
}
-.CodeMirror .deletion .cm-inner-diff:not(.CodeMirror-selectedtext), -theme-preserve {
- background-color: rgba(255, 0, 0, .3);
+.CodeMirror .deletion .cm-inner-diff:not(.CodeMirror-selectedtext),
+-theme-preserve {
+ background-color: rgba(255, 0, 0, 0.3);
}
.changes-toolbar {
- background-color: var(--toolbar-bg-color);
- border-top: var(--divider-border);
+ background-color: var(--toolbar-bg-color);
+ border-top: var(--divider-border);
}
.changes-diff-gutter {
- width: 20px;
+ width: 20px;
}
.changes-diff-gutter-marker {
- text-align: center;
+ text-align: center;
}
diff --git a/front_end/color_picker/spectrum.css b/front_end/color_picker/spectrum.css
index fd80400..90e4404 100644
--- a/front_end/color_picker/spectrum.css
+++ b/front_end/color_picker/spectrum.css
@@ -1,57 +1,59 @@
/* https://github.com/bgrins/spectrum */
+
:host {
- width: 232px;
- height: 319px;
- user-select: none;
- overflow: hidden;
+ width: 232px;
+ height: 319px;
+ user-select: none;
+ overflow: hidden;
}
:selection {
- background-color: blue;
- color: white;
+ background-color: blue;
+ color: white;
}
.spectrum-color {
- position: relative;
- width: 232px;
- height: 124px;
- border-radius: 2px 2px 0 0;
- overflow: hidden;
- flex: none;
+ position: relative;
+ width: 232px;
+ height: 124px;
+ border-radius: 2px 2px 0 0;
+ overflow: hidden;
+ flex: none;
}
.spectrum-color:focus .spectrum-dragger {
- border: 1px solid var(--accent-color-hover);
+ border: 1px solid var(--accent-color-hover);
}
.spectrum-tools {
- position: relative;
- height: 111px;
- width: 100%;
- flex: none;
+ position: relative;
+ height: 111px;
+ width: 100%;
+ flex: none;
}
.spectrum-hue {
- top: 16px;
+ top: 16px;
}
.spectrum-alpha {
- top: 35px;
- background-image: url(Images/checker.png);
- background-size: 12px 11px;
+ top: 35px;
+ background-image: url(Images/checker.png);
+ background-size: 12px 11px;
}
.spectrum-alpha-background {
- height: 100%;
- border-radius: 2px;
+ height: 100%;
+ border-radius: 2px;
}
-.spectrum-hue, .spectrum-alpha {
- position: absolute;
- left: 86px;
- width: 130px;
- height: 11px;
- border-radius: 2px;
+.spectrum-hue,
+.spectrum-alpha {
+ position: absolute;
+ left: 86px;
+ width: 130px;
+ height: 11px;
+ border-radius: 2px;
}
.spectrum-hue[data-keyboard-focus="true"] .spectrum-slider,
@@ -64,280 +66,279 @@
.spectrum-dragger,
.spectrum-slider {
- user-select: none;
+ user-select: none;
}
.spectrum-sat,
.-theme-preserve {
- background-image: linear-gradient(to right, white, rgba(204, 154, 129, 0));
+ background-image: linear-gradient(to right, white, rgba(204, 154, 129, 0));
}
.spectrum-val,
.-theme-preserve {
- background-image: linear-gradient(to top, black, rgba(204, 154, 129, 0));
+ background-image: linear-gradient(to top, black, rgba(204, 154, 129, 0));
}
.spectrum-hue {
- background: linear-gradient(to left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+ background: linear-gradient(to left, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.spectrum-dragger {
- border-radius: 12px;
- height: 12px;
- width: 12px;
- border: 1px solid white;
- cursor: pointer;
- position: absolute;
- top: 0;
- left: 0;
- background: black;
- box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.24);
+ border-radius: 12px;
+ height: 12px;
+ width: 12px;
+ border: 1px solid white;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: black;
+ box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.24);
}
.spectrum-slider {
- position: absolute;
- top: -1px;
- cursor: pointer;
- width: 13px;
- height: 13px;
- border-radius: 13px;
- background-color: rgb(248, 248, 248);
- box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+ position: absolute;
+ top: -1px;
+ cursor: pointer;
+ width: 13px;
+ height: 13px;
+ border-radius: 13px;
+ background-color: rgb(248, 248, 248);
+ box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}
.spectrum-contrast-details {
- position: relative;
- background-color: white;
- width: 100%;
- height: 111px;
- top: 0;
- font-size: 13px;
- color: #333;
- border-top: var(--divider-border);
- line-height: initial;
- overflow: hidden;
- flex: none;
+ position: relative;
+ background-color: white;
+ width: 100%;
+ height: 111px;
+ top: 0;
+ font-size: 13px;
+ color: #333;
+ border-top: var(--divider-border);
+ line-height: initial;
+ overflow: hidden;
+ flex: none;
}
.spectrum-contrast-details {
- height: 78px;
- flex: none;
+ height: 78px;
+ flex: none;
}
.spectrum-contrast-details.collapsed {
- height: 36px;
- flex: none;
+ height: 36px;
+ flex: none;
}
.spectrum-contrast-details div.toolbar.expand {
- position: absolute;
- right: 6px;
- top: 6px;
- margin: 0;
+ position: absolute;
+ right: 6px;
+ top: 6px;
+ margin: 0;
}
.spectrum-contrast-details .toolbar-state-on [is=ui-icon] {
- background-color: rgb(110, 110, 110);
+ background-color: rgb(110, 110, 110);
}
.spectrum-contrast-details.visible {
- display: initial;
+ display: initial;
}
.spectrum-contrast-details div.container {
- margin: 10px;
+ margin: 10px;
}
.spectrum-contrast-details.collapsed .expanded-details {
- display: none;
+ display: none;
}
.spectrum-contrast-details .expanded-details {
- display: flex;
- margin: 12px 12px 0 4px;
+ display: flex;
+ margin: 12px 12px 0 4px;
}
.contrast-pass-fail {
- margin-left: 0.5em;
+ margin-left: 0.5em;
}
.spectrum-contrast-details .contrast-choose-bg-color,
.spectrum-contrast-details .contrast-thresholds {
- width: 145px;
+ width: 145px;
}
.contrast-choose-bg-color {
- margin: 8px 0 0 5px;
- font-style: italic;
+ margin: 8px 0 0 5px;
+ font-style: italic;
}
.contrast-link-label {
- cursor: pointer;
+ cursor: pointer;
}
.contrast-link-label:hover {
- text-decoration: underline;
+ text-decoration: underline;
}
.spectrum-contrast-details .background-color {
- position: absolute;
- flex: none;
- right: 12px;
+ position: absolute;
+ flex: none;
+ right: 12px;
}
.spectrum-contrast-details .spectrum-eye-dropper {
- top: 2px;
- right: 34px;
- position: absolute;
- left: auto;
+ top: 2px;
+ right: 34px;
+ position: absolute;
+ left: auto;
}
.contrast-details-value {
- color: #333;
- margin: 1px 5px;
- user-select: text;
+ color: #333;
+ margin: 1px 5px;
+ user-select: text;
}
.contrast-details-value [is=ui-icon] {
- display: none;
- margin-left: 5px;
- background-color: #333;
+ display: none;
+ margin-left: 5px;
+ background-color: #333;
}
[is=ui-icon].smallicon-no {
- background-color: red;
+ background-color: red;
}
.contrast-pass-fail span[is=ui-icon] {
- margin-left: 5px;
+ margin-left: 5px;
}
[is=ui-icon].smallicon-checkmark-square,
[is=ui-icon].smallicon-checkmark-behind {
- background-color: #00b06f;
+ background-color: #00b06f;
}
.spectrum-contrast-details .contrast-details-value.contrast-unknown {
- background-color: white;
- color: #333;
- width: 3em;
- text-align: center;
+ background-color: white;
+ color: #333;
+ width: 3em;
+ text-align: center;
}
.contrast-details-value .smallicon-checkmark-behind {
- margin-left: -6px;
+ margin-left: -6px;
}
.spectrum-contrast-details.contrast-fail .contrast-details-value .smallicon-no,
.contrast-details-value.contrast-aa .smallicon-checkmark-square,
.contrast-details-value.contrast-aaa .smallicon-checkmark-behind {
- display: inline-block;
+ display: inline-block;
}
-
.contrast-details-value .smallicon-no,
.contrast-details-value .smallicon-checkmark-square,
.contrast-details-value .smallicon-checkmark-behind {
- cursor: pointer;
+ cursor: pointer;
}
.swatch {
- width: 32px;
- height: 32px;
- margin: 0;
- position: absolute;
- top: 15px;
- left: 44px;
- background-image: url(Images/checker.png);
- border-radius: 16px;
+ width: 32px;
+ height: 32px;
+ margin: 0;
+ position: absolute;
+ top: 15px;
+ left: 44px;
+ background-image: url(Images/checker.png);
+ border-radius: 16px;
}
.swatch-inner,
.swatch-overlay {
- position: absolute;
- width: 100%;
- height: 100%;
- display: inline-block;
- border-radius: 16px;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ display: inline-block;
+ border-radius: 16px;
}
.swatch-inner-white {
- border: 1px solid #ddd;
+ border: 1px solid #ddd;
}
.swatch-overlay {
- cursor: pointer;
- opacity: 0;
- padding: 4px;
+ cursor: pointer;
+ opacity: 0;
+ padding: 4px;
}
.swatch-overlay:hover,
.swatch-overlay[data-keyboard-focus="true"]:focus {
- background-color: rgba(0, 0, 0, .3);
- opacity: 1;
+ background-color: rgba(0, 0, 0, 0.3);
+ opacity: 1;
}
.swatch-overlay:active {
- background-color: rgba(0, 0, 0, .5);
+ background-color: rgba(0, 0, 0, 0.5);
}
[is=ui-icon].icon-mask.copy-color-icon {
- background-color: white;
+ background-color: white;
}
.spectrum-text {
- position: absolute;
- top: 60px;
- left: 16px;
+ position: absolute;
+ top: 60px;
+ left: 16px;
}
.spectrum-text-value {
- display: inline-block;
- width: 40px;
- overflow: hidden;
- text-align: center;
- margin-right: 6px;
- line-height: 20px;
- padding: 0;
- color: #333;
- white-space: nowrap;
- box-shadow: var(--focus-ring-inactive-shadow);
+ display: inline-block;
+ width: 40px;
+ overflow: hidden;
+ text-align: center;
+ margin-right: 6px;
+ line-height: 20px;
+ padding: 0;
+ color: #333;
+ white-space: nowrap;
+ box-shadow: var(--focus-ring-inactive-shadow);
}
.spectrum-text-label {
- letter-spacing: 39.5px;
- margin-top: 8px;
- display: block;
- color: #969696;
- margin-left: 16px;
- width: 174px;
+ letter-spacing: 39.5px;
+ margin-top: 8px;
+ display: block;
+ color: #969696;
+ margin-left: 16px;
+ width: 174px;
}
.spectrum-text-hex > .spectrum-text-value {
- width: 178px;
+ width: 178px;
}
.spectrum-text-hex > .spectrum-text-label {
- letter-spacing: normal;
- margin-left: 0px;
- text-align: center;
+ letter-spacing: normal;
+ margin-left: 0;
+ text-align: center;
}
.spectrum-switcher {
- border-radius: 2px;
- height: 20px;
- width: 20px;
- padding: 2px;
+ border-radius: 2px;
+ height: 20px;
+ width: 20px;
+ padding: 2px;
}
.spectrum-display-switcher {
- top: 72px;
- position: absolute;
- right: 10px;
+ top: 72px;
+ position: absolute;
+ right: 10px;
}
.spectrum-switcher:hover {
- background-color: #DDDDDD;
+ background-color: #ddd;
}
.spectrum-switcher[data-keyboard-focus="true"]:focus {
@@ -345,98 +346,98 @@
}
.spectrum-eye-dropper {
- width: 32px;
- height: 24px;
- position: relative;
- left: 8px;
- top: 17px;
- cursor: pointer;
+ width: 32px;
+ height: 24px;
+ position: relative;
+ left: 8px;
+ top: 17px;
+ cursor: pointer;
}
.spectrum-palette-container {
- border-top: var(--divider-border);
- position: relative;
- width: 100%;
- padding: 6px 24px 6px 6px;
- display: flex;
- flex-wrap: wrap;
+ border-top: var(--divider-border);
+ position: relative;
+ width: 100%;
+ padding: 6px 24px 6px 6px;
+ display: flex;
+ flex-wrap: wrap;
}
.spectrum-palette {
- display: flex;
- flex-wrap: wrap;
- width: 198px;
+ display: flex;
+ flex-wrap: wrap;
+ width: 198px;
}
.spectrum-palette-color {
- width: 12px;
- height: 12px;
- flex: 0 0 12px;
- border-radius: 2px;
- margin: 6px;
- cursor: pointer;
- position: relative;
- border: 1px solid rgba(0, 0, 0, 0.1);
- background-position: -1px !important;
- z-index: 14;
+ width: 12px;
+ height: 12px;
+ flex: 0 0 12px;
+ border-radius: 2px;
+ margin: 6px;
+ cursor: pointer;
+ position: relative;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ background-position: -1px !important;
+ z-index: 14;
}
.spectrum-palette-color:hover:not(.spectrum-shades-shown) > .spectrum-palette-color-shadow,
.spectrum-palette-color:focus:not(.spectrum-shades-shown) > .spectrum-palette-color-shadow {
- opacity: 0.2;
+ opacity: 0.2;
}
.spectrum-palette-color:hover:not(.spectrum-shades-shown) > .spectrum-palette-color-shadow:first-child,
.spectrum-palette-color:focus:not(.spectrum-shades-shown) > .spectrum-palette-color-shadow:first-child {
- opacity: 0.6;
- top: -3px;
- left: 1px;
+ opacity: 0.6;
+ top: -3px;
+ left: 1px;
}
.spectrum-palette-color-shadow {
- position: absolute;
- opacity: 0;
- margin: 0;
- top: -5px;
- left: 3px;
+ position: absolute;
+ opacity: 0;
+ margin: 0;
+ top: -5px;
+ left: 3px;
}
.palette-color-shades {
- position: absolute;
- background-color: white;
- height: 228px;
- width: 28px;
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
- z-index: 14;
- border-radius: 2px;
- transform-origin: 0px 228px;
- margin-top: 16px;
- margin-left: -8px;
+ position: absolute;
+ background-color: white;
+ height: 228px;
+ width: 28px;
+ box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
+ z-index: 14;
+ border-radius: 2px;
+ transform-origin: 0 228px;
+ margin-top: 16px;
+ margin-left: -8px;
}
.spectrum-palette > .spectrum-palette-color.spectrum-shades-shown {
- z-index: 15;
+ z-index: 15;
}
.palette-color-shades > .spectrum-palette-color {
- margin: 8px 0 0 0;
- margin-left: 8px;
- width: 12px;
+ margin: 8px 0 0 0;
+ margin-left: 8px;
+ width: 12px;
}
.spectrum-palette > .spectrum-palette-color {
- transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
- will-change: transform;
- z-index: 13;
+ transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
+ will-change: transform;
+ z-index: 13;
}
.spectrum-palette > .spectrum-palette-color.empty-color {
- border-color: transparent;
+ border-color: transparent;
}
.spectrum-palette > .spectrum-palette-color:not(.empty-color):not(.has-material-shades):hover,
.palette-color-shades > .spectrum-palette-color:not(.empty-color):hover {
- transform: scale(1.15);
+ transform: scale(1.15);
}
.spectrum-palette-color:not(.has-material-shades):focus {
@@ -445,210 +446,219 @@
}
.add-color-toolbar {
- margin-left: -3px;
- margin-top: -1px;
+ margin-left: -3px;
+ margin-top: -1px;
}
.spectrum-palette-switcher {
- right: 10px;
- top: 0;
- margin-top: 9px;
- position: absolute;
+ right: 10px;
+ top: 0;
+ margin-top: 9px;
+ position: absolute;
}
.palette-panel {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 100%;
- display: flex;
- flex-direction: column;
- background-color: white;
- z-index: 14;
- transition: transform 200ms cubic-bezier(0, 0, 0.2, 1), visibility 0s 200ms;
- border-top: var(--divider-border);
- visibility: hidden;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 100%;
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+ z-index: 14;
+ transition: transform 200ms cubic-bezier(0, 0, 0.2, 1), visibility 0s 200ms;
+ border-top: var(--divider-border);
+ visibility: hidden;
}
.palette-panel-showing > .palette-panel {
- transform: translateY(calc(-100% + 104px));
- transition-delay: 0s;
- visibility: visible;
+ transform: translateY(calc(-100% + 104px));
+ transition-delay: 0s;
+ visibility: visible;
}
.palette-panel > div.toolbar {
- position: absolute;
- right: 6px;
- top: 6px;
+ position: absolute;
+ right: 6px;
+ top: 6px;
}
.palette-panel > div:not(.toolbar) {
- flex: 0 0 38px;
- border-bottom: var(--divider-border);
- padding: 12px;
- line-height: 14px;
- color: #333;
+ flex: 0 0 38px;
+ border-bottom: var(--divider-border);
+ padding: 12px;
+ line-height: 14px;
+ color: #333;
}
.palette-panel > div.palette-title {
- font-size: 14px;
- line-height: 16px;
- color: #333;
- flex-basis: 40px;
+ font-size: 14px;
+ line-height: 16px;
+ color: #333;
+ flex-basis: 40px;
}
div.palette-preview {
- display: flex;
- cursor: pointer;
+ display: flex;
+ cursor: pointer;
}
.palette-preview-title {
- flex: 0 0 84px;
+ flex: 0 0 84px;
}
.palette-preview > .spectrum-palette-color {
- margin-top: 1px;
+ margin-top: 1px;
}
.palette-preview[data-keyboard-focus="true"]:focus,
.palette-preview:hover {
- background-color: #eee;
+ background-color: #eee;
}
.spectrum-overlay {
- z-index: 13;
- visibility: hidden;
- background-color: hsla(0, 0%, 0%, 0.5);
- opacity: 0;
- transition: opacity 100ms cubic-bezier(0, 0, 0.2, 1), visibility 0s 100ms;
+ z-index: 13;
+ visibility: hidden;
+ background-color: hsla(0, 0%, 0%, 0.5);
+ opacity: 0;
+ transition: opacity 100ms cubic-bezier(0, 0, 0.2, 1), visibility 0s 100ms;
}
.palette-panel-showing > .spectrum-overlay {
- transition-delay: 0s;
- visibility: visible;
- opacity: 1;
+ transition-delay: 0s;
+ visibility: visible;
+ opacity: 1;
}
.spectrum-contrast-container {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
.spectrum-contrast-line,
:host-context(.-theme-with-dark-background) .spectrum-contrast-line {
- fill: none;
- stroke: white;
- opacity: 0.7;
- stroke-width: 1.5px;
+ fill: none;
+ stroke: white;
+ opacity: 0.7;
+ stroke-width: 1.5px;
}
.delete-color-toolbar {
- position: absolute;
- right: 0;
- top: 0;
- background-color: #EFEFEF;
- visibility: hidden;
- z-index: 3;
- width: 36px;
- display: flex;
- align-items: center;
- padding-left: 4px;
- bottom: 2px;
- border-bottom-right-radius: 2px;
+ position: absolute;
+ right: 0;
+ top: 0;
+ background-color: #efefef;
+ visibility: hidden;
+ z-index: 3;
+ width: 36px;
+ display: flex;
+ align-items: center;
+ padding-left: 4px;
+ bottom: 2px;
+ border-bottom-right-radius: 2px;
}
@keyframes showDeleteToolbar {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
}
.delete-color-toolbar.dragging {
- visibility: visible;
- animation: showDeleteToolbar 100ms 150ms cubic-bezier(0, 0, 0.2, 1) backwards;
+ visibility: visible;
+ animation: showDeleteToolbar 100ms 150ms cubic-bezier(0, 0, 0.2, 1) backwards;
}
.delete-color-toolbar-active {
- background-color: #ddd;
- color: white;
+ background-color: #ddd;
+ color: white;
}
.swatch.contrast {
- width: 30px;
- height: 30px;
- position: absolute;
- top: 0px;
- right: 0;
- left: auto;
- background-image: url(Images/checker.png);
- border-radius: 15px;
- display: flex;
- align-items: center;
- justify-content: center;
+ width: 30px;
+ height: 30px;
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: auto;
+ background-image: url(Images/checker.png);
+ border-radius: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.swatch.contrast .swatch-overlay {
- padding: 0;
+ padding: 0;
}
.background-color .text-preview {
- color: black;
- font-size: 16px;
- position: relative;
- padding-bottom: 2px;
+ color: black;
+ font-size: 16px;
+ position: relative;
+ padding-bottom: 2px;
}
.swatch.contrast [is=ui-icon] {
- margin: -2px;
+ margin: -2px;
}
.no-contrast-info-available {
- border-top: var(--divider-border);
- position: relative;
- width: 100%;
- padding: 10px;
- justify-content: center;
- display: flex;
- flex-wrap: wrap;
+ border-top: var(--divider-border);
+ position: relative;
+ width: 100%;
+ padding: 10px;
+ justify-content: center;
+ display: flex;
+ flex-wrap: wrap;
}
@media (forced-colors: active) {
- :host {
- border: 1px solid CanvasText !important;
- }
- .spectrum-color {
- forced-color-adjust: none;
- }
- :host-context(.-theme-with-dark-background) .spectrum-switcher {
- -webkit-filter: unset;
- }
- .spectrum-switcher:hover,
- .spectrum-switcher[data-keyboard-focus="true"]:focus {
- forced-color-adjust: none;
- background-color: Highlight !important;
- }
- .spectrum-switcher:hover svg,
- .spectrum-switcher[data-keyboard-focus="true"]:focus svg {
- fill: HighlightText;
- }
- .swatch {
- forced-color-adjust: none;
- }
- .swatch-inner,
- .swatch-overlay,
- .swatch-inner-white {
- border: 1px solid ButtonText;
- }
- .swatch-overlay:hover,
- .swatch-overlay[data-keyboard-focus="true"]:focus {
- background-color: Canvas !important;
- }
- .spectrum-slider {
- forced-color-adjust: none;
- background-color: ButtonText !important;
- box-shadow: 0 1px 4px 0 ButtonFace !important;
- }
+ :host {
+ border: 1px solid canvastext !important;
+ }
+
+ .spectrum-color {
+ forced-color-adjust: none;
+ }
+
+ :host-context(.-theme-with-dark-background) .spectrum-switcher {
+ -webkit-filter: unset;
+ }
+
+ .spectrum-switcher:hover,
+ .spectrum-switcher[data-keyboard-focus="true"]:focus {
+ forced-color-adjust: none;
+ background-color: Highlight !important;
+ }
+
+ .spectrum-switcher:hover svg,
+ .spectrum-switcher[data-keyboard-focus="true"]:focus svg {
+ fill: HighlightText;
+ }
+
+ .swatch {
+ forced-color-adjust: none;
+ }
+
+ .swatch-inner,
+ .swatch-overlay,
+ .swatch-inner-white {
+ border: 1px solid ButtonText;
+ }
+
+ .swatch-overlay:hover,
+ .swatch-overlay[data-keyboard-focus="true"]:focus {
+ background-color: canvas !important;
+ }
+
+ .spectrum-slider {
+ forced-color-adjust: none;
+ background-color: ButtonText !important;
+ box-shadow: 0 1px 4px 0 ButtonFace !important;
+ }
}
diff --git a/front_end/components/imagePreview.css b/front_end/components/imagePreview.css
index e56c014..5fd4e9e 100644
--- a/front_end/components/imagePreview.css
+++ b/front_end/components/imagePreview.css
@@ -5,20 +5,20 @@
*/
.image-preview-container {
- background: transparent;
- text-align: center;
- border-spacing: 0;
+ background: transparent;
+ text-align: center;
+ border-spacing: 0;
}
.image-preview-container img {
- margin: 2px auto;
- max-width: 100px;
- max-height: 100px;
- background-image: url(Images/checker.png);
- user-select: text;
- -webkit-user-drag: auto;
+ margin: 2px auto;
+ max-width: 100px;
+ max-height: 100px;
+ background-image: url(Images/checker.png);
+ user-select: text;
+ -webkit-user-drag: auto;
}
.image-container {
- padding: 0;
+ padding: 0;
}
diff --git a/front_end/components/jsUtils.css b/front_end/components/jsUtils.css
index ead5928..ffd33e4 100644
--- a/front_end/components/jsUtils.css
+++ b/front_end/components/jsUtils.css
@@ -9,37 +9,37 @@
}
.stack-preview-async-description {
- padding: 3px 0 1px;
- font-style: italic;
+ padding: 3px 0 1px;
+ font-style: italic;
}
.stack-preview-container .webkit-html-blackbox-link {
- opacity: 0.6;
+ opacity: 0.6;
}
.stack-preview-container > tr {
- height: 16px;
- line-height: 16px;
+ height: 16px;
+ line-height: 16px;
}
.stack-preview-container td {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.stack-preview-container .function-name {
- max-width: 80em;
+ max-width: 80em;
}
.stack-preview-container:not(.show-blackboxed) > tr.blackboxed {
- display: none;
+ display: none;
}
.stack-preview-container.show-blackboxed > tr.show-blackboxed-link {
- display: none;
+ display: none;
}
.stack-preview-container > tr.show-blackboxed-link {
- font-style: italic;
+ font-style: italic;
}
diff --git a/front_end/console/consoleContextSelector.css b/front_end/console/consoleContextSelector.css
index 7cf8740..97bf5e0 100644
--- a/front_end/console/consoleContextSelector.css
+++ b/front_end/console/consoleContextSelector.css
@@ -5,36 +5,36 @@
*/
:host {
- padding: 2px 1px 2px 2px;
- white-space: nowrap;
- display: flex;
- flex-direction: column;
- height: 36px;
- justify-content: center;
- overflow-y: auto;
+ padding: 2px 1px 2px 2px;
+ white-space: nowrap;
+ display: flex;
+ flex-direction: column;
+ height: 36px;
+ justify-content: center;
+ overflow-y: auto;
}
.title {
- overflow: hidden;
- text-overflow: ellipsis;
- flex-grow: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex-grow: 0;
}
.badge {
- pointer-events: none;
- margin-right: 4px;
- display: inline-block;
- height: 15px;
+ pointer-events: none;
+ margin-right: 4px;
+ display: inline-block;
+ height: 15px;
}
.subtitle {
- color: #999;
- margin-right: 3px;
- overflow: hidden;
- text-overflow: ellipsis;
- flex-grow: 0;
+ color: #999;
+ margin-right: 3px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex-grow: 0;
}
:host(.highlighted) .subtitle {
- color: inherit;
+ color: inherit;
}
diff --git a/front_end/console/consolePinPane.css b/front_end/console/consolePinPane.css
index 33b99f8..a982150 100644
--- a/front_end/console/consolePinPane.css
+++ b/front_end/console/consolePinPane.css
@@ -8,6 +8,7 @@
max-height: 200px;
overflow-y: auto;
background: var(--toolbar-bg-color);
+
--error-background-color: hsl(0, 100%, 97%);
--error-border-color: hsl(0, 100%, 92%);
--error-text-color: red;
diff --git a/front_end/console/consoleSidebar.css b/front_end/console/consoleSidebar.css
index 48efd72..474d281 100644
--- a/front_end/console/consoleSidebar.css
+++ b/front_end/console/consoleSidebar.css
@@ -5,72 +5,75 @@
*/
:host {
- overflow: auto;
- background-color: var(--toolbar-bg-color);
+ overflow: auto;
+ background-color: var(--toolbar-bg-color);
}
.tree-outline-disclosure {
- max-width: 100%;
- padding-left: 6px;
+ max-width: 100%;
+ padding-left: 6px;
}
.count {
- flex: none;
- margin: 0 8px;
+ flex: none;
+ margin: 0 8px;
}
[is=ui-icon] {
- margin: 0 5px;
+ margin: 0 5px;
}
[is=ui-icon].icon-mask {
- background-color: #555;
+ background-color: #555;
}
li {
- height: 24px;
+ height: 24px;
}
li .largeicon-navigator-file {
- background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
- margin: 0;
+ background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
+ margin: 0;
}
li .largeicon-navigator-folder {
- background: linear-gradient(45deg, hsl(210, 82%, 65%), hsl(210, 82%, 80%));
- margin: -3px -3px 0 -5px;
+ background: linear-gradient(45deg, hsl(210, 82%, 65%), hsl(210, 82%, 80%));
+ margin: -3px -3px 0 -5px;
}
.tree-element-title {
- flex-shrink: 100;
- flex-grow: 1;
- overflow: hidden;
- text-overflow: ellipsis;
+ flex-shrink: 100;
+ flex-grow: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.tree-outline li:hover:not(.selected) .selection {
- display: block;
- background-color: var(--item-hover-color);
+ display: block;
+ background-color: var(--item-hover-color);
}
@media (forced-colors: active) {
- [is=ui-icon].icon-mask {
- background-color: ButtonText;
- }
- .tree-outline li:hover:not(.selected) .selection {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- .tree-outline li:hover .tree-element-title,
- .tree-outline li.selected .tree-element-title,
- .tree-outline li:hover .count,
- .tree-outline li.selected .count {
- forced-color-adjust: none;
- color: HighlightText;
- }
- .tree-outline li:hover [is=ui-icon].icon-mask,
- .tree-outline li.selected [is=ui-icon].icon-mask,
- .tree-outline li.selected:focus .spritesheet-mediumicons:not(.icon-mask) {
- background-color: HighlightText !important;
- }
+ [is=ui-icon].icon-mask {
+ background-color: ButtonText;
+ }
+
+ .tree-outline li:hover:not(.selected) .selection {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ .tree-outline li:hover .tree-element-title,
+ .tree-outline li.selected .tree-element-title,
+ .tree-outline li:hover .count,
+ .tree-outline li.selected .count {
+ forced-color-adjust: none;
+ color: HighlightText;
+ }
+
+ .tree-outline li:hover [is=ui-icon].icon-mask,
+ .tree-outline li.selected [is=ui-icon].icon-mask,
+ .tree-outline li.selected:focus .spritesheet-mediumicons:not(.icon-mask) {
+ background-color: HighlightText !important;
+ }
}
diff --git a/front_end/console/consoleView.css b/front_end/console/consoleView.css
index e86f7cd..5ca503a 100644
--- a/front_end/console/consoleView.css
+++ b/front_end/console/consoleView.css
@@ -28,504 +28,512 @@
*/
.console-view {
- background-color: white;
- overflow: hidden;
- --message-border-color: rgb(240, 240, 240);
- --warning-border-color: hsl(50, 100%, 88%);
- --error-border-color: hsl(0, 100%, 92%);
- --error-text-color: red;
+ background-color: white;
+ overflow: hidden;
+
+ --message-border-color: rgb(240, 240, 240);
+ --warning-border-color: hsl(50, 100%, 88%);
+ --error-border-color: hsl(0, 100%, 92%);
+ --error-text-color: red;
}
.-theme-with-dark-background .console-view {
- --message-border-color: rgb(58, 58, 58);
- --warning-border-color: rgb(102, 85, 0);
- --error-border-color: rgb(92, 0, 0);
- --error-text-color: hsl(0, 100%, 75%);
+ --message-border-color: rgb(58, 58, 58);
+ --warning-border-color: rgb(102, 85, 0);
+ --error-border-color: rgb(92, 0, 0);
+ --error-text-color: hsl(0, 100%, 75%);
}
.console-toolbar-container {
- display: flex;
- flex: none;
+ display: flex;
+ flex: none;
}
.console-main-toolbar {
- flex: 1 1 auto;
+ flex: 1 1 auto;
}
.console-toolbar-container > .toolbar {
- background-color: var(--toolbar-bg-color);
- border-bottom: var(--divider-border);
+ background-color: var(--toolbar-bg-color);
+ border-bottom: var(--divider-border);
}
.console-view-wrapper {
- background-color: #eee;
+ background-color: #eee;
}
.console-view-fix-select-all {
- height: 0;
- overflow: hidden;
+ height: 0;
+ overflow: hidden;
}
.console-settings-pane {
- flex: none;
- background-color: var(--toolbar-bg-color);
- border-bottom: var(--divider-border);
+ flex: none;
+ background-color: var(--toolbar-bg-color);
+ border-bottom: var(--divider-border);
}
.console-settings-pane .toolbar {
- flex: 1 1;
+ flex: 1 1;
}
#console-messages {
- flex: 1 1;
- overflow-y: auto;
- word-wrap: break-word;
- user-select: text;
- transform: translateZ(0);
- overflow-anchor: none; /* Chrome-specific scroll-anchoring opt-out */
+ flex: 1 1;
+ overflow-y: auto;
+ word-wrap: break-word;
+ user-select: text;
+ transform: translateZ(0);
+ overflow-anchor: none; /* Chrome-specific scroll-anchoring opt-out */
}
#console-prompt {
- clear: right;
- position: relative;
- margin: 0 22px 0 20px;
+ clear: right;
+ position: relative;
+ margin: 0 22px 0 20px;
}
.console-prompt-editor-container {
- min-height: 21px;
+ min-height: 21px;
}
.console-message,
.console-user-command {
- clear: right;
- position: relative;
- padding: 3px 22px 1px 0;
- margin-left: 24px;
- min-height: 17px; /* Sync with ConsoleViewMessage.js */
- flex: auto;
- display: flex;
+ clear: right;
+ position: relative;
+ padding: 3px 22px 1px 0;
+ margin-left: 24px;
+ min-height: 17px; /* Sync with ConsoleViewMessage.js */
+ flex: auto;
+ display: flex;
}
.console-message > * {
- flex: auto;
+ flex: auto;
}
.console-timestamp {
- color: gray;
- user-select: none;
- flex: none;
- margin-right: 5px;
+ color: gray;
+ user-select: none;
+ flex: none;
+ margin-right: 5px;
}
-.message-level-icon, .command-result-icon {
- position: absolute;
- left: -17px;
- top: 4px;
- user-select: none;
+.message-level-icon,
+.command-result-icon {
+ position: absolute;
+ left: -17px;
+ top: 4px;
+ user-select: none;
}
.console-message-repeat-count {
- margin: 2px 0 0 10px;
- flex: none;
+ margin: 2px 0 0 10px;
+ flex: none;
}
.repeated-message {
- margin-left: 4px;
+ margin-left: 4px;
}
.repeated-message .message-level-icon {
- display: none;
+ display: none;
}
.repeated-message .console-message-stack-trace-toggle,
.repeated-message > .console-message-text {
- flex: 1;
+ flex: 1;
}
.console-error-level .repeated-message,
.console-warning-level .repeated-message,
.console-verbose-level .repeated-message,
.console-info-level .repeated-message {
- display: flex;
+ display: flex;
}
.console-info {
- color: rgb(128, 128, 128);
- font-style: italic;
- padding-bottom: 2px;
+ color: rgb(128, 128, 128);
+ font-style: italic;
+ padding-bottom: 2px;
}
.console-group .console-group > .console-group-messages {
- margin-left: 16px;
+ margin-left: 16px;
}
.console-group-title.console-from-api {
- font-weight: bold;
+ font-weight: bold;
}
.console-group-title .console-message {
- margin-left: 12px;
+ margin-left: 12px;
}
.expand-group-icon {
- user-select: none;
- flex: none;
- background-color: rgb(110, 110, 110);
- position: relative;
- left: 10px;
- top: 5px;
- margin-right: 2px;
+ user-select: none;
+ flex: none;
+ background-color: rgb(110, 110, 110);
+ position: relative;
+ left: 10px;
+ top: 5px;
+ margin-right: 2px;
}
.console-group-title .message-level-icon {
- display: none;
+ display: none;
}
.console-message-repeat-count .expand-group-icon {
- left: 2px;
- top: 2px;
- background-color: #fff;
- margin-right: 4px;
+ left: 2px;
+ top: 2px;
+ background-color: #fff;
+ margin-right: 4px;
}
.console-group {
- position: relative;
+ position: relative;
}
.console-message-wrapper {
- display: flex;
- border-top: 1px solid var(--message-border-color);
- border-bottom: 1px solid transparent;
+ display: flex;
+ border-top: 1px solid var(--message-border-color);
+ border-bottom: 1px solid transparent;
}
.console-message-wrapper:first-of-type {
- border-top-color: transparent;
+ border-top-color: transparent;
}
.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level):not(.console-warning-level) {
- border-top-width: 0px;
+ border-top-width: 0;
}
.console-message-wrapper.console-error-level,
.console-message-wrapper.console-error-level:not(:focus) + .console-message-wrapper:not(.console-warning-level):not(:focus) {
- border-top-color: var(--error-border-color);
+ border-top-color: var(--error-border-color);
}
.console-message-wrapper.console-warning-level,
.console-message-wrapper.console-warning-level:not(:focus) + .console-message-wrapper:not(.console-error-level):not(:focus) {
- border-top-color: var(--warning-border-color);
+ border-top-color: var(--warning-border-color);
}
.console-message-wrapper:last-of-type {
- border-bottom-color: var(--message-border-color);
+ border-bottom-color: var(--message-border-color);
}
.console-message-wrapper.console-error-level:last-of-type {
- border-bottom-color: var(--error-border-color);
+ border-bottom-color: var(--error-border-color);
}
.console-message-wrapper.console-warning-level:last-of-type {
- border-bottom-color: var(--warning-border-color);
+ border-bottom-color: var(--warning-border-color);
}
.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level):not(.console-warning-level):focus {
- border-top-width: 1px;
+ border-top-width: 1px;
}
.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level):not(.console-warning-level):focus .console-message {
- padding-top: 2px;
- min-height: 16px;
+ padding-top: 2px;
+ min-height: 16px;
}
.console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level):not(.console-warning-level):focus .command-result-icon {
- top: 3px;
+ top: 3px;
}
.console-message-wrapper:focus,
.console-message-wrapper:focus:last-of-type {
- border-top-color: hsl(214, 67%, 88%);
- border-bottom-color: hsl(214, 67%, 88%);
- background-color: hsl(214, 48%, 95%);
+ border-top-color: hsl(214, 67%, 88%);
+ border-bottom-color: hsl(214, 67%, 88%);
+ background-color: hsl(214, 48%, 95%);
}
.console-message-wrapper.console-error-level:focus,
.console-message-wrapper.console-error-level:focus:last-of-type {
- --error-text-color: rgb(200, 0, 0);
+ --error-text-color: rgb(200, 0, 0);
}
.-theme-with-dark-background .console-message-wrapper.console-error-level:focus,
.-theme-with-dark-background .console-message-wrapper.console-error-level:focus:last-of-type {
- --error-text-color: hsl(0, 100%, 75%);
+ --error-text-color: hsl(0, 100%, 75%);
}
.-theme-with-dark-background .console-message-wrapper:focus,
.-theme-with-dark-background .console-message-wrapper:focus:last-of-type {
- border-top-color: hsl(214, 47%, 48%);
- border-bottom-color: hsl(214, 47%, 48%);
- background-color: hsl(214, 19%, 20%);
+ border-top-color: hsl(214, 47%, 48%);
+ border-bottom-color: hsl(214, 47%, 48%);
+ background-color: hsl(214, 19%, 20%);
}
.console-message-wrapper:focus + .console-message-wrapper {
- border-top-color: transparent;
+ border-top-color: transparent;
}
.console-message-wrapper .nesting-level-marker {
- width: 14px;
- flex: 0 0 auto;
- border-right: 1px solid #a5a5a5;
- position: relative;
- margin-bottom: -1px;
- margin-top: -1px;
+ width: 14px;
+ flex: 0 0 auto;
+ border-right: 1px solid #a5a5a5;
+ position: relative;
+ margin-bottom: -1px;
+ margin-top: -1px;
}
.console-message-wrapper:last-child .nesting-level-marker::before,
.console-message-wrapper .nesting-level-marker.group-closed::before {
- content: "";
+ content: "";
}
.console-message-wrapper .nesting-level-marker::before {
- border-bottom: 1px solid #a5a5a5;
- position: absolute;
- top: 0;
- left: 0;
- margin-left: 100%;
- width: 3px;
- height: 100%;
- box-sizing: border-box;
+ border-bottom: 1px solid #a5a5a5;
+ position: absolute;
+ top: 0;
+ left: 0;
+ margin-left: 100%;
+ width: 3px;
+ height: 100%;
+ box-sizing: border-box;
}
.console-error-level {
- background-color: hsl(0, 100%, 97%);
+ background-color: hsl(0, 100%, 97%);
}
.-theme-with-dark-background .console-error-level {
- background-color: hsl(0, 100%, 8%);
+ background-color: hsl(0, 100%, 8%);
}
.console-warning-level {
- background-color: hsl(50, 100%, 95%);
+ background-color: hsl(50, 100%, 95%);
}
.-theme-with-dark-background .console-warning-level {
- background-color: hsl(50, 100%, 10%);
+ background-color: hsl(50, 100%, 10%);
}
.console-warning-level .console-message-text {
- color: hsl(39, 100%, 18%);
+ color: hsl(39, 100%, 18%);
}
.console-error-level .console-message-text,
.console-error-level .console-view-object-properties-section {
- color: var(--error-text-color) !important;
+ color: var(--error-text-color) !important;
}
.console-system-type.console-info-level {
- color: blue;
+ color: blue;
}
.-theme-with-dark-background .console-verbose-level:not(.console-warning-level) .console-message-text,
.-theme-with-dark-background .console-system-type.console-info-level {
- color: hsl(220, 100%, 65%) !important;
+ color: hsl(220, 100%, 65%) !important;
}
.console-message.console-warning-level {
- background-color: rgb(255, 250, 224);
+ background-color: rgb(255, 250, 224);
}
#console-messages .link {
- text-decoration: underline;
+ text-decoration: underline;
}
#console-messages .link,
#console-messages .devtools-link {
- color: rgb(33%, 33%, 33%);
- cursor: pointer;
- word-break: break-all;
+ color: rgb(33%, 33%, 33%);
+ cursor: pointer;
+ word-break: break-all;
}
#console-messages .link:hover,
#console-messages .devtools-link:hover {
- color: rgb(15%, 15%, 15%);
+ color: rgb(15%, 15%, 15%);
}
.console-group-messages .section {
- margin: 0 0 0 12px !important;
+ margin: 0 0 0 12px !important;
}
.console-group-messages .section > .header {
- padding: 0 8px 0 0;
- background-image: none;
- border: none;
- min-height: 0;
+ padding: 0 8px 0 0;
+ background-image: none;
+ border: none;
+ min-height: 0;
}
.console-group-messages .section > .header::before {
- margin-left: -12px;
+ margin-left: -12px;
}
.console-group-messages .section > .header .title {
- color: #222;
- font-weight: normal;
- line-height: 13px;
+ color: #222;
+ font-weight: normal;
+ line-height: 13px;
}
.console-group-messages .section .properties li .info {
- padding-top: 0;
- padding-bottom: 0;
- color: rgb(60%, 60%, 60%);
+ padding-top: 0;
+ padding-bottom: 0;
+ color: rgb(60%, 60%, 60%);
}
.console-object-preview {
- white-space: normal;
- word-wrap: break-word;
- font-style: italic;
+ white-space: normal;
+ word-wrap: break-word;
+ font-style: italic;
}
.console-object-preview .name {
- /* Follows .section .properties .name, .event-properties .name */
- color: rgb(136, 19, 145);
- flex-shrink: 0;
+ /* Follows .section .properties .name, .event-properties .name */
+ color: rgb(136, 19, 145);
+ flex-shrink: 0;
}
.console-message-text .object-value-string,
.console-message-text .object-value-regexp,
.console-message-text .object-value-symbol {
- white-space: pre-wrap;
- word-break: break-all;
+ white-space: pre-wrap;
+ word-break: break-all;
}
.console-message-formatted-table {
- clear: both;
+ clear: both;
}
.console-message .source-code {
- line-height: 1.2;
+ line-height: 1.2;
}
.console-message-anchor {
- float: right;
- text-align: right;
- max-width: 100%;
- margin-left: 4px;
+ float: right;
+ text-align: right;
+ max-width: 100%;
+ margin-left: 4px;
}
.console-message-badge {
- float: right;
- margin-left: 4px;
+ float: right;
+ margin-left: 4px;
}
.console-message-nowrap-below,
.console-message-nowrap-below div,
.console-message-nowrap-below span {
- white-space: nowrap !important;
+ white-space: nowrap !important;
}
.object-state-note {
- display: inline-block;
- width: 11px;
- height: 11px;
- color: white;
- text-align: center;
- border-radius: 3px;
- line-height: 13px;
- margin: 0 6px;
- font-size: 9px;
+ display: inline-block;
+ width: 11px;
+ height: 11px;
+ color: white;
+ text-align: center;
+ border-radius: 3px;
+ line-height: 13px;
+ margin: 0 6px;
+ font-size: 9px;
}
.-theme-with-dark-background .object-state-note {
- background-color: hsl(230, 100%, 80%);
+ background-color: hsl(230, 100%, 80%);
}
.info-note {
- background-color: rgb(179, 203, 247);
+ background-color: rgb(179, 203, 247);
}
.info-note::before {
- content: "i";
+ content: "i";
}
.console-view-object-properties-section:not(.expanded) .info-note {
- display: none;
+ display: none;
}
.console-view-object-properties-section {
- padding: 0px;
- position: relative;
- vertical-align: baseline;
- color: inherit;
- display: inline-block;
- overflow-wrap: break-word;
- max-width: 100%;
+ padding: 0;
+ position: relative;
+ vertical-align: baseline;
+ color: inherit;
+ display: inline-block;
+ overflow-wrap: break-word;
+ max-width: 100%;
}
.console-object {
- white-space: pre-wrap;
- word-break: break-all;
+ white-space: pre-wrap;
+ word-break: break-all;
}
.console-message-stack-trace-toggle {
- display: flex;
- flex-direction: row;
- align-items: flex-start;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
}
.console-message-stack-trace-wrapper {
- flex: 1 1 auto;
- display: flex;
- flex-direction: column;
- align-items: stretch;
+ flex: 1 1 auto;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
}
.console-message-stack-trace-wrapper > * {
- flex: none;
+ flex: none;
}
.console-message-expand-icon {
- margin-bottom: -2px;
+ margin-bottom: -2px;
}
.console-searchable-view {
- max-height: 100%;
+ max-height: 100%;
}
.console-view-pinpane {
- flex: none;
- max-height: 50%;
+ flex: none;
+ max-height: 50%;
}
@media (forced-colors: active) {
- .console-message-expand-icon,
- .console-warning-level [is=ui-icon].icon-mask.expand-group-icon {
- forced-color-adjust: none;
- background-color: ButtonText;
- }
- .console-message-wrapper:focus,
- .console-message-wrapper:focus:last-of-type {
- forced-color-adjust: none;
- background-color: Highlight;
- border-top-color: Highlight;
- border-bottom-color: Highlight;
- }
- .console-message-wrapper:focus *,
- .console-message-wrapper:focus:last-of-type *,
- .console-message-wrapper:focus .devtools-link,
- .console-message-wrapper:focus:last-of-type .devtools-link {
- color: HighlightText !important;
- }
- #console-messages .link[data-keyboard-focus="true"]:focus,
- #console-messages .devtools-link[data-keyboard-focus="true"]:focus {
- background: Highlight;
- color: HighlightText;
- }
- .console-message-wrapper:focus [is=ui-icon].icon-mask {
- background-color: HighlightText;
- }
- .console-message-wrapper.console-error-level:focus,
- .console-message-wrapper.console-error-level:focus:last-of-type {
- --error-text-color: HighlightText;
- }
- #console-messages .devtools-link,
- #console-messages .devtools-link:hover {
- color: LinkText;
- }
+ .console-message-expand-icon,
+ .console-warning-level [is=ui-icon].icon-mask.expand-group-icon {
+ forced-color-adjust: none;
+ background-color: ButtonText;
+ }
+
+ .console-message-wrapper:focus,
+ .console-message-wrapper:focus:last-of-type {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ border-top-color: Highlight;
+ border-bottom-color: Highlight;
+ }
+
+ .console-message-wrapper:focus *,
+ .console-message-wrapper:focus:last-of-type *,
+ .console-message-wrapper:focus .devtools-link,
+ .console-message-wrapper:focus:last-of-type .devtools-link {
+ color: HighlightText !important;
+ }
+
+ #console-messages .link[data-keyboard-focus="true"]:focus,
+ #console-messages .devtools-link[data-keyboard-focus="true"]:focus {
+ background: Highlight;
+ color: HighlightText;
+ }
+
+ .console-message-wrapper:focus [is=ui-icon].icon-mask {
+ background-color: HighlightText;
+ }
+
+ .console-message-wrapper.console-error-level:focus,
+ .console-message-wrapper.console-error-level:focus:last-of-type {
+ --error-text-color: HighlightText;
+ }
+
+ #console-messages .devtools-link,
+ #console-messages .devtools-link:hover {
+ color: linktext;
+ }
}
diff --git a/front_end/console_counters/errorWarningCounter.css b/front_end/console_counters/errorWarningCounter.css
index ee6de7a..522a5e2 100644
--- a/front_end/console_counters/errorWarningCounter.css
+++ b/front_end/console_counters/errorWarningCounter.css
@@ -5,19 +5,19 @@
*/
:host {
- cursor: pointer;
- padding: 0 2px;
- min-width: 26px;
+ cursor: pointer;
+ padding: 0 2px;
+ min-width: 26px;
}
:host:hover {
- color: #333;
+ color: #333;
}
.counter-item {
- margin-left: 6px;
+ margin-left: 6px;
}
.counter-item.counter-item-first {
- margin-left: 0;
+ margin-left: 0;
}
diff --git a/front_end/cookie_table/cookiesTable.css b/front_end/cookie_table/cookiesTable.css
index 8eb01cd..b6b357a 100644
--- a/front_end/cookie_table/cookiesTable.css
+++ b/front_end/cookie_table/cookiesTable.css
@@ -5,21 +5,21 @@
*/
.cookies-table .flagged-cookie-row {
- background-color: yellow;
+ background-color: yellow;
}
.cookies-table .cookie-warning-icon {
- margin-right: 4px;
+ margin-right: 4px;
}
.cookies-table td.flagged-cookie-attribute-cell .cookie-warning-icon {
- filter: grayscale();
+ filter: grayscale();
}
-.cookies-table tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(odd) {
- background-color: hsl(51, 85%, 80%);
+.cookies-table tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(odd) {
+ background-color: hsl(51, 85%, 80%);
}
-.cookies-table tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(even) {
- background-color: rgb(255, 240, 155);
+.cookies-table tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(even) {
+ background-color: rgb(255, 240, 155);
}
diff --git a/front_end/coverage/coverageListView.css b/front_end/coverage/coverageListView.css
index 2089272..6947c7c 100644
--- a/front_end/coverage/coverageListView.css
+++ b/front_end/coverage/coverageListView.css
@@ -44,11 +44,11 @@
}
.data-grid td .bar-unused-size {
- background-color: #EE442F;
+ background-color: #ee442f;
}
.data-grid td .bar-used-size {
- background-color: #63ACBE;
+ background-color: #63acbe;
}
.data-grid td .percent-value {
@@ -65,25 +65,32 @@
.data-grid td .bar-container {
forced-color-adjust: none;
}
+
.data-grid td .bar-unused-size {
background-color: ButtonText;
}
+
.data-grid td .bar-used-size {
background-color: ButtonFace;
}
+
.data-grid .selected td .bar {
border-top-color: HighlightText;
border-bottom-color: HighlightText;
}
+
.data-grid .selected td .bar:last-child {
border-right-color: HighlightText;
}
+
.data-grid .selected td .bar:first-child {
border-left-color: HighlightText;
}
+
.data-grid td .bar {
border-color: ButtonText;
}
+
.data-grid:focus tr.selected span.percent-value {
color: HighlightText;
}
diff --git a/front_end/coverage/coverageView.css b/front_end/coverage/coverageView.css
index 7efd15d..6fd7793 100644
--- a/front_end/coverage/coverageView.css
+++ b/front_end/coverage/coverageView.css
@@ -5,48 +5,48 @@
*/
:host {
- overflow: hidden;
+ overflow: hidden;
}
.coverage-toolbar-container {
- display: flex;
- border-bottom: 1px solid #ccc;
- flex: 0 0 auto;
+ display: flex;
+ border-bottom: 1px solid #ccc;
+ flex: 0 0 auto;
}
.coverage-toolbar {
- display: inline-block;
+ display: inline-block;
}
.coverage-toolbar-summary {
- background-color: #eee;
- border-top: 1px solid #ccc;
- padding-left: 5px;
- flex: 0 0 19px;
- display: flex;
- padding-right: 5px;
+ background-color: #eee;
+ border-top: 1px solid #ccc;
+ padding-left: 5px;
+ flex: 0 0 19px;
+ display: flex;
+ padding-right: 5px;
}
.coverage-toolbar-summary .coverage-message {
- padding-top: 2px;
- padding-left: 1ex;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
+ padding-top: 2px;
+ padding-left: 1ex;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
}
.coverage-results {
- overflow-y: auto;
- display: flex;
- flex: auto;
+ overflow-y: auto;
+ display: flex;
+ flex: auto;
}
.landing-page {
- justify-content: center;
- align-items: center;
- padding: 20px;
+ justify-content: center;
+ align-items: center;
+ padding: 20px;
}
.landing-page .message {
- white-space: pre-line;
+ white-space: pre-line;
}
diff --git a/front_end/css_overview/cssOverviewCompletedView.css b/front_end/css_overview/cssOverviewCompletedView.css
index d9f0327..5053f78 100644
--- a/front_end/css_overview/cssOverviewCompletedView.css
+++ b/front_end/css_overview/cssOverviewCompletedView.css
@@ -6,6 +6,7 @@
.overview-completed-view {
overflow: auto;
+
--overview-default-padding: 28px;
--overview-icon-padding: 32px;
}
@@ -65,6 +66,7 @@
}
/** Ensure links are rendered at the correct height */
+
.unused-rules-grid .monospace {
display: block;
height: 18px;
@@ -95,7 +97,7 @@
.results-section {
flex-shrink: 0;
- border-bottom: 1px solid #E6E6E6;
+ border-bottom: 1px solid #e6e6e6;
padding: var(--overview-default-padding) 0 var(--overview-default-padding) 0;
}
@@ -241,7 +243,7 @@
.overview-completed-view .unused-declarations button:focus .bar {
background-color: var(--accent-color-hover);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(66, 133, 244, 0.4);
- color: #FFF;
+ color: #fff;
}
.overview-completed-view .font-info .font-metric {
@@ -280,7 +282,7 @@
}
.overview-completed-view .font-family:nth-child(2n+1) {
- background: #FAFAFA;
+ background: #fafafa;
}
.overview-completed-view .font-family:first-of-type {
diff --git a/front_end/css_overview/cssOverviewSidebarPanel.css b/front_end/css_overview/cssOverviewSidebarPanel.css
index 45025dc..09a8396 100644
--- a/front_end/css_overview/cssOverviewSidebarPanel.css
+++ b/front_end/css_overview/cssOverviewSidebarPanel.css
@@ -7,7 +7,7 @@
.overview-sidebar-panel {
overflow: auto;
display: flex;
- background: #F3F3F3;
+ background: #f3f3f3;
}
.overview-sidebar-panel-item {
@@ -24,8 +24,8 @@
}
.overview-sidebar-panel-item.selected {
- background: #1A73E8;
- color: #FFFFFF;
+ background: #1a73e8;
+ color: #fff;
}
.overview-toolbar {
diff --git a/front_end/data_grid/dataGrid.css b/front_end/data_grid/dataGrid.css
index f61b648..f7ac5d2 100644
--- a/front_end/data_grid/dataGrid.css
+++ b/front_end/data_grid/dataGrid.css
@@ -1,321 +1,327 @@
.data-grid {
- position: relative;
- border: 1px solid rgb(204, 204, 204) !important;
- line-height: 120%;
+ position: relative;
+ border: 1px solid rgb(204, 204, 204) !important;
+ line-height: 120%;
}
.data-grid table {
- table-layout: fixed;
- border-spacing: 0;
- border-collapse: separate;
- height: 100%;
- width: 100%;
+ table-layout: fixed;
+ border-spacing: 0;
+ border-collapse: separate;
+ height: 100%;
+ width: 100%;
}
.data-grid .header-container,
.data-grid .data-container {
- position: absolute;
- left: 0;
- right: 0;
- overflow-x: hidden;
+ position: absolute;
+ left: 0;
+ right: 0;
+ overflow-x: hidden;
}
.data-grid .header-container {
- top: 0;
- height: 21px;
+ top: 0;
+ height: 21px;
}
.data-grid .data-container {
- top: 21px;
- bottom: 0;
- overflow-y: overlay;
- transform: translateZ(0);
+ top: 21px;
+ bottom: 0;
+ overflow-y: overlay;
+ transform: translateZ(0);
}
.data-grid .aria-live-label {
- width: 1px;
- height: 1px;
- overflow: hidden;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
}
.data-grid.inline .header-container,
.data-grid.inline .data-container {
- position: static;
+ position: static;
}
.data-grid.inline .corner {
- display: none;
+ display: none;
}
.platform-mac .data-grid .corner,
.data-grid.data-grid-fits-viewport .corner {
- display: none;
+ display: none;
}
.data-grid .corner {
- width: 14px;
- padding-right: 0;
- padding-left: 0;
- border-left: 0 none transparent !important;
+ width: 14px;
+ padding-right: 0;
+ padding-left: 0;
+ border-left: 0 none transparent !important;
}
.data-grid .top-filler-td,
.data-grid .bottom-filler-td {
- height: auto !important;
- padding: 0 !important;
+ height: auto !important;
+ padding: 0 !important;
}
.data-grid table.data {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- border-top: 0 none transparent;
- table-layout: fixed;
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ border-top: 0 none transparent;
+ table-layout: fixed;
}
.data-grid.inline table.data {
- position: static;
+ position: static;
}
.data-grid table.data tr {
- display: none;
- height: 20px;
+ display: none;
+ height: 20px;
}
.data-grid table.data tr.revealed {
- display: table-row;
+ display: table-row;
}
.striped-data-grid .revealed.data-grid-data-grid-node:nth-child(odd),
.striped-data-grid-starts-with-odd .revealed.data-grid-data-grid-node:nth-child(even) {
- background-color: hsl(214, 70%, 97%);
+ background-color: hsl(214, 70%, 97%);
}
.data-grid td,
.data-grid th {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- line-height: 18px;
- height: 18px;
- border-left: 1px solid #aaa;
- padding: 1px 4px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ line-height: 18px;
+ height: 18px;
+ border-left: 1px solid #aaa;
+ padding: 1px 4px;
}
.data-grid th:first-child,
.data-grid td:first-child {
- border-left: none !important;
+ border-left: none !important;
}
.data-grid td {
- vertical-align: top;
- user-select: text;
+ vertical-align: top;
+ user-select: text;
}
.data-grid th {
- text-align: left;
- background-color: var(--toolbar-bg-color);
- border-bottom: 1px solid #aaa;
- font-weight: normal;
- vertical-align: middle;
+ text-align: left;
+ background-color: var(--toolbar-bg-color);
+ border-bottom: 1px solid #aaa;
+ font-weight: normal;
+ vertical-align: middle;
}
.data-grid td > div,
.data-grid th > div {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
.data-grid td.editing > div {
- text-overflow: clip;
+ text-overflow: clip;
}
.data-grid .center {
- text-align: center;
+ text-align: center;
}
.data-grid .right {
- text-align: right;
+ text-align: right;
}
.data-grid th.sortable {
- position: relative;
+ position: relative;
}
.data-grid th.sortable:active::after {
- content: "";
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.15);
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.15);
}
.data-grid th .sort-order-icon-container {
- position: absolute;
- top: 1px;
- right: 0;
- bottom: 1px;
- display: flex;
- align-items: center;
+ position: absolute;
+ top: 1px;
+ right: 0;
+ bottom: 1px;
+ display: flex;
+ align-items: center;
}
.data-grid th .sort-order-icon {
- margin-right: 4px;
- margin-bottom: -2px;
- display: none;
+ margin-right: 4px;
+ margin-bottom: -2px;
+ display: none;
}
.data-grid th.sort-ascending .sort-order-icon,
.data-grid th.sort-descending .sort-order-icon {
- display: block;
+ display: block;
}
.data-grid th.sortable:hover {
- background-color: hsla(0, 0%, 90%, 1);
+ background-color: hsla(0, 0%, 90%, 1);
}
.data-grid .top-filler-td {
- border-bottom: 0 none transparent;
- line-height: 0;
+ border-bottom: 0 none transparent;
+ line-height: 0;
}
.data-grid button {
- line-height: 18px;
- color: inherit;
+ line-height: 18px;
+ color: inherit;
}
.data-grid td.disclosure::before {
- user-select: none;
- -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
- -webkit-mask-position: 0 0;
- -webkit-mask-size: 32px 24px;
- float: left;
- width: 8px;
- height: 12px;
- margin-right: 2px;
- content: "";
- position: relative;
- top: 3px;
- background-color: rgb(110, 110, 110);
+ user-select: none;
+ -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+ -webkit-mask-position: 0 0;
+ -webkit-mask-size: 32px 24px;
+ float: left;
+ width: 8px;
+ height: 12px;
+ margin-right: 2px;
+ content: "";
+ position: relative;
+ top: 3px;
+ background-color: rgb(110, 110, 110);
}
.data-grid tr:not(.parent) td.disclosure::before {
- background-color: transparent;
+ background-color: transparent;
}
-
.data-grid tr.expanded td.disclosure::before {
- -webkit-mask-position: -16px 0;
+ -webkit-mask-position: -16px 0;
}
.data-grid table.data tr.revealed.selected {
- background-color: rgb(212, 212, 212);
- color: inherit;
+ background-color: rgb(212, 212, 212);
+ color: inherit;
}
.data-grid.no-selection[data-keyboard-focus="true"]:focus {
- border: 1px solid var(--accent-color) !important;
+ border: 1px solid var(--accent-color) !important;
}
.data-grid:focus table.data tr.selected {
- background-color: var(--selection-bg-color);
- color: var(--selection-fg-color);
+ background-color: var(--selection-bg-color);
+ color: var(--selection-fg-color);
}
.data-grid:focus tr.selected .devtools-link {
- color: var(--selection-fg-color);
+ color: var(--selection-fg-color);
}
.data-grid:focus tr.parent.selected td.disclosure::before {
- background-color: var(--selection-fg-color);
- -webkit-mask-position: 0 0;
+ background-color: var(--selection-fg-color);
+ -webkit-mask-position: 0 0;
}
.data-grid:focus tr.expanded.selected td.disclosure::before {
- background-color: var(--selection-fg-color);
- -webkit-mask-position: -16px 0;
+ background-color: var(--selection-fg-color);
+ -webkit-mask-position: -16px 0;
}
.data-grid tr.inactive {
- color: rgb(128, 128, 128);
- font-style: italic;
+ color: rgb(128, 128, 128);
+ font-style: italic;
}
.data-grid tr.dirty {
- background-color: hsl(0, 100%, 92%);
- color: red;
- font-style: normal;
+ background-color: hsl(0, 100%, 92%);
+ color: red;
+ font-style: normal;
}
.data-grid:focus tr.selected.dirty {
- background-color: hsl(0, 100%, 70%);
+ background-color: hsl(0, 100%, 70%);
}
.data-grid td.show-more {
- white-space: normal;
+ white-space: normal;
}
.data-grid td.show-more::before {
- display: none;
+ display: none;
}
.data-grid-resizer {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 5px;
- z-index: 500;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 5px;
+ z-index: 500;
}
@media (forced-colors: active) {
- .sort-order-icon-container [is=ui-icon].icon-mask,
- .data-grid td.disclosure::before {
- forced-color-adjust: none;
- background-color: ButtonText;
- }
- .data-grid th.sortable:hover .sort-order-icon-container [is=ui-icon].icon-mask,
- .data-grid table.data tr.parent.revealed:hover td.disclosure::before,
- .data-grid:focus tr.parent.selected td.disclosure::before,
- .data-grid tr.parent.selected td.disclosure::before {
- background-color: HighlightText;
- }
- .data-grid th.sortable:hover,
- .data-grid table.data tr.revealed:hover,
- .data-grid table.data tr.revealed.selected,
- .striped-data-grid .revealed:hover.data-grid-data-grid-node:nth-child(odd),
- .striped-data-grid-starts-with-odd .revealed:hover.data-grid-data-grid-node:nth-child(even),
- .request-cookies-view tr.revealed:hover.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(2n),
- .cookies-table tr.revealed:hover.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(odd) {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- .data-grid th.sortable:hover *,
- .data-grid table.data tr.revealed:hover *,
- .data-grid table.data tr.revealed.selected *,
- .data-grid table.data tr.revealed:focus *,
- .data-grid table.data tr.revealed:hover .heap-object-tag {
- color: HighlightText;
- }
- .data-grid.no-selection[data-keyboard-focus="true"]:focus {
- forced-color-adjust: none;
- border-color: Highlight;
- }
- .data-grid.no-selection[data-keyboard-focus="true"]:focus * {
- color: ButtonText;
- }
- .data-grid th {
- background-color: Canvas;
- border-color: Highlight;
- }
- .striped-data-grid .revealed.data-grid-data-grid-node:nth-child(odd),
- .striped-data-grid-starts-with-odd .revealed.data-grid-data-grid-node:nth-child(even),
- .request-cookies-view tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(2n),
- .cookies-table tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(odd) {
- background-color: Canvas;
- }
+ .sort-order-icon-container [is=ui-icon].icon-mask,
+ .data-grid td.disclosure::before {
+ forced-color-adjust: none;
+ background-color: ButtonText;
+ }
+
+ .data-grid th.sortable:hover .sort-order-icon-container [is=ui-icon].icon-mask,
+ .data-grid table.data tr.parent.revealed:hover td.disclosure::before,
+ .data-grid:focus tr.parent.selected td.disclosure::before,
+ .data-grid tr.parent.selected td.disclosure::before {
+ background-color: HighlightText;
+ }
+
+ .data-grid th.sortable:hover,
+ .data-grid table.data tr.revealed:hover,
+ .data-grid table.data tr.revealed.selected,
+ .striped-data-grid .revealed:hover.data-grid-data-grid-node:nth-child(odd),
+ .striped-data-grid-starts-with-odd .revealed:hover.data-grid-data-grid-node:nth-child(even),
+ .request-cookies-view tr.revealed:hover.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(2n),
+ .cookies-table tr.revealed:hover.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(odd) {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ .data-grid th.sortable:hover *,
+ .data-grid table.data tr.revealed:hover *,
+ .data-grid table.data tr.revealed.selected *,
+ .data-grid table.data tr.revealed:focus *,
+ .data-grid table.data tr.revealed:hover .heap-object-tag {
+ color: HighlightText;
+ }
+
+ .data-grid.no-selection[data-keyboard-focus="true"]:focus {
+ forced-color-adjust: none;
+ border-color: Highlight;
+ }
+
+ .data-grid.no-selection[data-keyboard-focus="true"]:focus * {
+ color: ButtonText;
+ }
+
+ .data-grid th {
+ background-color: canvas;
+ border-color: Highlight;
+ }
+
+ .striped-data-grid .revealed.data-grid-data-grid-node:nth-child(odd),
+ .striped-data-grid-starts-with-odd .revealed.data-grid-data-grid-node:nth-child(even),
+ .request-cookies-view tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(2n),
+ .cookies-table tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(odd) {
+ background-color: canvas;
+ }
}
diff --git a/front_end/elements/breadcrumbs.css b/front_end/elements/breadcrumbs.css
index 4959665..3c7d9bc 100644
--- a/front_end/elements/breadcrumbs.css
+++ b/front_end/elements/breadcrumbs.css
@@ -5,40 +5,41 @@
*/
.crumbs {
- display: inline-block;
- pointer-events: auto;
- cursor: default;
- white-space: nowrap;
+ display: inline-block;
+ pointer-events: auto;
+ cursor: default;
+ white-space: nowrap;
}
.crumbs .crumb {
- display: inline-block;
- padding: 0 7px;
- line-height: 23px;
- white-space: nowrap;
+ display: inline-block;
+ padding: 0 7px;
+ line-height: 23px;
+ white-space: nowrap;
}
.crumbs .crumb.collapsed > * {
- display: none;
+ display: none;
}
.crumbs .crumb.collapsed::before {
- content: "\2026";
- font-weight: bold;
+ content: "\2026";
+ font-weight: bold;
}
.crumbs .crumb.compact .extra {
- display: none;
+ display: none;
}
-.crumb.selected, .crumb:hover {
- background-color: var(--toolbar-bg-color);
+.crumb.selected,
+.crumb:hover {
+ background-color: var(--toolbar-bg-color);
}
.crumb:not(.selected) .node-label-name {
- color: var(--dom-tag-name-color);
+ color: var(--dom-tag-name-color);
}
.crumb:not(.selected) .node-label-class {
- color: var(--dom-attribute-name-color);
+ color: var(--dom-attribute-name-color);
}
diff --git a/front_end/elements/classesPaneWidget.css b/front_end/elements/classesPaneWidget.css
index 01aec13..f874583 100644
--- a/front_end/elements/classesPaneWidget.css
+++ b/front_end/elements/classesPaneWidget.css
@@ -5,33 +5,33 @@
*/
.styles-element-classes-pane {
- background-color: var(--toolbar-bg-color);
- border-bottom: 1px solid rgb(189, 189, 189);
- padding: 6px 2px 2px;
+ background-color: var(--toolbar-bg-color);
+ border-bottom: 1px solid rgb(189, 189, 189);
+ padding: 6px 2px 2px;
}
.styles-element-classes-container {
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
}
.styles-element-classes-pane [is=dt-checkbox] {
- margin-right: 15px;
+ margin-right: 15px;
}
.styles-element-classes-pane .title-container {
- padding-bottom: 2px;
+ padding-bottom: 2px;
}
.styles-element-classes-pane .new-class-input {
- padding-left: 3px;
- padding-right: 3px;
- overflow: hidden;
- border: 1px solid #ddd;
- line-height: 15px;
- margin-left: 3px;
- width: calc(100% - 7px);
- background-color: #fff;
- cursor: text;
+ padding-left: 3px;
+ padding-right: 3px;
+ overflow: hidden;
+ border: 1px solid #ddd;
+ line-height: 15px;
+ margin-left: 3px;
+ width: calc(100% - 7px);
+ background-color: #fff;
+ cursor: text;
}
diff --git a/front_end/elements/computedStyleSidebarPane.css b/front_end/elements/computedStyleSidebarPane.css
index 22f6266..5ac1799 100644
--- a/front_end/elements/computedStyleSidebarPane.css
+++ b/front_end/elements/computedStyleSidebarPane.css
@@ -5,40 +5,40 @@
*/
.computed-properties {
- user-select: text;
- flex-shrink: 0;
+ user-select: text;
+ flex-shrink: 0;
}
.styles-sidebar-pane-toolbar {
- border-bottom: 1px solid #eee;
- flex-shrink: 0;
+ border-bottom: 1px solid #eee;
+ flex-shrink: 0;
}
.styles-sidebar-pane-filter-box {
- flex: auto;
- display: flex;
+ flex: auto;
+ display: flex;
}
.styles-sidebar-pane-filter-box > input {
- outline: none !important;
- border: none;
- width: 100%;
- background: white;
- padding-left: 4px;
- margin: 3px;
+ outline: none !important;
+ border: none;
+ width: 100%;
+ background: white;
+ padding-left: 4px;
+ margin: 3px;
}
.styles-sidebar-pane-filter-box > input:focus,
.styles-sidebar-pane-filter-box > input:not(:placeholder-shown) {
- box-shadow: var(--focus-ring-active-shadow);
+ box-shadow: var(--focus-ring-active-shadow);
}
.styles-sidebar-pane-filter-box > input::placeholder {
- color: rgba(0, 0, 0, 0.54);
+ color: rgba(0, 0, 0, 0.54);
}
@media (forced-colors: active) {
- .styles-sidebar-pane-filter-box > input {
- border: 1px solid ButtonText;
- }
+ .styles-sidebar-pane-filter-box > input {
+ border: 1px solid ButtonText;
+ }
}
diff --git a/front_end/elements/computedStyleWidgetTree.css b/front_end/elements/computedStyleWidgetTree.css
index 71d21e4..e955af2 100644
--- a/front_end/elements/computedStyleWidgetTree.css
+++ b/front_end/elements/computedStyleWidgetTree.css
@@ -5,149 +5,154 @@
*/
.computed-style-property {
- overflow: hidden;
- flex: auto;
- text-overflow: ellipsis;
+ overflow: hidden;
+ flex: auto;
+ text-overflow: ellipsis;
}
.computed-style-property .property-name {
- width: 16em;
- text-overflow: ellipsis;
- overflow: hidden;
- max-width: 52%;
- display: inline-block;
- vertical-align: text-top;
+ width: 16em;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: 52%;
+ display: inline-block;
+ vertical-align: text-top;
}
.computed-style-property .property-value {
- margin-left: 2em;
- position: relative;
+ margin-left: 2em;
+ position: relative;
}
.computed-style-property .property-value-text {
- overflow: hidden;
- text-overflow: ellipsis;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.tree-outline li:hover .goto-source-icon {
- display: block;
- margin-top: -2px;
+ display: block;
+ margin-top: -2px;
}
.goto-source-icon {
- background-color: #5a5a5a;
- display: none;
- position: absolute;
- left: -16px;
- top: 0;
+ background-color: #5a5a5a;
+ display: none;
+ position: absolute;
+ left: -16px;
+ top: 0;
}
.goto-source-icon:hover {
- background-color: #333;
+ background-color: #333;
}
.computed-style-property-inherited {
- opacity: 0.5;
+ opacity: 0.5;
}
.trace-link {
- user-select: none;
- float: right;
- padding-left: 1em;
- position: relative;
- z-index: 1;
+ user-select: none;
+ float: right;
+ padding-left: 1em;
+ position: relative;
+ z-index: 1;
}
.property-trace {
- text-overflow: ellipsis;
- overflow: hidden;
- flex-grow: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ flex-grow: 1;
}
.property-trace-selector {
- color: gray;
- padding-left: 2em;
+ color: gray;
+ padding-left: 2em;
}
.property-trace-value {
- position: relative;
- display: inline-block;
- margin-left: 16px;
+ position: relative;
+ display: inline-block;
+ margin-left: 16px;
}
.property-trace-inactive .property-trace-value::before {
- position: absolute;
- content: ".";
- border-bottom: 1px solid rgba(0, 0, 0, 0.35);
- top: 0;
- bottom: 5px;
- left: 0;
- right: 0;
+ position: absolute;
+ content: ".";
+ border-bottom: 1px solid rgba(0, 0, 0, 0.35);
+ top: 0;
+ bottom: 5px;
+ left: 0;
+ right: 0;
}
.tree-outline li.odd-row {
- position: relative;
- background-color: #F5F5F5;
+ position: relative;
+ background-color: #f5f5f5;
}
-.tree-outline, .tree-outline ol {
- padding-left: 0;
+.tree-outline,
+.tree-outline ol {
+ padding-left: 0;
}
.tree-outline li:hover {
- background-color: rgb(235, 242, 252);
- cursor: pointer;
+ background-color: rgb(235, 242, 252);
+ cursor: pointer;
}
.tree-outline li::before {
- margin-left: 4px;
+ margin-left: 4px;
}
.delimeter {
- color: transparent;
+ color: transparent;
}
.delimeter::selection {
- color: transparent;
+ color: transparent;
}
.computed-narrow .computed-style-property .property-name,
.computed-narrow .computed-style-property .property-value {
- display: inline-block;
- width: 100%;
- max-width: 100%;
- margin-left: 0;
- white-space: nowrap;
+ display: inline-block;
+ width: 100%;
+ max-width: 100%;
+ margin-left: 0;
+ white-space: nowrap;
}
.computed-narrow .computed-style-property {
- padding: 2px 0;
- display: block;
- white-space: normal;
+ padding: 2px 0;
+ display: block;
+ white-space: normal;
}
.computed-narrow.tree-outline li::before {
- margin-top: -14px;
+ margin-top: -14px;
}
@media (forced-colors: active) {
- .computed-style-property-inherited {
- opacity: 1;
- }
- :host-context(.monospace.computed-properties) .tree-outline li:hover {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- :host-context(.monospace.computed-properties) .tree-outline:not(.hide-selection-when-blurred) li.parent:hover.selected::before,
- :host-context(.monospace.computed-properties) .tree-outline-disclosure li.parent:hover::before,
- :host-context(.monospace.computed-properties) .tree-outline li:hover .goto-source-icon {
- background-color: HighlightText;
- }
- :host-context(.monospace.computed-properties) .tree-outline li:hover * {
- color: HighlightText;
- }
- .property-trace-inactive .property-trace-value::before {
- content: "";
- border-bottom-color: HighlightText !important;
- }
+ .computed-style-property-inherited {
+ opacity: 1;
+ }
+
+ :host-context(.monospace.computed-properties) .tree-outline li:hover {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ :host-context(.monospace.computed-properties) .tree-outline:not(.hide-selection-when-blurred) li.parent:hover.selected::before,
+ :host-context(.monospace.computed-properties) .tree-outline-disclosure li.parent:hover::before,
+ :host-context(.monospace.computed-properties) .tree-outline li:hover .goto-source-icon {
+ background-color: HighlightText;
+ }
+
+ :host-context(.monospace.computed-properties) .tree-outline li:hover * {
+ color: HighlightText;
+ }
+
+ .property-trace-inactive .property-trace-value::before {
+ content: "";
+ border-bottom-color: HighlightText !important;
+ }
}
diff --git a/front_end/elements/domLinkifier.css b/front_end/elements/domLinkifier.css
index 7e74f1d..d24ae31 100644
--- a/front_end/elements/domLinkifier.css
+++ b/front_end/elements/domLinkifier.css
@@ -9,19 +9,20 @@
}
.node-link {
- cursor: pointer;
- display: inline;
- pointer-events: auto;
+ cursor: pointer;
+ display: inline;
+ pointer-events: auto;
}
.node-link[data-keyboard-focus="true"]:focus {
- outline-width: unset;
+ outline-width: unset;
}
.node-label-name {
- color: rgb(136, 18, 128);
+ color: rgb(136, 18, 128);
}
-.node-label-class, .node-label-pseudo {
- color: rgb(153, 69, 0);
+.node-label-class,
+.node-label-pseudo {
+ color: rgb(153, 69, 0);
}
diff --git a/front_end/elements/elementStatePaneWidget.css b/front_end/elements/elementStatePaneWidget.css
index e018179..7f3703e 100644
--- a/front_end/elements/elementStatePaneWidget.css
+++ b/front_end/elements/elementStatePaneWidget.css
@@ -5,23 +5,23 @@
*/
.styles-element-state-pane {
- overflow: hidden;
- padding-left: 2px;
- background-color: var(--toolbar-bg-color);
- border-bottom: 1px solid rgb(189, 189, 189);
- margin-top: 0;
- padding-bottom: 2px;
+ overflow: hidden;
+ padding-left: 2px;
+ background-color: var(--toolbar-bg-color);
+ border-bottom: 1px solid rgb(189, 189, 189);
+ margin-top: 0;
+ padding-bottom: 2px;
}
.styles-element-state-pane > div {
- margin: 8px 4px 6px;
+ margin: 8px 4px 6px;
}
.styles-element-state-pane > table {
- width: 100%;
- border-spacing: 0;
+ width: 100%;
+ border-spacing: 0;
}
.styles-element-state-pane td {
- padding: 0;
+ padding: 0;
}
diff --git a/front_end/elements/elementsPanel.css b/front_end/elements/elementsPanel.css
index fb05a16..d454fb2 100644
--- a/front_end/elements/elementsPanel.css
+++ b/front_end/elements/elementsPanel.css
@@ -28,47 +28,47 @@
*/
#elements-content {
- flex: 1 1;
- overflow: auto;
- padding: 2px 0 0 0;
+ flex: 1 1;
+ overflow: auto;
+ padding: 2px 0 0 0;
}
#elements-content:not(.elements-wrap) > div {
- display: inline-block;
- min-width: 100%;
+ display: inline-block;
+ min-width: 100%;
}
#elements-content.elements-wrap {
- overflow-x: hidden;
+ overflow-x: hidden;
}
#elements-crumbs {
- flex: 0 0 23px;
- background-color: white;
- border-top: 1px solid var(--divider-color);
- overflow: hidden;
- width: 100%;
+ flex: 0 0 23px;
+ background-color: white;
+ border-top: 1px solid var(--divider-color);
+ overflow: hidden;
+ width: 100%;
}
.style-panes-wrapper {
- overflow: hidden auto;
+ overflow: hidden auto;
}
.style-panes-wrapper > div:not(:first-child) {
- border-top: 1px solid var(--divider-color);
+ border-top: 1px solid var(--divider-color);
}
.elements-tree-header {
- height: 24px;
- border-top: 1px solid var(--divider-color);
- border-bottom: 1px solid var(--divider-color);
- display: flex;
- flex-direction: row;
- align-items: center;
+ height: 24px;
+ border-top: 1px solid var(--divider-color);
+ border-bottom: 1px solid var(--divider-color);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
}
.elements-tree-header-frame {
- margin-left: 6px;
- margin-right: 6px;
- flex: none;
+ margin-left: 6px;
+ margin-right: 6px;
+ flex: none;
}
diff --git a/front_end/elements/elementsTreeOutline.css b/front_end/elements/elementsTreeOutline.css
index 183a0c4..e6ebbd5 100644
--- a/front_end/elements/elementsTreeOutline.css
+++ b/front_end/elements/elementsTreeOutline.css
@@ -5,357 +5,373 @@
*/
.elements-disclosure {
- width: 100%;
- display: inline-block;
- line-height: normal;
+ width: 100%;
+ display: inline-block;
+ line-height: normal;
}
.elements-disclosure li {
- /** Keep margin-left & padding-left in sync with ElementsTreeElements.updateDecorators **/
- padding: 1px 0 0 14px;
- margin-left: -2px;
- word-wrap: break-word;
- position: relative;
- min-height: 15px;
- line-height: 1.36;
+ /** Keep margin-left & padding-left in sync with ElementsTreeElements.updateDecorators **/
+ padding: 1px 0 0 14px;
+ margin-left: -2px;
+ word-wrap: break-word;
+ position: relative;
+ min-height: 15px;
+ line-height: 1.36;
}
.elements-disclosure li.parent {
- /** Keep it in sync with ElementsTreeElements.updateDecorators **/
- margin-left: -13px;
+ /** Keep it in sync with ElementsTreeElements.updateDecorators **/
+ margin-left: -13px;
}
-.elements-disclosure li .selected-hint:before {
- font-style: italic;
- content: " == $0";
- opacity: 0;
- position: absolute;
- white-space: pre;
+.elements-disclosure li .selected-hint::before {
+ font-style: italic;
+ content: " == $0";
+ opacity: 0;
+ position: absolute;
+ white-space: pre;
}
-.elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected .selected-hint:before {
- opacity: 0.6;
+.elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected .selected-hint::before {
+ opacity: 0.6;
}
.elements-disclosure li.parent::before {
- box-sizing: border-box;
+ box-sizing: border-box;
}
.elements-disclosure li.parent::before {
- user-select: none;
- -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
- -webkit-mask-size: 32px 24px;
- content: '\00a0\00a0';
- color: transparent;
- text-shadow: none;
- margin-right: -3px;
+ user-select: none;
+ -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+ -webkit-mask-size: 32px 24px;
+ content: '\00a0\00a0';
+ color: transparent;
+ text-shadow: none;
+ margin-right: -3px;
}
.elements-disclosure li.always-parent::before {
- visibility: hidden;
+ visibility: hidden;
}
.elements-disclosure li.parent::before {
- -webkit-mask-position: 0 0;
- background-color: #727272;
+ -webkit-mask-position: 0 0;
+ background-color: #727272;
}
.elements-disclosure li .selection {
- display: none;
- z-index: -1;
+ display: none;
+ z-index: -1;
}
.elements-disclosure li.hovered:not(.selected) .selection {
- display: block;
- left: 3px;
- right: 3px;
- background-color: var(--item-hover-color);
- border-radius: 5px;
+ display: block;
+ left: 3px;
+ right: 3px;
+ background-color: var(--item-hover-color);
+ border-radius: 5px;
}
.elements-disclosure li.parent.expanded::before {
- -webkit-mask-position: -16px 0;
+ -webkit-mask-position: -16px 0;
}
.elements-disclosure li.selected .selection {
- display: block;
+ display: block;
}
.elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) .selection {
- background-color: var(--item-selection-inactive-bg-color);
+ background-color: var(--item-selection-inactive-bg-color);
}
.elements-disclosure .elements-tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .highlight > * {
- background: var(--focus-bg-color);
- border-radius: 2px;
- box-shadow: 0px 0px 0px 2px var(--focus-bg-color);
+ background: var(--focus-bg-color);
+ border-radius: 2px;
+ box-shadow: 0 0 0 2px var(--focus-bg-color);
}
.elements-disclosure ol {
- list-style-type: none;
- /** Keep it in sync with ElementsTreeElements.updateDecorators **/
- padding-inline-start: 12px;
- margin: 0;
+ list-style-type: none;
+
+ /** Keep it in sync with ElementsTreeElements.updateDecorators **/
+ padding-inline-start: 12px;
+ margin: 0;
}
.elements-disclosure ol.children {
- display: none;
+ display: none;
}
.elements-disclosure ol.children.expanded {
- display: block;
+ display: block;
}
.elements-disclosure li .webkit-html-tag.close {
- margin-left: -12px;
+ margin-left: -12px;
}
.elements-disclosure > ol {
- position: relative;
- margin: 0;
- cursor: default;
- min-width: 100%;
- min-height: 100%;
- padding-left: 2px;
+ position: relative;
+ margin: 0;
+ cursor: default;
+ min-width: 100%;
+ min-height: 100%;
+ padding-left: 2px;
}
.elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection {
- background-color: var(--item-selection-bg-color);
+ background-color: var(--item-selection-bg-color);
}
.elements-tree-outline ol.shadow-root-depth-4 {
- background-color: rgba(0, 0, 0, 0.04);
+ background-color: rgba(0, 0, 0, 0.04);
}
.elements-tree-outline ol.shadow-root-depth-3 {
- background-color: rgba(0, 0, 0, 0.03);
+ background-color: rgba(0, 0, 0, 0.03);
}
.elements-tree-outline ol.shadow-root-depth-2 {
- background-color: rgba(0, 0, 0, 0.02);
+ background-color: rgba(0, 0, 0, 0.02);
}
.elements-tree-outline ol.shadow-root-depth-1 {
- background-color: rgba(0, 0, 0, 0.01);
+ background-color: rgba(0, 0, 0, 0.01);
}
.elements-tree-outline ol.shadow-root-deep {
- background-color: transparent;
+ background-color: transparent;
}
.elements-tree-editor {
- box-shadow: var(--drop-shadow);
- margin-right: 4px;
+ box-shadow: var(--drop-shadow);
+ margin-right: 4px;
}
.elements-disclosure li.elements-drag-over .selection {
- display: block;
- margin-top: -2px;
- border-top: 2px solid var(--selection-bg-color);
+ display: block;
+ margin-top: -2px;
+ border-top: 2px solid var(--selection-bg-color);
}
.elements-disclosure li.in-clipboard .highlight {
- outline: 1px dotted darkgrey;
+ outline: 1px dotted darkgrey;
}
.CodeMirror {
- background-color: white;
- height: 300px !important;
+ background-color: white;
+ height: 300px !important;
}
.CodeMirror-lines {
- padding: 0;
+ padding: 0;
}
.CodeMirror pre {
- padding: 0;
+ padding: 0;
}
-button, input, select {
+button,
+input,
+select {
font-family: inherit;
font-size: inherit;
}
.editing {
- box-shadow: var(--drop-shadow);
- background-color: white;
- text-overflow: clip !important;
- padding-left: 2px;
- margin-left: -2px;
- padding-right: 2px;
- margin-right: -2px;
- margin-bottom: -1px;
- padding-bottom: 1px;
- opacity: 1.0 !important;
+ box-shadow: var(--drop-shadow);
+ background-color: white;
+ text-overflow: clip !important;
+ padding-left: 2px;
+ margin-left: -2px;
+ padding-right: 2px;
+ margin-right: -2px;
+ margin-bottom: -1px;
+ padding-bottom: 1px;
+ opacity: 1 !important;
}
.editing,
.editing * {
- color: #222 !important;
- text-decoration: none !important;
+ color: #222 !important;
+ text-decoration: none !important;
}
.editing br {
- display: none;
+ display: none;
}
.elements-gutter-decoration {
- position: absolute;
- top: 3px;
- left: 2px;
- height: 9px;
- width: 9px;
- border-radius: 5px;
- border: 1px solid orange;
- background-color: orange;
- cursor: pointer;
+ position: absolute;
+ top: 3px;
+ left: 2px;
+ height: 9px;
+ width: 9px;
+ border-radius: 5px;
+ border: 1px solid orange;
+ background-color: orange;
+ cursor: pointer;
}
.elements-gutter-decoration.elements-has-decorated-children {
- opacity: 0.5;
+ opacity: 0.5;
}
.add-attribute {
- margin-left: 1px;
- margin-right: 1px;
- white-space: nowrap;
+ margin-left: 1px;
+ margin-right: 1px;
+ white-space: nowrap;
}
-.elements-tree-nowrap, .elements-tree-nowrap .li {
- white-space: pre !important;
+.elements-tree-nowrap,
+.elements-tree-nowrap .li {
+ white-space: pre !important;
}
.elements-disclosure .elements-tree-nowrap li {
- word-wrap: normal;
+ word-wrap: normal;
}
/* DOM update highlight */
@-webkit-keyframes dom-update-highlight-animation {
- from {
- background-color: rgb(158, 54, 153);
- color: white;
- }
- 80% {
- background-color: rgb(245, 219, 244);
- color: inherit;
- }
- to {
- background-color: inherit;
- }
+ from {
+ background-color: rgb(158, 54, 153);
+ color: white;
+ }
+
+ 80% {
+ background-color: rgb(245, 219, 244);
+ color: inherit;
+ }
+
+ to {
+ background-color: inherit;
+ }
}
@-webkit-keyframes dom-update-highlight-animation-dark {
- from {
- background-color: rgb(158, 54, 153);
- color: white;
- }
- 80% {
- background-color: #333;
- color: inherit;
- }
- to {
- background-color: inherit;
- }
+ from {
+ background-color: rgb(158, 54, 153);
+ color: white;
+ }
+
+ 80% {
+ background-color: #333;
+ color: inherit;
+ }
+
+ to {
+ background-color: inherit;
+ }
}
.dom-update-highlight {
- -webkit-animation: dom-update-highlight-animation 1.4s 1 cubic-bezier(0, 0, 0.2, 1);
- border-radius: 2px;
+ -webkit-animation: dom-update-highlight-animation 1.4s 1 cubic-bezier(0, 0, 0.2, 1);
+ border-radius: 2px;
}
:host-context(.-theme-with-dark-background) .dom-update-highlight {
- -webkit-animation: dom-update-highlight-animation-dark 1.4s 1 cubic-bezier(0, 0, 0.2, 1);
+ -webkit-animation: dom-update-highlight-animation-dark 1.4s 1 cubic-bezier(0, 0, 0.2, 1);
}
.elements-disclosure.single-node li {
- padding-left: 2px;
+ padding-left: 2px;
}
-.elements-tree-shortcut-title, .elements-tree-shortcut-link {
- color: rgb(87, 87, 87);
+.elements-tree-shortcut-title,
+.elements-tree-shortcut-link {
+ color: rgb(87, 87, 87);
}
.elements-disclosure .gutter-container {
- position: absolute;
- top: 0;
- left: 0;
- cursor: pointer;
- width: 15px;
- height: 15px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ cursor: pointer;
+ width: 15px;
+ height: 15px;
}
.elements-hide-gutter .gutter-container {
- display: none;
+ display: none;
}
.gutter-menu-icon {
- display: block;
- visibility: hidden;
- transform: rotate(-90deg) scale(0.8);
- background-color: white;
- position: relative;
- left: -7px;
- top: -3px;
+ display: block;
+ visibility: hidden;
+ transform: rotate(-90deg) scale(0.8);
+ background-color: white;
+ position: relative;
+ left: -7px;
+ top: -3px;
}
.elements-disclosure li.selected .gutter-container:not(.has-decorations) .gutter-menu-icon {
- visibility: visible;
+ visibility: visible;
}
/** Guide line */
+
li.selected {
- z-index: 0;
+ z-index: 0;
}
-li.hovered:not(.always-parent) + ol.children, .elements-tree-outline ol.shadow-root, li.selected:not(.always-parent) + ol.children {
- margin-left: 5px;
- padding-inline-start: 6px;
- border-width: 1px;
- border-left-style: solid;
+li.hovered:not(.always-parent) + ol.children,
+.elements-tree-outline ol.shadow-root,
+li.selected:not(.always-parent) + ol.children {
+ margin-left: 5px;
+ padding-inline-start: 6px;
+ border-width: 1px;
+ border-left-style: solid;
}
li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
- border-color: hsla(0,0%,0%,0.1);
+ border-color: hsla(0, 0%, 0%, 0.1);
}
.elements-tree-outline ol.shadow-root {
- border-color: hsla(0,0%,80%,1);
+ border-color: hsla(0, 0%, 80%, 1);
}
li.selected:not(.always-parent) + ol.children {
- border-color: hsla(216,68%,80%,1) !important;
+ border-color: hsla(216, 68%, 80%, 1) !important;
}
@media (forced-colors: active) {
- .elements-disclosure li.parent::before {
- forced-color-adjust: none;
- background-color: ButtonText !important;
- }
- .elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected .selected-hint:before {
- opacity: unset;
- }
- .elements-disclosure li.hovered:not(.selected) .selection,
- .elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection,
- .elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) .selection {
- forced-color-adjust: none;
- background: Canvas !important;
- border: 1px solid Highlight !important;
- }
- .gutter-menu-icon {
- forced-color-adjust: none;
- }
+ .elements-disclosure li.parent::before {
+ forced-color-adjust: none;
+ background-color: ButtonText !important;
+ }
+
+ .elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected .selected-hint::before {
+ opacity: unset;
+ }
+
+ .elements-disclosure li.hovered:not(.selected) .selection,
+ .elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection,
+ .elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) .selection {
+ forced-color-adjust: none;
+ background: canvas !important;
+ border: 1px solid Highlight !important;
+ }
+
+ .gutter-menu-icon {
+ forced-color-adjust: none;
+ }
}
/** Adorner */
+
.adorner-container {
- display: inline-block;
+ display: inline-block;
}
.adorner-container.hidden {
- display: none;
+ display: none;
}
.adorner-container devtools-adorner {
- margin-left: 3px;
- vertical-align: middle;
+ margin-left: 3px;
+ vertical-align: middle;
}
diff --git a/front_end/elements/metricsSidebarPane.css b/front_end/elements/metricsSidebarPane.css
index 98e7d5c..ba4d8fd 100644
--- a/front_end/elements/metricsSidebarPane.css
+++ b/front_end/elements/metricsSidebarPane.css
@@ -5,21 +5,22 @@
*/
.metrics {
- padding: 8px;
- font-size: 10px;
- text-align: center;
- white-space: nowrap;
- min-height: var(--metrics-height);
- display: flex;
- flex-direction: column;
- -webkit-align-items: center;
- -webkit-justify-content: center;
+ padding: 8px;
+ font-size: 10px;
+ text-align: center;
+ white-space: nowrap;
+ min-height: var(--metrics-height);
+ display: flex;
+ flex-direction: column;
+ -webkit-align-items: center;
+ -webkit-justify-content: center;
}
:host {
- --metrics-height: 190px;
- height: var(--metrics-height);
- contain: strict;
+ --metrics-height: 190px;
+
+ height: var(--metrics-height);
+ contain: strict;
}
/* All computed layout attributes except position have a quite light
@@ -27,11 +28,12 @@
* mode is very low contrast. Therefore we swap back to a dark font by
* default in dark mode because the background colours are lighter.
*/
+
:host-context(.-theme-with-dark-background) .metrics .margin,
:host-context(.-theme-with-dark-background) .metrics .border,
:host-context(.-theme-with-dark-background) .metrics .padding,
:host-context(.-theme-with-dark-background) .metrics .content {
- color: #222;
+ color: #222;
}
/* When you hover over margin the rest of the items get given a black
@@ -40,8 +42,9 @@
* color of the text for all the children to light. This also fixes
* hovering over anything within margin such as border/padding.
*/
+
:host-context(.-theme-with-dark-background) .metrics .margin:hover div {
- color: #ccc;
+ color: #ccc;
}
/* In dark mode the hover colour that is used when hovering on border
@@ -51,93 +54,93 @@
*/
:host-context(.-theme-with-dark-background) .metrics .border:hover > div:not(.padding) {
- color: #222;
+ color: #222;
}
.metrics .label {
- position: absolute;
- font-size: 10px;
- margin-left: 3px;
- padding-left: 2px;
- padding-right: 2px;
+ position: absolute;
+ font-size: 10px;
+ margin-left: 3px;
+ padding-left: 2px;
+ padding-right: 2px;
}
.metrics .position {
- border: 1px rgb(66%, 66%, 66%) dotted;
- background-color: white;
- display: inline-block;
- text-align: center;
- padding: 3px;
- margin: 3px;
+ border: 1px rgb(66%, 66%, 66%) dotted;
+ background-color: white;
+ display: inline-block;
+ text-align: center;
+ padding: 3px;
+ margin: 3px;
}
.metrics .margin {
- border: 1px dashed;
- background-color: white;
- display: inline-block;
- text-align: center;
- vertical-align: middle;
- padding: 3px 6px;
- margin: 3px;
+ border: 1px dashed;
+ background-color: white;
+ display: inline-block;
+ text-align: center;
+ vertical-align: middle;
+ padding: 3px 6px;
+ margin: 3px;
}
.metrics .border {
- border: 1px black solid;
- background-color: white;
- display: inline-block;
- text-align: center;
- vertical-align: middle;
- padding: 3px 6px;
- margin: 3px;
+ border: 1px black solid;
+ background-color: white;
+ display: inline-block;
+ text-align: center;
+ vertical-align: middle;
+ padding: 3px 6px;
+ margin: 3px;
}
.metrics .padding {
- border: 1px grey dashed;
- background-color: white;
- display: inline-block;
- text-align: center;
- vertical-align: middle;
- padding: 3px 6px;
- margin: 3px;
+ border: 1px grey dashed;
+ background-color: white;
+ display: inline-block;
+ text-align: center;
+ vertical-align: middle;
+ padding: 3px 6px;
+ margin: 3px;
}
.metrics .content {
- position: static;
- border: 1px gray solid;
- background-color: white;
- display: inline-block;
- text-align: center;
- vertical-align: middle;
- padding: 3px;
- margin: 3px;
- min-width: 80px;
- overflow: visible;
+ position: static;
+ border: 1px gray solid;
+ background-color: white;
+ display: inline-block;
+ text-align: center;
+ vertical-align: middle;
+ padding: 3px;
+ margin: 3px;
+ min-width: 80px;
+ overflow: visible;
}
.metrics .content span {
- display: inline-block;
+ display: inline-block;
}
.metrics .editing {
- position: relative;
- z-index: 100;
- cursor: text;
+ position: relative;
+ z-index: 100;
+ cursor: text;
}
.metrics .left {
- display: inline-block;
- vertical-align: middle;
+ display: inline-block;
+ vertical-align: middle;
}
.metrics .right {
- display: inline-block;
- vertical-align: middle;
+ display: inline-block;
+ vertical-align: middle;
}
.metrics .top {
- display: inline-block;
+ display: inline-block;
}
.metrics .bottom {
- display: inline-block;
+ display: inline-block;
}
diff --git a/front_end/elements/platformFontsWidget.css b/front_end/elements/platformFontsWidget.css
index 88ba212..680b563 100644
--- a/front_end/elements/platformFontsWidget.css
+++ b/front_end/elements/platformFontsWidget.css
@@ -5,44 +5,44 @@
*/
:host {
- user-select: text;
+ user-select: text;
}
.platform-fonts {
- flex-shrink: 0;
+ flex-shrink: 0;
}
.font-name {
- font-weight: bold;
+ font-weight: bold;
}
.font-usage {
- color: #888;
- padding-left: 3px;
+ color: #888;
+ padding-left: 3px;
}
.title {
- padding: 0 5px;
- border-top: 1px solid;
- border-bottom: 1px solid;
- border-color: #ddd;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- height: 24px;
- background-color: #f1f1f1;
- display: flex;
- align-items: center;
+ padding: 0 5px;
+ border-top: 1px solid;
+ border-bottom: 1px solid;
+ border-color: #ddd;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ height: 24px;
+ background-color: #f1f1f1;
+ display: flex;
+ align-items: center;
}
.stats-section {
- margin: 5px 0;
+ margin: 5px 0;
}
.font-stats-item {
- padding-left: 1em;
+ padding-left: 1em;
}
.font-stats-item .font-delimeter {
- margin: 0 1ex 0 1ex;
+ margin: 0 1ex 0 1ex;
}
diff --git a/front_end/elements/stylesSectionTree.css b/front_end/elements/stylesSectionTree.css
index a2660e0..6c606a0 100644
--- a/front_end/elements/stylesSectionTree.css
+++ b/front_end/elements/stylesSectionTree.css
@@ -5,225 +5,225 @@
*/
.tree-outline {
- padding: 0;
+ padding: 0;
}
.tree-outline li.not-parsed-ok {
- margin-left: 0;
+ margin-left: 0;
}
.tree-outline li.filter-match {
- background-color: rgba(255, 255, 0, 0.5);
+ background-color: rgba(255, 255, 0, 0.5);
}
:host-context(.-theme-with-dark-background) .tree-outline li.filter-match {
- background-color: hsla(133, 100%, 30%, 0.5);
+ background-color: hsla(133, 100%, 30%, 0.5);
}
.tree-outline li.overloaded.filter-match {
- background-color: rgba(255, 255, 0, 0.25);
+ background-color: rgba(255, 255, 0, 0.25);
}
:host-context(.-theme-with-dark-background) .tree-outline li.overloaded.filter-match {
- background-color: hsla(133, 100%, 30%, 0.25);
+ background-color: hsla(133, 100%, 30%, 0.25);
}
.tree-outline li.not-parsed-ok .exclamation-mark {
- display: inline-block;
- position: relative;
- width: 11px;
- height: 10px;
- margin: 0 7px 0 0;
- top: 1px;
- left: -36px; /* outdent to compensate for the top-level property indent */
- user-select: none;
- cursor: default;
- z-index: 1;
+ display: inline-block;
+ position: relative;
+ width: 11px;
+ height: 10px;
+ margin: 0 7px 0 0;
+ top: 1px;
+ left: -36px; /* outdent to compensate for the top-level property indent */
+ user-select: none;
+ cursor: default;
+ z-index: 1;
}
.tree-outline li {
- margin-left: 12px;
- padding-left: 22px;
- white-space: normal;
- text-overflow: ellipsis;
- cursor: auto;
- display: block;
+ margin-left: 12px;
+ padding-left: 22px;
+ white-space: normal;
+ text-overflow: ellipsis;
+ cursor: auto;
+ display: block;
}
.tree-outline li::before {
- display: none;
+ display: none;
}
.tree-outline li .webkit-css-property {
- margin-left: -22px; /* outdent the first line of longhand properties (in an expanded shorthand) to compensate for the "padding-left" shift in .tree-outline li */
+ margin-left: -22px; /* outdent the first line of longhand properties (in an expanded shorthand) to compensate for the "padding-left" shift in .tree-outline li */
}
.tree-outline > li {
- padding-left: 38px;
- clear: both;
- min-height: 14px;
+ padding-left: 38px;
+ clear: both;
+ min-height: 14px;
}
.tree-outline > li .webkit-css-property {
- margin-left: -38px; /* outdent the first line of the top-level properties to compensate for the "padding-left" shift in .tree-outline > li */
+ margin-left: -38px; /* outdent the first line of the top-level properties to compensate for the "padding-left" shift in .tree-outline > li */
}
.tree-outline > li.child-editing {
- padding-left: 8px;
+ padding-left: 8px;
}
.tree-outline > li.child-editing .text-prompt {
- white-space: pre-wrap;
+ white-space: pre-wrap;
}
.tree-outline > li.child-editing .webkit-css-property {
- margin-left: 0;
+ margin-left: 0;
}
.tree-outline li.child-editing {
- word-wrap: break-word !important;
- white-space: normal !important;
- padding-left: 0;
+ word-wrap: break-word !important;
+ white-space: normal !important;
+ padding-left: 0;
}
ol:not(.tree-outline) {
- display: none;
- margin: 0;
- padding-inline-start: 12px;
- list-style: none;
+ display: none;
+ margin: 0;
+ padding-inline-start: 12px;
+ list-style: none;
}
ol.expanded {
- display: block;
+ display: block;
}
.tree-outline li .info {
- padding-top: 4px;
- padding-bottom: 3px;
+ padding-top: 4px;
+ padding-bottom: 3px;
}
.enabled-button {
- visibility: hidden;
- float: left;
- font-size: 10px;
- margin: 0;
- vertical-align: top;
- position: relative;
- z-index: 1;
- width: 18px;
- left: -40px; /* original -2px + (-38px) to compensate for the first line outdent */
- top: 1px;
- height: 13px;
+ visibility: hidden;
+ float: left;
+ font-size: 10px;
+ margin: 0;
+ vertical-align: top;
+ position: relative;
+ z-index: 1;
+ width: 18px;
+ left: -40px; /* original -2px + (-38px) to compensate for the first line outdent */
+ top: 1px;
+ height: 13px;
}
.tree-outline li.editing .enabled-button {
- display: none !important;
+ display: none !important;
}
.overloaded:not(.has-ignorable-error),
.inactive,
.disabled,
.not-parsed-ok:not(.has-ignorable-error) {
- text-decoration: line-through;
+ text-decoration: line-through;
}
.has-ignorable-error .webkit-css-property {
- color: inherit;
+ color: inherit;
}
.implicit,
.inherited {
- opacity: 0.5;
+ opacity: 0.5;
}
.has-ignorable-error {
- color: gray;
+ color: gray;
}
.tree-outline li.editing {
- margin-left: 10px;
- text-overflow: clip;
+ margin-left: 10px;
+ text-overflow: clip;
}
.tree-outline li.editing-sub-part {
- padding: 3px 6px 8px 18px;
- margin: -1px -6px -8px -6px;
- text-overflow: clip;
+ padding: 3px 6px 8px 18px;
+ margin: -1px -6px -8px -6px;
+ text-overflow: clip;
}
:host-context(.no-affect) .tree-outline li {
- opacity: 0.5;
+ opacity: 0.5;
}
:host-context(.no-affect) .tree-outline li.editing {
- opacity: 1.0;
+ opacity: 1;
}
:host-context(.styles-panel-hovered:not(.read-only)) .webkit-css-property:hover,
:host-context(.styles-panel-hovered:not(.read-only)) .value:hover {
- text-decoration: underline;
- cursor: default;
+ text-decoration: underline;
+ cursor: default;
}
.styles-name-value-separator {
- display: inline-block;
- width: 14px;
- text-decoration: inherit;
- white-space: pre;
+ display: inline-block;
+ width: 14px;
+ text-decoration: inherit;
+ white-space: pre;
}
.styles-clipboard-only {
- display: inline-block;
- width: 0;
- opacity: 0;
- pointer-events: none;
- white-space: pre;
+ display: inline-block;
+ width: 0;
+ opacity: 0;
+ pointer-events: none;
+ white-space: pre;
}
.tree-outline li.child-editing .styles-clipboard-only {
- display: none;
+ display: none;
}
/* Matched styles */
:host-context(.matched-styles) .tree-outline li {
- margin-left: 0 !important;
+ margin-left: 0 !important;
}
.expand-icon {
- user-select: none;
- margin-left: -6px;
- margin-right: 2px;
- margin-bottom: -2px;
+ user-select: none;
+ margin-left: -6px;
+ margin-right: 2px;
+ margin-bottom: -2px;
}
.tree-outline li:not(.parent) .expand-icon {
- display: none;
+ display: none;
}
:host-context(.matched-styles:not(.read-only):hover) .enabled-button {
- visibility: visible;
+ visibility: visible;
}
:host-context(.matched-styles:not(.read-only)) .tree-outline li.disabled .enabled-button {
- visibility: visible;
+ visibility: visible;
}
:host-context(.matched-styles) ol.expanded {
- margin-left: 16px;
+ margin-left: 16px;
}
.devtools-link-styled-trim {
- display: inline-block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- max-width: 80%;
- vertical-align: bottom;
+ display: inline-block;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ max-width: 80%;
+ vertical-align: bottom;
}
@media (forced-colors: active) {
- .tree-outline > li .webkit-css-property {
- color: HighlightText;
- }
+ .tree-outline > li .webkit-css-property {
+ color: HighlightText;
+ }
}
diff --git a/front_end/elements/stylesSidebarPane.css b/front_end/elements/stylesSidebarPane.css
index 4198f2e..f0b2b16 100644
--- a/front_end/elements/stylesSidebarPane.css
+++ b/front_end/elements/stylesSidebarPane.css
@@ -5,269 +5,277 @@
*/
.styles-section {
- min-height: 18px;
- white-space: nowrap;
- user-select: text;
- border-bottom: 1px solid var(--divider-color);
- position: relative;
- overflow: hidden;
+ min-height: 18px;
+ white-space: nowrap;
+ user-select: text;
+ border-bottom: 1px solid var(--divider-color);
+ position: relative;
+ overflow: hidden;
}
.styles-section > div {
- padding: 2px 2px 4px 4px;
+ padding: 2px 2px 4px 4px;
}
.styles-section:last-child {
- border-bottom: none;
+ border-bottom: none;
}
.styles-section.read-only {
- background-color: #fafafa;
- font-style: italic;
+ background-color: #fafafa;
+ font-style: italic;
}
.styles-section[data-keyboard-focus="true"]:focus {
- background-color: hsl(214, 48%, 95%);
+ background-color: hsl(214, 48%, 95%);
}
.styles-section.read-only[data-keyboard-focus="true"]:focus {
- background-color: hsl(215, 25%, 87%);
+ background-color: hsl(215, 25%, 87%);
}
.styles-section .simple-selector.filter-match {
- background-color: rgba(255, 255, 0, 0.5);
+ background-color: rgba(255, 255, 0, 0.5);
}
:host-context(.-theme-with-dark-background) .styles-section .simple-selector.filter-match {
- background-color: hsla(133, 100%, 30%, 0.5);
+ background-color: hsla(133, 100%, 30%, 0.5);
}
.sidebar-pane-closing-brace {
- clear: both;
+ clear: both;
}
.styles-section-title {
- background-origin: padding;
- background-clip: padding;
- word-wrap: break-word;
- white-space: normal;
+ background-origin: padding;
+ background-clip: padding;
+ word-wrap: break-word;
+ white-space: normal;
}
.styles-section-title .media-list {
- color: hsl(0, 0%, 46%);
+ color: hsl(0, 0%, 46%);
}
.styles-section-title .media-list.media-matches .media.editable-media {
- color: #222;
+ color: #222;
}
.styles-section-title .media:not(.editing-media),
.styles-section-title .media:not(.editing-media) .subtitle {
- overflow: hidden;
+ overflow: hidden;
}
.styles-section-title .media .subtitle {
- float: right;
- color: hsl(0, 0%, 34%);
+ float: right;
+ color: hsl(0, 0%, 34%);
}
.styles-section-subtitle {
- color: hsl(0, 0%, 44%);
- float: right;
- padding-left: 15px;
- max-width: 100%;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- height: 15px;
- margin-bottom: -1px;
+ color: hsl(0, 0%, 44%);
+ float: right;
+ padding-left: 15px;
+ max-width: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ height: 15px;
+ margin-bottom: -1px;
}
.sidebar-pane-open-brace,
.sidebar-pane-closing-brace {
- color: hsl(0, 0%, 46%);
+ color: hsl(0, 0%, 46%);
}
.styles-section .styles-section-subtitle .devtools-link {
- color: hsl(0, 0%, 44%);
- text-decoration-color: hsl(0, 0%, 60%);
+ color: hsl(0, 0%, 44%);
+ text-decoration-color: hsl(0, 0%, 60%);
}
.styles-section .selector {
- color: hsl(0, 0%, 46%);
+ color: hsl(0, 0%, 46%);
}
-.styles-section .simple-selector.selector-matches, .styles-section.keyframe-key {
- color: #222;
+.styles-section .simple-selector.selector-matches,
+.styles-section.keyframe-key {
+ color: #222;
}
.styles-section .devtools-link {
- user-select: none;
+ user-select: none;
}
.styles-section .style-properties {
- margin: 0;
- padding: 2px 4px 0 0;
- list-style: none;
- clear: both;
- display: flex;
+ margin: 0;
+ padding: 2px 4px 0 0;
+ list-style: none;
+ clear: both;
+ display: flex;
}
.styles-section.matched-styles .style-properties {
- padding-left: 0;
+ padding-left: 0;
}
@keyframes styles-element-state-pane-slidein {
- from {
- margin-top: -60px;
- }
- to {
- margin-top: 0px;
- }
+ from {
+ margin-top: -60px;
+ }
+
+ to {
+ margin-top: 0;
+ }
}
@keyframes styles-element-state-pane-slideout {
- from {
- margin-top: 0px;
- }
- to {
- margin-top: -60px;
- }
+ from {
+ margin-top: 0;
+ }
+
+ to {
+ margin-top: -60px;
+ }
}
.styles-sidebar-toolbar-pane {
- position: relative;
- animation-duration: 0.1s;
- animation-direction: normal;
+ position: relative;
+ animation-duration: 0.1s;
+ animation-direction: normal;
}
.styles-sidebar-toolbar-pane-container {
- position: relative;
- overflow: hidden;
- flex-shrink: 0;
+ position: relative;
+ overflow: hidden;
+ flex-shrink: 0;
}
.styles-selector {
- cursor: text;
+ cursor: text;
}
.styles-sidebar-pane-toolbar-container {
- flex-shrink: 0;
- overflow: hidden;
- position: sticky;
- top: 0;
- background-color: var(--toolbar-bg-color);
- z-index: 1;
+ flex-shrink: 0;
+ overflow: hidden;
+ position: sticky;
+ top: 0;
+ background-color: var(--toolbar-bg-color);
+ z-index: 1;
}
.styles-sidebar-pane-toolbar {
- border-bottom: 1px solid #eee;
- flex-shrink: 0;
+ border-bottom: 1px solid #eee;
+ flex-shrink: 0;
}
.styles-sidebar-pane-filter-box {
- flex: auto;
- display: flex;
+ flex: auto;
+ display: flex;
}
.styles-sidebar-pane-filter-box > input {
- outline: none !important;
- border: none;
- width: 100%;
- background: white;
- padding-left: 4px;
- margin: 3px;
+ outline: none !important;
+ border: none;
+ width: 100%;
+ background: white;
+ padding-left: 4px;
+ margin: 3px;
}
.styles-sidebar-pane-filter-box > input:hover {
- box-shadow: var(--focus-ring-inactive-shadow);
+ box-shadow: var(--focus-ring-inactive-shadow);
}
.styles-sidebar-pane-filter-box > input:focus,
.styles-sidebar-pane-filter-box > input:not(:placeholder-shown) {
- box-shadow: var(--focus-ring-active-shadow);
+ box-shadow: var(--focus-ring-active-shadow);
}
.styles-sidebar-pane-filter-box > input::placeholder {
- color: rgba(0, 0, 0, 0.54);
+ color: rgba(0, 0, 0, 0.54);
}
.styles-section.styles-panel-hovered:not(.read-only) span.simple-selector:hover,
-.styles-section.styles-panel-hovered:not(.read-only) .media-text :hover{
- text-decoration: underline;
- cursor: default;
+.styles-section.styles-panel-hovered:not(.read-only) .media-text :hover {
+ text-decoration: underline;
+ cursor: default;
}
.sidebar-separator {
- background-color: var(--toolbar-bg-color);
- padding: 0 5px;
- border-bottom: 1px solid var(--divider-color);
- color: hsla(0, 0%, 32%, 1);
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- line-height: 22px;
+ background-color: var(--toolbar-bg-color);
+ padding: 0 5px;
+ border-bottom: 1px solid var(--divider-color);
+ color: hsla(0, 0%, 32%, 1);
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ line-height: 22px;
}
.sidebar-separator > span.monospace {
- max-width: 90px;
- display: inline-block;
- overflow: hidden;
- text-overflow: ellipsis;
- vertical-align: middle;
- margin-left: 2px;
+ max-width: 90px;
+ display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ margin-left: 2px;
}
.sidebar-pane-section-toolbar {
- position: absolute;
- right: 0;
- bottom: 0;
- visibility: hidden;
- background-color: rgba(255, 255, 255, 0.9);
- z-index: 0;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ visibility: hidden;
+ background-color: rgba(255, 255, 255, 0.9);
+ z-index: 0;
}
.styles-section[data-keyboard-focus="true"]:focus .sidebar-pane-section-toolbar {
- background-color: hsla(214, 67%, 95%, 0.9);
+ background-color: hsla(214, 67%, 95%, 0.9);
}
.styles-pane:not(.is-editing-style) .styles-section.matched-styles:not(.read-only):hover .sidebar-pane-section-toolbar {
- visibility: visible;
+ visibility: visible;
}
.styles-show-all {
- margin-left: 16px;
- text-overflow: ellipsis;
- overflow: hidden;
- max-width: -webkit-fill-available;
+ margin-left: 16px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: -webkit-fill-available;
}
@media (forced-colors: active) {
- .styles-sidebar-pane-filter-box > input {
- border: 1px solid ButtonText;
- background: ButtonFace;
- }
- .styles-section[data-keyboard-focus="true"]:focus,
- .styles-section.read-only[data-keyboard-focus="true"]:focus {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- .styles-section[data-keyboard-focus="true"]:focus *,
- .styles-section.read-only[data-keyboard-focus="true"]:focus *,
- .styles-section[data-keyboard-focus="true"]:focus .styles-section-subtitle .devtools-link {
- color: HighlightText;
- text-decoration-color: HighlightText;
- }
- .styles-section[data-keyboard-focus="true"]:focus .sidebar-pane-section-toolbar {
- background-color: ButtonFace;
- }
- .sidebar-pane-section-toolbar {
- forced-color-adjust: none;
- border-color: 1px solid ButtonText;
- background-color: ButtonFace;
- }
- .styles-section .styles-section-subtitle .devtools-link {
- color: LinkText;
- text-decoration-color: LinkText;
- }
+ .styles-sidebar-pane-filter-box > input {
+ border: 1px solid ButtonText;
+ background: ButtonFace;
+ }
+
+ .styles-section[data-keyboard-focus="true"]:focus,
+ .styles-section.read-only[data-keyboard-focus="true"]:focus {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ .styles-section[data-keyboard-focus="true"]:focus *,
+ .styles-section.read-only[data-keyboard-focus="true"]:focus *,
+ .styles-section[data-keyboard-focus="true"]:focus .styles-section-subtitle .devtools-link {
+ color: HighlightText;
+ text-decoration-color: HighlightText;
+ }
+
+ .styles-section[data-keyboard-focus="true"]:focus .sidebar-pane-section-toolbar {
+ background-color: ButtonFace;
+ }
+
+ .sidebar-pane-section-toolbar {
+ forced-color-adjust: none;
+ border-color: 1px solid ButtonText;
+ background-color: ButtonFace;
+ }
+
+ .styles-section .styles-section-subtitle .devtools-link {
+ color: linktext;
+ text-decoration-color: linktext;
+ }
}
diff --git a/front_end/emulation/deviceModeToolbar.css b/front_end/emulation/deviceModeToolbar.css
index 18e7360..59a2ff2 100644
--- a/front_end/emulation/deviceModeToolbar.css
+++ b/front_end/emulation/deviceModeToolbar.css
@@ -5,27 +5,27 @@
*/
.device-mode-size-input {
- width: 41px;
- max-height: 18px;
- margin: 0 2px;
- text-align: center;
+ width: 41px;
+ max-height: 18px;
+ margin: 0 2px;
+ text-align: center;
}
.device-mode-size-input:focus::-webkit-input-placeholder {
- color: transparent;
+ color: transparent;
}
.device-mode-size-input:disabled {
- background: transparent;
- user-select: none;
- opacity: 0.6;
+ background: transparent;
+ user-select: none;
+ opacity: 0.6;
}
.device-mode-x {
- margin: 0 1px;
- font-size: 16px;
+ margin: 0 1px;
+ font-size: 16px;
}
.device-mode-empty-toolbar-element {
- width: 0;
+ width: 0;
}
diff --git a/front_end/emulation/deviceModeView.css b/front_end/emulation/deviceModeView.css
index b542d72..f20f505 100644
--- a/front_end/emulation/deviceModeView.css
+++ b/front_end/emulation/deviceModeView.css
@@ -5,388 +5,388 @@
*/
:host {
- overflow: hidden;
- align-items: stretch;
- flex: auto;
- background-color: hsl(0, 0%, 98%);
+ overflow: hidden;
+ align-items: stretch;
+ flex: auto;
+ background-color: hsl(0, 0%, 98%);
}
.device-mode-toolbar {
- flex: none;
- background-color: hsl(0, 0%, 98%);
- border-bottom: 1px solid #ccc;
- display: flex;
- flex-direction: row;
- align-items: stretch;
+ flex: none;
+ background-color: hsl(0, 0%, 98%);
+ border-bottom: 1px solid #ccc;
+ display: flex;
+ flex-direction: row;
+ align-items: stretch;
}
.device-mode-toolbar .toolbar {
- overflow: hidden;
- flex: 0 100000 auto;
- padding: 0 5px;
+ overflow: hidden;
+ flex: 0 100000 auto;
+ padding: 0 5px;
}
.device-mode-toolbar .toolbar.device-mode-toolbar-fixed-size {
- flex: 0 1 auto;
+ flex: 0 1 auto;
}
.device-mode-toolbar-options.toolbar {
- position: sticky;
- right: 0;
- flex: none;
+ position: sticky;
+ right: 0;
+ flex: none;
}
.device-mode-toolbar-spacer {
- flex: 1 1 0;
- display: flex;
- flex-direction: row;
- overflow: hidden;
+ flex: 1 1 0;
+ display: flex;
+ flex-direction: row;
+ overflow: hidden;
}
.device-mode-content-clip {
- overflow: hidden;
- flex: auto;
+ overflow: hidden;
+ flex: auto;
}
.device-mode-media-container {
- flex: none;
- overflow: hidden;
- box-shadow: inset 0 -1px #ccc;
+ flex: none;
+ overflow: hidden;
+ box-shadow: inset 0 -1px #ccc;
}
.device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-media-container {
- margin-bottom: 20px;
+ margin-bottom: 20px;
}
.device-mode-presets-container {
- flex: 0 0 20px;
- display: flex;
+ flex: 0 0 20px;
+ display: flex;
}
.device-mode-presets-container-inner {
- flex: auto;
- justify-content: center;
- position: relative;
- background-color: hsl(0, 0%, 90%);
- border: 2px solid hsl(0, 0%, 98%);
- border-bottom: 2px solid hsl(0, 0%, 98%);
- }
+ flex: auto;
+ justify-content: center;
+ position: relative;
+ background-color: hsl(0, 0%, 90%);
+ border: 2px solid hsl(0, 0%, 98%);
+ border-bottom: 2px solid hsl(0, 0%, 98%);
+}
.device-mode-presets-container:hover {
- transition: opacity 0.1s;
- transition-delay: 50ms;
- opacity: 1;
+ transition: opacity 0.1s;
+ transition-delay: 50ms;
+ opacity: 1;
}
.device-mode-preset-bar-outer {
- pointer-events: none;
- display: flex;
- justify-content: center;
+ pointer-events: none;
+ display: flex;
+ justify-content: center;
}
.device-mode-preset-bar {
- border-left: 2px solid hsl(0, 0%, 98%);
- border-right: 2px solid hsl(0, 0%, 98%);
- pointer-events: auto;
- text-align: center;
- flex: none;
- cursor: pointer;
- color: #5A5A5A;
- display: flex;
- align-items: center;
- justify-content: center;
- white-space: nowrap;
- margin-bottom: 1px;
+ border-left: 2px solid hsl(0, 0%, 98%);
+ border-right: 2px solid hsl(0, 0%, 98%);
+ pointer-events: auto;
+ text-align: center;
+ flex: none;
+ cursor: pointer;
+ color: #5a5a5a;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ white-space: nowrap;
+ margin-bottom: 1px;
}
.device-mode-preset-bar:hover {
- transition: background-color 0.1s;
- transition-delay: 50ms;
- background-color: #d6d6d6;
+ transition: background-color 0.1s;
+ transition-delay: 50ms;
+ background-color: #d6d6d6;
}
.device-mode-preset-bar > span {
- visibility: hidden;
+ visibility: hidden;
}
.device-mode-preset-bar:hover > span {
- transition: visibility 0.1s;
- transition-delay: 50ms;
- visibility: visible;
+ transition: visibility 0.1s;
+ transition-delay: 50ms;
+ visibility: visible;
}
.device-mode-content-area {
- flex: auto;
- position: relative;
- margin: 0;
+ flex: auto;
+ position: relative;
+ margin: 0;
}
.device-mode-screen-area {
- position: absolute;
- left: 0;
- right: 0;
- width: 0;
- height: 0;
- background-color: #171717;
+ position: absolute;
+ left: 0;
+ right: 0;
+ width: 0;
+ height: 0;
+ background-color: #171717;
}
.device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-screen-area {
- box-shadow: hsl(240, 3%, 84%) 0 0 0 0.5px, hsla(0, 0%, 80%, 0.4) 0 0 20px;
+ box-shadow: hsl(240, 3%, 84%) 0 0 0 0.5px, hsla(0, 0%, 80%, 0.4) 0 0 20px;
}
.device-mode-screen-image {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
}
.device-mode-resizer {
- position: absolute;
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- transition: background-color 0.1s ease, opacity 0.1s ease;
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ transition: background-color 0.1s ease, opacity 0.1s ease;
}
.device-mode-resizer:hover {
- background-color: hsla(0, 0%, 0%, 0.1);
- opacity: 1;
+ background-color: hsla(0, 0%, 0%, 0.1);
+ opacity: 1;
}
.device-mode-resizer > div {
- pointer-events: none;
+ pointer-events: none;
}
.device-mode-right-resizer {
- top: 0;
- bottom: -1px;
- right: -20px;
- width: 20px;
+ top: 0;
+ bottom: -1px;
+ right: -20px;
+ width: 20px;
}
.device-mode-left-resizer {
- top: 0;
- bottom: -1px;
- left: -20px;
- width: 20px;
- opacity: 0;
+ top: 0;
+ bottom: -1px;
+ left: -20px;
+ width: 20px;
+ opacity: 0;
}
.device-mode-bottom-resizer {
- left: 0;
- right: -1px;
- bottom: -20px;
- height: 20px;
+ left: 0;
+ right: -1px;
+ bottom: -20px;
+ height: 20px;
}
.device-mode-bottom-right-resizer {
- left: 0;
- top: 0;
- right: -20px;
- bottom: -20px;
- background-color: hsla(0, 0%, 0%, 0.02);
+ left: 0;
+ top: 0;
+ right: -20px;
+ bottom: -20px;
+ background-color: hsla(0, 0%, 0%, 0.02);
}
.device-mode-bottom-left-resizer {
- left: -20px;
- top: 0;
- right: 0;
- bottom: -20px;
- opacity: 0;
+ left: -20px;
+ top: 0;
+ right: 0;
+ bottom: -20px;
+ opacity: 0;
}
.device-mode-right-resizer > div {
- content: url(Images/resizeHorizontal.png);
- width: 6px;
- height: 26px;
+ content: url(Images/resizeHorizontal.png);
+ width: 6px;
+ height: 26px;
}
.device-mode-left-resizer > div {
- content: url(Images/resizeHorizontal.png);
- width: 6px;
- height: 26px;
+ content: url(Images/resizeHorizontal.png);
+ width: 6px;
+ height: 26px;
}
.device-mode-bottom-resizer > div {
- content: url(Images/resizeVertical.png);
- margin-bottom: -2px;
- width: 26px;
- height: 6px;
+ content: url(Images/resizeVertical.png);
+ margin-bottom: -2px;
+ width: 26px;
+ height: 6px;
}
.device-mode-bottom-right-resizer > div {
- position: absolute;
- bottom: 3px;
- right: 3px;
- width: 13px;
- height: 13px;
- content: url(Images/resizeDiagonal.png);
+ position: absolute;
+ bottom: 3px;
+ right: 3px;
+ width: 13px;
+ height: 13px;
+ content: url(Images/resizeDiagonal.png);
}
.device-mode-bottom-left-resizer > div {
- position: absolute;
- bottom: 3px;
- left: 3px;
- width: 13px;
- height: 13px;
- content: url(Images/resizeDiagonal.png);
- transform: rotate(90deg);
+ position: absolute;
+ bottom: 3px;
+ left: 3px;
+ width: 13px;
+ height: 13px;
+ content: url(Images/resizeDiagonal.png);
+ transform: rotate(90deg);
}
@media (-webkit-min-device-pixel-ratio: 1.1) {
- .device-mode-right-resizer > div {
- content: url(Images/resizeHorizontal_2x.png);
- }
+ .device-mode-right-resizer > div {
+ content: url(Images/resizeHorizontal_2x.png);
+ }
- .device-mode-left-resizer > div {
- content: url(Images/resizeHorizontal_2x.png);
- }
+ .device-mode-left-resizer > div {
+ content: url(Images/resizeHorizontal_2x.png);
+ }
- .device-mode-bottom-resizer > div {
- content: url(Images/resizeVertical_2x.png);
- }
+ .device-mode-bottom-resizer > div {
+ content: url(Images/resizeVertical_2x.png);
+ }
- .device-mode-bottom-right-resizer > div {
- content: url(Images/resizeDiagonal_2x.png);
- }
+ .device-mode-bottom-right-resizer > div {
+ content: url(Images/resizeDiagonal_2x.png);
+ }
- .device-mode-bottom-left-resizer > div {
- content: url(Images/resizeDiagonal_2x.png);
- }
+ .device-mode-bottom-left-resizer > div {
+ content: url(Images/resizeDiagonal_2x.png);
+ }
} /* media */
.device-mode-page-area {
- position: absolute;
- left: 0;
- right: 0;
- width: 0;
- height: 0;
- display: flex;
- background-color: #fcfcfc;
+ position: absolute;
+ left: 0;
+ right: 0;
+ width: 0;
+ height: 0;
+ display: flex;
+ background-color: #fcfcfc;
}
.device-mode-ruler {
- position: absolute;
- overflow: visible;
+ position: absolute;
+ overflow: visible;
}
.device-mode-ruler-top {
- height: 20px;
- right: 0;
+ height: 20px;
+ right: 0;
}
.device-mode-ruler-left {
- width: 20px;
- bottom: 0;
+ width: 20px;
+ bottom: 0;
}
.device-mode-ruler-content {
- pointer-events: none;
- position: absolute;
- left: -20px;
- top: -20px;
+ pointer-events: none;
+ position: absolute;
+ left: -20px;
+ top: -20px;
}
.device-mode-ruler-top .device-mode-ruler-content {
- border-top: 1px solid transparent;
- right: 0;
- bottom: 20px;
- background-color: hsla(0, 0%, 98%, 0.9);
+ border-top: 1px solid transparent;
+ right: 0;
+ bottom: 20px;
+ background-color: hsla(0, 0%, 98%, 0.9);
}
.device-mode-content-clip.device-mode-outline-visible .device-mode-ruler-top .device-mode-ruler-content {
- border-top: 1px solid hsl(0, 0%, 50%);
+ border-top: 1px solid hsl(0, 0%, 50%);
}
.device-mode-ruler-left .device-mode-ruler-content {
- border-left: 1px solid transparent;
- border-top: 1px solid transparent;
- right: 20px;
- bottom: 0;
+ border-left: 1px solid transparent;
+ border-top: 1px solid transparent;
+ right: 20px;
+ bottom: 0;
}
.device-mode-content-clip.device-mode-outline-visible .device-mode-ruler-left .device-mode-ruler-content {
- border-left: 1px solid hsl(0, 0%, 50%);
- border-top: 1px solid hsl(0, 0%, 50%);
+ border-left: 1px solid hsl(0, 0%, 50%);
+ border-top: 1px solid hsl(0, 0%, 50%);
}
.device-mode-ruler-inner {
- position: absolute;
+ position: absolute;
}
.device-mode-ruler-top .device-mode-ruler-inner {
- top: 0;
- bottom: 0;
- left: 20px;
- right: 0;
- border-bottom: 1px solid hsl(0, 0%, 50%);
+ top: 0;
+ bottom: 0;
+ left: 20px;
+ right: 0;
+ border-bottom: 1px solid hsl(0, 0%, 50%);
}
.device-mode-ruler-left .device-mode-ruler-inner {
- left: 0;
- right: 0;
- top: 19px;
- bottom: 0;
- border-right: 1px solid hsl(0, 0%, 50%);
- background-color: hsla(0, 0%, 98%, 0.9);
+ left: 0;
+ right: 0;
+ top: 19px;
+ bottom: 0;
+ border-right: 1px solid hsl(0, 0%, 50%);
+ background-color: hsla(0, 0%, 98%, 0.9);
}
.device-mode-ruler-marker {
- position: absolute;
+ position: absolute;
}
.device-mode-ruler-top .device-mode-ruler-marker {
- width: 0;
- height: 5px;
- bottom: 0;
- border-right: 1px solid hsl(0, 0%, 50%);
- margin-right: -1px;
+ width: 0;
+ height: 5px;
+ bottom: 0;
+ border-right: 1px solid hsl(0, 0%, 50%);
+ margin-right: -1px;
}
.device-mode-ruler-top .device-mode-ruler-marker.device-mode-ruler-marker-medium {
- height: 10px;
+ height: 10px;
}
.device-mode-ruler-top .device-mode-ruler-marker.device-mode-ruler-marker-large {
- height: 15px;
+ height: 15px;
}
.device-mode-ruler-left .device-mode-ruler-marker {
- height: 0;
- width: 5px;
- right: 0;
- border-bottom: 1px solid hsl(0, 0%, 50%);
- margin-bottom: -1px;
+ height: 0;
+ width: 5px;
+ right: 0;
+ border-bottom: 1px solid hsl(0, 0%, 50%);
+ margin-bottom: -1px;
}
.device-mode-ruler-left .device-mode-ruler-marker.device-mode-ruler-marker-medium {
- width: 10px;
+ width: 10px;
}
.device-mode-ruler-left .device-mode-ruler-marker.device-mode-ruler-marker-large {
- width: 15px;
+ width: 15px;
}
.device-mode-ruler-text {
- color: hsl(0, 0%, 50%);
- position: relative;
- pointer-events: auto;
+ color: hsl(0, 0%, 50%);
+ position: relative;
+ pointer-events: auto;
}
.device-mode-ruler-text:hover {
- color: hsl(0, 0%, 10%);
+ color: hsl(0, 0%, 10%);
}
.device-mode-ruler-top .device-mode-ruler-text {
- left: 2px;
- top: -2px;
+ left: 2px;
+ top: -2px;
}
.device-mode-ruler-left .device-mode-ruler-text {
- left: -4px;
- top: -15px;
- transform: rotate(270deg);
+ left: -4px;
+ top: -15px;
+ transform: rotate(270deg);
}
diff --git a/front_end/emulation/devicesSettingsTab.css b/front_end/emulation/devicesSettingsTab.css
index 01511cf..ab66e16 100644
--- a/front_end/emulation/devicesSettingsTab.css
+++ b/front_end/emulation/devicesSettingsTab.css
@@ -5,72 +5,72 @@
*/
.devices-settings-tab .settings-tab.settings-content {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- height: 100%;
- margin: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ height: 100%;
+ margin: 0;
}
.devices-settings-tab .devices-button-row {
- flex: none;
- display: flex;
+ flex: none;
+ display: flex;
}
.devices-settings-tab .devices-button-row button {
- margin-right: 10px;
- min-width: 120px;
- flex: none;
+ margin-right: 10px;
+ min-width: 120px;
+ flex: none;
}
.devices-settings-tab .devices-list {
- width: 350px;
- margin-top: 10px;
+ width: 350px;
+ margin-top: 10px;
}
.devices-list-item {
- padding: 3px 5px 3px 5px;
- height: 30px;
- display: flex;
- align-items: center;
- flex: auto 1 1;
- cursor: pointer;
- overflow: hidden;
- color: #222;
- user-select: none;
- white-space: nowrap;
- text-overflow: ellipsis;
+ padding: 3px 5px 3px 5px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ flex: auto 1 1;
+ cursor: pointer;
+ overflow: hidden;
+ color: #222;
+ user-select: none;
+ white-space: nowrap;
+ text-overflow: ellipsis;
}
.devices-list-checkbox {
- height: 12px;
- width: 12px;
- margin: 2px 5px 2px 2px;
- flex: none;
- pointer-events: none;
+ height: 12px;
+ width: 12px;
+ margin: 2px 5px 2px 2px;
+ flex: none;
+ pointer-events: none;
}
.devices-list-checkbox:focus {
- outline: auto 5px -webkit-focus-ring-color;
+ outline: auto 5px -webkit-focus-ring-color;
}
.devices-edit-fields {
- flex: auto;
- display: flex;
- flex-direction: column;
- align-items: stretch;
- margin-bottom: 5px;
+ flex: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ margin-bottom: 5px;
}
.devices-edit-fields input {
- flex: auto;
- margin: 8px 5px 0 5px;
+ flex: auto;
+ margin: 8px 5px 0 5px;
}
.devices-edit-fields .device-edit-fixed {
- flex: 0 0 140px;
+ flex: 0 0 140px;
}
.devices-edit-fields select {
- margin: 8px 5px 0 5px;
+ margin: 8px 5px 0 5px;
}
diff --git a/front_end/emulation/inspectedPagePlaceholder.css b/front_end/emulation/inspectedPagePlaceholder.css
index b5c4a93..5e34872 100644
--- a/front_end/emulation/inspectedPagePlaceholder.css
+++ b/front_end/emulation/inspectedPagePlaceholder.css
@@ -5,5 +5,5 @@
*/
:host {
- background-color: white;
+ background-color: white;
}
diff --git a/front_end/emulation/locationsSettingsTab.css b/front_end/emulation/locationsSettingsTab.css
index 730b558..260a090 100644
--- a/front_end/emulation/locationsSettingsTab.css
+++ b/front_end/emulation/locationsSettingsTab.css
@@ -10,7 +10,7 @@
.header {
padding: 0 0 6px;
- border-bottom: 1px solid #EEE;
+ border-bottom: 1px solid #eee;
font-size: 18px;
font-weight: normal;
flex: none;
diff --git a/front_end/emulation/mediaQueryInspector.css b/front_end/emulation/mediaQueryInspector.css
index 7e96b7c..b3ec12b 100644
--- a/front_end/emulation/mediaQueryInspector.css
+++ b/front_end/emulation/mediaQueryInspector.css
@@ -7,118 +7,118 @@
/* Media query bars */
.media-inspector-view {
- height: 50px;
+ height: 50px;
}
.media-inspector-marker-container {
- height: 14px;
- margin: 2px 0;
- position: relative;
+ height: 14px;
+ margin: 2px 0;
+ position: relative;
}
.media-inspector-bar {
- display: flex;
- flex-direction: row;
- align-items: stretch;
- pointer-events: none;
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
+ display: flex;
+ flex-direction: row;
+ align-items: stretch;
+ pointer-events: none;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
}
.media-inspector-marker {
- flex: none;
- pointer-events: auto;
- margin: 1px 0;
- white-space: nowrap;
- z-index: auto;
- position: relative;
+ flex: none;
+ pointer-events: auto;
+ margin: 1px 0;
+ white-space: nowrap;
+ z-index: auto;
+ position: relative;
}
.media-inspector-marker-spacer {
- flex: auto;
+ flex: auto;
}
.media-inspector-marker:hover {
- margin: -1px 0;
- opacity: 1;
+ margin: -1px 0;
+ opacity: 1;
}
.media-inspector-marker-max-width {
- background-color: hsl(207, 90%, 77%);
- border-right: 2px solid hsl(207, 90%, 61%);
- border-left: 2px solid hsl(207, 90%, 61%);
+ background-color: hsl(207, 90%, 77%);
+ border-right: 2px solid hsl(207, 90%, 61%);
+ border-left: 2px solid hsl(207, 90%, 61%);
}
.media-inspector-marker-inactive .media-inspector-marker-max-width:not(:hover) {
- background-color: hsl(199, 94%, 94%);
+ background-color: hsl(199, 94%, 94%);
}
.media-inspector-marker-min-max-width {
- background-color: hsl(88, 50%, 76%);
- border-left: 2px solid #689F38;
- border-right: 2px solid hsl(92, 48%, 42%);
+ background-color: hsl(88, 50%, 76%);
+ border-left: 2px solid #689f38;
+ border-right: 2px solid hsl(92, 48%, 42%);
}
.media-inspector-marker-inactive .media-inspector-marker-min-max-width:not(:hover) {
- background-color: hsl(125, 39%, 94%);
+ background-color: hsl(125, 39%, 94%);
}
.media-inspector-marker-min-max-width:hover {
- z-index: 1;
+ z-index: 1;
}
.media-inspector-marker-min-width {
- background-color: hsl(36, 100%, 75%);
- flex: auto;
+ background-color: hsl(36, 100%, 75%);
+ flex: auto;
}
.media-inspector-marker-inactive .media-inspector-marker-min-width:not(:hover) {
- background-color: hsl(37, 100%, 94%);
+ background-color: hsl(37, 100%, 94%);
}
.media-inspector-marker-min-width-right {
- border-left: 2px solid hsl(30, 100%, 48%);
+ border-left: 2px solid hsl(30, 100%, 48%);
}
.media-inspector-marker-min-width-left {
- border-right: 2px solid hsl(30, 100%, 48%);
+ border-right: 2px solid hsl(30, 100%, 48%);
}
/* Media query labels */
.media-inspector-marker:not(:hover) .media-inspector-marker-label-container {
- display: none;
+ display: none;
}
.media-inspector-marker-label-container {
- position: absolute;
- z-index: 1;
+ position: absolute;
+ z-index: 1;
}
.media-inspector-marker-label-container-left {
- left: -2px;
+ left: -2px;
}
.media-inspector-marker-label-container-right {
- right: -2px;
+ right: -2px;
}
.media-inspector-marker-label {
- color: #222;
- position: absolute;
- top: 1px;
- bottom: 0;
- font-size: 12px;
- pointer-events: none;
+ color: #222;
+ position: absolute;
+ top: 1px;
+ bottom: 0;
+ font-size: 12px;
+ pointer-events: none;
}
.media-inspector-label-right {
- right: 4px;
+ right: 4px;
}
.media-inspector-label-left {
- left: 4px;
+ left: 4px;
}
diff --git a/front_end/emulation/sensors.css b/front_end/emulation/sensors.css
index 73e532d..bb3ed69 100644
--- a/front_end/emulation/sensors.css
+++ b/front_end/emulation/sensors.css
@@ -12,7 +12,7 @@
.sensors-view input {
width: 100%;
max-width: 120px;
- margin: -5px 10px 0px 0px;
+ margin: -5px 10px 0 0;
text-align: end;
}
@@ -22,7 +22,7 @@
.sensors-view fieldset {
border: none;
- padding: 10px 0px;
+ padding: 10px 0;
margin-left: 0;
flex: 0 0 auto;
margin: 0;
@@ -85,7 +85,7 @@
-webkit-perspective-origin: 50% 50%;
width: 160px;
height: 150px;
- background: linear-gradient(#E1F5FE 0%, #E1F5FE 64%, #b0Ebf3 64%, #DEF6F9 100%);
+ background: linear-gradient(#e1f5fe 0%, #e1f5fe 64%, #b0ebf3 64%, #def6f9 100%);
transition: 0.2s ease opacity, 0.2s ease -webkit-filter;
overflow: hidden;
margin-bottom: 10px;
@@ -99,7 +99,7 @@
.orientation-element,
.orientation-element::before,
-.orientation-element::after{
+.orientation-element::after {
position: absolute;
box-sizing: border-box;
transform-style: preserve-3d;
@@ -119,7 +119,8 @@
transform: rotate3d(1, 0, 0, 90deg);
}
-.orientation-box.is-animating, .is-animating .orientation-layer {
+.orientation-box.is-animating,
+.is-animating .orientation-layer {
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
@@ -130,8 +131,7 @@
}
.orientation-front,
-.orientation-back
-{
+.orientation-back {
width: 62px;
height: 122px;
border-radius: 8px;
@@ -146,7 +146,6 @@
background-image: url(Images/accelerometer-back.svg);
}
-
.orientation-left,
.orientation-right {
width: 8px;
@@ -162,7 +161,6 @@
background-image: url(Images/accelerometer-left.png);
}
-
.orientation-right {
right: -8px;
transform-origin: left center;
@@ -173,22 +171,19 @@
.orientation-left::before,
.orientation-left::after,
.orientation-right::before,
-.orientation-right::after
-{
+.orientation-right::after {
content: '';
width: 8px;
height: 6px;
}
.orientation-left::before,
-.orientation-left::after
-{
+.orientation-left::after {
background-image: url(Images/accelerometer-left.png);
}
.orientation-right::before,
-.orientation-right::after
-{
+.orientation-right::after {
background-image: url(Images/accelerometer-right.png);
}
@@ -223,7 +218,6 @@
background-image: url(Images/accelerometer-top.png);
}
-
.orientation-bottom {
bottom: -8px;
transform-origin: center top;
@@ -231,26 +225,22 @@
background-image: url(Images/accelerometer-bottom.png);
}
-
.orientation-top::before,
.orientation-top::after,
.orientation-bottom::before,
-.orientation-bottom::after
-{
+.orientation-bottom::after {
content: '';
width: 8px;
height: 8px;
}
.orientation-top::before,
-.orientation-top::after
-{
+.orientation-top::after {
background-image: url(Images/accelerometer-top.png);
}
.orientation-bottom::before,
-.orientation-bottom::after
-{
+.orientation-bottom::after {
background-image: url(Images/accelerometer-bottom.png);
}
diff --git a/front_end/event_listeners/eventListenersView.css b/front_end/event_listeners/eventListenersView.css
index 4900ade..ecf8f05 100644
--- a/front_end/event_listeners/eventListenersView.css
+++ b/front_end/event_listeners/eventListenersView.css
@@ -5,87 +5,89 @@
*/
.tree-outline-disclosure li {
- padding: 2px 0 0 5px;
- overflow: hidden;
- display: flex;
- min-height: 17px;
- align-items: baseline;
+ padding: 2px 0 0 5px;
+ overflow: hidden;
+ display: flex;
+ min-height: 17px;
+ align-items: baseline;
}
.tree-outline-disclosure > li {
- border-top: 1px solid #f0f0f0;
+ border-top: 1px solid #f0f0f0;
}
.tree-outline-disclosure > li:first-of-type {
- border-top: none;
+ border-top: none;
}
.tree-outline-disclosure {
- padding-left: 0 !important;
- padding-right: 3px;
+ padding-left: 0 !important;
+ padding-right: 3px;
}
.tree-outline-disclosure li.parent::before {
- top: 0 !important;
+ top: 0 !important;
}
.tree-outline-disclosure .name {
- color: rgb(136, 19, 145);
+ color: rgb(136, 19, 145);
}
.tree-outline-disclosure .object-value-node {
- overflow: hidden;
- text-overflow: ellipsis;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.event-listener-details {
- display: flex;
+ display: flex;
}
.event-listener-tree-subtitle {
- float: right;
- margin-left: 5px;
- flex-shrink: 0;
+ float: right;
+ margin-left: 5px;
+ flex-shrink: 0;
}
.event-listener-button {
- padding: 0 3px;
- background-color: #f2f2f2;
- border-radius: 3px;
- border: 1px solid #c3c3c3;
- margin-left: 10px;
- display: block;
- cursor: pointer;
- opacity: 0.8;
- flex-shrink: 0;
+ padding: 0 3px;
+ background-color: #f2f2f2;
+ border-radius: 3px;
+ border: 1px solid #c3c3c3;
+ margin-left: 10px;
+ display: block;
+ cursor: pointer;
+ opacity: 0.8;
+ flex-shrink: 0;
}
.event-listener-button:hover {
- background-color: #e0e0e0;
- opacity: 1;
+ background-color: #e0e0e0;
+ opacity: 1;
}
.tree-outline-disclosure li:hover .event-listener-button {
- display: inline;
+ display: inline;
}
@media (forced-colors: active) {
- .event-listener-details .event-listener-button {
- forced-color-adjust: none;
- opacity: 1;
- background: ButtonFace;
- color: ButtonText;
- border-color: ButtonText;
- }
- .event-listener-button:hover {
- background-color: Highlight !important;
- color: HighlightText;
- border-color: ButtonText;
- }
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .event-listener-button,
- .tree-outline-disclosure li[data-keyboard-focus="true"]:focus .gray-info-message {
- background-color: Highlight;
- color: HighlightText;
- border-color: HighlightText;
- }
+ .event-listener-details .event-listener-button {
+ forced-color-adjust: none;
+ opacity: 1;
+ background: ButtonFace;
+ color: ButtonText;
+ border-color: ButtonText;
+ }
+
+ .event-listener-button:hover {
+ background-color: Highlight !important;
+ color: HighlightText;
+ border-color: ButtonText;
+ }
+
+ .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .event-listener-button,
+ .tree-outline-disclosure li[data-keyboard-focus="true"]:focus .gray-info-message {
+ background-color: Highlight;
+ color: HighlightText;
+ border-color: HighlightText;
+ }
}
diff --git a/front_end/help/releaseNote.css b/front_end/help/releaseNote.css
index 2191323..34b9271 100644
--- a/front_end/help/releaseNote.css
+++ b/front_end/help/releaseNote.css
@@ -8,117 +8,118 @@
}
.hbox {
- overflow-y: auto;
- overflow-x: hidden;
+ overflow-y: auto;
+ overflow-x: hidden;
}
.release-note-top-section {
- height: 27px;
- line-height: 27px;
- padding: 0 15px;
- flex: none;
- background-color: var(--toolbar-bg-color);
- border-bottom: var(--divider-border);
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
+ height: 27px;
+ line-height: 27px;
+ padding: 0 15px;
+ flex: none;
+ background-color: var(--toolbar-bg-color);
+ border-bottom: var(--divider-border);
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
}
:host-context(.-theme-with-dark-background) .release-note-top-section {
- color: white;
+ color: white;
}
.release-note-container {
- display: flex;
- flex-direction: column;
+ display: flex;
+ flex-direction: column;
}
.release-note-container ul {
- display: flex;
- padding: 10px 16px;
- flex-direction: column;
- flex: none;
- margin: 4px 12px 0 2px;
- max-width: 600px;
+ display: flex;
+ padding: 10px 16px;
+ flex-direction: column;
+ flex: none;
+ margin: 4px 12px 0 2px;
+ max-width: 600px;
}
.release-note-container li {
- display: flex;
- flex-direction:column;
- flex: none;
- line-height: 24px;
- font-size: 14px;
+ display: flex;
+ flex-direction: column;
+ flex: none;
+ line-height: 24px;
+ font-size: 14px;
}
-
.release-note-container li:hover {
- color: #039be5;
+ color: #039be5;
}
.release-note-container .release-note-link {
- border: 1px solid rgba(0, 0, 0, .2);
- padding-left: 8px;
- padding-right: 8px;
- margin-bottom: 4px;
- text-decoration: none;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ padding-left: 8px;
+ padding-right: 8px;
+ margin-bottom: 4px;
+ text-decoration: none;
}
.release-note-container .release-note-link:hover {
- box-shadow: 0 0 0 1px rgba(0, 0, 0, .5) inset;
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5) inset;
}
.release-note-title,
.release-note-subtitle {
- color: inherit;
- text-decoration: none;
+ color: inherit;
+ text-decoration: none;
}
.release-note-subtitle {
- font-size: 13px;
- line-height: 13px;
- padding-bottom: 8px;
+ font-size: 13px;
+ line-height: 13px;
+ padding-bottom: 8px;
}
.release-note-container li:not(:hover) .release-note-subtitle {
- color: #999;
+ color: #999;
}
.release-note-action-container > button {
- margin: 10px 0 20px 20px;
- color: #757575;
+ margin: 10px 0 20px 20px;
+ color: #757575;
}
.release-note-action-container {
- flex: none;
+ flex: none;
}
.release-note-image {
- flex-shrink: 2;
+ flex-shrink: 2;
}
img {
- margin: 20px;
- width: 260px;
- height: 200px;
- flex: none;
- box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
+ margin: 20px;
+ width: 260px;
+ height: 200px;
+ flex: none;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
img:hover {
- box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
@media (forced-colors: active) {
- .release-note-container .release-note-link {
- border-color: ButtonText;
- }
- .release-note-container .release-note-link:hover {
- forced-color-adjust: none;
- border-color: Highlight;
- }
- .release-note-container li .release-note-title,
- .release-note-container li:not(:hover) .release-note-subtitle {
- forced-color-adjust: none;
- color: LinkText;
- }
+ .release-note-container .release-note-link {
+ border-color: ButtonText;
+ }
+
+ .release-note-container .release-note-link:hover {
+ forced-color-adjust: none;
+ border-color: Highlight;
+ }
+
+ .release-note-container li .release-note-title,
+ .release-note-container li:not(:hover) .release-note-subtitle {
+ forced-color-adjust: none;
+ color: linktext;
+ }
}
diff --git a/front_end/inline_editor/bezierEditor.css b/front_end/inline_editor/bezierEditor.css
index 750f031..ee37eca 100644
--- a/front_end/inline_editor/bezierEditor.css
+++ b/front_end/inline_editor/bezierEditor.css
@@ -5,190 +5,192 @@
*/
:host {
- width: 270px;
- height: 350px;
- user-select: none;
- padding: 16px;
- overflow: hidden;
+ width: 270px;
+ height: 350px;
+ user-select: none;
+ padding: 16px;
+ overflow: hidden;
}
.bezier-preset-selected > svg {
- background-color: var(--selection-bg-color);
+ background-color: var(--selection-bg-color);
}
.bezier-preset {
- width: 50px;
- height: 50px;
- padding: 5px;
- margin: auto;
- background-color: #f5f5f5;
- border-radius: 3px;
+ width: 50px;
+ height: 50px;
+ padding: 5px;
+ margin: auto;
+ background-color: #f5f5f5;
+ border-radius: 3px;
}
.bezier-preset line.bezier-control-line {
- stroke: #666;
- stroke-width: 1;
- stroke-linecap: round;
- fill: none;
+ stroke: #666;
+ stroke-width: 1;
+ stroke-linecap: round;
+ fill: none;
}
.bezier-preset circle.bezier-control-circle {
- fill: #666;
+ fill: #666;
}
.bezier-preset path.bezier-path {
- stroke: black;
- stroke-width: 2;
- stroke-linecap: round;
- fill: none;
+ stroke: black;
+ stroke-width: 2;
+ stroke-linecap: round;
+ fill: none;
}
-.bezier-preset-selected path.bezier-path, .bezier-preset-selected line.bezier-control-line {
- stroke: white;
+.bezier-preset-selected path.bezier-path,
+.bezier-preset-selected line.bezier-control-line {
+ stroke: white;
}
.bezier-preset-selected circle.bezier-control-circle {
- fill: white;
+ fill: white;
}
.bezier-curve line.linear-line {
- stroke: rgb(238, 238, 238);
- stroke-width: 2;
- stroke-linecap: round;
- fill: none;
+ stroke: rgb(238, 238, 238);
+ stroke-width: 2;
+ stroke-linecap: round;
+ fill: none;
}
:host-context(.-theme-with-dark-background) .bezier-curve line.linear-line {
- stroke: rgb(138, 138, 138);
+ stroke: rgb(138, 138, 138);
}
.bezier-curve line.bezier-control-line {
- stroke: #9C27B0;
- stroke-width: 2;
- stroke-linecap: round;
- fill: none;
- opacity: 0.6;
+ stroke: #9c27b0;
+ stroke-width: 2;
+ stroke-linecap: round;
+ fill: none;
+ opacity: 0.6;
}
.bezier-curve circle.bezier-control-circle {
- fill: #9C27B0;
- cursor: pointer;
+ fill: #9c27b0;
+ cursor: pointer;
}
.bezier-curve path.bezier-path {
- stroke: black;
- stroke-width: 3;
- stroke-linecap: round;
- fill: none;
+ stroke: black;
+ stroke-width: 3;
+ stroke-linecap: round;
+ fill: none;
}
.bezier-preview-container {
- position: relative;
- background-color: white;
- overflow: hidden;
- border-radius: 20px;
- width: 200%;
- height: 20px;
- z-index: 2;
- flex-shrink: 0;
- opacity: 0;
+ position: relative;
+ background-color: white;
+ overflow: hidden;
+ border-radius: 20px;
+ width: 200%;
+ height: 20px;
+ z-index: 2;
+ flex-shrink: 0;
+ opacity: 0;
}
.bezier-preview-animation {
- background-color: #9C27B0;
- width: 20px;
- height: 20px;
- border-radius: 20px;
- position: absolute;
+ background-color: #9c27b0;
+ width: 20px;
+ height: 20px;
+ border-radius: 20px;
+ position: absolute;
}
.bezier-preview-onion {
- margin-top: -20px;
- position: relative;
- z-index: 1;
+ margin-top: -20px;
+ position: relative;
+ z-index: 1;
}
.bezier-preview-onion > .bezier-preview-animation {
- opacity: 0.1;
+ opacity: 0.1;
}
svg.bezier-preset-modify {
- background-color: #f5f5f5;
- border-radius: 35px;
- display: inline-block;
- visibility: hidden;
- transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
- cursor: pointer;
- position: absolute;
+ background-color: #f5f5f5;
+ border-radius: 35px;
+ display: inline-block;
+ visibility: hidden;
+ transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
+ cursor: pointer;
+ position: absolute;
}
-svg.bezier-preset-modify:hover, .bezier-preset:hover {
- background-color: #999;
+svg.bezier-preset-modify:hover,
+.bezier-preset:hover {
+ background-color: #999;
}
.bezier-preset-selected .bezier-preset:hover {
- background-color: var(--selection-bg-color);
+ background-color: var(--selection-bg-color);
}
.bezier-preset-modify path {
- stroke-width: 2;
- stroke: black;
- fill: none;
+ stroke-width: 2;
+ stroke: black;
+ fill: none;
}
.bezier-preset-selected .bezier-preset-modify {
- opacity: 1;
+ opacity: 1;
}
.bezier-preset-category {
- width: 50px;
- margin: 20px 0;
- cursor: pointer;
- transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
+ width: 50px;
+ margin: 20px 0;
+ cursor: pointer;
+ transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}
span.bezier-display-value {
- width: 100%;
- user-select: text;
- display: block;
- text-align: center;
- line-height: 20px;
- height: 20px;
- cursor: text;
- white-space: nowrap !important;
+ width: 100%;
+ user-select: text;
+ display: block;
+ text-align: center;
+ line-height: 20px;
+ height: 20px;
+ cursor: text;
+ white-space: nowrap !important;
}
.bezier-container {
- display: flex;
- margin-top: 38px;
+ display: flex;
+ margin-top: 38px;
}
svg.bezier-curve {
- margin-left: 32px;
- margin-top: -8px;
+ margin-left: 32px;
+ margin-top: -8px;
}
svg.bezier-preset-modify.bezier-preset-plus {
- right: 0;
+ right: 0;
}
.bezier-header {
- margin-top: 16px;
+ margin-top: 16px;
}
svg.bezier-preset-modify:active {
- transform: scale(1.1);
- background-color: var(--selection-bg-color);
+ transform: scale(1.1);
+ background-color: var(--selection-bg-color);
}
.bezier-preset-category:active {
- transform: scale(1.05);
+ transform: scale(1.05);
}
.bezier-header-active > svg.bezier-preset-modify {
- visibility: visible;
+ visibility: visible;
}
.bezier-preset-modify:active path {
- stroke: white;
+ stroke: white;
}
diff --git a/front_end/inline_editor/bezierSwatch.css b/front_end/inline_editor/bezierSwatch.css
index 0b1745b..67f3161 100644
--- a/front_end/inline_editor/bezierSwatch.css
+++ b/front_end/inline_editor/bezierSwatch.css
@@ -5,20 +5,20 @@
*/
:host {
- white-space: nowrap;
+ white-space: nowrap;
}
.bezier-swatch-icon {
- position: relative;
- margin-left: 1px;
- margin-right: 2px;
- top: 1px;
- user-select: none;
- line-height: 10px;
- background-color: #9C27B0;
- cursor: default;
+ position: relative;
+ margin-left: 1px;
+ margin-right: 2px;
+ top: 1px;
+ user-select: none;
+ line-height: 10px;
+ background-color: #9c27b0;
+ cursor: default;
}
.bezier-swatch-icon:hover {
- background-color: #800080;
+ background-color: #800080;
}
diff --git a/front_end/inline_editor/colorSwatch.css b/front_end/inline_editor/colorSwatch.css
index 6e8c9e5..478a711 100644
--- a/front_end/inline_editor/colorSwatch.css
+++ b/front_end/inline_editor/colorSwatch.css
@@ -5,36 +5,36 @@
*/
:host {
- white-space: nowrap;
+ white-space: nowrap;
}
.color-swatch {
- position: relative;
- margin-left: 1px;
- margin-right: 2px;
- width: 10px;
- height: 10px;
- top: 1px;
- display: inline-block;
- user-select: none;
- background-image: url(Images/checker.png);
- line-height: 10px;
+ position: relative;
+ margin-left: 1px;
+ margin-right: 2px;
+ width: 10px;
+ height: 10px;
+ top: 1px;
+ display: inline-block;
+ user-select: none;
+ background-image: url(Images/checker.png);
+ line-height: 10px;
}
.color-swatch-inner {
- width: 100%;
- height: 100%;
- display: inline-block;
- border: 1px solid rgba(128, 128, 128, 0.6);
- cursor: default;
+ width: 100%;
+ height: 100%;
+ display: inline-block;
+ border: 1px solid rgba(128, 128, 128, 0.6);
+ cursor: default;
}
.color-swatch-inner:hover {
- border: 1px solid rgba(64, 64, 64, 0.8);
+ border: 1px solid rgba(64, 64, 64, 0.8);
}
@media (forced-colors: active) {
- .color-swatch {
- forced-color-adjust: none;
- }
+ .color-swatch {
+ forced-color-adjust: none;
+ }
}
diff --git a/front_end/inline_editor/cssShadowEditor.css b/front_end/inline_editor/cssShadowEditor.css
index 72be3a6..7094a92 100644
--- a/front_end/inline_editor/cssShadowEditor.css
+++ b/front_end/inline_editor/cssShadowEditor.css
@@ -5,103 +5,109 @@
*/
:host {
- user-select: none;
- padding: 4px 12px 12px 12px;
- border: 1px solid transparent;
+ user-select: none;
+ padding: 4px 12px 12px 12px;
+ border: 1px solid transparent;
}
.shadow-editor-field:last-of-type {
- margin-bottom: 8px;
+ margin-bottom: 8px;
}
.shadow-editor-field {
- height: 24px;
- margin-top: 8px;
- font-size: 12px;
- flex-shrink: 0;
+ height: 24px;
+ margin-top: 8px;
+ font-size: 12px;
+ flex-shrink: 0;
}
.shadow-editor-flex-field {
- display: flex;
- align-items: center;
- flex-direction: row;
+ display: flex;
+ align-items: center;
+ flex-direction: row;
}
.shadow-editor-field.shadow-editor-blur-field {
- margin-top: 40px;
+ margin-top: 40px;
}
.shadow-editor-2D-slider {
- position: absolute;
- height: 88px;
- width: 88px;
- border: 1px solid rgba(0, 0, 0, 0.14);
- border-radius: 2px;
+ position: absolute;
+ height: 88px;
+ width: 88px;
+ border: 1px solid rgba(0, 0, 0, 0.14);
+ border-radius: 2px;
}
.shadow-editor-label {
- display: inline-block;
- width: 52px;
- height: 24px;
- line-height: 24px;
- margin-right: 8px;
- text-align: right;
+ display: inline-block;
+ width: 52px;
+ height: 24px;
+ line-height: 24px;
+ margin-right: 8px;
+ text-align: right;
}
-.shadow-editor-button-left, .shadow-editor-button-right {
- width: 74px;
- height: 24px;
- padding: 3px 7px;
- line-height: 16px;
- border: 1px solid rgba(0, 0, 0, 0.14);
- color: #333;
- background-color: #ffffff;
- text-align: center;
- font-weight: 500;
+.shadow-editor-button-left,
+.shadow-editor-button-right {
+ width: 74px;
+ height: 24px;
+ padding: 3px 7px;
+ line-height: 16px;
+ border: 1px solid rgba(0, 0, 0, 0.14);
+ color: #333;
+ background-color: #fff;
+ text-align: center;
+ font-weight: 500;
}
.shadow-editor-button-left {
- border-radius: 2px 0 0 2px;
+ border-radius: 2px 0 0 2px;
}
.shadow-editor-button-right {
- border-radius: 0 2px 2px 0;
- border-left-width: 0;
+ border-radius: 0 2px 2px 0;
+ border-left-width: 0;
}
-.shadow-editor-button-left:hover, .shadow-editor-button-right:hover {
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+.shadow-editor-button-left:hover,
+.shadow-editor-button-right:hover {
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
-.shadow-editor-button-left:focus, .shadow-editor-button-right:focus {
- background-color: #eeeeee;
+.shadow-editor-button-left:focus,
+.shadow-editor-button-right:focus {
+ background-color: #eee;
}
-.shadow-editor-button-left.enabled, .shadow-editor-button-right.enabled, -theme-preserve {
- background-color: #4285F4;
- color: #ffffff;
+.shadow-editor-button-left.enabled,
+.shadow-editor-button-right.enabled,
+-theme-preserve {
+ background-color: #4285f4;
+ color: #fff;
}
-.shadow-editor-button-left.enabled:focus, .shadow-editor-button-right.enabled:focus, -theme-preserve {
- background-color: #3B78E7;
+.shadow-editor-button-left.enabled:focus,
+.shadow-editor-button-right.enabled:focus,
+-theme-preserve {
+ background-color: #3b78e7;
}
.shadow-editor-text-input {
- width: 52px;
- margin-right: 8px;
- text-align: right;
- box-shadow: var(--focus-ring-inactive-shadow);
+ width: 52px;
+ margin-right: 8px;
+ text-align: right;
+ box-shadow: var(--focus-ring-inactive-shadow);
}
@media (forced-colors: active) {
- .shadow-editor-button-left:hover,
- .shadow-editor-button-right:hover
- .shadow-editor-button-left.enabled,
- .shadow-editor-button-right.enabled,
- .shadow-editor-button-left.enabled:focus,
- .shadow-editor-button-right.enabled:focus {
- forced-color-adjust: none;
- background-color: Highlight;
- color: HighlightText;
- }
+ .shadow-editor-button-left:hover,
+ .shadow-editor-button-right:hover .shadow-editor-button-left.enabled,
+ .shadow-editor-button-right.enabled,
+ .shadow-editor-button-left.enabled:focus,
+ .shadow-editor-button-right.enabled:focus {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ color: HighlightText;
+ }
}
diff --git a/front_end/inline_editor/cssShadowSwatch.css b/front_end/inline_editor/cssShadowSwatch.css
index 0e076d8..c30dca5 100644
--- a/front_end/inline_editor/cssShadowSwatch.css
+++ b/front_end/inline_editor/cssShadowSwatch.css
@@ -5,19 +5,19 @@
*/
:host {
- white-space: nowrap;
+ white-space: nowrap;
}
.shadow-swatch-icon {
- position: relative;
- margin-left: 1px;
- margin-right: 2px;
- top: 1px;
- user-select: none;
- line-height: 10px;
- background-color: #9C27B0;
+ position: relative;
+ margin-left: 1px;
+ margin-right: 2px;
+ top: 1px;
+ user-select: none;
+ line-height: 10px;
+ background-color: #9c27b0;
}
.shadow-swatch-icon:hover {
- background-color: #800080;
+ background-color: #800080;
}
diff --git a/front_end/inline_editor/swatchPopover.css b/front_end/inline_editor/swatchPopover.css
index 453a8fa..a694250 100644
--- a/front_end/inline_editor/swatchPopover.css
+++ b/front_end/inline_editor/swatchPopover.css
@@ -5,11 +5,11 @@
*/
.widget {
- display: flex;
- background: white;
- box-shadow: var(--drop-shadow);
- border-radius: 2px;
- overflow: auto;
- user-select: text;
- line-height: 11px;
+ display: flex;
+ background: white;
+ box-shadow: var(--drop-shadow);
+ border-radius: 2px;
+ overflow: auto;
+ user-select: text;
+ line-height: 11px;
}
diff --git a/front_end/input/inputTimeline.css b/front_end/input/inputTimeline.css
index 6224223..8c15611 100644
--- a/front_end/input/inputTimeline.css
+++ b/front_end/input/inputTimeline.css
@@ -3,6 +3,7 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
+
.input-timeline-toolbar-container {
display: flex;
background-color: var(--toolbar-bg-color);
diff --git a/front_end/inspector_main/nodeIcon.css b/front_end/inspector_main/nodeIcon.css
index 65e8c924..3033fac 100644
--- a/front_end/inspector_main/nodeIcon.css
+++ b/front_end/inspector_main/nodeIcon.css
@@ -5,20 +5,20 @@
*/
.node-icon {
- width: 28px;
- height: 26px;
- background-image: url(Images/nodeIcon.png);
- background-size: 17px 17px;
- background-repeat: no-repeat;
- background-position: center;
- opacity: 0.8;
- cursor: auto;
+ width: 28px;
+ height: 26px;
+ background-image: url(Images/nodeIcon.png);
+ background-size: 17px 17px;
+ background-repeat: no-repeat;
+ background-position: center;
+ opacity: 0.8;
+ cursor: auto;
}
.node-icon:hover {
- opacity: 1.0;
+ opacity: 1;
}
.node-icon.inactive {
- filter: grayscale(100%);
+ filter: grayscale(100%);
}
diff --git a/front_end/inspector_main/renderingOptions.css b/front_end/inspector_main/renderingOptions.css
index a8f46cf..3b6f59d 100644
--- a/front_end/inspector_main/renderingOptions.css
+++ b/front_end/inspector_main/renderingOptions.css
@@ -6,7 +6,7 @@
:host {
padding: 12px;
- }
+}
[is=dt-checkbox] {
margin: 0 0 10px 0;
diff --git a/front_end/issues/issuesTree.css b/front_end/issues/issuesTree.css
index e97408e..da307c2 100644
--- a/front_end/issues/issuesTree.css
+++ b/front_end/issues/issuesTree.css
@@ -6,6 +6,7 @@
/* Remove container padding from TreeOutline.
* Allows issues to touch the edges of the container. */
+
:host,
.issues {
padding: 0;
@@ -13,37 +14,41 @@
}
.issues {
- --breaking-change-color: #F29900;
- --issue-gray: #5F6368;
- --issue-link: #1967D2;
+ --breaking-change-color: #f29900;
+ --issue-gray: #5f6368;
+ --issue-link: #1967d2;
--issue-black: #202124;
- --issue-code: #F0F0F0;
- --affected-resource-background: #F8F9FA;
+ --issue-code: #f0f0f0;
+ --affected-resource-background: #f8f9fa;
}
:host-context(.-theme-with-dark-background) .issues {
- --issue-gray: #FFFFFFDE;
- --issue-link: #8AB4F8;
- --issue-black: #FFFFFF;
- --issue-code: #0F0F0F;
- --affected-resource-background: #FFFFFF12;
+ --issue-gray: #ffffffde;
+ --issue-link: #8ab4f8;
+ --issue-black: #fff;
+ --issue-code: #0f0f0f;
+ --affected-resource-background: #ffffff12;
}
/* Override whitespace behavior for tree items to allow wrapping */
+
.issues li {
white-space: normal;
}
/* Hide toggle for tree items which cannot be collapsed */
+
.issues .always-parent::before {
display: none;
}
/* Override TreeOutline toggle switching to allow animation */
+
.issues li.parent::before {
transition: transform 200ms;
transform-origin: 25% 50%;
}
+
.issues li.parent.expanded::before {
-webkit-mask-position: 0 0;
transform: rotate(90deg);
@@ -54,13 +59,13 @@
overflow: hidden;
flex: none;
transition: background-color 200ms;
- background: #F3F3F3;
- border: 1px solid #E5E5E5;
+ background: #f3f3f3;
+ border: 1px solid #e5e5e5;
border-width: 0 0 1px;
}
.issue.expanded {
- background: #FFFFFF;
+ background: #fff;
border-width: 0;
}
@@ -70,6 +75,7 @@
}
/* Override selected tree item styles for issues to avoid changing width. */
+
.tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .issue.selected:focus[data-keyboard-focus="true"] {
width: auto;
padding-right: 8px;
@@ -97,7 +103,7 @@
}
.body.children {
- border-bottom: 1px solid #E5E5E5;
+ border-bottom: 1px solid #e5e5e5;
padding: 6px 0;
position: relative;
padding-left: 51px;
@@ -106,6 +112,7 @@
}
/* Show a colored border on the left side of opened issues. */
+
.body::before {
content: '';
display: block;
@@ -171,16 +178,17 @@
.link-list {
list-style-type: none;
list-style-position: inside;
- padding-inline-start: 0px;
+ padding-inline-start: 0;
}
.resolutions-list {
list-style-type: none;
list-style-position: inside;
- padding-inline-start: 0px;
+ padding-inline-start: 0;
}
/* We inherit all the styles from treeoutline, but these are simple text <li>, so we override some styles */
+
.link-list li::before {
content: none;
-webkit-mask-image: none;
@@ -273,8 +281,8 @@
}
.affected-resources > .parent {
- margin-top: 0px;
- padding: 2px 5px 0px 5px;
+ margin-top: 0;
+ padding: 2px 5px 0 5px;
}
.affected-resources > .parent.expanded {
diff --git a/front_end/layer_viewer/layerDetailsView.css b/front_end/layer_viewer/layerDetailsView.css
index 57c2d03..80e06e8 100644
--- a/front_end/layer_viewer/layerDetailsView.css
+++ b/front_end/layer_viewer/layerDetailsView.css
@@ -5,25 +5,25 @@
*/
table td {
- padding-left: 8px;
+ padding-left: 8px;
}
table td:first-child {
- font-weight: bold;
+ font-weight: bold;
}
.scroll-rect.active {
- background-color: rgba(100, 100, 100, 0.2);
+ background-color: rgba(100, 100, 100, 0.2);
}
ul {
- list-style: none;
- padding-inline-start: 0;
- margin-block-start: 0;
- margin-block-end: 0;
+ list-style: none;
+ padding-inline-start: 0;
+ margin-block-start: 0;
+ margin-block-end: 0;
}
.devtools-link.link-margin {
- margin: 8px;
- display: inline-block;
+ margin: 8px;
+ display: inline-block;
}
diff --git a/front_end/layer_viewer/layers3DView.css b/front_end/layer_viewer/layers3DView.css
index 653223d..922b727 100644
--- a/front_end/layer_viewer/layers3DView.css
+++ b/front_end/layer_viewer/layers3DView.css
@@ -5,17 +5,17 @@
*/
.layers-3d-view {
- overflow: hidden;
- user-select: none;
+ overflow: hidden;
+ user-select: none;
}
.toolbar {
- background-color: var(--toolbar-bg-color);
- border-bottom: var(--divider-border);
+ background-color: var(--toolbar-bg-color);
+ border-bottom: var(--divider-border);
}
canvas {
- flex: 1 1;
+ flex: 1 1;
}
.layers-3d-view > canvas[data-keyboard-focus="true"]:focus {
diff --git a/front_end/layer_viewer/paintProfiler.css b/front_end/layer_viewer/paintProfiler.css
index 167456e..75a01a0 100644
--- a/front_end/layer_viewer/paintProfiler.css
+++ b/front_end/layer_viewer/paintProfiler.css
@@ -5,30 +5,30 @@
*/
.paint-profiler-overview {
- background-color: #eee;
+ background-color: #eee;
}
.paint-profiler-canvas-container {
- flex: auto;
- position: relative;
+ flex: auto;
+ position: relative;
}
.paint-profiler-pie-chart {
- width: 60px !important;
- height: 60px !important;
- padding: 2px;
- overflow: hidden;
- font-size: 10px;
+ width: 60px !important;
+ height: 60px !important;
+ padding: 2px;
+ overflow: hidden;
+ font-size: 10px;
}
.paint-profiler-canvas-container canvas {
- z-index: 200;
- background-color: white;
- opacity: 0.95;
- height: 100%;
- width: 100%;
+ z-index: 200;
+ background-color: white;
+ opacity: 0.95;
+ height: 100%;
+ width: 100%;
}
.paint-profiler-canvas-container .overview-grid-window-resizer {
- z-index: 2000;
+ z-index: 2000;
}
diff --git a/front_end/lighthouse/lighthouseDialog.css b/front_end/lighthouse/lighthouseDialog.css
index 3071eb1..232f2e7 100644
--- a/front_end/lighthouse/lighthouseDialog.css
+++ b/front_end/lighthouse/lighthouseDialog.css
@@ -5,84 +5,86 @@
*/
.lighthouse-view {
- --view-horizontal-margin: 20px;
- margin: 7px var(--view-horizontal-margin);
- flex: auto;
- align-items: center;
- width: 100%;
- max-width: 500px;
+ --view-horizontal-margin: 20px;
+
+ margin: 7px var(--view-horizontal-margin);
+ flex: auto;
+ align-items: center;
+ width: 100%;
+ max-width: 500px;
}
.lighthouse-view h2 {
- color: #666;
- font-weight: bold;
- font-size: 14px;
- flex: none;
- width: 100%;
- text-align: left;
+ color: #666;
+ font-weight: bold;
+ font-size: 14px;
+ flex: none;
+ width: 100%;
+ text-align: left;
}
.lighthouse-view button {
- z-index: 10;
- margin-left: auto;
- margin-right: 0px;
+ z-index: 10;
+ margin-left: auto;
+ margin-right: 0;
}
.lighthouse-status {
- width: 100%;
- flex: auto;
- align-items: center;
- color: #666;
+ width: 100%;
+ flex: auto;
+ align-items: center;
+ color: #666;
}
.lighthouse-status-text {
- text-align: center;
- min-height: 50px;
- margin-bottom: 10px;
- display: flex;
- justify-content: center;
- flex-direction: column;
- max-width: 100%;
+ text-align: center;
+ min-height: 50px;
+ margin-bottom: 10px;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ max-width: 100%;
}
.lighthouse-status-text code {
- user-select: text;
- text-align: left;
- white-space: pre-wrap;
- overflow: auto;
+ user-select: text;
+ text-align: left;
+ white-space: pre-wrap;
+ overflow: auto;
}
.lighthouse-progress-wrapper {
- width: calc(100% + 2 * var(--view-horizontal-margin));
- height: 2px;
- background-color: #E1F5FE;
- position: relative;
- margin: 10px;
+ width: calc(100% + 2 * var(--view-horizontal-margin));
+ height: 2px;
+ background-color: #e1f5fe;
+ position: relative;
+ margin: 10px;
}
.lighthouse-progress-bar {
- width: 0%;
- height: 100%;
- background: #039BE5;
- position: absolute;
- transform-origin: left;
- animation-fill-mode: forwards;
- animation-timing-function: ease-out;
- --progress-bar-loading-duration: 45s;
- --progress-bar-gathering-duration: 12s;
- --progress-bar-gathering-percent: 70%;
- --progress-bar-auditing-duration: 5s;
- --progress-bar-auditing-percent: 95%;
+ width: 0%;
+ height: 100%;
+ background: #039be5;
+ position: absolute;
+ transform-origin: left;
+ animation-fill-mode: forwards;
+ animation-timing-function: ease-out;
+
+ --progress-bar-loading-duration: 45s;
+ --progress-bar-gathering-duration: 12s;
+ --progress-bar-gathering-percent: 70%;
+ --progress-bar-auditing-duration: 5s;
+ --progress-bar-auditing-percent: 95%;
}
.lighthouse-progress-bar.errored {
- width: 100%;
- background: #E50303;
+ width: 100%;
+ background: #e50303;
}
.lighthouse-progress-bar.loading {
- animation-duration: var(--progress-bar-loading-duration);
- animation-name: progressBarLoading;
+ animation-duration: var(--progress-bar-loading-duration);
+ animation-name: progressBarLoading;
}
@keyframes progressBarLoading {
@@ -91,8 +93,8 @@
}
.lighthouse-progress-bar.gathering {
- animation-duration: var(--progress-bar-gathering-duration);
- animation-name: progressBarGathering;
+ animation-duration: var(--progress-bar-gathering-duration);
+ animation-name: progressBarGathering;
}
@keyframes progressBarGathering {
@@ -101,8 +103,8 @@
}
.lighthouse-progress-bar.auditing {
- animation-duration: var(--progress-bar-auditing-duration);
- animation-name: progressBarAuditing;
+ animation-duration: var(--progress-bar-auditing-duration);
+ animation-name: progressBarAuditing;
}
@keyframes progressBarAuditing {
@@ -111,6 +113,6 @@
}
.lighthouse-report-error {
- display: block;
- margin-top: 5px;
+ display: block;
+ margin-top: 5px;
}
diff --git a/front_end/lighthouse/lighthousePanel.css b/front_end/lighthouse/lighthousePanel.css
index e3e46d2..f6bab6f 100644
--- a/front_end/lighthouse/lighthousePanel.css
+++ b/front_end/lighthouse/lighthousePanel.css
@@ -5,29 +5,33 @@
*/
.toolbar {
- background-color: var(--toolbar-bg-color);
- border-bottom: var(--divider-border);
+ background-color: var(--toolbar-bg-color);
+ border-bottom: var(--divider-border);
}
.lh-root {
--report-menu-width: 0;
+
user-select: text;
}
/* for View Trace button */
+
.lh-audit-group {
position: relative;
}
+
button.view-trace {
margin: 10px;
}
.lighthouse-results-container {
- position: relative;
+ position: relative;
}
/** `window.opener` is null for windows opened from DevTools. This breaks
the LH viewer app, so disable this feature. */
+
.lh-tools--viewer {
display: none !important;
}
diff --git a/front_end/lighthouse/lighthouseStartView.css b/front_end/lighthouse/lighthouseStartView.css
index f3b2d3d..4818df5 100644
--- a/front_end/lighthouse/lighthouseStartView.css
+++ b/front_end/lighthouse/lighthouseStartView.css
@@ -9,12 +9,13 @@
font-size: var(--font-size);
line-height: 18px;
- --color-blue: #0535C1;
+ --color-blue: #0535c1;
+
/* for buttons */
--accent-color: var(--color-blue);
--color-bg: white;
--font-size: 14px;
- --report-font-family: Roboto, Helvetica, Arial, sans-serif;
+ --report-font-family: roboto, helvetica, arial, sans-serif;
}
.lighthouse-start-view header {
@@ -25,12 +26,12 @@
}
.lighthouse-logo {
- width: 75px;
- height: 75px;
- flex-shrink: 0;
- background-repeat: no-repeat;
- background-size: contain;
- background-image: url(Images/lighthouse_logo.svg);
+ width: 75px;
+ height: 75px;
+ flex-shrink: 0;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-image: url(Images/lighthouse_logo.svg);
}
.lighthouse-start-view-text {
@@ -89,6 +90,7 @@
font-weight: 500;
font-size: var(--font-size);
}
+
.lighthouse-start-button-container button:disabled {
cursor: not-allowed;
}
diff --git a/front_end/media/chevronTabbedPanel.css b/front_end/media/chevronTabbedPanel.css
index 7517abb..b491828 100644
--- a/front_end/media/chevronTabbedPanel.css
+++ b/front_end/media/chevronTabbedPanel.css
@@ -3,6 +3,7 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
+
.chevron-tabbed-panel-title {
position: relative;
background-color: var(--toolbar-bg-color);
@@ -11,6 +12,7 @@
left: 0;
right: 0;
}
+
.chevron-tabbed-panel-content {
position: relative;
top: 0;
@@ -18,10 +20,12 @@
right: 0;
bottom: 0;
}
+
.chevron-tabbed-panel-title-text {
font-size: 22px;
margin: 8px 0 0 17px;
}
+
.chevron-tabbed-panel-title-buttons {
flex: auto;
display: flex;
@@ -29,14 +33,17 @@
margin-left: 0;
position: relative;
}
+
.chevron-tabbed-panel-buttons-item {
padding: 4px;
margin: 10px 4px;
}
+
.chevron-tabbed-panel-buttons-item:hover {
text-decoration: underline;
cursor: pointer;
}
+
.chevron-tabbed-panel-buttons-item::before,
.chevron-tabbed-panel-buttons-item::after {
content: "";
@@ -50,10 +57,12 @@
border-width: 10px;
margin-left: -10px;
}
+
.chevron-tabbed-panel-buttons-item.selected::before {
border-color: transparent;
border-bottom-color: var(--divider-color);
}
+
.chevron-tabbed-panel-buttons-item.selected::after {
top: 5px;
border-bottom-color: #fff;
diff --git a/front_end/media/eventDisplayTable.css b/front_end/media/eventDisplayTable.css
index 4c3c596..3181cb7 100644
--- a/front_end/media/eventDisplayTable.css
+++ b/front_end/media/eventDisplayTable.css
@@ -4,12 +4,12 @@
* found in the LICENSE file.
*/
-.no-border-top-datagrid>.data-grid {
+.no-border-top-datagrid > .data-grid {
/* make sure there is no top border, it ruins the menu view */
- border-top: 0px;
+ border-top: 0;
}
-.event-display-table-contents-table-container>.widget>.data-grid {
+.event-display-table-contents-table-container > .widget > .data-grid {
height: 100%;
}
diff --git a/front_end/media/mediaView.css b/front_end/media/mediaView.css
index 2b08b3e..749ac3d 100644
--- a/front_end/media/mediaView.css
+++ b/front_end/media/mediaView.css
@@ -4,7 +4,6 @@
* found in the LICENSE file.
*/
-
.playerlist-sidebar {
display: flex;
flex-direction: column;
@@ -14,13 +13,13 @@
.playerlist-sidebar-header {
font-size: 22px;
padding: 8px 20px;
- border-bottom:1px solid var(--divider-color);
+ border-bottom: 1px solid var(--divider-color);
}
-.playerlist-entry-title>pre {
- margin: 0px;
+.playerlist-entry-title > pre {
+ margin: 0;
}
.playerlist-entry-title {
float: left;
-}
\ No newline at end of file
+}
diff --git a/front_end/media/playerListView.css b/front_end/media/playerListView.css
index 2282d43..483247b 100644
--- a/front_end/media/playerListView.css
+++ b/front_end/media/playerListView.css
@@ -5,18 +5,18 @@
*/
.tree-outline {
- padding-left: 0;
- color: rgb(90, 90, 90);
+ padding-left: 0;
+ color: rgb(90, 90, 90);
}
li.storage-group-list-item {
- padding: 10px 8px 6px 8px;
+ padding: 10px 8px 6px 8px;
}
li.storage-group-list-item:not(:first-child) {
- border-top: 1px solid rgb(230, 230, 230);
+ border-top: 1px solid rgb(230, 230, 230);
}
li.storage-group-list-item::before {
- display: none;
-}
\ No newline at end of file
+ display: none;
+}
diff --git a/front_end/media/playerPropertiesView.css b/front_end/media/playerPropertiesView.css
index aa510e9..a78bfcc 100644
--- a/front_end/media/playerPropertiesView.css
+++ b/front_end/media/playerPropertiesView.css
@@ -3,34 +3,43 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
+
.media-attributes-view {
border-bottom: 1px solid var(--divider-color);
}
+
.media-property-renderer {
line-height: 20px;
height: 28px;
padding: 4px 10px;
}
+
.media-property-renderer-hidden {
display: none;
}
+
.media-property-renderer-title {
font-size: 14px;
}
+
.media-property-renderer-contents {
position: absolute;
left: 200px;
overflow: hidden;
}
+
.media-property-renderer:nth-child(even) {
background: hsl(214, 0%, 97%);
}
+
.-theme-with-dark-background .media-property-renderer:nth-child(even) {
background: rgb(41, 41, 41);
}
+
.media-property-renderer:hover {
background: hsl(214, 70%, 97%);
}
+
.media-properties-frame {
display: block;
}
diff --git a/front_end/mobile_throttling/throttlingSettingsTab.css b/front_end/mobile_throttling/throttlingSettingsTab.css
index 12a5254..92aa16a 100644
--- a/front_end/mobile_throttling/throttlingSettingsTab.css
+++ b/front_end/mobile_throttling/throttlingSettingsTab.css
@@ -5,90 +5,90 @@
*/
:host {
- overflow:hidden;
+ overflow: hidden;
}
.header {
- padding: 0 0 6px;
- border-bottom: 1px solid #EEEEEE;
- font-size: 18px;
- font-weight: normal;
- flex: none;
+ padding: 0 0 6px;
+ border-bottom: 1px solid #eee;
+ font-size: 18px;
+ font-weight: normal;
+ flex: none;
}
.add-conditions-button {
- flex: none;
- margin: 10px 2px;
- min-width: 140px;
- align-self: flex-start;
+ flex: none;
+ margin: 10px 2px;
+ min-width: 140px;
+ align-self: flex-start;
}
.conditions-list {
- max-width: 500px;
- min-width: 340px;
- flex: auto;
+ max-width: 500px;
+ min-width: 340px;
+ flex: auto;
}
.conditions-list-item {
- padding: 3px 5px 3px 5px;
- height: 30px;
- display: flex;
- align-items: center;
- position: relative;
- flex: auto 1 1;
+ padding: 3px 5px 3px 5px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ position: relative;
+ flex: auto 1 1;
}
.conditions-list-text {
- white-space: nowrap;
- text-overflow: ellipsis;
- flex: 0 0 70px;
- user-select: none;
- color: #222;
- text-align: end;
- position: relative;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ flex: 0 0 70px;
+ user-select: none;
+ color: #222;
+ text-align: end;
+ position: relative;
}
.conditions-list-title {
- text-align: start;
- flex: auto;
- display: flex;
- align-items: flex-start;
+ text-align: start;
+ flex: auto;
+ display: flex;
+ align-items: flex-start;
}
.conditions-list-title-text {
- overflow: hidden;
- flex: auto;
- white-space: nowrap;
- text-overflow: ellipsis;
+ overflow: hidden;
+ flex: auto;
+ white-space: nowrap;
+ text-overflow: ellipsis;
}
.conditions-list-separator {
- flex: 0 0 1px;
- background-color: rgb(231, 231, 231);
- height: 30px;
- margin: 0 4px;
+ flex: 0 0 1px;
+ background-color: rgb(231, 231, 231);
+ height: 30px;
+ margin: 0 4px;
}
.conditions-list-separator-invisible {
- visibility: hidden;
- height: 100% !important;
+ visibility: hidden;
+ height: 100% !important;
}
.conditions-edit-row {
- flex: none;
- display: flex;
- flex-direction: row;
- margin: 6px 5px;
+ flex: none;
+ display: flex;
+ flex-direction: row;
+ margin: 6px 5px;
}
.conditions-edit-row input {
- width: 100%;
- text-align: inherit;
+ width: 100%;
+ text-align: inherit;
}
.conditions-edit-optional {
- position: absolute;
- bottom: -20px;
- right: 0;
- color: rgb(128, 128, 128);
+ position: absolute;
+ bottom: -20px;
+ right: 0;
+ color: rgb(128, 128, 128);
}
diff --git a/front_end/network/binaryResourceView.css b/front_end/network/binaryResourceView.css
index eab1b72..e56f864 100644
--- a/front_end/network/binaryResourceView.css
+++ b/front_end/network/binaryResourceView.css
@@ -6,7 +6,7 @@
.panel.network .toolbar.binary-view-toolbar {
border-top: 1px solid #ccc;
- border-bottom: 0px;
+ border-bottom: 0;
padding-left: 5px;
}
diff --git a/front_end/network/blockedURLsPane.css b/front_end/network/blockedURLsPane.css
index 9e9abe5..4846bca 100644
--- a/front_end/network/blockedURLsPane.css
+++ b/front_end/network/blockedURLsPane.css
@@ -5,74 +5,75 @@
*/
.list {
- border: none !important;
- border-top: var(--divider-border) !important;
+ border: none !important;
+ border-top: var(--divider-border) !important;
}
.blocking-disabled {
- pointer-events: none;
- opacity: 0.8;
+ pointer-events: none;
+ opacity: 0.8;
}
.editor-container {
- padding: 0 4px;
+ padding: 0 4px;
}
-.no-blocked-urls, .blocked-urls {
- overflow-x: hidden;
- overflow-y: auto;
+.no-blocked-urls,
+.blocked-urls {
+ overflow-x: hidden;
+ overflow-y: auto;
}
.no-blocked-urls {
- display: flex;
- justify-content: center;
- padding: 10px;
+ display: flex;
+ justify-content: center;
+ padding: 10px;
}
.no-blocked-urls > span {
- white-space: pre;
+ white-space: pre;
}
.blocked-url {
- display: flex;
- flex-direction: row;
- align-items: center;
- flex: auto;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex: auto;
}
.blocked-url-count {
- flex: none;
- padding-right: 9px;
+ flex: none;
+ padding-right: 9px;
}
.blocked-url-checkbox {
- margin-left: 8px;
- flex: none;
+ margin-left: 8px;
+ flex: none;
}
.blocked-url-label {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- flex: auto;
- padding: 0 3px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ flex: auto;
+ padding: 0 3px;
}
.blocked-url-edit-row {
- flex: none;
- display: flex;
- flex-direction: row;
- margin: 7px 5px 0 5px;
- align-items: center;
+ flex: none;
+ display: flex;
+ flex-direction: row;
+ margin: 7px 5px 0 5px;
+ align-items: center;
}
.blocked-url-edit-value {
- user-select: none;
- flex: 1 1 0px;
+ user-select: none;
+ flex: 1 1 0;
}
.blocked-url-edit-row input {
- width: 100%;
- text-align: inherit;
- height: 22px;
+ width: 100%;
+ text-align: inherit;
+ height: 22px;
}
diff --git a/front_end/network/eventSourceMessagesView.css b/front_end/network/eventSourceMessagesView.css
index 60174c5..e8bed4d 100644
--- a/front_end/network/eventSourceMessagesView.css
+++ b/front_end/network/eventSourceMessagesView.css
@@ -5,6 +5,6 @@
*/
.event-source-messages-view .data-grid {
- flex: auto;
- border: none;
+ flex: auto;
+ border: none;
}
diff --git a/front_end/network/networkConfigView.css b/front_end/network/networkConfigView.css
index 3dfc096..93bcaf2 100644
--- a/front_end/network/networkConfigView.css
+++ b/front_end/network/networkConfigView.css
@@ -5,39 +5,39 @@
*/
.network-config {
- padding: 12px;
- display: block;
+ padding: 12px;
+ display: block;
}
.network-config-group {
- display: flex;
- margin-bottom: 10px;
- flex-wrap: wrap;
- flex: 0 0 auto;
- min-height: 30px;
+ display: flex;
+ margin-bottom: 10px;
+ flex-wrap: wrap;
+ flex: 0 0 auto;
+ min-height: 30px;
}
.network-config-title {
- margin-right: 16px;
- width: 130px;
+ margin-right: 16px;
+ width: 130px;
}
.network-config-fields {
- flex: 2 0 200px;
+ flex: 2 0 200px;
}
.panel-section-separator {
- height: 1px;
- margin-bottom: 10px;
- background: #f0f0f0;
+ height: 1px;
+ margin-bottom: 10px;
+ background: #f0f0f0;
}
/* Disable cache */
.network-config-disable-cache {
- line-height: 28px;
- border-top: none;
- padding-top: 0;
+ line-height: 28px;
+ border-top: none;
+ padding-top: 0;
}
.network-config-input-validation-error {
@@ -48,50 +48,51 @@
/* Network throttling */
.network-config-throttling .chrome-select {
- width: 100%;
- max-width: 250px;
+ width: 100%;
+ max-width: 250px;
}
.network-config-throttling > .network-config-title {
- line-height: 24px;
+ line-height: 24px;
}
/* User agent */
.network-config-ua > .network-config-title {
- line-height: 20px;
+ line-height: 20px;
}
.network-config-ua span[is="dt-radio"].checked > * {
- display: none
+ display: none;
}
.network-config-ua input {
- display: block;
- width: calc(100% - 20px);
+ display: block;
+ width: calc(100% - 20px);
}
.network-config-ua input[readonly] {
- background-color: rgb(235, 235, 228);
+ background-color: rgb(235, 235, 228);
}
-.network-config-ua input[type=text], .network-config-ua .chrome-select {
- margin-top: 8px;
+.network-config-ua input[type=text],
+.network-config-ua .chrome-select {
+ margin-top: 8px;
}
.network-config-ua .chrome-select {
- width: calc(100% - 20px);
- max-width: 250px;
+ width: calc(100% - 20px);
+ max-width: 250px;
}
.network-config-ua span[is="dt-radio"] {
- display: block;
+ display: block;
}
.network-config-ua-custom {
- opacity: 0.5;
+ opacity: 0.5;
}
.network-config-ua-custom.checked {
- opacity: 1;
+ opacity: 1;
}
diff --git a/front_end/network/networkLogView.css b/front_end/network/networkLogView.css
index 6bf5029..41b8ec8 100644
--- a/front_end/network/networkLogView.css
+++ b/front_end/network/networkLogView.css
@@ -29,408 +29,418 @@
*/
.network-log-grid.data-grid {
- border: none !important;
- flex: auto;
+ border: none !important;
+ flex: auto;
}
.network-log-grid.data-grid.no-selection[data-keyboard-focus="true"]:focus {
- border: none !important;
+ border: none !important;
}
#network-container {
- border: 1px solid rgb(204, 204, 204);
+ border: 1px solid rgb(204, 204, 204);
}
#network-container.grid-focused.no-node-selected:focus-within {
- border: 1px solid var(--accent-color);
+ border: 1px solid var(--accent-color);
}
.network-summary-bar {
- flex: 0 0 27px;
- line-height: 27px;
- padding-left: 5px;
- background-color: #eee;
- border-top: 1px solid #ccc;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- user-select: text;
+ flex: 0 0 27px;
+ line-height: 27px;
+ padding-left: 5px;
+ background-color: #eee;
+ border-top: 1px solid #ccc;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ user-select: text;
}
.panel.network .toolbar.network-summary-bar {
- border-bottom: 0px;
+ border-bottom: 0;
}
.network-summary-bar span[is=dt-icon-label] {
- margin-right: 6px;
+ margin-right: 6px;
}
.network-summary-bar > * {
- flex: none;
+ flex: none;
}
.network-log-grid.data-grid table.data {
- background: transparent;
+ background: transparent;
}
.network-log-grid.data-grid td {
- height: 41px;
- border-left: 1px solid #e1e1e1;
- vertical-align: middle;
+ height: 41px;
+ border-left: 1px solid #e1e1e1;
+ vertical-align: middle;
}
.network-log-grid.data-grid .corner {
- display: none;
+ display: none;
}
.network-log-grid.data-grid.small td {
- height: 21px;
+ height: 21px;
}
-.network-waterfall-header, .network-log-grid.data-grid th {
- border-bottom: 1px solid rgb(205, 205, 205);
- border-left: 1px solid rgb(205, 205, 205);
+.network-waterfall-header,
+.network-log-grid.data-grid th {
+ border-bottom: 1px solid rgb(205, 205, 205);
+ border-left: 1px solid rgb(205, 205, 205);
}
.network-log-grid.data-grid table.data th {
- border-bottom: none;
+ border-bottom: none;
}
-.network-waterfall-header, .network-log-grid.data-grid .header-container {
- height: 31px;
- background-color: var(--toolbar-bg-color);
+.network-waterfall-header,
+.network-log-grid.data-grid .header-container {
+ height: 31px;
+ background-color: var(--toolbar-bg-color);
}
.network-log-grid.data-grid .data-container {
- top: 31px;
+ top: 31px;
}
-.network-waterfall-header.small, .network-log-grid.data-grid.small .header-container {
- height: 27px;
+.network-waterfall-header.small,
+.network-log-grid.data-grid.small .header-container {
+ height: 27px;
}
.network-log-grid.data-grid.small .data-container {
- top: 27px;
+ top: 27px;
}
.network-log-grid.data-grid select {
- -webkit-appearance: none;
- border: none;
- width: 100%;
- color: inherit;
+ -webkit-appearance: none;
+ border: none;
+ width: 100%;
+ color: inherit;
}
.network-log-grid.data-grid .name-column {
- cursor: pointer;
+ cursor: pointer;
}
.network-log-grid.data-grid .waterfall-column {
- padding: 1px 0;
+ padding: 1px 0;
}
.network-log-grid.data-grid .waterfall-column .sort-order-icon-container {
- right: 15px;
- pointer-events: none;
+ right: 15px;
+ pointer-events: none;
}
.network-log-grid.data-grid th.sortable:active {
- background-image: none !important;
+ background-image: none !important;
}
.network-cell-subtitle {
- font-weight: normal;
- color: gray;
+ font-weight: normal;
+ color: gray;
}
.network-badge {
- margin-right: 4px;
+ margin-right: 4px;
}
.network-error-row,
-.network-error-row .network-cell-subtitle ,
+.network-error-row .network-cell-subtitle,
.network-log-grid.data-grid tr.selected.network-error-row,
.network-log-grid.data-grid tr.selected.network-error-row .network-cell-subtitle,
.network-log-grid.data-grid tr.selected.network-error-row .network-dim-cell {
- color: rgb(230, 0, 0) !important;
+ color: rgb(230, 0, 0) !important;
}
.network-log-grid.data-grid:focus tr.selected.network-error-row,
.network-log-grid.data-grid:focus tr.selected.network-error-row .network-cell-subtitle,
.network-log-grid.data-grid:focus tr.selected.network-error-row .network-dim-cell {
- color: rgb(230, 0, 0) !important;
+ color: rgb(230, 0, 0) !important;
}
+
.initiator-column .devtools-link {
- color: inherit;
+ color: inherit;
}
.network-log-grid.data-grid tr.selected,
.network-log-grid.data-grid tr.selected .network-cell-subtitle,
.network-log-grid.data-grid tr.selected .network-dim-cell {
- color: inherit;
+ color: inherit;
}
.network-log-grid.data-grid:focus tr.selected,
.network-log-grid.data-grid:focus tr.selected .network-cell-subtitle,
.network-log-grid.data-grid:focus tr.selected .network-dim-cell {
- color: var(--selection-fg-color);
+ color: var(--selection-fg-color);
}
.network-log-grid tr.highlighted-row {
- -webkit-animation: network-row-highlight-fadeout 2s 0s;
+ -webkit-animation: network-row-highlight-fadeout 2s 0s;
}
@-webkit-keyframes network-row-highlight-fadeout {
- from {background-color: rgba(255, 255, 120, 1); }
- to { background-color: rgba(255, 255, 120, 0); }
+ from { background-color: rgba(255, 255, 120, 1); }
+ to { background-color: rgba(255, 255, 120, 0); }
}
.network-header-subtitle {
- color: gray;
+ color: gray;
}
.network-log-grid.data-grid.small .network-cell-subtitle,
.network-log-grid.data-grid.small .network-header-subtitle {
- display: none;
+ display: none;
}
.network-log-grid.data-grid.small tr.selected .network-cell-subtitle-show-inline-when-selected {
- display: inline;
- margin-left: 4px;
+ display: inline;
+ margin-left: 4px;
}
/* Resource preview icons */
.network-log-grid.data-grid .icon {
- content: url(Images/resourcePlainIcon.png);
+ content: url(Images/resourcePlainIcon.png);
}
.network-log-grid.data-grid.small .icon {
- content: url(Images/resourcePlainIconSmall.png);
+ content: url(Images/resourcePlainIconSmall.png);
}
.network-log-grid.data-grid .icon.script {
- content: url(Images/resourceJSIcon.png);
+ content: url(Images/resourceJSIcon.png);
}
.network-log-grid.data-grid.small .icon.script {
- content: url(Images/resourceDocumentIconSmall.png);
+ content: url(Images/resourceDocumentIconSmall.png);
}
.network-log-grid.data-grid .icon.document {
- content: url(Images/resourceDocumentIcon.png);
+ content: url(Images/resourceDocumentIcon.png);
}
.network-log-grid.data-grid.small .icon.document {
- content: url(Images/resourceDocumentIconSmall.png);
+ content: url(Images/resourceDocumentIconSmall.png);
}
.network-log-grid.data-grid .icon.stylesheet {
- content: url(Images/resourceCSSIcon.png);
+ content: url(Images/resourceCSSIcon.png);
}
.network-log-grid.data-grid.small .icon.stylesheet {
- content: url(Images/resourceDocumentIconSmall.png);
+ content: url(Images/resourceDocumentIconSmall.png);
}
.network-log-grid.data-grid .icon.media {
- content: url(Images/resourcePlainIcon.png); /* FIXME: media icon */
+ content: url(Images/resourcePlainIcon.png); /* FIXME: media icon */
}
.network-log-grid.data-grid.small .icon.media {
- content: url(Images/resourcePlainIconSmall.png); /* FIXME: media icon */
+ content: url(Images/resourcePlainIconSmall.png); /* FIXME: media icon */
}
+
.network-log-grid.data-grid .icon.texttrack {
- content: url(Images/resourcePlainIcon.png); /* FIXME: vtt icon */
+ content: url(Images/resourcePlainIcon.png); /* FIXME: vtt icon */
}
.network-log-grid.data-grid.small .icon.texttrack {
- content: url(Images/resourcePlainIconSmall.png); /* FIXME: vtt icon */
+ content: url(Images/resourcePlainIconSmall.png); /* FIXME: vtt icon */
}
.network-log-grid.data-grid .icon.image {
- position: relative;
- background-image: url(Images/resourcePlainIcon.png);
- background-repeat: no-repeat;
- content: "";
+ position: relative;
+ background-image: url(Images/resourcePlainIcon.png);
+ background-repeat: no-repeat;
+ content: "";
}
.network-log-grid.data-grid.small .icon.image {
- background-image: url(Images/resourcePlainIconSmall.png);
- content: "";
+ background-image: url(Images/resourcePlainIconSmall.png);
+ content: "";
}
.network-log-grid.data-grid .icon {
- float: left;
- width: 32px;
- height: 32px;
- margin-top: 1px;
- margin-right: 3px;
+ float: left;
+ width: 32px;
+ height: 32px;
+ margin-top: 1px;
+ margin-right: 3px;
}
.network-log-grid.data-grid.small .icon {
- width: 16px;
- height: 16px;
+ width: 16px;
+ height: 16px;
}
.network-log-grid.data-grid .image-network-icon-preview {
- position: absolute;
- margin: auto;
- top: 3px;
- bottom: 4px;
- left: 5px;
- right: 5px;
- max-width: 18px;
- max-height: 21px;
- min-width: 1px;
- min-height: 1px;
+ position: absolute;
+ margin: auto;
+ top: 3px;
+ bottom: 4px;
+ left: 5px;
+ right: 5px;
+ max-width: 18px;
+ max-height: 21px;
+ min-width: 1px;
+ min-height: 1px;
}
.network-log-grid.data-grid.small .image-network-icon-preview {
- top: 2px;
- bottom: 1px;
- left: 3px;
- right: 3px;
- max-width: 8px;
- max-height: 11px;
+ top: 2px;
+ bottom: 1px;
+ left: 3px;
+ right: 3px;
+ max-width: 8px;
+ max-height: 11px;
}
.network-dim-cell {
- color: grey;
+ color: grey;
}
.network-frame-divider {
- width: 2px;
- background-color: #FCCC49;
- z-index: 10;
- visibility: hidden;
+ width: 2px;
+ background-color: #fccc49;
+ z-index: 10;
+ visibility: hidden;
}
#network-container:not(.brief-mode) .data-container {
- overflow: hidden;
+ overflow: hidden;
}
.network-log-grid.data-grid .resources-dividers {
- z-index: 0;
+ z-index: 0;
}
.network-log-grid.data-grid .resources-dividers-label-bar {
- background-color: transparent;
- border: none;
- height: 30px;
- pointer-events: none;
+ background-color: transparent;
+ border: none;
+ height: 30px;
+ pointer-events: none;
}
.network-log-grid.data-grid span.separator-in-cell {
- user-select: none;
- min-width: 1ex;
- display: inline-block;
+ user-select: none;
+ min-width: 1ex;
+ display: inline-block;
}
#network-container {
- overflow: hidden;
+ overflow: hidden;
}
.network-status-pane {
- color: #777;
- background-color: white;
- z-index: 500;
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- padding: 0 20px;
- overflow: auto;
+ color: #777;
+ background-color: white;
+ z-index: 500;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding: 0 20px;
+ overflow: auto;
}
.network-status-pane > .recording-hint {
- font-size: 14px;
- text-align: center;
- line-height: 28px;
+ font-size: 14px;
+ text-align: center;
+ line-height: 28px;
}
.network-waterfall-header {
- position: absolute;
- border-left: 0px;
- width: 100%;
- display: table;
- z-index: 200;
+ position: absolute;
+ border-left: 0;
+ width: 100%;
+ display: table;
+ z-index: 200;
}
.network-waterfall-header:hover {
- background-color: hsla(0, 0%, 10%, 0.1);
+ background-color: hsla(0, 0%, 10%, 0.1);
}
.network-waterfall-header div {
- display: table-cell;
- line-height: 14px;
- margin: auto 0px;
- vertical-align: middle;
- text-align: left;
- font-weight: normal;
- padding: 0px 4px;
+ display: table-cell;
+ line-height: 14px;
+ margin: auto 0;
+ vertical-align: middle;
+ text-align: left;
+ font-weight: normal;
+ padding: 0 4px;
}
.network-waterfall-header .sort-order-icon-container {
- position: absolute;
- top: 1px;
- right: 0;
- bottom: 1px;
- display: flex;
- align-items: center;
+ position: absolute;
+ top: 1px;
+ right: 0;
+ bottom: 1px;
+ display: flex;
+ align-items: center;
}
.network-waterfall-header .sort-order-icon {
- align-items: center;
- margin-right: 4px;
- margin-bottom: -2px;
+ align-items: center;
+ margin-right: 4px;
+ margin-bottom: -2px;
}
.network-frame-group-icon {
- display: inline-block;
- margin: -8px -2px;
+ display: inline-block;
+ margin: -8px -2px;
}
.network-frame-group-badge {
- margin-right: 4px;
+ margin-right: 4px;
}
@media (forced-colors: active) {
- .network-status-pane > .recording-hint {
- color: CanvasText;
- }
- .network-log-grid.data-grid table.data tr.revealed.selected,
- .network-log-grid.data-grid:focus table.data tr.revealed.selected,
- .network-log-grid.data-grid:focus tr.selected .network-dim-cell,
- .network-log-grid.data-grid tr.selected .network-dim-cell,
- .network-log-grid.data-grid:focus tr.selected .initiator-column .devtools-link,
- .network-log-grid.data-grid tr.selected .initiator-column .devtools-link,
- .network-waterfall-header:hover * {
- color: HighlightText;
- }
- .network-log-grid {
- --network-grid-default-color: Canvas;
- --network-grid-stripe-color: Canvas;
- --network-grid-hovered-color: Highlight;
- --network-grid-selected-color: ButtonText;
- --network-grid-focus-selected-color: Highlight;
- }
- #network-container.no-node-selected:focus-within,
- .network-status-pane {
- forced-color-adjust: none;
- border-color: Highlight;
- background-color: Canvas !important;
- }
- .network-waterfall-header.small,
- .network-log-grid.data-grid.small .header-container
- .network-waterfall-header,
- .network-log-grid.data-grid .header-container {
- background-color: Canvas;
- }
- .network-waterfall-header:hover {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- .network-waterfall-header:hover .sort-order-icon-container [is=ui-icon].icon-mask {
- background-color: HighlightText;
- }
+ .network-status-pane > .recording-hint {
+ color: canvastext;
+ }
+
+ .network-log-grid.data-grid table.data tr.revealed.selected,
+ .network-log-grid.data-grid:focus table.data tr.revealed.selected,
+ .network-log-grid.data-grid:focus tr.selected .network-dim-cell,
+ .network-log-grid.data-grid tr.selected .network-dim-cell,
+ .network-log-grid.data-grid:focus tr.selected .initiator-column .devtools-link,
+ .network-log-grid.data-grid tr.selected .initiator-column .devtools-link,
+ .network-waterfall-header:hover * {
+ color: HighlightText;
+ }
+
+ .network-log-grid {
+ --network-grid-default-color: canvas;
+ --network-grid-stripe-color: canvas;
+ --network-grid-hovered-color: Highlight;
+ --network-grid-selected-color: ButtonText;
+ --network-grid-focus-selected-color: Highlight;
+ }
+
+ #network-container.no-node-selected:focus-within,
+ .network-status-pane {
+ forced-color-adjust: none;
+ border-color: Highlight;
+ background-color: canvas !important;
+ }
+
+ .network-waterfall-header.small,
+ .network-log-grid.data-grid.small .header-container .network-waterfall-header,
+ .network-log-grid.data-grid .header-container {
+ background-color: canvas;
+ }
+
+ .network-waterfall-header:hover {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ .network-waterfall-header:hover .sort-order-icon-container [is=ui-icon].icon-mask {
+ background-color: HighlightText;
+ }
}
diff --git a/front_end/network/networkManageCustomHeadersView.css b/front_end/network/networkManageCustomHeadersView.css
index 26eccb5..39aa4e4 100644
--- a/front_end/network/networkManageCustomHeadersView.css
+++ b/front_end/network/networkManageCustomHeadersView.css
@@ -3,36 +3,37 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
+
.custom-headers-list {
- height: 272px;
- width: 250px;
+ height: 272px;
+ width: 250px;
}
-.custom-headers-wrapper{
- margin: 10px;
+.custom-headers-wrapper {
+ margin: 10px;
}
.header {
- padding: 0 0 6px;
- font-size: 18px;
- font-weight: normal;
- flex: none;
+ padding: 0 0 6px;
+ font-size: 18px;
+ font-weight: normal;
+ flex: none;
}
.custom-headers-header {
- padding:2px;
+ padding: 2px;
}
.custom-headers-list-item {
- padding-left: 5px;
+ padding-left: 5px;
}
.editor-container {
- padding: 5px 0px 0px 5px;
+ padding: 5px 0 0 5px;
}
.add-button {
- width: 150px;
- margin: auto;
- margin-top: 5px;
+ width: 150px;
+ margin: auto;
+ margin-top: 5px;
}
diff --git a/front_end/network/networkPanel.css b/front_end/network/networkPanel.css
index dd5b74f..e6c7986 100644
--- a/front_end/network/networkPanel.css
+++ b/front_end/network/networkPanel.css
@@ -27,117 +27,117 @@
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
- .panel.network .toolbar {
- background-color: var(--toolbar-bg-color);
- border-bottom: var(--divider-border);
+.panel.network .toolbar {
+ background-color: var(--toolbar-bg-color);
+ border-bottom: var(--divider-border);
}
.network-details-view {
- background: rgb(203, 203, 203);
+ background: rgb(203, 203, 203);
}
.network-details-view-tall-header {
- border-top: 4px solid var(--toolbar-bg-color);
+ border-top: 4px solid var(--toolbar-bg-color);
}
.network-item-view {
- display: flex;
- background: white;
+ display: flex;
+ background: white;
}
.network-item-preview-toolbar {
- border-top: 1px solid #ccc;
- background-color: #eee;
+ border-top: 1px solid #ccc;
+ background-color: #eee;
}
.resource-timing-view {
- display: block;
- margin: 6px;
- color: rgb(30%, 30%, 30%);
+ display: block;
+ margin: 6px;
+ color: rgb(30%, 30%, 30%);
}
.resource-timing-table {
- width: 100% !important;
+ width: 100% !important;
}
#network-overview-panel {
- flex: none;
- position: relative;
+ flex: none;
+ position: relative;
}
#network-overview-container {
- overflow: hidden;
- flex: auto;
- display: flex;
- flex-direction: column;
- position: relative;
- border-bottom: 1px solid #CDCDCD;
+ overflow: hidden;
+ flex: auto;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ border-bottom: 1px solid #cdcdcd;
}
#network-overview-container canvas {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
#network-overview-grid .resources-dividers-label-bar {
- pointer-events: auto;
+ pointer-events: auto;
}
.network .network-overview {
- flex: 0 0 60px;
+ flex: 0 0 60px;
}
.network-overview .resources-dividers-label-bar {
- background-color: rgba(255, 255, 255, 0.95);
+ background-color: rgba(255, 255, 255, 0.95);
}
.network-overview .resources-dividers-label-bar .resources-divider {
- background-color: transparent;
+ background-color: transparent;
}
.network-overview .resources-dividers {
- z-index: 250;
+ z-index: 250;
}
.request-view.html iframe {
- width: 100%;
- height: 100%;
- position: absolute;
+ width: 100%;
+ height: 100%;
+ position: absolute;
}
.network-film-strip {
- border-bottom: solid 1px #cdcdcd;
- flex: none !important;
+ border-bottom: solid 1px #cdcdcd;
+ flex: none !important;
}
.network-film-strip-placeholder {
- flex-shrink: 0;
+ flex-shrink: 0;
}
.network-tabbed-pane {
- background-color: var(--toolbar-bg-color);
+ background-color: var(--toolbar-bg-color);
}
.network-settings-pane {
- flex: none;
- background-color: var(--toolbar-bg-color);
+ flex: none;
+ background-color: var(--toolbar-bg-color);
}
.network-settings-pane .toolbar {
- flex: 1 1;
+ flex: 1 1;
}
.network-toolbar-container {
- display: flex;
- flex: none;
+ display: flex;
+ flex: none;
}
.network-toolbar-container > :first-child {
- flex: 1 1 auto;
+ flex: 1 1 auto;
}
@media (forced-colors: active) {
- .panel.network .toolbar {
- background-color: Canvas;
- }
+ .panel.network .toolbar {
+ background-color: canvas;
+ }
}
diff --git a/front_end/network/networkTimingTable.css b/front_end/network/networkTimingTable.css
index df3dda3..b1447fe 100644
--- a/front_end/network/networkTimingTable.css
+++ b/front_end/network/networkTimingTable.css
@@ -5,140 +5,152 @@
*/
.network-timing-table {
- width: 380px;
- border-spacing: 0;
- padding-left: 10px;
- padding-right: 10px;
- line-height: initial;
+ width: 380px;
+ border-spacing: 0;
+ padding-left: 10px;
+ padding-right: 10px;
+ line-height: initial;
}
.network-timing-start {
- border-top: 5px solid transparent;
+ border-top: 5px solid transparent;
}
.network-timing-start th span.network-timing-hidden-header {
- height: 1px;
- width: 1px;
- position: absolute;
- overflow: hidden;
+ height: 1px;
+ width: 1px;
+ position: absolute;
+ overflow: hidden;
}
-.network-timing-table-header td, .network-timing-footer td {
- border-top: 10px solid transparent;
+.network-timing-table-header td,
+.network-timing-footer td {
+ border-top: 10px solid transparent;
}
.network-timing-table-header td {
- color: #737373;
+ color: #737373;
}
.network-timing-table-header td:last-child {
- text-align: right;
+ text-align: right;
}
table.network-timing-table > tr:not(.network-timing-table-header):not(.network-timing-footer) > td:first-child {
- padding-left: 12px;
+ padding-left: 12px;
}
.network-timing-table col.labels {
- width: 156px;
+ width: 156px;
}
.network-timing-table col.duration {
- width: 80px;
+ width: 80px;
}
.network-timing-table td {
- padding: 4px 0;
+ padding: 4px 0;
}
.network-timing-table td.caution {
- font-weight: bold;
- color: rgb(255, 128, 0);
- padding: 2px 0;
+ font-weight: bold;
+ color: rgb(255, 128, 0);
+ padding: 2px 0;
}
.network-timing-table hr.break {
- border: 0;
- height: 1px;
- background-image: linear-gradient(to right, #eee, #bbb, #eee);
+ border: 0;
+ height: 1px;
+ background-image: linear-gradient(to right, #eee, #bbb, #eee);
}
.network-timing-footer td:last-child {
- font-weight: bold;
- text-align: right;
+ font-weight: bold;
+ text-align: right;
}
.network-timing-row {
- position: relative;
- height: 15px;
+ position: relative;
+ height: 15px;
}
.network-timing-bar {
- position: absolute;
- min-width: 1px;
- top: 0;
- bottom: 0;
+ position: absolute;
+ min-width: 1px;
+ top: 0;
+ bottom: 0;
}
.network-timing-bar-title {
- color: #222;
- white-space: nowrap;
- text-align: right;
+ color: #222;
+ white-space: nowrap;
+ text-align: right;
}
.network-timing-bar.queueing,
.network-timing-bar.total {
- border: 1px solid rgba(0, 0, 0, 0.1);
+ border: 1px solid rgba(0, 0, 0, 0.1);
}
-.network-timing-bar.blocking, -theme-preserve {
- background-color: #AAAAAA;
+.network-timing-bar.blocking,
+-theme-preserve {
+ background-color: #aaa;
}
-.network-timing-bar.proxy, -theme-preserve {
- background-color: #A1887F;
+.network-timing-bar.proxy,
+-theme-preserve {
+ background-color: #a1887f;
}
-.network-timing-bar.dns, -theme-preserve {
- background-color: #009688;
+.network-timing-bar.dns,
+-theme-preserve {
+ background-color: #009688;
}
.network-timing-bar.connecting,
.network-timing-bar.serviceworker,
-.network-timing-bar.serviceworker-preparation, -theme-preserve {
- background-color: #FF9800;
+.network-timing-bar.serviceworker-preparation,
+-theme-preserve {
+ background-color: #ff9800;
}
-.network-timing-bar.ssl, -theme-preserve {
- background-color: #9C27B0;
+.network-timing-bar.ssl,
+-theme-preserve {
+ background-color: #9c27b0;
}
-.network-timing-bar.sending, -theme-preserve {
- background-color: #B0BEC5;
+.network-timing-bar.sending,
+-theme-preserve {
+ background-color: #b0bec5;
}
-.network-timing-bar.waiting, -theme-preserve {
- background-color: #00C853;
+.network-timing-bar.waiting,
+-theme-preserve {
+ background-color: #00c853;
}
-.network-timing-bar.receiving, -theme-preserve,
-.network-timing-bar.receiving-push, -theme-preserve {
- background-color: #03A9F4;
+.network-timing-bar.receiving,
+-theme-preserve,
+.network-timing-bar.receiving-push,
+-theme-preserve {
+ background-color: #03a9f4;
}
-.network-timing-bar.push, -theme-preserve {
- background-color: #8CDBff;
+.network-timing-bar.push,
+-theme-preserve {
+ background-color: #8cdbff;
}
-.network-timing-bar.server-timing, -theme-preserve {
- background-color: #ddd;
+.network-timing-bar.server-timing,
+-theme-preserve {
+ background-color: #ddd;
}
.network-timing-table td.network-timing-metric {
- white-space: nowrap;
- max-width: 150px;
- overflow-x: hidden;
- text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 150px;
+ overflow-x: hidden;
+ text-overflow: ellipsis;
}
.network-timing-bar.proxy,
@@ -146,28 +158,41 @@
.network-timing-bar.ssl,
.network-timing-bar.connecting,
.network-timing-bar.blocking {
- height: 10px;
- margin: auto;
+ height: 10px;
+ margin: auto;
}
@media (forced-colors: active) {
- .network-timing-bar.blocking, -theme-preserve,
- .network-timing-bar.proxy, -theme-preserve,
- .network-timing-bar.dns, -theme-preserve,
- .network-timing-bar.connecting,
- .network-timing-bar.serviceworker,
- .network-timing-bar.serviceworker-preparation, -theme-preserve,
- .network-timing-bar.ssl, -theme-preserve,
- .network-timing-bar.sending, -theme-preserve,
- .network-timing-bar.waiting, -theme-preserve,
- .network-timing-bar.receiving, -theme-preserve,
- .network-timing-bar.receiving-push, -theme-preserve,
- .network-timing-bar.push, -theme-preserve,
- .network-timing-bar.server-timing, -theme-preserve {
- forced-color-adjust: none;
- }
- .network-timing-table-header td, .network-timing-footer td {
- forced-color-adjust: none;
- color: ButtonText;;
- }
+ .network-timing-bar.blocking,
+ -theme-preserve,
+ .network-timing-bar.proxy,
+ -theme-preserve,
+ .network-timing-bar.dns,
+ -theme-preserve,
+ .network-timing-bar.connecting,
+ .network-timing-bar.serviceworker,
+ .network-timing-bar.serviceworker-preparation,
+ -theme-preserve,
+ .network-timing-bar.ssl,
+ -theme-preserve,
+ .network-timing-bar.sending,
+ -theme-preserve,
+ .network-timing-bar.waiting,
+ -theme-preserve,
+ .network-timing-bar.receiving,
+ -theme-preserve,
+ .network-timing-bar.receiving-push,
+ -theme-preserve,
+ .network-timing-bar.push,
+ -theme-preserve,
+ .network-timing-bar.server-timing,
+ -theme-preserve {
+ forced-color-adjust: none;
+ }
+
+ .network-timing-table-header td,
+ .network-timing-footer td {
+ forced-color-adjust: none;
+ color: ButtonText;
+ }
}
diff --git a/front_end/network/networkWaterfallColumn.css b/front_end/network/networkWaterfallColumn.css
index dfa47d8..573de3c 100644
--- a/front_end/network/networkWaterfallColumn.css
+++ b/front_end/network/networkWaterfallColumn.css
@@ -2,21 +2,22 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
+
.network-waterfall-v-scroll {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- overflow-x: hidden;
- margin-top: 31px;
- z-index: 200;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ overflow-x: hidden;
+ margin-top: 31px;
+ z-index: 200;
}
.network-waterfall-v-scroll.small {
- margin-top: 27px;
+ margin-top: 27px;
}
.network-waterfall-v-scroll-content {
- width: 15px;
- pointer-events: none;
+ width: 15px;
+ pointer-events: none;
}
diff --git a/front_end/network/requestCookiesView.css b/front_end/network/requestCookiesView.css
index afdb9e1..0381368 100644
--- a/front_end/network/requestCookiesView.css
+++ b/front_end/network/requestCookiesView.css
@@ -5,32 +5,32 @@
*/
.request-cookies-view {
- overflow: auto;
- padding: 12px;
- height: 100%;
+ overflow: auto;
+ padding: 12px;
+ height: 100%;
}
.request-cookies-view .request-cookies-title {
- font-size: 12px;
- font-weight: bold;
- margin-right: 30px;
- color: rgb(97, 97, 97);
+ font-size: 12px;
+ font-weight: bold;
+ margin-right: 30px;
+ color: rgb(97, 97, 97);
}
.request-cookies-view .cookie-line {
- margin-top: 6px;
- display: inline-block;
+ margin-top: 6px;
+ display: inline-block;
}
.request-cookies-view .cookies-panel-item {
- margin-top: 6px;
- margin-bottom: 16px;
- flex: none;
+ margin-top: 6px;
+ margin-bottom: 16px;
+ flex: none;
}
@media (forced-colors: active) {
- td.flagged-cookie-attribute-cell .cookie-warning-icon {
- forced-color-adjust: none;
- filter: grayscale();
- }
+ td.flagged-cookie-attribute-cell .cookie-warning-icon {
+ forced-color-adjust: none;
+ filter: grayscale();
+ }
}
diff --git a/front_end/network/requestHTMLView.css b/front_end/network/requestHTMLView.css
index bb1664b..63b1e7b 100644
--- a/front_end/network/requestHTMLView.css
+++ b/front_end/network/requestHTMLView.css
@@ -3,7 +3,9 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
--theme-preserve, .html-preview-frame {
+
+-theme-preserve,
+.html-preview-frame {
box-shadow: var(--drop-shadow);
background: white;
flex-grow: 1;
diff --git a/front_end/network/requestHeadersTree.css b/front_end/network/requestHeadersTree.css
index 05b984e..298cbea 100644
--- a/front_end/network/requestHeadersTree.css
+++ b/front_end/network/requestHeadersTree.css
@@ -5,88 +5,89 @@
*/
.tree-outline {
- padding-left: 0;
- --error-background-color: #D93025;
+ padding-left: 0;
+
+ --error-background-color: #d93025;
}
.tree-outline > ol {
- padding-bottom: 5px;
- border-bottom: solid 1px #e0e0e0;
+ padding-bottom: 5px;
+ border-bottom: solid 1px #e0e0e0;
}
.tree-outline > .parent {
- user-select: none;
- font-weight: bold;
- color: #616161;
- margin-top: -1px;
- height: 20px;
- display: flex;
- align-items: center;
- height: 26px;
+ user-select: none;
+ font-weight: bold;
+ color: #616161;
+ margin-top: -1px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ height: 26px;
}
.tree-outline li {
- display: block;
- padding-left: 5px;
- line-height: 20px;
+ display: block;
+ padding-left: 5px;
+ line-height: 20px;
}
.tree-outline li:not(.parent) {
- margin-left: 10px;
+ margin-left: 10px;
}
.tree-outline li:not(.parent)::before {
- display: none;
+ display: none;
}
.tree-outline .caution {
- margin-left: 4px;
- display: inline-block;
- font-weight: bold;
+ margin-left: 4px;
+ display: inline-block;
+ font-weight: bold;
}
.tree-outline li.expanded .header-count {
- display: none;
+ display: none;
}
.tree-outline li .header-toggle {
- display: none;
+ display: none;
}
.tree-outline li .status-from-cache {
- color: gray;
+ color: gray;
}
.tree-outline li.expanded .header-toggle {
- display: inline;
- margin-left: 30px;
- font-weight: normal;
- color: rgb(45%, 45%, 45%);
+ display: inline;
+ margin-left: 30px;
+ font-weight: normal;
+ color: rgb(45%, 45%, 45%);
}
.tree-outline li .header-toggle:hover {
- color: rgb(20%, 20%, 45%);
- cursor: pointer;
+ color: rgb(20%, 20%, 45%);
+ cursor: pointer;
}
.tree-outline .header-name {
- color: rgb(33%, 33%, 33%);
- display: inline-block;
- margin-right: 0.25em;
- font-weight: bold;
- vertical-align: top;
- white-space: pre-wrap;
+ color: rgb(33%, 33%, 33%);
+ display: inline-block;
+ margin-right: 0.25em;
+ font-weight: bold;
+ vertical-align: top;
+ white-space: pre-wrap;
}
.tree-outline .header-separator {
- user-select: none;
+ user-select: none;
}
.tree-outline .header-badge-text {
- font-variant: small-caps;
- font-weight: 500;
- white-space: pre-wrap;
- word-break: break-all;
+ font-variant: small-caps;
+ font-weight: 500;
+ white-space: pre-wrap;
+ word-break: break-all;
}
.tree-outline .header-warning {
@@ -94,88 +95,90 @@
}
.tree-outline .header-badge {
- display: inline;
- margin-right: 0.75em;
- background-color: var(--error-background-color);
- color: white;
- border-radius: 100vh;
- padding-left: 6px;
- padding-right: 6px;
+ display: inline;
+ margin-right: 0.75em;
+ background-color: var(--error-background-color);
+ color: white;
+ border-radius: 100vh;
+ padding-left: 6px;
+ padding-right: 6px;
}
.tree-outline .header-value {
- display: inline;
- margin-right: 1em;
- white-space: pre-wrap;
- word-break: break-all;
- margin-top: 1px;
+ display: inline;
+ margin-right: 1em;
+ white-space: pre-wrap;
+ word-break: break-all;
+ margin-top: 1px;
}
.tree-outline .call-to-action {
- background-color: #F8F9FA;
- padding: 8px;
- border-radius: 2px;
+ background-color: #f8f9fa;
+ padding: 8px;
+ border-radius: 2px;
}
.tree-outline .selected .call-to-action {
- background-color: transparent;
- padding: 8px;
- border-radius: 2px;
+ background-color: transparent;
+ padding: 8px;
+ border-radius: 2px;
}
.tree-outline .call-to-action-body {
- padding: 6px 0;
- margin-left: 9.5px;
- border-left: 2px solid #F29900;
- padding-left: 18px;
+ padding: 6px 0;
+ margin-left: 9.5px;
+ border-left: 2px solid #f29900;
+ padding-left: 18px;
}
.tree-outline .call-to-action .explanation {
- font-weight: bold;
+ font-weight: bold;
}
.tree-outline .call-to-action code {
- font-size: 90%;
+ font-size: 90%;
}
-
.tree-outline .call-to-action .example .comment::before {
- content: " — ";
+ content: " — ";
}
.tree-outline .empty-request-header {
- color: rgba(33%, 33%, 33%, 0.5);
+ color: rgba(33%, 33%, 33%, 0.5);
}
.request-headers-show-more-button {
- border: none;
- border-radius: 3px;
- display: inline-block;
- font-size: 12px;
- font-family: sans-serif;
- cursor: pointer;
- margin: 0 4px;
- padding: 2px 4px;
+ border: none;
+ border-radius: 3px;
+ display: inline-block;
+ font-size: 12px;
+ font-family: sans-serif;
+ cursor: pointer;
+ margin: 0 4px;
+ padding: 2px 4px;
}
.header-highlight {
- background-color: #FFFF78
+ background-color: #ffff78;
}
@media (forced-colors: active) {
- :host-context(.request-headers-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
- background: Highlight;
- }
- :host-context(.request-headers-tree) ol.tree-outline:not(.hide-selection-when-blurred) li::before {
- background-color: ButtonText;
- }
- :host-context(.request-headers-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected.parent::before {
- background-color: HighlightText;
- }
- :host-context(.request-headers-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected *,
- :host-context(.request-headers-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected.parent,
- :host-context(.request-headers-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected.parent span,
- :host-context(.request-headers-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus .status-from-cache {
- color: HighlightText;
- }
+ :host-context(.request-headers-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
+ background: Highlight;
+ }
+
+ :host-context(.request-headers-tree) ol.tree-outline:not(.hide-selection-when-blurred) li::before {
+ background-color: ButtonText;
+ }
+
+ :host-context(.request-headers-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected.parent::before {
+ background-color: HighlightText;
+ }
+
+ :host-context(.request-headers-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected *,
+ :host-context(.request-headers-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected.parent,
+ :host-context(.request-headers-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected.parent span,
+ :host-context(.request-headers-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus .status-from-cache {
+ color: HighlightText;
+ }
}
diff --git a/front_end/network/requestHeadersView.css b/front_end/network/requestHeadersView.css
index 2aee00b..7d6049c 100644
--- a/front_end/network/requestHeadersView.css
+++ b/front_end/network/requestHeadersView.css
@@ -5,25 +5,25 @@
*/
.request-headers-view {
- user-select: text;
- overflow: auto;
+ user-select: text;
+ overflow: auto;
}
.resource-status-image {
- margin-top: -2px;
- margin-right: 3px;
+ margin-top: -2px;
+ margin-right: 3px;
}
.request-headers-tree {
- flex-grow: 1;
- overflow-y: auto;
- margin: 0;
+ flex-grow: 1;
+ overflow-y: auto;
+ margin: 0;
}
.header-decode-error {
- color: red;
+ color: red;
}
.-theme-with-dark-background .header-decode-error {
- color: hsl(0, 100%, 65%);
+ color: hsl(0, 100%, 65%);
}
diff --git a/front_end/network/requestInitiatorView.css b/front_end/network/requestInitiatorView.css
index 1301df3..9e92765 100644
--- a/front_end/network/requestInitiatorView.css
+++ b/front_end/network/requestInitiatorView.css
@@ -5,30 +5,31 @@
*/
.request-initiator-view {
- display: block;
- margin: 6px;
+ display: block;
+ margin: 6px;
}
.request-initiator-view-section-title {
- font-weight: bold;
- padding: 4px;
+ font-weight: bold;
+ padding: 4px;
}
.request-initiator-view-section-title[data-keyboard-focus="true"]:focus {
- background-color: rgba(0, 0, 0, 0.08);
+ background-color: rgba(0, 0, 0, 0.08);
}
.request-initiator-view-section-content {
- margin-left: 6px;
+ margin-left: 6px;
}
@media (forced-colors: active) {
- .request-initiator-view-section-title[data-keyboard-focus="true"]:focus [is=ui-icon].icon-mask {
- background-color: HighlightText;
- }
- .request-initiator-view-section-title[data-keyboard-focus="true"]:focus {
- forced-color-adjust: none;
- background-color: Highlight;
- color: HighlightText;
- }
+ .request-initiator-view-section-title[data-keyboard-focus="true"]:focus [is=ui-icon].icon-mask {
+ background-color: HighlightText;
+ }
+
+ .request-initiator-view-section-title[data-keyboard-focus="true"]:focus {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ color: HighlightText;
+ }
}
diff --git a/front_end/network/signedExchangeInfoTree.css b/front_end/network/signedExchangeInfoTree.css
index 6521306..354dc4b 100644
--- a/front_end/network/signedExchangeInfoTree.css
+++ b/front_end/network/signedExchangeInfoTree.css
@@ -5,88 +5,88 @@
*/
.tree-outline {
- padding-left: 0;
+ padding-left: 0;
}
.tree-outline > ol {
- padding-bottom: 5px;
- border-bottom: solid 1px #e0e0e0;
+ padding-bottom: 5px;
+ border-bottom: solid 1px #e0e0e0;
}
.tree-outline > .parent {
- user-select: none;
- font-weight: bold;
- color: #616161;
- margin-top: -1px;
- height: 20px;
- display: flex;
- align-items: center;
- height: 26px;
+ user-select: none;
+ font-weight: bold;
+ color: #616161;
+ margin-top: -1px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ height: 26px;
}
.tree-outline li {
- padding-left: 5px;
- line-height: 20px;
+ padding-left: 5px;
+ line-height: 20px;
}
.tree-outline li:not(.parent) {
- display: block;
- margin-left: 10px;
+ display: block;
+ margin-left: 10px;
}
.tree-outline li:not(.parent)::before {
- display: none;
+ display: none;
}
.tree-outline .header-name {
- color: rgb(33%, 33%, 33%);
- display: inline-block;
- margin-right: 0.25em;
- font-weight: bold;
- vertical-align: top;
- white-space: pre-wrap;
+ color: rgb(33%, 33%, 33%);
+ display: inline-block;
+ margin-right: 0.25em;
+ font-weight: bold;
+ vertical-align: top;
+ white-space: pre-wrap;
}
.tree-outline .header-separator {
- user-select: none;
+ user-select: none;
}
.tree-outline .header-value {
- display: inline;
- margin-right: 1em;
- white-space: pre-wrap;
- word-break: break-all;
- margin-top: 1px;
+ display: inline;
+ margin-right: 1em;
+ white-space: pre-wrap;
+ word-break: break-all;
+ margin-top: 1px;
}
.tree-outline .header-toggle {
- display: inline;
- margin-left: 30px;
- font-weight: normal;
- color: rgb(45%, 45%, 45%);
+ display: inline;
+ margin-left: 30px;
+ font-weight: normal;
+ color: rgb(45%, 45%, 45%);
}
.tree-outline .header-toggle:hover {
- color: rgb(20%, 20%, 45%);
- cursor: pointer;
+ color: rgb(20%, 20%, 45%);
+ cursor: pointer;
}
.tree-outline .error-log {
- color: red;
- display: inline-block;
- margin-right: 0.25em;
- margin-left: 0.25em;
- font-weight: bold;
- vertical-align: top;
- white-space: pre-wrap;
+ color: red;
+ display: inline-block;
+ margin-right: 0.25em;
+ margin-left: 0.25em;
+ font-weight: bold;
+ vertical-align: top;
+ white-space: pre-wrap;
}
.tree-outline .hex-data {
- display: block;
- word-break: break-word;
- margin-left: 20px;
+ display: block;
+ word-break: break-word;
+ margin-left: 20px;
}
.tree-outline .error-field {
- color: red;
+ color: red;
}
diff --git a/front_end/network/signedExchangeInfoView.css b/front_end/network/signedExchangeInfoView.css
index cc4157e..e8cc031 100644
--- a/front_end/network/signedExchangeInfoView.css
+++ b/front_end/network/signedExchangeInfoView.css
@@ -5,12 +5,12 @@
*/
.signed-exchange-info-view {
- user-select: text;
- overflow: auto;
+ user-select: text;
+ overflow: auto;
}
.signed-exchange-info-tree {
- flex-grow: 1;
- overflow-y: auto;
- margin: 0;
+ flex-grow: 1;
+ overflow-y: auto;
+ margin: 0;
}
diff --git a/front_end/network/webSocketFrameView.css b/front_end/network/webSocketFrameView.css
index 2f7e145..b96ec1d 100644
--- a/front_end/network/webSocketFrameView.css
+++ b/front_end/network/webSocketFrameView.css
@@ -5,57 +5,57 @@
*/
.websocket-frame-view {
- user-select: text;
+ user-select: text;
}
.websocket-frame-view .data-grid {
- flex: auto;
- border: none;
+ flex: auto;
+ border: none;
}
.websocket-frame-view .data-grid .data {
- background-image: none;
+ background-image: none;
}
.websocket-frame-view-td {
- border-bottom: 1px solid #ccc;
+ border-bottom: 1px solid #ccc;
}
.websocket-frame-view .data-grid tr.selected {
- background-color: #def;
+ background-color: #def;
}
.websocket-frame-view .data-grid td,
.websocket-frame-view .data-grid th {
- border-left-color: #ccc;
+ border-left-color: #ccc;
}
.websocket-frame-view-row-send td:first-child::before {
- content: "\2B06";
- color: #080;
- padding-right: 4px;
+ content: "\2B06";
+ color: #080;
+ padding-right: 4px;
}
.websocket-frame-view-row-receive td:first-child::before {
- content: "\2B07";
- color: #E65100;
- padding-right: 4px;
+ content: "\2B07";
+ color: #e65100;
+ padding-right: 4px;
}
.data-grid:focus .websocket-frame-view-row-send.selected td:first-child::before,
.data-grid:focus .websocket-frame-view-row-receive.selected td:first-child::before {
- color: white;
+ color: white;
}
.websocket-frame-view-row-send {
- background-color: rgb(226, 247, 218);
+ background-color: rgb(226, 247, 218);
}
.websocket-frame-view-row-error {
- background-color: rgb(255, 237, 237);
- color: rgb(182, 0, 0);
+ background-color: rgb(255, 237, 237);
+ color: rgb(182, 0, 0);
}
.websocket-frame-view .toolbar {
- border-bottom: var(--divider-border);
+ border-bottom: var(--divider-border);
}
diff --git a/front_end/node_main/nodeConnectionsPanel.css b/front_end/node_main/nodeConnectionsPanel.css
index ff59307..2c51b11 100644
--- a/front_end/node_main/nodeConnectionsPanel.css
+++ b/front_end/node_main/nodeConnectionsPanel.css
@@ -5,122 +5,122 @@
*/
.add-network-target-button {
- margin: 10px 25px;
- align-self: flex-start;
+ margin: 10px 25px;
+ align-self: flex-start;
}
.network-discovery-list {
- margin: 10px 0 0 25px;
- max-width: 500px;
- flex: none;
+ margin: 10px 0 0 25px;
+ max-width: 500px;
+ flex: none;
}
.network-discovery-list-empty {
- flex: auto;
- height: 30px;
- display: flex;
- align-items: center;
- justify-content: center;
+ flex: auto;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.network-discovery-list-item {
- padding: 3px 5px 3px 5px;
- height: 30px;
- display: flex;
- align-items: center;
- position: relative;
- flex: auto 1 1;
+ padding: 3px 5px 3px 5px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ position: relative;
+ flex: auto 1 1;
}
.list-item .network-discovery-value {
- white-space: nowrap;
- text-overflow: ellipsis;
- user-select: none;
- color: #222;
- overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ user-select: none;
+ color: #222;
+ overflow: hidden;
}
.network-discovery-value {
- flex: 3 1 0;
+ flex: 3 1 0;
}
.network-discovery-edit-row {
- flex: none;
- display: flex;
- flex-direction: row;
- margin: 6px 5px;
- align-items: center;
+ flex: none;
+ display: flex;
+ flex-direction: row;
+ margin: 6px 5px;
+ align-items: center;
}
.network-discovery-edit-row input {
- width: 100%;
- text-align: inherit;
+ width: 100%;
+ text-align: inherit;
}
.network-discovery-footer {
- overflow: hidden;
- margin: 15px 0 0 25px;
- max-width: 500px;
+ overflow: hidden;
+ margin: 15px 0 0 25px;
+ max-width: 500px;
}
.network-discovery-footer > * {
- white-space: pre-wrap;
+ white-space: pre-wrap;
}
.node-panel {
- align-items: center;
- justify-content: flex-start;
+ align-items: center;
+ justify-content: flex-start;
}
.network-discovery-view {
- min-width: 400px;
- flex: auto;
+ min-width: 400px;
+ flex: auto;
}
.add-network-target-button {
- align-self: center;
+ align-self: center;
}
:host-context(.node-frontend) .network-discovery-list-empty {
- height: 40px;
+ height: 40px;
}
:host-context(.node-frontend) .network-discovery-list-item {
- padding: 3px 15px;
- height: 40px;
+ padding: 3px 15px;
+ height: 40px;
}
.network-discovery-list {
- margin: 20px 0 5px 0;
- max-width: 600px;
- max-height: 202px;
+ margin: 20px 0 5px 0;
+ max-width: 600px;
+ max-height: 202px;
}
.network-discovery-footer {
- margin: 0;
+ margin: 0;
}
.node-panel-center {
- display: flex;
- align-items: stretch;
- justify-content: center;
- max-width: 600px;
- flex-direction: column;
- padding-top: 50px;
+ display: flex;
+ align-items: stretch;
+ justify-content: center;
+ max-width: 600px;
+ flex-direction: column;
+ padding-top: 50px;
}
.node-panel-logo {
- align-self: center;
- width: 400px;
- margin-bottom: 50px;
- flex: none;
+ align-self: center;
+ width: 400px;
+ margin-bottom: 50px;
+ flex: none;
}
:host-context(.node-frontend) .network-discovery-edit-row input {
- height: 30px;
- padding-left: 5px;
+ height: 30px;
+ padding-left: 5px;
}
:host-context(.node-frontend) .network-discovery-edit-row {
- margin: 6px 9px;
+ margin: 6px 9px;
}
diff --git a/front_end/object_ui/customPreviewComponent.css b/front_end/object_ui/customPreviewComponent.css
index e62af63..8c62d05 100644
--- a/front_end/object_ui/customPreviewComponent.css
+++ b/front_end/object_ui/customPreviewComponent.css
@@ -5,18 +5,18 @@
*/
.custom-expandable-section {
- display: inline-flex;
- flex-direction: column;
+ display: inline-flex;
+ flex-direction: column;
}
.custom-expand-icon {
- user-select: none;
- opacity: 0.5;
- margin-right: 4px;
- margin-bottom: -2px;
- background: black;
+ user-select: none;
+ opacity: 0.5;
+ margin-right: 4px;
+ margin-bottom: -2px;
+ background: black;
}
.custom-expandable-section-standard-section {
- display: inline-flex;
+ display: inline-flex;
}
diff --git a/front_end/object_ui/objectPopover.css b/front_end/object_ui/objectPopover.css
index 59e332c..36974b5 100644
--- a/front_end/object_ui/objectPopover.css
+++ b/front_end/object_ui/objectPopover.css
@@ -5,53 +5,53 @@
*/
.object-popover-content {
- display: block;
- position: relative;
- overflow: hidden;
- flex: 1 1 auto;
+ display: block;
+ position: relative;
+ overflow: hidden;
+ flex: 1 1 auto;
}
.object-popover-title {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- font-weight: bold;
- padding-left: 18px;
- padding-bottom: 2px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ font-weight: bold;
+ padding-left: 18px;
+ padding-bottom: 2px;
}
.object-popover-tree {
- border-top: 1px solid rgb(184, 184, 184);
- overflow: auto;
- width: 100%;
- height: calc(100% - 13px);
+ border-top: 1px solid rgb(184, 184, 184);
+ overflow: auto;
+ width: 100%;
+ height: calc(100% - 13px);
}
.object-popover-container {
- display: inline-block;
+ display: inline-block;
}
.function-popover-title {
- border-bottom: 1px solid #AAA;
- margin-bottom: 3px;
- padding-bottom: 2px;
- display: flex;
- justify-content: space-between;
- align-items: center;
+ border-bottom: 1px solid #aaa;
+ margin-bottom: 3px;
+ padding-bottom: 2px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
}
.function-popover-title .function-name {
- font-weight: bold;
+ font-weight: bold;
}
.function-title-link-container {
- display: flex;
- align-items: center;
- position: relative;
- margin-left: 10px;
+ display: flex;
+ align-items: center;
+ position: relative;
+ margin-left: 10px;
}
.function-title-link-container .devtools-link {
- white-space: nowrap;
- overflow: hidden;
+ white-space: nowrap;
+ overflow: hidden;
}
diff --git a/front_end/object_ui/objectPropertiesSection.css b/front_end/object_ui/objectPropertiesSection.css
index 58a1e88..9f2bec0 100644
--- a/front_end/object_ui/objectPropertiesSection.css
+++ b/front_end/object_ui/objectPropertiesSection.css
@@ -5,104 +5,109 @@
*/
.object-properties-section-dimmed {
- opacity: 0.6;
+ opacity: 0.6;
}
.object-properties-section {
- padding: 0 0 0px 0px;
- color: rgb(33,33,33) !important;
- display: flex;
- flex-direction: column;
+ padding: 0 0 0 0;
+ color: rgb(33, 33, 33) !important;
+ display: flex;
+ flex-direction: column;
}
.object-properties-section li {
- user-select: text;
+ user-select: text;
}
.object-properties-section li::before {
- top: -1px;
+ top: -1px;
}
.object-properties-section li.editing-sub-part {
- padding: 3px 12px 8px 6px;
- margin: -1px -6px -8px -6px;
- text-overflow: clip;
+ padding: 3px 12px 8px 6px;
+ margin: -1px -6px -8px -6px;
+ text-overflow: clip;
}
.object-properties-section li.editing {
- margin-left: 10px;
- text-overflow: clip;
+ margin-left: 10px;
+ text-overflow: clip;
}
.tree-outline ol.title-less-mode {
- padding-left: 0px;
+ padding-left: 0;
}
.object-properties-section .synthetic-property {
- font-style: italic;
+ font-style: italic;
}
.object-properties-section .private-property-hash {
- color: #222;
+ color: #222;
}
.object-properties-section-root-element {
- display: flex;
- flex-direction: row;
+ display: flex;
+ flex-direction: row;
}
.object-properties-section .editable-div {
- overflow: hidden;
+ overflow: hidden;
}
.name-and-value {
- overflow: hidden;
- text-overflow: ellipsis;
- line-height: 16px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 16px;
}
.editing-sub-part .name-and-value {
- overflow: visible;
- display: inline-flex;
+ overflow: visible;
+ display: inline-flex;
}
.property-prompt {
- margin-left: 4px;
+ margin-left: 4px;
}
.tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
- background: none;
+ background: none;
}
.tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] ::slotted(*),
.tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .tree-element-title,
.tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .name-and-value {
- background: var(--focus-bg-color);
- border-radius: 2px;
- box-shadow: 0px 0px 0px 2px var(--focus-bg-color);
+ background: var(--focus-bg-color);
+ border-radius: 2px;
+ box-shadow: 0 0 0 2px var(--focus-bg-color);
}
@media (forced-colors: active) {
- .object-properties-section-dimmed {
- opacity: 1;
- }
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
- background: Highlight;
- }
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .tree-element-title,
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .name-and-value {
- background: transparent;
- box-shadow: none;
- }
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] span,
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .gray-info-message {
- color: HighlightText;
- }
- .tree-outline-disclosure:hover li.parent::before {
- background-color: ButtonText;
- }
- .tree-outline li:hover .tree-element-title,
- .tree-outline li.selected .tree-element-title {
- color: ButtonText;
- }
+ .object-properties-section-dimmed {
+ opacity: 1;
+ }
+
+ .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
+ background: Highlight;
+ }
+
+ .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .tree-element-title,
+ .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .name-and-value {
+ background: transparent;
+ box-shadow: none;
+ }
+
+ .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] span,
+ .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .gray-info-message {
+ color: HighlightText;
+ }
+
+ .tree-outline-disclosure:hover li.parent::before {
+ background-color: ButtonText;
+ }
+
+ .tree-outline li:hover .tree-element-title,
+ .tree-outline li.selected .tree-element-title {
+ color: ButtonText;
+ }
}
diff --git a/front_end/perf_ui/chartViewport.css b/front_end/perf_ui/chartViewport.css
index 22e1d6d..068ec69 100644
--- a/front_end/perf_ui/chartViewport.css
+++ b/front_end/perf_ui/chartViewport.css
@@ -5,69 +5,71 @@
*/
.chart-viewport-v-scroll {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- overflow-x: hidden;
- z-index: 200;
- padding-left: 1px;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ overflow-x: hidden;
+ z-index: 200;
+ padding-left: 1px;
}
.chart-viewport-v-scroll.always-show-scrollbar {
- overflow-y: scroll;
+ overflow-y: scroll;
}
/* force non overlay scrollbars for Mac */
+
:host-context(.platform-mac) .chart-viewport-v-scroll {
- right: 2px;
- top: 3px;
- bottom: 3px;
+ right: 2px;
+ top: 3px;
+ bottom: 3px;
}
:host-context(.platform-mac) ::-webkit-scrollbar {
- width: 8px;
+ width: 8px;
}
:host-context(.platform-mac) ::-webkit-scrollbar-thumb {
- background-color: hsla(0, 0%, 56%, 0.6);
- border-radius: 50px;
+ background-color: hsla(0, 0%, 56%, 0.6);
+ border-radius: 50px;
}
:host-context(.platform-mac) .chart-viewport-v-scroll:hover::-webkit-scrollbar-thumb {
- background-color: hsla(0, 0%, 25%, 0.6);
+ background-color: hsla(0, 0%, 25%, 0.6);
}
/* force non overlay scrollbars for Aura Overlay Scrollbar enabled */
+
:host-context(.overlay-scrollbar-enabled) ::-webkit-scrollbar {
- width: 10px;
+ width: 10px;
}
:host-context(.overlay-scrollbar-enabled) ::-webkit-scrollbar-thumb {
- background-color: hsla(0, 0%, 0%, 0.5);
+ background-color: hsla(0, 0%, 0%, 0.5);
}
:host-context(.overlay-scrollbar-enabled) .chart-viewport-v-scroll:hover::-webkit-scrollbar-thumb {
- background-color: hsla(0, 0%, 0%, 0.7);
+ background-color: hsla(0, 0%, 0%, 0.7);
}
.chart-viewport-selection-overlay {
- position: absolute;
- z-index: 100;
- background-color: rgba(56, 121, 217, 0.3);
- border-color: rgb(16, 81, 177);
- border-width: 0 1px;
- border-style: solid;
- pointer-events: none;
- top: 0;
- bottom: 0;
- text-align: center;
+ position: absolute;
+ z-index: 100;
+ background-color: rgba(56, 121, 217, 0.3);
+ border-color: rgb(16, 81, 177);
+ border-width: 0 1px;
+ border-style: solid;
+ pointer-events: none;
+ top: 0;
+ bottom: 0;
+ text-align: center;
}
.chart-viewport-selection-overlay .time-span {
- white-space: nowrap;
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
+ white-space: nowrap;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
}
diff --git a/front_end/perf_ui/filmStripView.css b/front_end/perf_ui/filmStripView.css
index ab3ed83..3e834f8 100644
--- a/front_end/perf_ui/filmStripView.css
+++ b/front_end/perf_ui/filmStripView.css
@@ -5,60 +5,60 @@
*/
.film-strip-view {
- overflow-x: auto;
- overflow-y: hidden;
- align-content: flex-start;
- min-height: 81px;
+ overflow-x: auto;
+ overflow-y: hidden;
+ align-content: flex-start;
+ min-height: 81px;
}
.film-strip-view.time-based .frame .time {
- display: none;
+ display: none;
}
.film-strip-view .label {
- margin: auto;
- font-size: 18px;
- color: #999;
+ margin: auto;
+ font-size: 18px;
+ color: #999;
}
.film-strip-view .frame {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 4px;
- flex: none;
- cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 4px;
+ flex: none;
+ cursor: pointer;
}
.film-strip-view .frame .thumbnail {
- min-width: 24px;
- display: flex;
- flex-direction: row;
- align-items: center;
- pointer-events: none;
- margin: 4px 0 2px;
- border: 2px solid transparent;
+ min-width: 24px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ pointer-events: none;
+ margin: 4px 0 2px;
+ border: 2px solid transparent;
}
.film-strip-view .frame:hover .thumbnail {
- border-color: #FBCA46;
+ border-color: #fbca46;
}
.film-strip-view .frame .thumbnail img {
- height: auto;
- width: auto;
- max-width: 80px;
- max-height: 50px;
- pointer-events: none;
- box-shadow: 0 0 3px #bbb;
- flex: 0 0 auto;
+ height: auto;
+ width: auto;
+ max-width: 80px;
+ max-height: 50px;
+ pointer-events: none;
+ box-shadow: 0 0 3px #bbb;
+ flex: 0 0 auto;
}
.film-strip-view .frame:hover .thumbnail img {
- box-shadow: none;
+ box-shadow: none;
}
.film-strip-view .frame .time {
- font-size: 10px;
- margin-top: 2px;
+ font-size: 10px;
+ margin-top: 2px;
}
diff --git a/front_end/perf_ui/flameChart.css b/front_end/perf_ui/flameChart.css
index 4d9c03a..77523d0 100644
--- a/front_end/perf_ui/flameChart.css
+++ b/front_end/perf_ui/flameChart.css
@@ -5,75 +5,75 @@
*/
.flame-chart-main-pane {
- overflow: hidden;
+ overflow: hidden;
}
.flame-chart-marker-highlight-element {
- position: absolute;
- top: 1px;
- height: 18px;
- width: 6px;
- margin: 0 -3px;
- content: "";
- display: block;
+ position: absolute;
+ top: 1px;
+ height: 18px;
+ width: 6px;
+ margin: 0 -3px;
+ content: "";
+ display: block;
}
.flame-chart-canvas[data-keyboard-focus="true"]:focus {
- border-top: 1px solid var(--accent-color);
- border-bottom: 1px solid var(--accent-color);
+ border-top: 1px solid var(--accent-color);
+ border-bottom: 1px solid var(--accent-color);
}
.flame-chart-highlight-element {
- position: absolute;
- pointer-events: none;
- background-color: rgba(56, 121, 217, 0.1);
+ position: absolute;
+ pointer-events: none;
+ background-color: rgba(56, 121, 217, 0.1);
}
.flame-chart-selected-element {
- position: absolute;
- pointer-events: none;
- outline: 2px solid var(--selection-bg-color);
- background-color: rgba(56, 121, 217, 0.1);
+ position: absolute;
+ pointer-events: none;
+ outline: 2px solid var(--selection-bg-color);
+ background-color: rgba(56, 121, 217, 0.1);
}
.flame-chart-unfocused-selected-element {
- outline: 2px solid rgba(123, 123, 123, 1);
+ outline: 2px solid rgba(123, 123, 123, 1);
}
.chart-cursor-element {
- position: absolute;
- top: 0;
- bottom: 0;
- z-index: 100;
- width: 2px;
- background-color: var(--selection-bg-color);
- pointer-events: none;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ z-index: 100;
+ width: 2px;
+ background-color: var(--selection-bg-color);
+ pointer-events: none;
}
.flame-chart-entry-info:not(:empty) {
- z-index: 2000;
- position: absolute;
- background-color: white;
- pointer-events: none;
- padding: 4px 8px;
- white-space: nowrap;
- max-width: 80%;
- box-shadow: var(--drop-shadow);
+ z-index: 2000;
+ position: absolute;
+ background-color: white;
+ pointer-events: none;
+ padding: 4px 8px;
+ white-space: nowrap;
+ max-width: 80%;
+ box-shadow: var(--drop-shadow);
}
.flame-chart-entry-info table tr td:empty {
- padding: 0;
+ padding: 0;
}
.flame-chart-entry-info table tr td:not(:empty) {
- padding: 0 5px;
- white-space: nowrap;
+ padding: 0 5px;
+ white-space: nowrap;
}
.flame-chart-entry-info table tr td:first-child {
- font-weight: bold;
+ font-weight: bold;
}
.flame-chart-entry-info table tr td span {
- margin-right: 5px;
+ margin-right: 5px;
}
diff --git a/front_end/perf_ui/overviewGrid.css b/front_end/perf_ui/overviewGrid.css
index 845a327..c5834ef 100644
--- a/front_end/perf_ui/overviewGrid.css
+++ b/front_end/perf_ui/overviewGrid.css
@@ -5,87 +5,92 @@
*/
.overview-grid-window-selector {
- position: absolute;
- top: 0;
- bottom: 0;
- background-color: rgba(125, 173, 217, 0.5);
- z-index: 250;
- pointer-events: none;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ background-color: rgba(125, 173, 217, 0.5);
+ z-index: 250;
+ pointer-events: none;
}
.overview-grid-window-resizer {
- position: absolute;
- top: -1px;
- height: 20px;
- width: 6px;
- margin-left: -3px;
- background-color: rgb(153, 153, 153);
- border: 1px solid white;
- z-index: 500;
+ position: absolute;
+ top: -1px;
+ height: 20px;
+ width: 6px;
+ margin-left: -3px;
+ background-color: rgb(153, 153, 153);
+ border: 1px solid white;
+ z-index: 500;
}
.overview-grid-window-resizer[data-keyboard-focus="true"]:focus {
- background-color: var(--active-control-bg-color);
+ background-color: var(--active-control-bg-color);
}
.overview-grid-cursor-area {
- position: absolute;
- left: 0;
- right: 0;
- top: 20px;
- bottom: 0;
- z-index: 500;
- cursor: text;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 20px;
+ bottom: 0;
+ z-index: 500;
+ cursor: text;
}
.overview-grid-cursor-position {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 2px;
- background-color: hsla(220, 95%, 50%, 0.7);
- z-index: 500;
- pointer-events: none;
- visibility: hidden;
- overflow: hidden;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 2px;
+ background-color: hsla(220, 95%, 50%, 0.7);
+ z-index: 500;
+ pointer-events: none;
+ visibility: hidden;
+ overflow: hidden;
}
-.window-curtain-left, .window-curtain-right {
- background-color: hsla(0, 0%, 80%, 0.5);
- position: absolute;
- top: 0;
- height: 100%;
- z-index: 300;
- pointer-events: none;
- border: 1px none hsla(0, 0%, 70%, 0.5);
+.window-curtain-left,
+.window-curtain-right {
+ background-color: hsla(0, 0%, 80%, 0.5);
+ position: absolute;
+ top: 0;
+ height: 100%;
+ z-index: 300;
+ pointer-events: none;
+ border: 1px none hsla(0, 0%, 70%, 0.5);
}
.window-curtain-left {
- left: 0;
- border-right-style: solid;
+ left: 0;
+ border-right-style: solid;
}
.window-curtain-right {
- right: 0;
- border-left-style: solid;
+ right: 0;
+ border-left-style: solid;
}
@media (forced-colors: active) {
- .overview-grid-cursor-position {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- .window-curtain-left, .window-curtain-right {
- background-color: transparent;
- border-color: ButtonText;
- }
- .overview-grid-window-resizer {
- background-color: ButtonText;
- }
- .overview-grid-window-resizer:hover,
- .overview-grid-window-resizer:active,
- .overview-grid-window-resizer[data-keyboard-focus="true"]:focus {
- forced-color-adjust: none;
- background-color: Highlight;
- }
+ .overview-grid-cursor-position {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ .window-curtain-left,
+ .window-curtain-right {
+ background-color: transparent;
+ border-color: ButtonText;
+ }
+
+ .overview-grid-window-resizer {
+ background-color: ButtonText;
+ }
+
+ .overview-grid-window-resizer:hover,
+ .overview-grid-window-resizer:active,
+ .overview-grid-window-resizer[data-keyboard-focus="true"]:focus {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
}
diff --git a/front_end/perf_ui/pieChart.css b/front_end/perf_ui/pieChart.css
index 06e833f..fb5cc1e 100644
--- a/front_end/perf_ui/pieChart.css
+++ b/front_end/perf_ui/pieChart.css
@@ -5,94 +5,95 @@
*/
.root {
- align-items: center;
- display: flex;
- min-width: fit-content;
- white-space: nowrap;
+ align-items: center;
+ display: flex;
+ min-width: fit-content;
+ white-space: nowrap;
}
.chart-root {
- position: relative;
- overflow: hidden;
+ position: relative;
+ overflow: hidden;
}
.pie-chart-foreground {
- position: absolute;
- width: 100%;
- height: 100%;
- z-index: 10;
- top: 0;
- display: flex;
- pointer-events: none;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: 10;
+ top: 0;
+ display: flex;
+ pointer-events: none;
}
.pie-chart-total {
- margin: auto;
- padding: 2px 5px;
- background-color: rgba(255, 255, 255, 0.6);
- pointer-events: auto;
+ margin: auto;
+ padding: 2px 5px;
+ background-color: rgba(255, 255, 255, 0.6);
+ pointer-events: auto;
}
.pie-chart-total.selected {
- font-weight: bold;
+ font-weight: bold;
}
.chart-root .slice.selected {
- stroke: var(--selection-bg-color);
- stroke-opacity: 1.0;
- stroke-width: 0.04;
- stroke-linecap: round;
- stroke-linejoin: round;
+ stroke: var(--selection-bg-color);
+ stroke-opacity: 1;
+ stroke-width: 0.04;
+ stroke-linecap: round;
+ stroke-linejoin: round;
}
.pie-chart-legend {
- margin-left: 30px;
+ margin-left: 30px;
}
.pie-chart-legend-row {
- margin: 5px 2px 5px auto;
- padding-right: 25px;
+ margin: 5px 2px 5px auto;
+ padding-right: 25px;
}
.pie-chart-legend-row.selected {
- font-weight: bold;
+ font-weight: bold;
}
.pie-chart-legend-row[data-keyboard-focus="true"]:focus {
- box-shadow: 0 0 0 2px var(--selection-bg-color) !important;
+ box-shadow: 0 0 0 2px var(--selection-bg-color) !important;
}
.pie-chart-swatch {
- display: inline-block;
- width: 11px;
- height: 11px;
- margin: 0 6px;
- top: 1px;
- position: relative;
- border: 1px solid rgba(100, 100, 100, 0.2);
+ display: inline-block;
+ width: 11px;
+ height: 11px;
+ margin: 0 6px;
+ top: 1px;
+ position: relative;
+ border: 1px solid rgba(100, 100, 100, 0.2);
}
.pie-chart-swatch.pie-chart-empty-swatch {
- border: none;
+ border: none;
}
.pie-chart-name {
- display: inline-block;
+ display: inline-block;
}
.pie-chart-size {
- display: inline-block;
- text-align: right;
- width: 70px;
+ display: inline-block;
+ text-align: right;
+ width: 70px;
}
@media (forced-colors: active) {
- .pie-chart-swatch {
- forced-color-adjust: none;
- border-color: ButtonText;
- }
- .pie-chart-total {
- forced-color-adjust: none;
- background-color: Canvas;
- }
+ .pie-chart-swatch {
+ forced-color-adjust: none;
+ border-color: ButtonText;
+ }
+
+ .pie-chart-total {
+ forced-color-adjust: none;
+ background-color: canvas;
+ }
}
diff --git a/front_end/perf_ui/timelineGrid.css b/front_end/perf_ui/timelineGrid.css
index 9e2382e..58b2e91 100644
--- a/front_end/perf_ui/timelineGrid.css
+++ b/front_end/perf_ui/timelineGrid.css
@@ -5,63 +5,63 @@
*/
.resources-dividers {
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- z-index: -100;
- bottom: 0;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: -100;
+ bottom: 0;
}
.resources-event-dividers {
- position: absolute;
- left: 0;
- right: 0;
- height: 100%;
- top: 0;
- z-index: 300;
- pointer-events: none;
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: 100%;
+ top: 0;
+ z-index: 300;
+ pointer-events: none;
}
.resources-dividers-label-bar {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- background-color: rgba(255, 255, 255, 0.85);
- background-clip: padding-box;
- height: 20px;
- z-index: 200;
- pointer-events: none;
- overflow: hidden;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ background-color: rgba(255, 255, 255, 0.85);
+ background-clip: padding-box;
+ height: 20px;
+ z-index: 200;
+ pointer-events: none;
+ overflow: hidden;
}
.resources-divider {
- position: absolute;
- width: 1px;
- top: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.1);
+ position: absolute;
+ width: 1px;
+ top: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.1);
}
.resources-event-divider {
- position: absolute;
- width: 1px;
- top: 0;
- bottom: 0;
- z-index: 300;
+ position: absolute;
+ width: 1px;
+ top: 0;
+ bottom: 0;
+ z-index: 300;
}
.resources-divider-label {
- position: absolute;
- top: 4px;
- right: 3px;
- font-size: 80%;
- white-space: nowrap;
- pointer-events: none;
+ position: absolute;
+ top: 4px;
+ right: 3px;
+ font-size: 80%;
+ white-space: nowrap;
+ pointer-events: none;
}
.timeline-grid-header {
- height: 20px;
- pointer-events: none;
+ height: 20px;
+ pointer-events: none;
}
diff --git a/front_end/perf_ui/timelineOverviewInfo.css b/front_end/perf_ui/timelineOverviewInfo.css
index c79d7a7..5a5e303 100644
--- a/front_end/perf_ui/timelineOverviewInfo.css
+++ b/front_end/perf_ui/timelineOverviewInfo.css
@@ -5,17 +5,17 @@
*/
.overview-info:not(:empty) {
- display: flex;
- background: white;
- box-shadow: var(--drop-shadow);
- padding: 3px;
+ display: flex;
+ background: white;
+ box-shadow: var(--drop-shadow);
+ padding: 3px;
}
.overview-info .frame .time {
- display: none;
+ display: none;
}
.overview-info .frame .thumbnail img {
- max-width: 50vw;
- max-height: 50vh;
+ max-width: 50vw;
+ max-height: 50vh;
}
diff --git a/front_end/persistence/editFileSystemView.css b/front_end/persistence/editFileSystemView.css
index 4b508b6..0ba0be2 100644
--- a/front_end/persistence/editFileSystemView.css
+++ b/front_end/persistence/editFileSystemView.css
@@ -5,63 +5,63 @@
*/
.file-system-header {
- display: flex;
- flex-direction: row;
- align-items: center;
- flex: auto;
- margin: 10px 0;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex: auto;
+ margin: 10px 0;
}
.file-system-header-text {
- flex: 1 0 auto;
+ flex: 1 0 auto;
}
.add-button {
- margin-left: 10px;
- align-self: flex-start;
+ margin-left: 10px;
+ align-self: flex-start;
}
.file-system-list {
- flex: auto;
+ flex: auto;
}
.file-system-list-empty {
- flex: auto;
- height: 30px;
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
+ flex: auto;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
}
.file-system-list-item {
- padding: 3px 5px 3px 5px;
- height: 30px;
- display: flex;
- align-items: center;
- flex: auto 1 1;
+ padding: 3px 5px 3px 5px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ flex: auto 1 1;
}
.list-item .file-system-value {
- white-space: nowrap;
- text-overflow: ellipsis;
- user-select: none;
- overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ user-select: none;
+ overflow: hidden;
}
.file-system-value {
- flex: 1 1 0px;
+ flex: 1 1 0;
}
.file-system-edit-row {
- flex: none;
- display: flex;
- flex-direction: row;
- margin: 6px 5px;
- align-items: center;
+ flex: none;
+ display: flex;
+ flex-direction: row;
+ margin: 6px 5px;
+ align-items: center;
}
.file-system-edit-row input {
- width: 100%;
- text-align: inherit;
+ width: 100%;
+ text-align: inherit;
}
diff --git a/front_end/persistence/workspaceSettingsTab.css b/front_end/persistence/workspaceSettingsTab.css
index 36759ff..e3a4765 100644
--- a/front_end/persistence/workspaceSettingsTab.css
+++ b/front_end/persistence/workspaceSettingsTab.css
@@ -5,112 +5,112 @@
*/
header {
- padding: 0 0 6px;
- border-bottom: 1px solid #EEEEEE;
+ padding: 0 0 6px;
+ border-bottom: 1px solid #eee;
}
header > h1 {
- font-size: 18px;
- font-weight: normal;
- margin: 0;
- padding-bottom: 3px;
+ font-size: 18px;
+ font-weight: normal;
+ margin: 0;
+ padding-bottom: 3px;
}
.settings-content {
- overflow-y: auto;
- overflow-x: hidden;
- margin: 8px 8px 8px 0;
- padding: 0 4px;
- flex: auto;
+ overflow-y: auto;
+ overflow-x: hidden;
+ margin: 8px 8px 8px 0;
+ padding: 0 4px;
+ flex: auto;
}
.settings-container {
- width: 100%;
- -webkit-column-width: 288px;
+ width: 100%;
+ -webkit-column-width: 288px;
}
-
.settings-tab.settings-container {
- -webkit-column-width: 308px;
+ -webkit-column-width: 308px;
}
.settings-tab label {
- padding-right: 4px;
- display: inline-flex;
+ padding-right: 4px;
+ display: inline-flex;
}
.settings-container-wrapper {
- position: absolute;
- top: 31px;
- left: 0px;
- right: 0;
- bottom: 0;
- overflow: auto;
- padding-top: 9px;
+ position: absolute;
+ top: 31px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: auto;
+ padding-top: 9px;
}
.settings-tab.settings-content {
- margin: 0;
- padding: 0;
+ margin: 0;
+ padding: 0;
}
.settings-tab p {
- margin: 12px 0;
+ margin: 12px 0;
}
p.folder-exclude-pattern {
- display: flex;
- align-items: center;
+ display: flex;
+ align-items: center;
}
p.folder-exclude-pattern > input {
- flex: auto;
+ flex: auto;
}
.settings-tab .file-system-container {
- border-top: 1px solid #aaa;
- padding: 19px 0 10px;
- margin: 20px 0;
+ border-top: 1px solid #aaa;
+ padding: 19px 0 10px;
+ margin: 20px 0;
}
.settings-tab .file-system-header {
- display: flex;
- flex-direction: row;
- align-items: center;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
}
.settings-tab .file-system-name {
- font-weight: bold;
- flex: none;
- margin-right: 10px;
- font-size: 15px;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 70%;
+ font-weight: bold;
+ flex: none;
+ margin-right: 10px;
+ font-size: 15px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 70%;
}
.settings-tab .file-system-path {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- flex: auto;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex: auto;
}
.settings-info-message {
- background-color: #eee;
- padding: 10px;
- margin: 20px 0;
+ background-color: #eee;
+ padding: 10px;
+ margin: 20px 0;
}
.settings-tab.settings-content.settings-container {
- -webkit-column-width: initial;
- overflow: hidden;
- padding-right: 10px;
+ -webkit-column-width: initial;
+ overflow: hidden;
+ padding-right: 10px;
}
/*
* Always show an outline. Needed because we have a white background here.
*/
+
.harmony-input[type=text]:not(.error-input):not(:invalid) {
- box-shadow: var(--focus-ring-inactive-shadow);
+ box-shadow: var(--focus-ring-inactive-shadow);
}
diff --git a/front_end/profiler/heapProfiler.css b/front_end/profiler/heapProfiler.css
index 10efbf5..03ff0ab 100644
--- a/front_end/profiler/heapProfiler.css
+++ b/front_end/profiler/heapProfiler.css
@@ -30,198 +30,201 @@
*/
.heap-snapshot-view {
- overflow: hidden;
+ overflow: hidden;
}
.heap-snapshot-view .data-grid {
- border: none;
+ border: none;
}
.heap-snapshot-view .data-grid tr:empty {
- height: 16px;
- visibility: hidden;
+ height: 16px;
+ visibility: hidden;
}
.heap-snapshot-view .data-grid span.percent-column {
- width: 35px !important;
+ width: 35px !important;
}
.heap-snapshot-view .object-value-object,
.object-value-node {
- display: inline;
- position: static;
+ display: inline;
+ position: static;
}
.heap-snapshot-view .object-value-string {
- white-space: nowrap;
+ white-space: nowrap;
}
.heap-snapshot-view td.object-column .objects-count {
- margin-left: 10px;
- font-size: 11px;
- color: grey;
+ margin-left: 10px;
+ font-size: 11px;
+ color: grey;
}
.heap-snapshot-view tr:not(.selected) .object-value-id {
- color: grey;
+ color: grey;
}
.heap-snapshot-view .data-grid {
- flex: auto;
+ flex: auto;
}
.profile-view .heap-tracking-overview {
- flex: 0 0 80px;
- height: 80px;
+ flex: 0 0 80px;
+ height: 80px;
}
.heap-snapshot-view .retaining-paths-view {
- overflow: hidden;
+ overflow: hidden;
}
.heap-snapshot-view .heap-snapshot-view-resizer {
- background-image: url(Images/toolbarResizerVertical.png);
- background-color: #eee;
- border-bottom: 1px solid rgb(179, 179, 179);
- background-repeat: no-repeat;
- background-position: right center, center;
- flex: 0 0 21px;
+ background-image: url(Images/toolbarResizerVertical.png);
+ background-color: #eee;
+ border-bottom: 1px solid rgb(179, 179, 179);
+ background-repeat: no-repeat;
+ background-position: right center, center;
+ flex: 0 0 21px;
}
.heap-snapshot-view .heap-snapshot-view-resizer .title > span {
- display: inline-block;
- padding-top: 3px;
- vertical-align: middle;
- margin-left: 4px;
- margin-right: 8px;
+ display: inline-block;
+ padding-top: 3px;
+ vertical-align: middle;
+ margin-left: 4px;
+ margin-right: 8px;
}
.heap-snapshot-view .heap-snapshot-view-resizer * {
- pointer-events: none;
+ pointer-events: none;
}
.heap-snapshot-view tr:not(.selected) td.object-column span.highlight {
- background-color: inherit;
+ background-color: inherit;
}
.heap-snapshot-view td.object-column > div > span {
- margin-right: 6px;
+ margin-right: 6px;
}
.heap-snapshot-view td.object-column span.heap-object-source-link {
- float: right;
+ float: right;
}
.heap-snapshot-view td.object-column span.heap-object-source-link:empty {
- animation: fadeInOut 2s infinite;
+ animation: fadeInOut 2s infinite;
}
-.heap-snapshot-view td.object-column span.heap-object-source-link:empty:before {
- content: "\b7\b7";
- font-weight: bold;
+.heap-snapshot-view td.object-column span.heap-object-source-link:empty::before {
+ content: "\b7\b7";
+ font-weight: bold;
}
@keyframes fadeInOut {
- 0% {
- transform: rotate(0);
- }
- 50% {
- transform: rotate(0.5turn);
- }
- 100% {
- transform: rotate(1turn);
- }
+ 0% {
+ transform: rotate(0);
+ }
+
+ 50% {
+ transform: rotate(0.5turn);
+ }
+
+ 100% {
+ transform: rotate(1turn);
+ }
}
.heap-snapshot-view tr:not(.selected) td.object-column span.heap-object-tag {
- color: #888;
+ color: #888;
}
.heap-snapshot-view td.object-column span.grayed {
- color: gray;
+ color: gray;
}
.cycled-ancessor-node {
- opacity: 0.6;
+ opacity: 0.6;
}
#heap-recording-view .profile-view {
- top: 80px;
+ top: 80px;
}
.heap-overview-container {
- overflow: hidden;
- position: absolute;
- top: 0;
- width: 100%;
- height: 80px;
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 80px;
}
#heap-recording-overview-grid .resources-dividers-label-bar {
- pointer-events: auto;
+ pointer-events: auto;
}
#heap-recording-overview-container {
- border-bottom: 1px solid rgba(0, 0, 0, 0.3);
- overflow: hidden;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+ overflow: hidden;
}
.heap-recording-overview-canvas {
- position: absolute;
- top: 20px;
- left: 0;
- right: 0;
- bottom: 0;
+ position: absolute;
+ top: 20px;
+ left: 0;
+ right: 0;
+ bottom: 0;
}
.heap-snapshot-statistics-view {
- overflow: auto;
+ overflow: auto;
}
.heap-snapshot-stats-pie-chart {
- margin: 12px 30px;
- flex-shrink: 0;
+ margin: 12px 30px;
+ flex-shrink: 0;
}
.heap-allocation-stack .stack-frame {
- display: flex;
- justify-content: space-between;
- border-bottom: 1px solid rgb(240, 240, 240);
- padding: 2px;
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 1px solid rgb(240, 240, 240);
+ padding: 2px;
}
.heap-allocation-stack .stack-frame:hover:not(:focus) {
- background-color: rgba(0, 0, 0, 0.1);
+ background-color: rgba(0, 0, 0, 0.1);
}
.heap-allocation-stack .stack-frame:focus {
- background-color: var(--selection-bg-color);
- color: var(--selection-fg-color);
+ background-color: var(--selection-bg-color);
+ color: var(--selection-fg-color);
}
.heap-allocation-stack .stack-frame:focus:hover {
- background-color: var(--accent-color-hover);
+ background-color: var(--accent-color-hover);
}
.heap-allocation-stack .stack-frame .devtools-link {
- color: rgb(33%, 33%, 33%);
+ color: rgb(33%, 33%, 33%);
}
.heap-allocation-stack .stack-frame:focus .devtools-link {
- color: var(--selection-fg-color);
+ color: var(--selection-fg-color);
}
.no-heap-allocation-stack {
- padding: 5px;
+ padding: 5px;
}
@media (forced-colors: active) {
- .cycled-ancessor-node {
- opacity: 1;
- }
- .heap-snapshot-view td.object-column .objects-count,
- .heap-snapshot-view tr:not(.selected) td.object-column span.heap-object-tag,
- .heap-snapshot-view tr:not(.selected) .object-value-id {
- color: ButtonText;
- }
+ .cycled-ancessor-node {
+ opacity: 1;
+ }
+
+ .heap-snapshot-view td.object-column .objects-count,
+ .heap-snapshot-view tr:not(.selected) td.object-column span.heap-object-tag,
+ .heap-snapshot-view tr:not(.selected) .object-value-id {
+ color: ButtonText;
+ }
}
diff --git a/front_end/profiler/liveHeapProfile.css b/front_end/profiler/liveHeapProfile.css
index 357b296..86d95dc 100644
--- a/front_end/profiler/liveHeapProfile.css
+++ b/front_end/profiler/liveHeapProfile.css
@@ -5,18 +5,18 @@
*/
.data-grid {
- border: none;
+ border: none;
}
.data-grid td .size-units {
- margin-left: 4px;
- font-size: 75%;
+ margin-left: 4px;
+ font-size: 75%;
}
.data-grid tr:not(.selected) td .size-units {
- color: #999;
+ color: #999;
}
.toolbar {
- border-bottom: 1px solid #ccc;
-}
\ No newline at end of file
+ border-bottom: 1px solid #ccc;
+}
diff --git a/front_end/profiler/profileLauncherView.css b/front_end/profiler/profileLauncherView.css
index 6327518..d3d8dfe 100644
--- a/front_end/profiler/profileLauncherView.css
+++ b/front_end/profiler/profileLauncherView.css
@@ -5,155 +5,162 @@
*/
.profile-launcher-view {
- overflow: auto;
+ overflow: auto;
}
.profile-launcher-view-content {
- margin: 10px 16px;
- flex: auto 1 0;
+ margin: 10px 16px;
+ flex: auto 1 0;
}
.profile-launcher-view-content h1 {
- font-size: 15px;
- font-weight: normal;
- margin: 6px 0 10px 0;
+ font-size: 15px;
+ font-weight: normal;
+ margin: 6px 0 10px 0;
}
.profile-launcher-view-content [is=dt-radio] {
- font-size: 13px;
+ font-size: 13px;
}
.profile-launcher-view-content p {
- color: hsl(0, 0%, 45%);
- margin-top: 1px;
- margin-left: 22px;
+ color: hsl(0, 0%, 45%);
+ margin-top: 1px;
+ margin-left: 22px;
}
.profile-launcher-view-content p [is=dt-checkbox] {
- display: flex;
+ display: flex;
}
.profile-launcher-view-content button.running {
- color: hsl(0, 100%, 58%);
+ color: hsl(0, 100%, 58%);
}
.profile-launcher-view-content button.running:hover {
- color: hsl(0, 100%, 42%);
+ color: hsl(0, 100%, 42%);
}
body.inactive .profile-launcher-view-content button.running:not(.toolbar-item) {
- color: rgb(220, 130, 130);
+ color: rgb(220, 130, 130);
}
.profile-launcher-view-content > div {
- flex: auto 0 0;
+ flex: auto 0 0;
}
.profile-launcher-view-content > .profile-isolate-selector-block {
- flex: auto 1 0;
+ flex: auto 1 0;
}
.profile-isolate-selector-block button {
- min-width: 110px;
+ min-width: 110px;
}
.profile-launcher-target-list {
- margin-bottom: 6px;
- border: 1px solid #ddd;
- flex: 150px 1 0;
+ margin-bottom: 6px;
+ border: 1px solid #ddd;
+ flex: 150px 1 0;
}
.profile-memory-usage-item {
- padding: 4px;
- line-height: 16px;
- border-left: 3px solid transparent;
- overflow-x: hidden;
+ padding: 4px;
+ line-height: 16px;
+ border-left: 3px solid transparent;
+ overflow-x: hidden;
}
.profile-launcher-target-list .profile-memory-usage-item:hover:not(.selected) {
- background-color: var(--item-hover-color);
+ background-color: var(--item-hover-color);
}
.javascript-vm-instances-list:focus .profile-memory-usage-item.selected {
- border-color: var(--selection-bg-color);
- background-color: var(--item-selection-bg-color);
+ border-color: var(--selection-bg-color);
+ background-color: var(--item-selection-bg-color);
}
.profile-memory-usage-item.selected {
- background-color: var(--item-selection-inactive-bg-color);
+ background-color: var(--item-selection-inactive-bg-color);
}
.profile-memory-usage-item > div {
- flex-shrink: 0;
- margin-right: 12px;
+ flex-shrink: 0;
+ margin-right: 12px;
}
.profile-memory-usage-item-size {
- width: 60px;
- text-align: right;
+ width: 60px;
+ text-align: right;
}
.profile-memory-usage-item-trend {
- min-width: 5em;
- color: green;
+ min-width: 5em;
+ color: green;
}
.profile-memory-usage-item-trend.increasing {
- color: red;
+ color: red;
}
.profile-isolate-selector-block > .profile-memory-usage-item {
- margin-left: 1px;
- margin-bottom: 4px;
- font-weight: bolder;
+ margin-left: 1px;
+ margin-bottom: 4px;
+ font-weight: bolder;
}
.profile-launcher-buttons {
- flex-wrap: wrap;
+ flex-wrap: wrap;
}
.profile-launcher-buttons button {
- min-width: 120px;
- height: 28px;
- margin: 4px 16px 4px 0;
+ min-width: 120px;
+ height: 28px;
+ margin: 4px 16px 4px 0;
}
@media (forced-colors: active) {
- .profile-memory-usage-item {
- forced-color-adjust: none;
- border-left-color: transparent;
- }
- .profile-memory-usage-item-trend,
- .profile-memory-usage-item-trend.increasing,
- .profile-launcher-view-content button.running,
- body.inactive .profile-launcher-view-content button.running:not(.toolbar-item) {
- color: ButtonText;
- }
- .profile-launcher-view-content button:not(:disabled):hover.running {
- color: HighlightText;
- }
- .javascript-vm-instances-list .profile-memory-usage-item:hover:not(.selected) {
- background-color: Highlight;
- color: HighlightText;
- }
- .javascript-vm-instances-list .profile-memory-usage-item:hover:not(.selected) .profile-memory-usage-item-trend,
- .javascript-vm-instances-list .profile-memory-usage-item:hover:not(.selected) .profile-memory-usage-item-trend.increasing {
- background-color: Highlight;
- color: HighlightText;
- }
- .javascript-vm-instances-list .profile-memory-usage-item.selected {
- background-color: ButtonText;
- border-color: Highlight;
- color: ButtonFace;
- }
- .javascript-vm-instances-list .profile-memory-usage-item.selected .profile-memory-usage-item-trend,
- .javascript-vm-instances-list .profile-memory-usage-item.selected .profile-memory-usage-item-trend.increasing {
- color: ButtonFace;
- }
- .javascript-vm-instances-list:focus .profile-memory-usage-item.selected,
- .javascript-vm-instances-list[data-keyboard-focus="true"]:focus .profile-memory-usage-item.selected {
- background-color: Highlight;
- border-color: ButtonText;
- color: HighlightText;
- }
+ .profile-memory-usage-item {
+ forced-color-adjust: none;
+ border-left-color: transparent;
+ }
+
+ .profile-memory-usage-item-trend,
+ .profile-memory-usage-item-trend.increasing,
+ .profile-launcher-view-content button.running,
+ body.inactive .profile-launcher-view-content button.running:not(.toolbar-item) {
+ color: ButtonText;
+ }
+
+ .profile-launcher-view-content button:not(:disabled):hover.running {
+ color: HighlightText;
+ }
+
+ .javascript-vm-instances-list .profile-memory-usage-item:hover:not(.selected) {
+ background-color: Highlight;
+ color: HighlightText;
+ }
+
+ .javascript-vm-instances-list .profile-memory-usage-item:hover:not(.selected) .profile-memory-usage-item-trend,
+ .javascript-vm-instances-list .profile-memory-usage-item:hover:not(.selected) .profile-memory-usage-item-trend.increasing {
+ background-color: Highlight;
+ color: HighlightText;
+ }
+
+ .javascript-vm-instances-list .profile-memory-usage-item.selected {
+ background-color: ButtonText;
+ border-color: Highlight;
+ color: ButtonFace;
+ }
+
+ .javascript-vm-instances-list .profile-memory-usage-item.selected .profile-memory-usage-item-trend,
+ .javascript-vm-instances-list .profile-memory-usage-item.selected .profile-memory-usage-item-trend.increasing {
+ color: ButtonFace;
+ }
+
+ .javascript-vm-instances-list:focus .profile-memory-usage-item.selected,
+ .javascript-vm-instances-list[data-keyboard-focus="true"]:focus .profile-memory-usage-item.selected {
+ background-color: Highlight;
+ border-color: ButtonText;
+ color: HighlightText;
+ }
}
diff --git a/front_end/profiler/profilesPanel.css b/front_end/profiler/profilesPanel.css
index 132286c..5e8ab71 100644
--- a/front_end/profiler/profilesPanel.css
+++ b/front_end/profiler/profilesPanel.css
@@ -30,139 +30,140 @@
/* Profiler Style */
#profile-views {
- flex: auto;
- position: relative;
+ flex: auto;
+ position: relative;
}
.profile-view .data-grid table.data {
- background: white;
+ background: white;
}
.profile-view .data-grid tr:not(.selected) .highlight {
- background-color: rgb(255, 230, 179);
+ background-color: rgb(255, 230, 179);
}
.profile-view .data-grid tr:hover td:not(.bottom-filler-td) {
- background-color: rgba(0, 0, 0, 0.1);
+ background-color: rgba(0, 0, 0, 0.1);
}
.profile-view .data-grid td.numeric-column {
- text-align: right;
+ text-align: right;
}
.profile-view .data-grid div.profile-multiple-values {
- float: right;
+ float: right;
}
.profile-view .data-grid span.percent-column {
- color: #999;
- width: 50px;
- display: inline-block;
+ color: #999;
+ width: 50px;
+ display: inline-block;
}
.profile-view .data-grid tr.selected span {
- color: inherit;
+ color: inherit;
}
.profiles-toolbar {
- background-color: var(--toolbar-bg-color);
- border-bottom: 1px solid #ccc;
- flex-shrink: 0;
+ background-color: var(--toolbar-bg-color);
+ border-bottom: 1px solid #ccc;
+ flex-shrink: 0;
}
.profiles-tree-sidebar {
- flex: auto;
- overflow: hidden;
+ flex: auto;
+ overflow: hidden;
}
.profiles-sidebar-tree-box {
- overflow-y: auto;
+ overflow-y: auto;
}
.profile-view {
- display: flex;
- overflow: hidden;
+ display: flex;
+ overflow: hidden;
}
.profile-view .data-grid {
- border: none;
- flex: auto;
+ border: none;
+ flex: auto;
}
.profile-view .data-grid th.self-column,
.profile-view .data-grid th.total-column {
- text-align: center;
+ text-align: center;
}
.profile-node-file {
- float: right;
- color: gray;
+ float: right;
+ color: gray;
}
.profile-warn-marker {
- vertical-align: -1px;
- margin-right: 2px;
+ vertical-align: -1px;
+ margin-right: 2px;
}
.data-grid tr.selected .profile-node-file {
- color: rgb(33%, 33%, 33%);
+ color: rgb(33%, 33%, 33%);
}
.data-grid:focus tr.selected .profile-node-file {
- color: white;
+ color: white;
}
.highlighted-row {
- -webkit-animation: row_highlight 2s 0s;
+ -webkit-animation: row_highlight 2s 0s;
}
@-webkit-keyframes row_highlight {
- from {background-color: rgba(255, 255, 120, 1); }
- to { background-color: rgba(255, 255, 120, 0); }
+ from { background-color: rgba(255, 255, 120, 1); }
+ to { background-color: rgba(255, 255, 120, 0); }
}
.cpu-profile-flame-chart-overview-container {
- overflow: hidden;
- position: absolute;
- top: 0;
- width: 100%;
- height: 80px;
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 80px;
}
#cpu-profile-flame-chart-overview-container {
- border-bottom: 1px solid rgba(0, 0, 0, 0.3);
- overflow: hidden;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+ overflow: hidden;
}
.cpu-profile-flame-chart-overview-canvas {
- position: absolute;
- top: 20px;
- left: 0;
- right: 0;
- bottom: 0;
+ position: absolute;
+ top: 20px;
+ left: 0;
+ right: 0;
+ bottom: 0;
}
#cpu-profile-flame-chart-overview-grid .resources-dividers-label-bar {
- pointer-events: auto;
+ pointer-events: auto;
}
.cpu-profile-flame-chart-overview-pane {
- flex: 0 0 80px !important;
+ flex: 0 0 80px !important;
}
.profile-text-view {
- padding: 10px;
- overflow: auto;
- margin: 0;
- user-select: text;
- cursor: text;
+ padding: 10px;
+ overflow: auto;
+ margin: 0;
+ user-select: text;
+ cursor: text;
}
@media (forced-colors: active) {
- .profile-view .data-grid tr:hover td:not(.bottom-filler-td) {
- background: Highlight;
- }
- .profile-view .data-grid table.data {
- background: transparent;
- }
+ .profile-view .data-grid tr:hover td:not(.bottom-filler-td) {
+ background: Highlight;
+ }
+
+ .profile-view .data-grid table.data {
+ background: transparent;
+ }
}
diff --git a/front_end/profiler/profilesSidebarTree.css b/front_end/profiler/profilesSidebarTree.css
index 34f0f51..e3b354c 100644
--- a/front_end/profiler/profilesSidebarTree.css
+++ b/front_end/profiler/profilesSidebarTree.css
@@ -7,197 +7,198 @@
/* Tree outline overrides */
:host {
- padding: 0;
+ padding: 0;
}
ol.tree-outline {
- overflow: auto;
- flex: auto;
- padding: 0;
- margin: 0;
+ overflow: auto;
+ flex: auto;
+ padding: 0;
+ margin: 0;
}
.tree-outline li {
- height: 36px;
- padding-right: 5px;
- margin-top: 1px;
- line-height: 34px;
- border-top: 1px solid transparent;
+ height: 36px;
+ padding-right: 5px;
+ margin-top: 1px;
+ line-height: 34px;
+ border-top: 1px solid transparent;
}
.tree-outline li:not(.parent)::before {
- display: none;
+ display: none;
}
:host-context(.some-expandable) .tree-outline li:not(.parent) {
- margin-left: 10px;
+ margin-left: 10px;
}
.tree-outline li.profiles-tree-section {
- height: 18px;
- padding: 0 10px;
- white-space: nowrap;
- margin-top: 1px;
- color: rgb(92, 110, 129);
- text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
- line-height: 18px;
+ height: 18px;
+ padding: 0 10px;
+ white-space: nowrap;
+ margin-top: 1px;
+ color: rgb(92, 110, 129);
+ text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
+ line-height: 18px;
}
.tree-outline li.profiles-tree-section::before {
- display: none;
+ display: none;
}
.tree-outline ol {
- overflow: hidden;
+ overflow: hidden;
}
/* Generic items styling */
.title-container > .save-link {
- text-decoration: underline;
- margin-left: auto;
- display: none;
+ text-decoration: underline;
+ margin-left: auto;
+ display: none;
}
li.selected .title-container > .save-link {
- display: block;
- cursor: pointer;
+ display: block;
+ cursor: pointer;
}
.tree-outline > .icon {
- margin-left: 16px;
+ margin-left: 16px;
}
li .icon {
- width: 32px;
- height: 32px;
- margin-top: 1px;
- margin-right: 3px;
- flex: none;
+ width: 32px;
+ height: 32px;
+ margin-top: 1px;
+ margin-right: 3px;
+ flex: none;
}
li.wait .icon {
- content: none;
+ content: none;
}
li.wait .icon::before {
- display: block;
- width: 24px;
- height: 24px;
- margin: 4px;
- border: 3px solid grey;
- border-radius: 12px;
- clip: rect(0, 15px, 15px, 0);
- content: "";
- position: absolute;
- -webkit-animation: spinner-animation 1s linear infinite;
- box-sizing: border-box;
+ display: block;
+ width: 24px;
+ height: 24px;
+ margin: 4px;
+ border: 3px solid grey;
+ border-radius: 12px;
+ clip: rect(0, 15px, 15px, 0);
+ content: "";
+ position: absolute;
+ -webkit-animation: spinner-animation 1s linear infinite;
+ box-sizing: border-box;
}
li.wait.small .icon::before {
- width: 14px;
- height: 14px;
- margin: 1px;
- clip: rect(0, 9px, 9px, 0);
- border-width: 2px;
+ width: 14px;
+ height: 14px;
+ margin: 1px;
+ clip: rect(0, 9px, 9px, 0);
+ border-width: 2px;
}
li.wait.selected .icon::before {
- border-color: white;
+ border-color: white;
}
@-webkit-keyframes spinner-animation {
- from { transform: rotate(0); }
- to { transform: rotate(360deg); }
+ from { transform: rotate(0); }
+ to { transform: rotate(360deg); }
}
li.small {
- height: 20px;
+ height: 20px;
}
li.small .icon {
- width: 16px;
- height: 16px;
+ width: 16px;
+ height: 16px;
}
li .titles {
- display: flex;
- flex-direction: column;
- top: 5px;
- line-height: 12px;
- padding-bottom: 1px;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- flex: auto;
+ display: flex;
+ flex-direction: column;
+ top: 5px;
+ line-height: 12px;
+ padding-bottom: 1px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ flex: auto;
}
li .titles > .title-container {
- display: flex;
+ display: flex;
}
li.small .titles {
- top: 2px;
- line-height: normal;
+ top: 2px;
+ line-height: normal;
}
li:not(.small) .title::after {
- content: "\A";
- white-space: pre;
+ content: "\A";
+ white-space: pre;
}
li .subtitle {
- font-size: 80%;
+ font-size: 80%;
}
li.small .subtitle {
- display: none;
+ display: none;
}
/* Heap profiles */
.heap-snapshot-sidebar-tree-item .icon {
- content: url(Images/profileIcon.png);
+ content: url(Images/profileIcon.png);
}
.heap-snapshot-sidebar-tree-item.small .icon {
- content: url(Images/profileSmallIcon.png);
+ content: url(Images/profileSmallIcon.png);
}
/* Launcher */
.profile-launcher-view-tree-item {
- margin-left: 0 !important;
+ margin-left: 0 !important;
}
.profile-launcher-view-tree-item > .icon {
- width: 8px !important;
- visibility: hidden;
+ width: 8px !important;
+ visibility: hidden;
}
/* CPU profiles */
.profile-sidebar-tree-item .icon {
- content: url(Images/profileIcon.png);
+ content: url(Images/profileIcon.png);
}
.profile-sidebar-tree-item.small .icon {
- content: url(Images/profileSmallIcon.png);
+ content: url(Images/profileSmallIcon.png);
}
.profile-group-sidebar-tree-item .icon {
- content: url(Images/profileGroupIcon.png);
+ content: url(Images/profileGroupIcon.png);
}
@media (forced-colors: active) {
- .tree-outline li,
- .tree-outline li.profiles-tree-section,
- .tree-outline li:hover .tree-element-title {
- forced-color-adjust: none;
- color: ButtonText;
- text-shadow: unset;
- }
- .tree-outline:not(.hide-selection-when-blurred) li.selected {
- color: HighlightText;
- }
+ .tree-outline li,
+ .tree-outline li.profiles-tree-section,
+ .tree-outline li:hover .tree-element-title {
+ forced-color-adjust: none;
+ color: ButtonText;
+ text-shadow: unset;
+ }
+
+ .tree-outline:not(.hide-selection-when-blurred) li.selected {
+ color: HighlightText;
+ }
}
diff --git a/front_end/protocol_monitor/protocolMonitor.css b/front_end/protocol_monitor/protocolMonitor.css
index 1c511de..cc416b6 100644
--- a/front_end/protocol_monitor/protocolMonitor.css
+++ b/front_end/protocol_monitor/protocolMonitor.css
@@ -1,37 +1,38 @@
.data-grid {
- border: none;
+ border: none;
}
+
.data-grid {
- flex: auto;
- border: none;
+ flex: auto;
+ border: none;
}
.data-grid .data {
- background-image: none;
+ background-image: none;
}
.data-grid td {
- /* border-bottom: 1px solid #ccc; */
- border-left-color: #ccc;
+ /* border-bottom: 1px solid #ccc; */
+ border-left-color: #ccc;
}
.data-grid tr.selected {
- background-color: #def;
+ background-color: #def;
}
.data-grid th {
- border-left-color: #ccc;
+ border-left-color: #ccc;
}
.protocol-message-sent {
- background-color: hsl(281, 64%, 95%);
+ background-color: hsl(281, 64%, 95%);
}
.protocol-monitor-toolbar {
- border-bottom:var(--divider-border);
+ border-bottom: var(--divider-border);
}
.error {
- background-color: hsl(0, 100%, 97%);
- color: red;
-}
\ No newline at end of file
+ background-color: hsl(0, 100%, 97%);
+ color: red;
+}
diff --git a/front_end/quick_open/filteredListWidget.css b/front_end/quick_open/filteredListWidget.css
index 0462bf4..269b70e 100644
--- a/front_end/quick_open/filteredListWidget.css
+++ b/front_end/quick_open/filteredListWidget.css
@@ -5,144 +5,148 @@
*/
.filtered-list-widget {
- display: flex;
- flex-direction: column;
- flex: auto;
- border: 1px solid transparent;
+ display: flex;
+ flex-direction: column;
+ flex: auto;
+ border: 1px solid transparent;
}
.filtered-list-widget-prompt-element {
- flex: 0 0 34px;
- border: 0;
- margin: 0;
- padding: 0 6px;
- z-index: 1;
- font-size: inherit;
+ flex: 0 0 34px;
+ border: 0;
+ margin: 0;
+ padding: 0 6px;
+ z-index: 1;
+ font-size: inherit;
}
.filtered-list-widget-input {
- white-space: pre;
- height: 18px;
- margin-top: 12px;
- overflow: hidden;
- flex: auto;
- border: 1px solid transparent;
+ white-space: pre;
+ height: 18px;
+ margin-top: 12px;
+ overflow: hidden;
+ flex: auto;
+ border: 1px solid transparent;
}
.filtered-list-widget-progress {
- flex: none;
- background: rgba(0, 0, 0, 0.2);
- height: 2px;
+ flex: none;
+ background: rgba(0, 0, 0, 0.2);
+ height: 2px;
}
.filtered-list-widget-progress-bar {
- background-color: #2196F3;
- height: 2px;
- width: 100%;
- transform: scaleX(0);
- transform-origin: top left;
- opacity: 1;
- transition: none;
+ background-color: #2196f3;
+ height: 2px;
+ width: 100%;
+ transform: scaleX(0);
+ transform-origin: top left;
+ opacity: 1;
+ transition: none;
}
.filtered-widget-progress-fade {
- opacity: 0;
- transition: opacity 500ms;
+ opacity: 0;
+ transition: opacity 500ms;
}
.filtered-list-widget > div.container {
- flex: auto;
- overflow-y: auto;
- background: #fbfbfb;
+ flex: auto;
+ overflow-y: auto;
+ background: #fbfbfb;
}
.filtered-list-widget-item {
- padding: 4px 6px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- color: rgb(95, 95, 95);
+ padding: 4px 6px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ color: rgb(95, 95, 95);
}
.filtered-list-widget-item.selected {
- background-color: #f0f0f0;
+ background-color: #f0f0f0;
}
:host-context(.-theme-with-dark-background) .filtered-list-widget-item.selected {
- background-color: #333333;
+ background-color: #333;
}
.filtered-list-widget-item span.highlight {
- color: #222;
- font-weight: bold;
+ color: #222;
+ font-weight: bold;
}
.filtered-list-widget-item .filtered-list-widget-title {
- flex: auto;
- overflow: hidden;
- text-overflow: ellipsis;
+ flex: auto;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.filtered-list-widget-item .filtered-list-widget-subtitle {
- flex: none;
- overflow: hidden;
- text-overflow: ellipsis;
- color: rgb(155, 155, 155);
- display: flex;
+ flex: none;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: rgb(155, 155, 155);
+ display: flex;
}
.filtered-list-widget-item .filtered-list-widget-subtitle .first-part {
- flex-shrink: 1000;
- overflow: hidden;
- text-overflow: ellipsis;
+ flex-shrink: 1000;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.filtered-list-widget-item.one-row {
- display: flex;
+ display: flex;
}
.filtered-list-widget-item.two-rows {
- border-bottom: 1px solid rgb(235, 235, 235);
+ border-bottom: 1px solid rgb(235, 235, 235);
}
.tag {
- color: white;
- padding: 1px 3px;
- margin-right: 5px;
- border-radius: 2px;
- line-height: 18px;
+ color: white;
+ padding: 1px 3px;
+ margin-right: 5px;
+ border-radius: 2px;
+ line-height: 18px;
}
.filtered-list-widget-item .tag .highlight {
- color: white;
+ color: white;
}
.not-found-text {
- height: 34px;
- line-height: 34px;
- padding-left: 4px;
- font-style: italic;
- color: #888;
- background: #fbfbfb;
+ height: 34px;
+ line-height: 34px;
+ padding-left: 4px;
+ font-style: italic;
+ color: #888;
+ background: #fbfbfb;
}
@media (forced-colors: active) {
- .filtered-list-widget {
- forced-color-adjust: none;
- border-color: ButtonText;
- }
- .filtered-list-widget-item .filtered-list-widget-title,
- .filtered-list-widget-item .filtered-list-widget-subtitle {
- color: ButtonText;
- }
- .filtered-list-widget-item.selected {
- background-color: Highlight;
- }
- .filtered-list-widget-item.selected .filtered-list-widget-title,
- .filtered-list-widget-item.selected .filtered-list-widget-subtitle {
- color: HighlightText;
- }
- .filtered-list-widget-input {
- border-color: ButtonText;
- }
+ .filtered-list-widget {
+ forced-color-adjust: none;
+ border-color: ButtonText;
+ }
+
+ .filtered-list-widget-item .filtered-list-widget-title,
+ .filtered-list-widget-item .filtered-list-widget-subtitle {
+ color: ButtonText;
+ }
+
+ .filtered-list-widget-item.selected {
+ background-color: Highlight;
+ }
+
+ .filtered-list-widget-item.selected .filtered-list-widget-title,
+ .filtered-list-widget-item.selected .filtered-list-widget-subtitle {
+ color: HighlightText;
+ }
+
+ .filtered-list-widget-input {
+ border-color: ButtonText;
+ }
}
diff --git a/front_end/resources/backgroundServiceView.css b/front_end/resources/backgroundServiceView.css
index 6a52e00..9a344f7 100644
--- a/front_end/resources/backgroundServiceView.css
+++ b/front_end/resources/backgroundServiceView.css
@@ -1,68 +1,68 @@
.background-service-toolbar {
- background-color: var(--toolbar-bg-color);
- border-bottom: var(--divider-border);
+ background-color: var(--toolbar-bg-color);
+ border-bottom: var(--divider-border);
}
.data-grid {
- flex: auto;
- border: none;
+ flex: auto;
+ border: none;
}
.background-service-preview {
- position: absolute;
- background-color: white;
- justify-content: center;
- align-items: center;
- overflow: auto;
- font-size: 13px;
- color: #777;
+ position: absolute;
+ background-color: white;
+ justify-content: center;
+ align-items: center;
+ overflow: auto;
+ font-size: 13px;
+ color: #777;
}
.background-service-preview > div {
- max-width: 450px;
- margin: 10px;
- text-align: center;
+ max-width: 450px;
+ margin: 10px;
+ text-align: center;
}
.background-service-preview > div > p {
- flex: none;
- white-space: pre-line;
+ flex: none;
+ white-space: pre-line;
}
.background-service-shortcut {
- color: hsla(0, 0%, 50%, 1);
+ color: hsla(0, 0%, 50%, 1);
}
.background-service-metadata {
- padding-left: 5px;
- padding-top: 10px;
+ padding-left: 5px;
+ padding-top: 10px;
}
.background-service-metadata-entry {
- padding-left: 10px;
- padding-bottom: 5px;
+ padding-left: 10px;
+ padding-bottom: 5px;
}
.background-service-metadata-name {
- color: rgb(33%, 33%, 33%);
- display: inline-block;
- margin-right: 0.25em;
- font-weight: bold;
+ color: rgb(33%, 33%, 33%);
+ display: inline-block;
+ margin-right: 0.25em;
+ font-weight: bold;
}
.background-service-metadata-value {
- display: inline;
- margin-right: 1em;
- white-space: pre-wrap;
- word-break: break-all;
- user-select: text;
+ display: inline;
+ margin-right: 1em;
+ white-space: pre-wrap;
+ word-break: break-all;
+ user-select: text;
}
.background-service-empty-value {
- color: #888;
- font-style: italic;
+ color: #888;
+ font-style: italic;
}
.background-service-record-inline-button {
- margin-bottom: 6px;
+ margin-bottom: 6px;
}
diff --git a/front_end/resources/clearStorageView.css b/front_end/resources/clearStorageView.css
index e1bb6a1..1a809ce 100644
--- a/front_end/resources/clearStorageView.css
+++ b/front_end/resources/clearStorageView.css
@@ -5,24 +5,24 @@
*/
.report-row {
- display: flex;
- align-items: center;
+ display: flex;
+ align-items: center;
}
.clear-storage-button .report-row {
- margin: 0 0 0 17px;
- display: flex;
+ margin: 0 0 0 17px;
+ display: flex;
}
.link {
- margin-left: 10px;
- display: none;
+ margin-left: 10px;
+ display: none;
}
.report-row:hover .link {
- display: inline;
+ display: inline;
}
.usage-breakdown-row {
- min-width: fit-content;
+ min-width: fit-content;
}
diff --git a/front_end/resources/cookieItemsView.css b/front_end/resources/cookieItemsView.css
index b2b9930..75a2949 100644
--- a/front_end/resources/cookieItemsView.css
+++ b/front_end/resources/cookieItemsView.css
@@ -5,8 +5,8 @@
*/
.cookie-value {
- padding: 2px 6px;
- overflow: auto;
- user-select: text;
- min-height: 100%;
-}
\ No newline at end of file
+ padding: 2px 6px;
+ overflow: auto;
+ user-select: text;
+ min-height: 100%;
+}
diff --git a/front_end/resources/indexedDBViews.css b/front_end/resources/indexedDBViews.css
index c1749e9..61ac4a7 100644
--- a/front_end/resources/indexedDBViews.css
+++ b/front_end/resources/indexedDBViews.css
@@ -29,67 +29,67 @@
*/
.indexed-db-data-view .data-view-toolbar {
- position: relative;
- background-color: #eee;
- border-bottom: 1px solid #ccc;
+ position: relative;
+ background-color: #eee;
+ border-bottom: 1px solid #ccc;
}
.indexed-db-data-view .data-grid {
- flex: auto;
+ flex: auto;
}
.indexed-db-data-view .data-grid .data-container tr:nth-last-child(1) {
- background-color: white;
+ background-color: white;
}
.indexed-db-data-view .data-grid .data-container tr:nth-last-child(1) td {
- border: 0;
+ border: 0;
}
.indexed-db-data-view .data-grid .data-container tr:nth-last-child(2) td {
- border-bottom: 1px solid #aaa;
+ border-bottom: 1px solid #aaa;
}
.indexed-db-data-view .data-grid:focus .data-container tr.selected {
- background-color: #cdddf5;
- color: inherit;
+ background-color: #cdddf5;
+ color: inherit;
}
.indexed-db-data-view .section,
.indexed-db-data-view .section > .header,
.indexed-db-data-view .section > .header .title {
- margin: 0;
- min-height: inherit;
- line-height: inherit;
+ margin: 0;
+ min-height: inherit;
+ line-height: inherit;
}
.indexed-db-data-view .data-grid .data-container td .section .header .title {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
.indexed-db-key-path {
- color: rgb(196, 26, 22);
- white-space: pre-wrap;
- unicode-bidi: -webkit-isolate;
+ color: rgb(196, 26, 22);
+ white-space: pre-wrap;
+ unicode-bidi: -webkit-isolate;
}
.source-code.indexed-db-key-path {
- font-size: unset !important;
+ font-size: unset !important;
}
.resources-toolbar {
- padding-right: 10px;
+ padding-right: 10px;
}
.object-store-summary-bar {
- flex: 0 0 27px;
- line-height: 27px;
- padding-left: 5px;
- background-color: #eee;
- border-top: 1px solid #ccc;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
+ flex: 0 0 27px;
+ line-height: 27px;
+ padding-left: 5px;
+ background-color: #eee;
+ border-top: 1px solid #ccc;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
diff --git a/front_end/resources/resourcesPanel.css b/front_end/resources/resourcesPanel.css
index c7a8e6b..9efaff6 100644
--- a/front_end/resources/resourcesPanel.css
+++ b/front_end/resources/resourcesPanel.css
@@ -28,116 +28,116 @@
*/
.resources-toolbar {
- border-top: 1px solid #ccc;
- background-color: var(--toolbar-bg-color);
+ border-top: 1px solid #ccc;
+ background-color: var(--toolbar-bg-color);
}
.top-resources-toolbar {
- border-bottom: 1px solid #ccc;
- background-color: var(--toolbar-bg-color);
+ border-bottom: 1px solid #ccc;
+ background-color: var(--toolbar-bg-color);
}
.resources.panel .status {
- float: right;
- height: 16px;
- margin-top: 1px;
- margin-left: 4px;
- line-height: 1em;
+ float: right;
+ height: 16px;
+ margin-top: 1px;
+ margin-left: 4px;
+ line-height: 1em;
}
.storage-view {
- display: flex;
- overflow: hidden;
+ display: flex;
+ overflow: hidden;
}
.storage-view {
- overflow: hidden;
+ overflow: hidden;
}
.storage-view .data-grid:not(.inline) {
- border: none;
- flex: auto;
+ border: none;
+ flex: auto;
}
.storage-view .storage-table-error {
- color: rgb(66%, 33%, 33%);
- font-size: 24px;
- font-weight: bold;
- padding: 10px;
- display: flex;
- align-items: center;
- justify-content: center;
+ color: rgb(66%, 33%, 33%);
+ font-size: 24px;
+ font-weight: bold;
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.storage-view.query {
- padding: 2px 0;
- overflow-y: overlay;
- overflow-x: hidden;
+ padding: 2px 0;
+ overflow-y: overlay;
+ overflow-x: hidden;
}
.storage-view .filter-bar {
- border-top: none;
- border-bottom: var(--divider-border);
+ border-top: none;
+ border-bottom: var(--divider-border);
}
.database-query-group-messages {
- overflow-y: auto;
+ overflow-y: auto;
}
.database-query-prompt-container {
- position: relative;
- padding: 1px 22px 1px 24px;
- min-height: 16px;
+ position: relative;
+ padding: 1px 22px 1px 24px;
+ min-height: 16px;
}
.database-query-prompt {
- white-space: pre-wrap;
+ white-space: pre-wrap;
}
.prompt-icon {
- position: absolute;
- display: block;
- left: 7px;
- top: 9px;
- margin-top: -7px;
- user-select: none;
+ position: absolute;
+ display: block;
+ left: 7px;
+ top: 9px;
+ margin-top: -7px;
+ user-select: none;
}
.database-query-prompt-container .prompt-icon {
- top: 10px;
+ top: 10px;
}
.database-user-query {
- position: relative;
- border-bottom: 1px solid rgb(245, 245, 245);
- padding: 1px 22px 1px 24px;
- min-height: 16px;
- flex-shrink: 0;
+ position: relative;
+ border-bottom: 1px solid rgb(245, 245, 245);
+ padding: 1px 22px 1px 24px;
+ min-height: 16px;
+ flex-shrink: 0;
}
.database-user-query[data-keyboard-focus="true"]:focus {
- background-color: hsl(214, 48%, 95%);
+ background-color: hsl(214, 48%, 95%);
}
.database-query-text {
- color: rgb(0, 128, 255);
- user-select: text;
+ color: rgb(0, 128, 255);
+ user-select: text;
}
.database-query-result {
- position: relative;
- padding: 1px 22px 1px 22px;
- min-height: 16px;
- margin-left: -22px;
- padding-right: 0;
+ position: relative;
+ padding: 1px 22px 1px 22px;
+ min-height: 16px;
+ margin-left: -22px;
+ padding-right: 0;
}
.database-query-result.error {
- color: red;
- user-select: text;
+ color: red;
+ user-select: text;
}
.resources-sidebar {
- padding: 0;
- overflow-x: auto;
+ padding: 0;
+ overflow-x: auto;
}
diff --git a/front_end/resources/resourcesSidebar.css b/front_end/resources/resourcesSidebar.css
index d1d413a..ef7aa13 100644
--- a/front_end/resources/resourcesSidebar.css
+++ b/front_end/resources/resourcesSidebar.css
@@ -5,59 +5,59 @@
*/
.tree-outline {
- padding-left: 0;
- color: rgb(90, 90, 90);
+ padding-left: 0;
+ color: rgb(90, 90, 90);
}
.tree-outline > ol {
- padding-bottom: 10px;
+ padding-bottom: 10px;
}
.tree-outline li {
- min-height: 20px;
+ min-height: 20px;
}
li.storage-group-list-item {
- padding: 10px 8px 6px 8px;
+ padding: 10px 8px 6px 8px;
}
li.storage-group-list-item:not(:first-child) {
- border-top: 1px solid rgb(230, 230, 230);
+ border-top: 1px solid rgb(230, 230, 230);
}
li.storage-group-list-item::before {
- display: none;
+ display: none;
}
.navigator-tree-item {
- margin: -3px -7px -3px -7px;
+ margin: -3px -7px -3px -7px;
}
.navigator-file-tree-item {
- background: linear-gradient(45deg, hsl(0, 0%, 50%), hsl(0, 0%, 70%));
+ background: linear-gradient(45deg, hsl(0, 0%, 50%), hsl(0, 0%, 70%));
}
.navigator-folder-tree-item {
- background: linear-gradient(45deg, hsl(210, 82%, 65%), hsl(210, 82%, 80%));
+ background: linear-gradient(45deg, hsl(210, 82%, 65%), hsl(210, 82%, 80%));
}
.navigator-frame-tree-item {
- background-color: #5a5a5a;
+ background-color: #5a5a5a;
}
.navigator-script-tree-item {
- background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
+ background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
}
.navigator-stylesheet-tree-item {
- background: linear-gradient(45deg, hsl(256, 50%, 50%), hsl(256, 50%, 70%));
+ background: linear-gradient(45deg, hsl(256, 50%, 50%), hsl(256, 50%, 70%));
}
.navigator-image-tree-item,
.navigator-font-tree-item {
- background: linear-gradient(45deg, hsl(109, 33%, 50%), hsl(109, 33%, 70%));
+ background: linear-gradient(45deg, hsl(109, 33%, 50%), hsl(109, 33%, 70%));
}
.resource-tree-item {
- background: rgba(90, 90, 90, .7);
+ background: rgba(90, 90, 90, 0.7);
}
diff --git a/front_end/resources/serviceWorkerCacheViews.css b/front_end/resources/serviceWorkerCacheViews.css
index 45325a1..a774d0c 100644
--- a/front_end/resources/serviceWorkerCacheViews.css
+++ b/front_end/resources/serviceWorkerCacheViews.css
@@ -5,61 +5,61 @@
*/
.service-worker-cache-data-view .data-view-toolbar {
- position: relative;
- background-color: #eee;
- border-bottom: 1px solid #ccc;
- padding-right: 10px;
+ position: relative;
+ background-color: #eee;
+ border-bottom: 1px solid #ccc;
+ padding-right: 10px;
}
.service-worker-cache-data-view .data-grid {
- flex: auto;
+ flex: auto;
}
.service-worker-cache-data-view .data-grid .data-container tr:nth-last-child(1) td {
- border: 0;
+ border: 0;
}
.service-worker-cache-data-view .data-grid .data-container tr:nth-last-child(2) td {
- border-bottom: 1px solid #aaa;
+ border-bottom: 1px solid #aaa;
}
.service-worker-cache-data-view .data-grid .data-container tr.selected {
- background-color: rgb(212, 212, 212);
- color: inherit;
+ background-color: rgb(212, 212, 212);
+ color: inherit;
}
.service-worker-cache-data-view .data-grid:focus .data-container tr.selected {
- background-color: var(--selection-bg-color);
- color: white;
+ background-color: var(--selection-bg-color);
+ color: white;
}
.service-worker-cache-data-view .section,
.service-worker-cache-data-view .section > .header,
.service-worker-cache-data-view .section > .header .title {
- margin: 0;
- min-height: inherit;
- line-height: inherit;
+ margin: 0;
+ min-height: inherit;
+ line-height: inherit;
}
.service-worker-cache-data-view .data-grid .data-container td .section .header .title {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
.cache-preview-panel-resizer {
- background-color: #eee;
- height: 4px;
- border-bottom: 1px solid rgb(64%, 64%, 64%);
+ background-color: #eee;
+ height: 4px;
+ border-bottom: 1px solid rgb(64%, 64%, 64%);
}
.cache-storage-summary-bar {
- flex: 0 0 27px;
- line-height: 27px;
- padding-left: 5px;
- background-color: #eee;
- border-top: 1px solid #ccc;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
+ flex: 0 0 27px;
+ line-height: 27px;
+ padding-left: 5px;
+ background-color: #eee;
+ border-top: 1px solid #ccc;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
diff --git a/front_end/resources/serviceWorkersView.css b/front_end/resources/serviceWorkersView.css
index 449f925..835d066 100644
--- a/front_end/resources/serviceWorkersView.css
+++ b/front_end/resources/serviceWorkersView.css
@@ -5,162 +5,163 @@
*/
.service-worker-version-stack {
- position: relative;
+ position: relative;
}
.service-worker-version-stack-bar {
- position: absolute;
- top: 10px;
- bottom: 20px;
- left: 4px;
- content: "";
- border-left: 1px solid #888;
- z-index: 0;
+ position: absolute;
+ top: 10px;
+ bottom: 20px;
+ left: 4px;
+ content: "";
+ border-left: 1px solid #888;
+ z-index: 0;
}
.service-worker-version:not(:last-child) {
- margin-bottom: 7px;
+ margin-bottom: 7px;
}
.service-worker-active-circle,
.service-worker-redundant-circle,
.service-worker-waiting-circle,
.service-worker-installing-circle {
- position: relative;
- display: inline-block;
- width: 10px;
- height: 10px;
- z-index: 10;
- margin-right: 5px;
- border-radius: 50%;
- border: 1px solid #555;
+ position: relative;
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ z-index: 10;
+ margin-right: 5px;
+ border-radius: 50%;
+ border: 1px solid #555;
}
.service-worker-active-circle {
- background-color: #50B04F;
+ background-color: #50b04f;
}
-.service-worker-waiting-circle {
- background-color: #F38E24;
+.service-worker-waiting-circle {
+ background-color: #f38e24;
}
+
.service-worker-installing-circle {
- background-color: white;
+ background-color: white;
}
.service-worker-redundant-circle {
- background-color: gray;
+ background-color: gray;
}
.service-worker-subtitle {
- padding-left: 14px;
- line-height: 14px;
- color: #888;
+ padding-left: 14px;
+ line-height: 14px;
+ color: #888;
}
.link {
- margin-left: 7px;
+ margin-left: 7px;
}
.service-worker-editor-with-button {
- align-items: baseline;
- display: flex;
+ align-items: baseline;
+ display: flex;
}
.service-worker-notification-editor {
- border: solid 1px #d8d8d8;
- display: flex;
- flex: auto;
- margin-right: 4px;
- max-width: 400px;
- min-width: 80px;
+ border: solid 1px #d8d8d8;
+ display: flex;
+ flex: auto;
+ margin-right: 4px;
+ max-width: 400px;
+ min-width: 80px;
}
.report-field-value-filename,
.service-worker-client-string {
- max-width: 400px;
- overflow: hidden;
- text-overflow: ellipsis;
+ max-width: 400px;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.service-worker-client {
- display: flex;
+ display: flex;
}
.service-worker-client-focus-link {
- flex: none;
- margin-right: 2px;
- align-self: center;
+ flex: none;
+ margin-right: 2px;
+ align-self: center;
}
.service-worker-notification-editor.source-code {
- /** Simulate CodeMirror that is shown above */
- padding: 4px;
+ /** Simulate CodeMirror that is shown above */
+ padding: 4px;
}
.service-worker-list {
- background-color: #f9f9f9;
- overflow: auto;
+ background-color: #f9f9f9;
+ overflow: auto;
}
.service-workers-this-origin {
- flex-shrink: 0;
- flex-grow: 0;
+ flex-shrink: 0;
+ flex-grow: 0;
}
.service-worker-has-current .service-workers-other-origin {
- margin-top: 16px;
- border-top: 1px solid rgb(230, 230, 230)
+ margin-top: 16px;
+ border-top: 1px solid rgb(230, 230, 230);
}
.service-worker-list-empty .service-workers-other-origin {
- display: none;
+ display: none;
}
.service-workers-this-origin,
.service-worker-filter,
.service-workers-other-origin {
- min-width: 400px;
+ min-width: 400px;
}
.service-worker-filter {
- padding: 16px 20px 12px 12px;
- flex-grow: 0;
- flex-shrink: 0;
- background-color: white;
- border-bottom: solid 1px rgb(230, 230, 230);
+ padding: 16px 20px 12px 12px;
+ flex-grow: 0;
+ flex-shrink: 0;
+ background-color: white;
+ border-bottom: solid 1px rgb(230, 230, 230);
}
.service-worker-filter-label {
- cursor: pointer;
- margin-left: 4px;
+ cursor: pointer;
+ margin-left: 4px;
}
.service-worker-filter[data-keyboard-focus="true"]:focus {
- background-color: var(--toolbar-bg-color);
+ background-color: var(--toolbar-bg-color);
}
.service-worker-filter-label::before {
- user-select: none;
- -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
- -webkit-mask-size: 32px 24px;
- content: '';
- color: transparent;
- background-color: rgb(110, 110, 110);
- text-shadow: none;
- height: 12px;
- width: 10px;
- display: inline-block;
+ user-select: none;
+ -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+ -webkit-mask-size: 32px 24px;
+ content: '';
+ color: transparent;
+ background-color: rgb(110, 110, 110);
+ text-shadow: none;
+ height: 12px;
+ width: 10px;
+ display: inline-block;
}
.service-worker-filter[aria-checked="true"] .service-worker-filter-label::before {
- -webkit-mask-position: -16px 0;
+ -webkit-mask-position: -16px 0;
}
.service-worker-filter-toolbar {
- margin: 8px 10px 0 12px;
- max-width: 530px;
+ margin: 8px 10px 0 12px;
+ max-width: 530px;
}
.service-worker-filter-collapsed .service-worker-filter-toolbar {
- display: none;
+ display: none;
}
diff --git a/front_end/screencast/screencastView.css b/front_end/screencast/screencastView.css
index 7b3fa66..ea04540 100644
--- a/front_end/screencast/screencastView.css
+++ b/front_end/screencast/screencastView.css
@@ -29,128 +29,130 @@
*/
.screencast {
- overflow: hidden;
+ overflow: hidden;
}
.screencast-navigation {
- flex-direction: row;
- display: flex;
- flex: 24px 0 0;
- position: relative;
- padding-left: 1px;
- border-bottom: 1px solid rgb(64%, 64%, 64%);
- background-origin: padding-box;
- background-clip: padding-box;
+ flex-direction: row;
+ display: flex;
+ flex: 24px 0 0;
+ position: relative;
+ padding-left: 1px;
+ border-bottom: 1px solid rgb(64%, 64%, 64%);
+ background-origin: padding-box;
+ background-clip: padding-box;
}
.screencast-navigation button {
- border-radius: 2px;
- background-color: transparent;
- background-image: -webkit-image-set(
- url(Images/navigationControls.png) 1x,
- url(Images/navigationControls_2x.png) 2x);
- background-clip: content-box;
- background-origin: content-box;
- background-repeat: no-repeat;
- border: 1px solid transparent;
- height: 23px;
- padding: 2px;
- width: 23px;
+ border-radius: 2px;
+ background-color: transparent;
+ background-image:
+ -webkit-image-set(
+ url(Images/navigationControls.png) 1x,
+ url(Images/navigationControls_2x.png) 2x
+ );
+ background-clip: content-box;
+ background-origin: content-box;
+ background-repeat: no-repeat;
+ border: 1px solid transparent;
+ height: 23px;
+ padding: 2px;
+ width: 23px;
}
.screencast-navigation button:hover,
.screencast-navigation button:focus {
- border-color: var(--accent-color-hover);
+ border-color: var(--accent-color-hover);
}
.screencast-navigation button:active {
- border-color: #aaa;
+ border-color: #aaa;
}
.screencast-navigation button[disabled] {
- opacity: 0.5;
+ opacity: 0.5;
}
.screencast-navigation button.back {
- background-position-x: -1px;
+ background-position-x: -1px;
}
.screencast-navigation button.forward {
- background-position-x: -18px;
+ background-position-x: -18px;
}
.screencast-navigation button.reload {
- background-position-x: -37px;
+ background-position-x: -37px;
}
.screencast-navigation input {
- -webkit-flex: 1;
- margin: 2px;
- max-height: 19px;
+ -webkit-flex: 1;
+ margin: 2px;
+ max-height: 19px;
}
.screencast-navigation .progress {
- background-color: rgb(66, 129, 235);
- height: 3px;
- left: 0;
- position: absolute;
- top: 100%; /* Align with the bottom edge of the parent. */
- width: 0;
- z-index: 2; /* Above .screencast-glasspane. */
+ background-color: rgb(66, 129, 235);
+ height: 3px;
+ left: 0;
+ position: absolute;
+ top: 100%; /* Align with the bottom edge of the parent. */
+ width: 0;
+ z-index: 2; /* Above .screencast-glasspane. */
}
.screencast-viewport {
- display: flex;
- border: 1px solid #999;
- border-radius: 20px;
- flex: none;
- padding: 20px;
- margin: 10px;
- background-color: #eee;
+ display: flex;
+ border: 1px solid #999;
+ border-radius: 20px;
+ flex: none;
+ padding: 20px;
+ margin: 10px;
+ background-color: #eee;
}
.screencast-canvas-container {
- flex: auto;
- display: flex;
- border: 1px solid #999;
- position: relative;
- cursor: -webkit-image-set(url(Images/touchCursor.png) 1x, url(Images/touchCursor_2x.png) 2x), default;
+ flex: auto;
+ display: flex;
+ border: 1px solid #999;
+ position: relative;
+ cursor: -webkit-image-set(url(Images/touchCursor.png) 1x, url(Images/touchCursor_2x.png) 2x), default;
}
.screencast canvas {
- flex: auto;
- position: relative;
+ flex: auto;
+ position: relative;
}
.screencast-px {
- color: rgb(128, 128, 128);
+ color: rgb(128, 128, 128);
}
.screencast-element-title {
- position: absolute;
- z-index: 10;
+ position: absolute;
+ z-index: 10;
}
.screencast-tag-name {
- /* Keep this in sync with view-source.css (.webkit-html-tag) */
- color: rgb(136, 18, 128);
+ /* Keep this in sync with view-source.css (.webkit-html-tag) */
+ color: rgb(136, 18, 128);
}
.screencast-node-id {
- /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
- color: rgb(26, 26, 166);
+ /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
+ color: rgb(26, 26, 166);
}
.screencast-class-name {
- /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
- color: rgb(153, 69, 0);
+ /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
+ color: rgb(153, 69, 0);
}
.screencast-glasspane {
- background-color: rgba(255, 255, 255, 0.8);
- font-size: 30px;
- z-index: 100;
- display: flex;
- justify-content: center;
- align-items: center;
+ background-color: rgba(255, 255, 255, 0.8);
+ font-size: 30px;
+ z-index: 100;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
diff --git a/front_end/search/searchResultsPane.css b/front_end/search/searchResultsPane.css
index 34c9fbf..2699ee7 100644
--- a/front_end/search/searchResultsPane.css
+++ b/front_end/search/searchResultsPane.css
@@ -5,119 +5,119 @@
*/
:host {
- padding: 0;
- margin: 0;
- overflow-y: auto;
+ padding: 0;
+ margin: 0;
+ overflow-y: auto;
}
.tree-outline {
- padding: 0;
+ padding: 0;
}
.tree-outline ol {
- padding: 0;
+ padding: 0;
}
.tree-outline li {
- height: 16px;
+ height: 16px;
}
li.search-result {
- cursor: pointer;
- font-size: 12px;
- margin-top: 8px;
- padding: 2px 0 2px 4px;
- word-wrap: normal;
- white-space: pre;
+ cursor: pointer;
+ font-size: 12px;
+ margin-top: 8px;
+ padding: 2px 0 2px 4px;
+ word-wrap: normal;
+ white-space: pre;
}
li.search-result:hover {
- background-color: rgba(121, 121, 121, 0.1);
+ background-color: rgba(121, 121, 121, 0.1);
}
li.search-result .search-result-file-name {
- color: #222;
- flex: 1 1;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ color: #222;
+ flex: 1 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
li.search-result .search-result-matches-count {
- color: #888;
- margin: 0 8px;
+ color: #888;
+ margin: 0 8px;
}
li.search-result.expanded .search-result-matches-count {
- display: none;
+ display: none;
}
li.show-more-matches {
- color: #222;
- cursor: pointer;
- margin: 8px 0 0 -4px;
+ color: #222;
+ cursor: pointer;
+ margin: 8px 0 0 -4px;
}
li.show-more-matches:hover {
- text-decoration: underline;
+ text-decoration: underline;
}
li.search-match {
- margin: 2px 0;
- word-wrap: normal;
- white-space: pre;
+ margin: 2px 0;
+ word-wrap: normal;
+ white-space: pre;
}
li.search-match::before {
- display: none;
+ display: none;
}
li.search-match .search-match-line-number {
- color: rgb(128, 128, 128);
- text-align: right;
- vertical-align: top;
- word-break: normal;
- padding: 2px 4px 2px 6px;
- margin-right: 5px;
+ color: rgb(128, 128, 128);
+ text-align: right;
+ vertical-align: top;
+ word-break: normal;
+ padding: 2px 4px 2px 6px;
+ margin-right: 5px;
}
li.search-match:hover {
- background-color: var(--item-hover-color);
+ background-color: var(--item-hover-color);
}
li.search-match .highlighted-match {
- background-color: #F1EA00;
+ background-color: #f1ea00;
}
:host-context(.-theme-with-dark-background) li.search-match .highlighted-match {
- background-color: hsl(133, 100%, 30%) !important;
+ background-color: hsl(133, 100%, 30%) !important;
}
.tree-outline .devtools-link {
- text-decoration: none;
- display: block;
- flex: auto;
+ text-decoration: none;
+ display: block;
+ flex: auto;
}
li.search-match .search-match-content {
- color: #000;
+ color: #000;
}
ol.children.expanded {
- padding-bottom: 4px;
+ padding-bottom: 4px;
}
.search-match-link {
- overflow: hidden;
- text-overflow: ellipsis;
- margin-left: 9px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-left: 9px;
}
.search-result-qualifier {
- color: #AAA;
+ color: #aaa;
}
.search-result-dash {
- color: #AAA;
- margin: 0 4px;
+ color: #aaa;
+ margin: 0 4px;
}
diff --git a/front_end/search/searchView.css b/front_end/search/searchView.css
index b428e81..e5e24c1 100644
--- a/front_end/search/searchView.css
+++ b/front_end/search/searchView.css
@@ -5,39 +5,39 @@
*/
.search-drawer-header {
- align-items: center;
- flex-shrink: 0;
- overflow: hidden;
+ align-items: center;
+ flex-shrink: 0;
+ overflow: hidden;
}
.search-toolbar {
- background-color: var(--toolbar-bg-color);
- border-bottom: var(--divider-border);
+ background-color: var(--toolbar-bg-color);
+ border-bottom: var(--divider-border);
}
.search-toolbar-summary {
- background-color: #eee;
- border-top: 1px solid #ccc;
- padding-left: 5px;
- flex: 0 0 19px;
- display: flex;
- padding-right: 5px;
+ background-color: #eee;
+ border-top: 1px solid #ccc;
+ padding-left: 5px;
+ flex: 0 0 19px;
+ display: flex;
+ padding-right: 5px;
}
.search-toolbar-summary .search-message {
- padding-top: 2px;
- padding-left: 1ex;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
+ padding-top: 2px;
+ padding-left: 1ex;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
}
.search-view .search-results {
- overflow-y: auto;
- display: flex;
- flex: auto;
+ overflow-y: auto;
+ display: flex;
+ flex: auto;
}
.search-view .search-results > div {
- flex: auto;
+ flex: auto;
}
diff --git a/front_end/security/lockIcon.css b/front_end/security/lockIcon.css
index 08331f8..e09e59c 100644
--- a/front_end/security/lockIcon.css
+++ b/front_end/security/lockIcon.css
@@ -5,105 +5,106 @@
.lock-icon,
.security-property {
- height: 16px;
- width: 16px;
-
- -webkit-mask-image: url(Images/securityIcons.svg);
- -webkit-mask-size: 80px 32px;
-
- background-color: #888;
+ height: 16px;
+ width: 16px;
+ -webkit-mask-image: url(Images/securityIcons.svg);
+ -webkit-mask-size: 80px 32px;
+ background-color: #888;
}
.lock-icon-secure {
- -webkit-mask-position: 0px 0px;
- background-color: #0B8043;
+ -webkit-mask-position: 0 0;
+ background-color: #0b8043;
}
.lock-icon-unknown,
.lock-icon-neutral {
- -webkit-mask-position: -16px 0px;
- background-color: #000000; /* Black for clarity on lower DPI screens */
+ -webkit-mask-position: -16px 0;
+ background-color: #000; /* Black for clarity on lower DPI screens */
}
@media (-webkit-min-device-pixel-ratio: 1.1) {
- .lock-icon-unknown,
- .lock-icon-neutral {
- background-color: #5A5A5A; /* Gray for hiDPI screens */
- }
+ .lock-icon-unknown,
+ .lock-icon-neutral {
+ background-color: #5a5a5a; /* Gray for hiDPI screens */
+ }
}
.lock-icon-insecure {
- -webkit-mask-position: -32px 0px;
- background-color: #5A5A5A;
+ -webkit-mask-position: -32px 0;
+ background-color: #5a5a5a;
}
.lock-icon-insecure-broken {
- -webkit-mask-position: -32px 0px;
- background-color: #C63626;
+ -webkit-mask-position: -32px 0;
+ background-color: #c63626;
}
.security-property-secure {
- -webkit-mask-position: 0px -16px;
- background-color: #0B8043;
+ -webkit-mask-position: 0 -16px;
+ background-color: #0b8043;
}
.security-property-neutral {
- -webkit-mask-position: -16px -16px;
- background-color: #C63626;
+ -webkit-mask-position: -16px -16px;
+ background-color: #c63626;
}
.security-property-insecure {
- -webkit-mask-position: -32px -16px;
- background-color: #C63626;
+ -webkit-mask-position: -32px -16px;
+ background-color: #c63626;
}
.security-property-insecure-broken {
- -webkit-mask-position: -32px -16px;
- background-color: #C63626;
+ -webkit-mask-position: -32px -16px;
+ background-color: #c63626;
}
.security-property-info {
- -webkit-mask-position: -48px -16px;
- background-color: rgba(0, 0, 0, 0.5);
+ -webkit-mask-position: -48px -16px;
+ background-color: rgba(0, 0, 0, 0.5);
}
.security-property-unknown {
- -webkit-mask-position: -64px -16px;
- background-color: rgba(0, 0, 0, 0.5);
+ -webkit-mask-position: -64px -16px;
+ background-color: rgba(0, 0, 0, 0.5);
}
.url-scheme-secure {
- color: #0b8043;
+ color: #0b8043;
}
.url-scheme-neutral,
.url-scheme-insecure,
.url-scheme-insecure-broken {
- color: #cb3626;
+ color: #cb3626;
}
.url-scheme-separator {
- color: #8a8a8a;
+ color: #8a8a8a;
}
@media (forced-colors: active) {
- .lock-icon,
- .security-property,
- .url-scheme-neutral,
- .url-scheme-insecure,
- .url-scheme-insecure-broken {
- forced-color-adjust: none;
- }
- .lock-icon-unknown,
- .lock-icon-neutral {
- background-color: Highlight;
- }
- .tree-outline:not(.hide-selection-when-blurred) li.selected .security-property-info,
- .tree-outline:not(.hide-selection-when-blurred) li.selected .security-property-unknown {
- background-color: HighlightText;
- }
- .security-property-info,
- .security-property-unknown {
- background-color: CanvasText;
- }
+ .lock-icon,
+ .security-property,
+ .url-scheme-neutral,
+ .url-scheme-insecure,
+ .url-scheme-insecure-broken {
+ forced-color-adjust: none;
+ }
+
+ .lock-icon-unknown,
+ .lock-icon-neutral {
+ background-color: Highlight;
+ }
+
+ .tree-outline:not(.hide-selection-when-blurred) li.selected .security-property-info,
+ .tree-outline:not(.hide-selection-when-blurred) li.selected .security-property-unknown {
+ background-color: HighlightText;
+ }
+
+ .security-property-info,
+ .security-property-unknown {
+ background-color: canvastext;
+ }
}
diff --git a/front_end/security/mainView.css b/front_end/security/mainView.css
index d8a286a..3cc850e 100644
--- a/front_end/security/mainView.css
+++ b/front_end/security/mainView.css
@@ -8,100 +8,99 @@
}
.security-main-view {
- user-select: text;
- overflow-x: hidden;
- overflow-y: auto;
- background-color: var(--toolbar-bg-color);
+ user-select: text;
+ overflow-x: hidden;
+ overflow-y: auto;
+ background-color: var(--toolbar-bg-color);
}
.security-main-view > div {
- flex-shrink: 0;
+ flex-shrink: 0;
}
.security-summary-section-title {
- font-size: 15px;
- margin: 12px 16px;
+ font-size: 15px;
+ margin: 12px 16px;
}
.lock-spectrum {
- margin: 8px 16px;
- display: flex;
- align-items: flex-start;
+ margin: 8px 16px;
+ display: flex;
+ align-items: flex-start;
}
.security-summary .lock-icon {
- flex: none;
- width: 16px;
- height: 16px;
- margin: 0 0;
+ flex: none;
+ width: 16px;
+ height: 16px;
+ margin: 0 0;
}
/* Separate the middle icon from the other two. */
+
.security-summary .lock-icon-neutral {
- margin: 0 16px;
+ margin: 0 16px;
}
.security-summary:not(.security-summary-secure) .lock-icon-secure,
.security-summary:not(.security-summary-neutral) .lock-icon-neutral,
.security-summary:not(.security-summary-insecure) .lock-icon-insecure,
.security-summary:not(.security-summary-insecure-broken) .lock-icon-insecure-broken {
- background-color: rgba(90, 90, 90, 0.25);
+ background-color: rgba(90, 90, 90, 0.25);
}
.triangle-pointer-container {
- margin: 8px 24px 0;
- padding: 0 0;
+ margin: 8px 24px 0;
+ padding: 0 0;
}
.triangle-pointer-wrapper {
- /* Defaults for dynamic properties. */
- transform: translateX(0);
- transition: transform 0.3s;
+ /* Defaults for dynamic properties. */
+ transform: translateX(0);
+ transition: transform 0.3s;
}
.triangle-pointer {
- width: 12px;
- height: 12px;
- margin-bottom: -6px;
- margin-left: -6px;
- transform: rotate(-45deg);
- border-style: solid;
- border-width: 1px 1px 0 0;
-
- background: #fff;
- border-color: rgb(217, 217, 217);
+ width: 12px;
+ height: 12px;
+ margin-bottom: -6px;
+ margin-left: -6px;
+ transform: rotate(-45deg);
+ border-style: solid;
+ border-width: 1px 1px 0 0;
+ background: #fff;
+ border-color: rgb(217, 217, 217);
}
.security-summary-secure .triangle-pointer-wrapper {
- transform: translateX(0px);
+ transform: translateX(0);
}
.security-summary-neutral .triangle-pointer-wrapper {
- transform: translateX(32px);
+ transform: translateX(32px);
}
.security-summary-insecure .triangle-pointer-wrapper {
- transform: translateX(64px);
+ transform: translateX(64px);
}
.security-summary-insecure-broken .triangle-pointer-wrapper {
- transform: translateX(64px);
+ transform: translateX(64px);
}
.security-summary-text {
- padding: 16px 24px;
- border-style: solid;
- border-width: 1px 0;
- font-size: 15px;
-
- background: #fff;
- border-color: rgb(217, 217, 217);
+ padding: 16px 24px;
+ border-style: solid;
+ border-width: 1px 0;
+ font-size: 15px;
+ background: #fff;
+ border-color: rgb(217, 217, 217);
}
.security-summary-secure .triangle-pointer,
.security-summary-secure .security-summary-text,
.security-explanation-title-secure {
- color: #0b8043;
+ color: #0b8043;
}
.security-summary-insecure-broken .triangle-pointer,
@@ -109,75 +108,76 @@
.security-explanation-title-neutral,
.security-explanation-title-insecure,
.security-explanation-title-insecure-broken {
- color: #cb3626;
+ color: #cb3626;
}
.security-explanation-list {
- padding-bottom: 16px;
+ padding-bottom: 16px;
}
.security-explanation-list:empty {
- border-bottom: none;
- padding: 0px;
+ border-bottom: none;
+ padding: 0;
}
.security-explanations-main {
- margin-top: -5px;
- background-color: #fff;
- border-bottom: 1px solid rgb(230, 230, 230);
+ margin-top: -5px;
+ background-color: #fff;
+ border-bottom: 1px solid rgb(230, 230, 230);
}
.security-explanations-extra {
- background-color: transparent;
+ background-color: transparent;
}
.security-explanation {
- padding: 11px;
- display: flex;
- white-space: nowrap;
- border: none;
- color: rgb(90, 90, 90);
+ padding: 11px;
+ display: flex;
+ white-space: nowrap;
+ border: none;
+ color: rgb(90, 90, 90);
}
.security-explanation-text {
- flex: auto;
- white-space: normal;
- max-width: 400px;
+ flex: auto;
+ white-space: normal;
+ max-width: 400px;
}
.security-explanation .security-property {
- flex: none;
- width: 16px;
- height: 16px;
- margin-right: 16px;
+ flex: none;
+ width: 16px;
+ height: 16px;
+ margin-right: 16px;
}
.security-explanation-title {
- color: rgb(48, 57, 66);
- margin-top: 1px;
- margin-bottom: 8px;
+ color: rgb(48, 57, 66);
+ margin-top: 1px;
+ margin-bottom: 8px;
}
.security-mixed-content {
- margin-top: 8px;
+ margin-top: 8px;
}
.security-explanation-recommendations {
- padding-inline-start: 16px;
+ padding-inline-start: 16px;
}
.security-explanation-recommendations > li {
- margin-bottom: 4px;
+ margin-bottom: 4px;
}
@media (forced-colors: active) {
- .security-summary:not(.security-summary-secure) .lock-icon-secure,
- .security-summary:not(.security-summary-neutral) .lock-icon-neutral,
- .security-summary:not(.security-summary-insecure) .lock-icon-insecure,
- .security-summary:not(.security-summary-insecure-broken) .lock-icon-insecure-broken {
- background-color: CanvasText;
- }
- .security-summary-neutral .lock-icon-neutral {
- background-color: Highlight;
- }
+ .security-summary:not(.security-summary-secure) .lock-icon-secure,
+ .security-summary:not(.security-summary-neutral) .lock-icon-neutral,
+ .security-summary:not(.security-summary-insecure) .lock-icon-insecure,
+ .security-summary:not(.security-summary-insecure-broken) .lock-icon-insecure-broken {
+ background-color: canvastext;
+ }
+
+ .security-summary-neutral .lock-icon-neutral {
+ background-color: Highlight;
+ }
}
diff --git a/front_end/security/originView.css b/front_end/security/originView.css
index e29ddb4..6cf9498 100644
--- a/front_end/security/originView.css
+++ b/front_end/security/originView.css
@@ -4,95 +4,96 @@
*/
.title-section {
- padding: 16px 0 24px 0;
- border-bottom: 1px solid rgb(230, 230, 230);
+ padding: 16px 0 24px 0;
+ border-bottom: 1px solid rgb(230, 230, 230);
}
.title-section-header {
- padding-left: 16px;
- padding-bottom: 10px;
- font-size: 14px;
+ padding-left: 16px;
+ padding-bottom: 10px;
+ font-size: 14px;
}
.security-origin-view {
- overflow-x: hidden;
- overflow-y: scroll;
- display: block;
- user-select: text;
+ overflow-x: hidden;
+ overflow-y: scroll;
+ display: block;
+ user-select: text;
}
.security-origin-view .origin-view-section {
- border-bottom: 1px solid rgb(230, 230, 230);
- padding: 12px 6px 12px 24px;
- font-size:12px;
+ border-bottom: 1px solid rgb(230, 230, 230);
+ padding: 12px 6px 12px 24px;
+ font-size: 12px;
}
.origin-view-notes {
- margin-top: 2px;
- color: #8c8c8c;
+ margin-top: 2px;
+ color: #8c8c8c;
}
.origin-view-section-notes {
- margin-top: 6px;
- color: #8c8c8c;
+ margin-top: 6px;
+ color: #8c8c8c;
}
.security-origin-view .origin-display {
- font-size: 12px;
- padding-left: 32px;
- display: flex;
- align-items: center;
+ font-size: 12px;
+ padding-left: 32px;
+ display: flex;
+ align-items: center;
}
.title-section > .view-network-button {
- padding: 6px 0 0 16px
+ padding: 6px 0 0 16px;
}
.security-origin-view .origin-display .security-property {
- display: inline-block;
- vertical-align: middle;
- position: absolute;
- left: 13px;
+ display: inline-block;
+ vertical-align: middle;
+ position: absolute;
+ left: 13px;
}
.security-origin-view .origin-view-section-title {
- margin-top: 4px;
- margin-bottom: 4px;
- font-weight: bold;
+ margin-top: 4px;
+ margin-bottom: 4px;
+ font-weight: bold;
}
.security-origin-view .details-table-row {
- display: flex;
- white-space: nowrap;
- overflow: hidden;
- line-height: 22px;
+ display: flex;
+ white-space: nowrap;
+ overflow: hidden;
+ line-height: 22px;
}
.security-origin-view .details-table-row > div {
- align-items: flex-start;
+ align-items: flex-start;
}
.security-origin-view .details-table-row > div:first-child {
- color: rgb(140, 140, 140);
- width: 110px;
- margin-right: 1em;
- flex: none;
- display: flex;
- justify-content: flex-end;
+ color: rgb(140, 140, 140);
+ width: 110px;
+ margin-right: 1em;
+ flex: none;
+ display: flex;
+ justify-content: flex-end;
}
+
.security-origin-view .details-table-row > div:nth-child(2) {
- flex: auto;
- white-space: normal;
+ flex: auto;
+ white-space: normal;
}
.security-origin-view .sct-details .details-table .details-table-row:last-child div:last-child {
- border-bottom: 1px solid rgb(230, 230, 230);
- padding-bottom: 10px;
+ border-bottom: 1px solid rgb(230, 230, 230);
+ padding-bottom: 10px;
}
.security-origin-view .sct-details .details-table:last-child .details-table-row:last-child div:last-child {
- border-bottom: none;
- padding-bottom: 0;
+ border-bottom: none;
+ padding-bottom: 0;
}
.security-origin-view .details-toggle {
@@ -100,31 +101,31 @@
}
.security-origin-view .sct-toggle {
- margin-left: 145px;
- padding-top: 5px;
+ margin-left: 145px;
+ padding-top: 5px;
}
.security-origin-view .details-table .empty-san {
- color: rgb(140, 140, 140);
+ color: rgb(140, 140, 140);
}
.security-origin-view .details-table .san-entry {
- display: block;
+ display: block;
}
.security-origin-view .truncated-san .truncated-entry {
- display: none;
+ display: none;
}
.origin-button {
- margin-top: 4px;
- margin-left: 0;
+ margin-top: 4px;
+ margin-left: 0;
}
-.origin-view-section:last-child {
- border-bottom:none;
+.origin-view-section:last-child {
+ border-bottom: none;
}
.devtools-link {
- display: inline-flex;
+ display: inline-flex;
}
diff --git a/front_end/security/sidebar.css b/front_end/security/sidebar.css
index 4e8d6fb..abbbcb2 100644
--- a/front_end/security/sidebar.css
+++ b/front_end/security/sidebar.css
@@ -4,82 +4,82 @@
*/
.tree-outline {
- padding: 0;
+ padding: 0;
}
.tree-outline li {
- display: flex;
- flex-direction: row;
- align-items: center;
- padding: 2px 5px;
- overflow: hidden;
- margin: 2px 0;
- border-top: 1px solid transparent;
- white-space: nowrap;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 2px 5px;
+ overflow: hidden;
+ margin: 2px 0;
+ border-top: 1px solid transparent;
+ white-space: nowrap;
}
.tree-outline li.selected:focus .lock-icon,
-.tree-outline .security-sidebar-tree-item.selected:focus .icon
-{
- background-color: var(--selection-fg-color);
+.tree-outline .security-sidebar-tree-item.selected:focus .icon {
+ background-color: var(--selection-fg-color);
}
.tree-outline .security-main-view-sidebar-tree-item {
- border-bottom: 1px solid rgb(230, 230, 230);
- padding: 16px 0;
+ border-bottom: 1px solid rgb(230, 230, 230);
+ padding: 16px 0;
}
.tree-outline li.security-sidebar-origins {
- padding: 1px 8px 1px 13px;
- margin-top: 1em;
- margin-bottom: 0.5em;
- color: rgb(90, 90, 90);
- border-top: none;
- line-height: 16px;
- text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
+ padding: 1px 8px 1px 13px;
+ margin-top: 1em;
+ margin-bottom: 0.5em;
+ color: rgb(90, 90, 90);
+ border-top: none;
+ line-height: 16px;
+ text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
}
.tree-outline ol {
- padding-left: 0;
+ padding-left: 0;
}
.tree-outline li::before {
- content: none;
+ content: none;
}
.tree-outline .security-main-view-sidebar-tree-item,
.tree-outline .security-sidebar-origins,
.tree-outline li.security-sidebar-origins + .children > li {
- padding-left: 16px;
+ padding-left: 16px;
}
.tree-outline .lock-icon,
.tree-outline .security-property {
- margin-right: 4px;
- flex: none;
+ margin-right: 4px;
+ flex: none;
}
.security-sidebar-tree-item {
- padding: 2px 0;
+ padding: 2px 0;
}
.security-sidebar-tree-item .title {
- overflow: hidden;
- margin-right: 5px;
+ overflow: hidden;
+ margin-right: 5px;
}
.security-main-view-reload-message .tree-element-title {
- color: rgba(0, 0, 0, 0.6);
- padding-left: 8px;
+ color: rgba(0, 0, 0, 0.6);
+ padding-left: 8px;
}
@media (forced-colors: active) {
- .tree-outline .lock-icon,
- .tree-outline .security-property {
- forced-color-adjust: none;
- }
- .tree-outline li.selected:focus .lock-icon,
- .tree-outline .security-sidebar-tree-item.selected:focus .icon {
- background-color: HighlightText;
- }
+ .tree-outline .lock-icon,
+ .tree-outline .security-property {
+ forced-color-adjust: none;
+ }
+
+ .tree-outline li.selected:focus .lock-icon,
+ .tree-outline .security-sidebar-tree-item.selected:focus .icon {
+ background-color: HighlightText;
+ }
}
diff --git a/front_end/settings/frameworkBlackboxSettingsTab.css b/front_end/settings/frameworkBlackboxSettingsTab.css
index fd6f09f..b9e2063 100644
--- a/front_end/settings/frameworkBlackboxSettingsTab.css
+++ b/front_end/settings/frameworkBlackboxSettingsTab.css
@@ -5,104 +5,104 @@
*/
:host {
- overflow:hidden;
+ overflow: hidden;
}
.header {
- padding: 0 0 6px;
- border-bottom: 1px solid #EEEEEE;
- font-size: 18px;
- font-weight: normal;
- flex: none;
+ padding: 0 0 6px;
+ border-bottom: 1px solid #eee;
+ font-size: 18px;
+ font-weight: normal;
+ flex: none;
}
.intro {
- margin-top: 10px;
+ margin-top: 10px;
}
.blackbox-content-scripts {
- margin-top: 10px;
- flex: none;
+ margin-top: 10px;
+ flex: none;
}
.add-button {
- margin: 10px 2px;
- align-self: flex-start;
- flex: none;
+ margin: 10px 2px;
+ align-self: flex-start;
+ flex: none;
}
.blackbox-list {
- margin-top: 10px;
- max-width: 500px;
- flex: 0 1 auto;
- min-height: 30px;
+ margin-top: 10px;
+ max-width: 500px;
+ flex: 0 1 auto;
+ min-height: 30px;
}
.blackbox-list-empty {
- flex: auto;
- height: 30px;
- display: flex;
- align-items: center;
- justify-content: center;
+ flex: auto;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.blackbox-list-item {
- padding: 3px 5px 3px 5px;
- height: 30px;
- display: flex;
- align-items: center;
- position: relative;
- flex: auto 1 1;
+ padding: 3px 5px 3px 5px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ position: relative;
+ flex: auto 1 1;
}
- .blackbox-list-item .blackbox-pattern {
- white-space: nowrap;
- text-overflow: ellipsis;
- user-select: none;
- color: #222;
- overflow: hidden;
+.blackbox-list-item .blackbox-pattern {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ user-select: none;
+ color: #222;
+ overflow: hidden;
}
.blackbox-pattern {
- flex: auto;
- min-width: 100px;
+ flex: auto;
+ min-width: 100px;
}
.blackbox-list-item.blackbox-disabled .blackbox-pattern {
- text-decoration: line-through;
+ text-decoration: line-through;
}
.blackbox-behavior {
- flex: 0 0 100px;
- padding-left: 10px;
+ flex: 0 0 100px;
+ padding-left: 10px;
}
.blackbox-behavior > select {
- margin-left: -10px;
+ margin-left: -10px;
}
.blackbox-separator {
- flex: 0 0 1px;
- background-color: rgb(231, 231, 231);
- height: 30px;
- margin: 0 4px;
+ flex: 0 0 1px;
+ background-color: rgb(231, 231, 231);
+ height: 30px;
+ margin: 0 4px;
}
.blackbox-separator-invisible {
- visibility: hidden;
- height: 100% !important;
+ visibility: hidden;
+ height: 100% !important;
}
.blackbox-edit-row {
- flex: none;
- display: flex;
- flex-direction: row;
- margin: 6px 5px;
- align-items: center;
+ flex: none;
+ display: flex;
+ flex-direction: row;
+ margin: 6px 5px;
+ align-items: center;
}
.blackbox-edit-row input,
.blackbox-edit-row select {
- width: 100%;
- text-align: inherit;
+ width: 100%;
+ text-align: inherit;
}
diff --git a/front_end/settings/keybindsSettingsTab.css b/front_end/settings/keybindsSettingsTab.css
index 1a641d5..fbf6f53 100644
--- a/front_end/settings/keybindsSettingsTab.css
+++ b/front_end/settings/keybindsSettingsTab.css
@@ -5,102 +5,102 @@
*/
header {
- padding: 0 0 6px;
- border-bottom: 1px solid #EEEEEE;
- flex: none;
- margin-bottom: 25px;
+ padding: 0 0 6px;
+ border-bottom: 1px solid #eee;
+ flex: none;
+ margin-bottom: 25px;
}
h1 {
- font-size: 18px;
- font-weight: normal;
- padding-bottom: 3px;
- margin: 0;
+ font-size: 18px;
+ font-weight: normal;
+ padding-bottom: 3px;
+ margin: 0;
}
.keybinds-key {
- padding: 0.1em 0.6em;
- border: 1px solid #ccc;
- font-size: 11px;
- background-color: #f7f7f7;
- color: #333;
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
- border-radius: 3px;
- display: inline-block;
- margin: 0 0.1em;
- text-shadow: 0 1px 0 #fff;
- line-height: 1.5;
- white-space: nowrap;
+ padding: 0.1em 0.6em;
+ border: 1px solid #ccc;
+ font-size: 11px;
+ background-color: #f7f7f7;
+ color: #333;
+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
+ border-radius: 3px;
+ display: inline-block;
+ margin: 0 0.1em;
+ text-shadow: 0 1px 0 #fff;
+ line-height: 1.5;
+ white-space: nowrap;
}
.keybinds-list-item {
- padding: 0 5px;
- min-height: 30px;
- display: grid;
- grid-auto-rows: 30px;
- grid-template-columns: 1fr 30px 1fr;
- flex: auto 1 1;
+ padding: 0 5px;
+ min-height: 30px;
+ display: grid;
+ grid-auto-rows: 30px;
+ grid-template-columns: 1fr 30px 1fr;
+ flex: auto 1 1;
}
.keybinds-list-item:focus[data-keyboard-focus="true"] {
- background-color: var(--focus-bg-color);
+ background-color: var(--focus-bg-color);
}
.keybinds-list-item:not(.keybinds-category-header) {
- padding-left: 20px;
+ padding-left: 20px;
}
.keybinds-action-name {
- grid-row: 1 / span 1;
- grid-column: 1 / span 1;
+ grid-row: 1 / span 1;
+ grid-column: 1 / span 1;
}
.keybinds-shortcut {
- grid-row: auto;
- grid-column: 3 / span 1;
+ grid-row: auto;
+ grid-column: 3 / span 1;
}
.keybinds-modified {
- grid-column: 2 / span 1;
+ grid-column: 2 / span 1;
}
.keybinds-list-text {
- padding: 3px 0;
- white-space: nowrap;
- text-overflow: ellipsis;
- -webkit-user-select: none;
- color: #222;
- text-align: start;
- position: relative;
- margin-right: 0;
+ padding: 3px 0;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ -webkit-user-select: none;
+ color: #222;
+ text-align: start;
+ position: relative;
+ margin-right: 0;
}
.keybinds-category-header {
- font-weight: bold;
+ font-weight: bold;
}
.list-item:not(:first-child) .keybinds-category-header {
- border-top: 1px solid rgb(231, 231, 231);
+ border-top: 1px solid rgb(231, 231, 231);
}
.keybinds-category-header:hover {
- background-color: white;
+ background-color: white;
}
.keybinds-set-select {
- text-align: right;
- margin-bottom: 25px;
+ text-align: right;
+ margin-bottom: 25px;
}
.keybinds-set-select label p {
- display: inline;
- color: #222;
+ display: inline;
+ color: #222;
}
.keybinds-set-select select {
- margin-left: 6px;
+ margin-left: 6px;
}
.list {
- border: none;
+ border: none;
}
diff --git a/front_end/settings/settingsScreen.css b/front_end/settings/settingsScreen.css
index 3b75ae0..f45ad09 100644
--- a/front_end/settings/settingsScreen.css
+++ b/front_end/settings/settingsScreen.css
@@ -5,196 +5,196 @@
*/
.settings-window-main {
- color: rgb(48, 57, 66);
- background-color: white;
- padding: 11px 0 0 0;
+ color: rgb(48, 57, 66);
+ background-color: white;
+ padding: 11px 0 0 0;
}
.settings-content {
- overflow-y: auto;
- overflow-x: hidden;
- margin: 8px 8px 8px 0;
- padding: 0 4px;
- flex: auto;
+ overflow-y: auto;
+ overflow-x: hidden;
+ margin: 8px 8px 8px 0;
+ padding: 0 4px;
+ flex: auto;
}
.settings-footnote {
- border-top: 1px solid #EEEEEE;
- margin: 0;
- padding: 12px;
+ border-top: 1px solid #eee;
+ margin: 0;
+ padding: 12px;
}
.settings-container {
- width: 100%;
- -webkit-column-width: 288px;
+ width: 100%;
+ -webkit-column-width: 288px;
}
.settings-block {
- display: block;
- padding-bottom: 9px;
- width: 288px;
- -webkit-column-break-inside: avoid;
+ display: block;
+ padding-bottom: 9px;
+ width: 288px;
+ -webkit-column-break-inside: avoid;
}
.settings-tab.settings-container {
- -webkit-column-width: 308px;
+ -webkit-column-width: 308px;
}
.settings-tab .settings-block {
- margin-left: 20px;
+ margin-left: 20px;
}
.settings-line {
- padding-bottom: 5px;
- margin-bottom: 5px;
+ padding-bottom: 5px;
+ margin-bottom: 5px;
}
.settings-key-cell {
- display: inline-block;
- width: 153px;
- white-space: nowrap;
- text-align: right;
- vertical-align: middle;
- padding-right: 6px;
+ display: inline-block;
+ width: 153px;
+ white-space: nowrap;
+ text-align: right;
+ vertical-align: middle;
+ padding-right: 6px;
}
.settings-cell {
- display: inline-block;
- width: 135px;
- vertical-align: middle;
+ display: inline-block;
+ width: 135px;
+ vertical-align: middle;
}
.settings-section-title {
- font-size: 120%;
- text-align: left;
+ font-size: 120%;
+ text-align: left;
}
.settings-key {
- padding: 0.1em 0.6em;
- border: 1px solid #ccc;
- font-size: 11px;
- background-color: #f7f7f7;
- color: #333;
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
- border-radius: 3px;
- display: inline-block;
- margin: 0 0.1em;
- text-shadow: 0 1px 0 #fff;
- line-height: 1.5;
- white-space: nowrap;
+ padding: 0.1em 0.6em;
+ border: 1px solid #ccc;
+ font-size: 11px;
+ background-color: #f7f7f7;
+ color: #333;
+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
+ border-radius: 3px;
+ display: inline-block;
+ margin: 0 0.1em;
+ text-shadow: 0 1px 0 #fff;
+ line-height: 1.5;
+ white-space: nowrap;
}
.settings-combine-keys,
.settings-key-delimiter {
- font-size: 9px;
+ font-size: 9px;
}
.settings-combine-keys {
- margin: 0 0.3em;
+ margin: 0 0.3em;
}
.settings-key-delimiter {
- margin: 0 0.5em;
- display: none;
+ margin: 0 0.5em;
+ display: none;
}
fieldset {
- margin: 0;
- padding: 0;
- border: none;
+ margin: 0;
+ padding: 0;
+ border: none;
}
.settings-tab label {
- padding-right: 4px;
- display: inline-flex;
- flex-shrink: 0;
+ padding-right: 4px;
+ display: inline-flex;
+ flex-shrink: 0;
}
.settings-block p p {
- padding-left: 30px;
+ padding-left: 30px;
}
.settings-experiments-warning-subsection-warning {
- color: rgb(200, 0, 0);
+ color: rgb(200, 0, 0);
}
.settings-experiments-warning-subsection-message {
- color: inherit;
+ color: inherit;
}
.settings-content input[type=checkbox] {
- margin: 1px 7px 1px 2px;
+ margin: 1px 7px 1px 2px;
}
.settings-window-title {
- font-size: 18px;
- color: rgb(48, 57, 66);
- padding: 0 0 5px 13px;
+ font-size: 18px;
+ color: rgb(48, 57, 66);
+ padding: 0 0 5px 13px;
}
.settings-container-wrapper {
- position: absolute;
- top: 31px;
- left: 0px;
- right: 0;
- bottom: 0;
- overflow: auto;
- padding-top: 9px;
+ position: absolute;
+ top: 31px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: auto;
+ padding-top: 9px;
}
.settings-tab.settings-content {
- margin: 0;
- padding: 0;
+ margin: 0;
+ padding: 0;
}
.settings-tab-container {
- flex: auto;
- overflow: hidden;
+ flex: auto;
+ overflow: hidden;
}
.settings-tab-container header {
- padding: 0 0 6px;
- border-bottom: 1px solid #EEEEEE;
+ padding: 0 0 6px;
+ border-bottom: 1px solid #eee;
}
#experiments-tab-content .settings-container {
- -webkit-column-width: 470px;
+ -webkit-column-width: 470px;
}
#experiments-tab-content .settings-block {
- width: 470px;
- margin-left: 0;
+ width: 470px;
+ margin-left: 0;
}
.settings-tab-container header > h1 {
- font-size: 18px;
- font-weight: normal;
- margin: 0;
- padding-bottom: 3px;
+ font-size: 18px;
+ font-weight: normal;
+ margin: 0;
+ padding-bottom: 3px;
}
.settings-tab .settings-section-title {
- margin-left: -20px;
- color: #222;
+ margin-left: -20px;
+ color: #222;
}
.settings-tab .settings-block fieldset:disabled label:hover {
- color: inherit;
+ color: inherit;
}
.settings-tab .settings-block label:hover {
- color: #222;
+ color: #222;
}
.settings-tab p {
- margin: 12px 0;
+ margin: 12px 0;
}
.settings-tab select {
- margin-left: 10px;
+ margin-left: 10px;
}
.settings-experiment-unstable {
- display: block;
- color: #888;
+ display: block;
+ color: #888;
}
diff --git a/front_end/source_frame/fontView.css b/front_end/source_frame/fontView.css
index 1faad7e..162e237 100644
--- a/front_end/source_frame/fontView.css
+++ b/front_end/source_frame/fontView.css
@@ -5,9 +5,9 @@
*/
.font-view {
- font-size: 60px;
- white-space: pre-wrap;
- word-wrap: break-word;
- text-align: center;
- padding: 15px;
+ font-size: 60px;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ text-align: center;
+ padding: 15px;
}
diff --git a/front_end/source_frame/imageView.css b/front_end/source_frame/imageView.css
index ea76513..42ac4e9 100644
--- a/front_end/source_frame/imageView.css
+++ b/front_end/source_frame/imageView.css
@@ -5,19 +5,19 @@
*/
.image-view {
- overflow: auto;
+ overflow: auto;
}
.image-view > .image {
- padding: 20px 20px 10px 20px;
- text-align: center;
+ padding: 20px 20px 10px 20px;
+ text-align: center;
}
.image-view img.resource-image-view {
- max-width: 100%;
- max-height: 1000px;
- background-image: url(Images/checker.png);
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
- user-select: text;
- -webkit-user-drag: auto;
+ max-width: 100%;
+ max-height: 1000px;
+ background-image: url(Images/checker.png);
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
+ user-select: text;
+ -webkit-user-drag: auto;
}
diff --git a/front_end/source_frame/jsonView.css b/front_end/source_frame/jsonView.css
index b78a071..80d8f45c 100644
--- a/front_end/source_frame/jsonView.css
+++ b/front_end/source_frame/jsonView.css
@@ -1,4 +1,4 @@
.json-view {
- padding: 2px 6px;
- overflow: auto;
+ padding: 2px 6px;
+ overflow: auto;
}
diff --git a/front_end/source_frame/messagesPopover.css b/front_end/source_frame/messagesPopover.css
index f083c46..d7fd285 100644
--- a/front_end/source_frame/messagesPopover.css
+++ b/front_end/source_frame/messagesPopover.css
@@ -5,22 +5,22 @@
*/
.text-editor-messages-description-container {
- display: inline-block;
+ display: inline-block;
}
.text-editor-row-message:first-child {
- border-top-width: 0;
+ border-top-width: 0;
}
.text-editor-row-message {
- line-height: 1.2;
- white-space: nowrap;
- display: flex;
- align-items: center;
- justify-content: flex-start;
- margin-top: 2px;
+ line-height: 1.2;
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ margin-top: 2px;
}
.text-editor-row-message-repeat-count {
- margin-right: 0.5em;
+ margin-right: 0.5em;
}
diff --git a/front_end/source_frame/resourceSourceFrame.css b/front_end/source_frame/resourceSourceFrame.css
index b09ae48..b668a45 100644
--- a/front_end/source_frame/resourceSourceFrame.css
+++ b/front_end/source_frame/resourceSourceFrame.css
@@ -3,6 +3,7 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
+
.searchable-view {
flex: 1;
}
diff --git a/front_end/source_frame/xmlTree.css b/front_end/source_frame/xmlTree.css
index e657867..b7d1e47 100644
--- a/front_end/source_frame/xmlTree.css
+++ b/front_end/source_frame/xmlTree.css
@@ -5,49 +5,49 @@
*/
.tree-outline ol {
- list-style: none;
- padding: 0;
- margin: 0;
- padding-inline-start: 16px;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ padding-inline-start: 16px;
}
ol.tree-outline {
- padding-inline-start: 0;
+ padding-inline-start: 0;
}
.tree-outline li {
- min-height: 12px;
+ min-height: 12px;
}
.tree-outline li.shadow-xml-view-close-tag {
- margin-left: -16px;
+ margin-left: -16px;
}
.shadow-xml-view-tag {
- color: rgb(136, 18, 128);
+ color: rgb(136, 18, 128);
}
.shadow-xml-view-comment {
- color: rgb(35, 110, 37);
+ color: rgb(35, 110, 37);
}
.shadow-xml-view-processing-instruction {
- color: rgb(35, 110, 37);
+ color: rgb(35, 110, 37);
}
.shadow-xml-view-attribute-name {
- color: rgb(153, 69, 0);
+ color: rgb(153, 69, 0);
}
.shadow-xml-view-attribute-value {
- color: rgb(26, 26, 166);
+ color: rgb(26, 26, 166);
}
.shadow-xml-view-text {
- color: rgb(0, 0, 0);
- white-space: pre;
+ color: rgb(0, 0, 0);
+ white-space: pre;
}
.shadow-xml-view-cdata {
- color: rgb(0, 0, 0);
+ color: rgb(0, 0, 0);
}
diff --git a/front_end/source_frame/xmlView.css b/front_end/source_frame/xmlView.css
index 59e261c..36882a1 100644
--- a/front_end/source_frame/xmlView.css
+++ b/front_end/source_frame/xmlView.css
@@ -5,7 +5,7 @@
*/
.shadow-xml-view {
- user-select: text;
- overflow: auto;
- padding: 2px 4px;
+ user-select: text;
+ overflow: auto;
+ padding: 2px 4px;
}
diff --git a/front_end/sources/callStackSidebarPane.css b/front_end/sources/callStackSidebarPane.css
index 021a746..830c406 100644
--- a/front_end/sources/callStackSidebarPane.css
+++ b/front_end/sources/callStackSidebarPane.css
@@ -5,126 +5,127 @@
*/
.blackboxed-message {
- text-align: center;
- font-style: italic;
- padding: 4px;
- color: #888;
- background-color: #FFFFC2;
+ text-align: center;
+ font-style: italic;
+ padding: 4px;
+ color: #888;
+ background-color: #ffffc2;
}
.blackboxed-message > .link {
- margin-left: 5px;
+ margin-left: 5px;
}
.blackboxed-message > .link:focus {
- outline-width: unset;
+ outline-width: unset;
}
.show-more-message {
- text-align: center;
- font-style: italic;
- padding: 4px;
- border-top: 1px solid #d8d8d8;
+ text-align: center;
+ font-style: italic;
+ padding: 4px;
+ border-top: 1px solid #d8d8d8;
}
.show-more-message > .link {
- margin-left: 5px;
+ margin-left: 5px;
}
.call-frame-item {
- padding: 3px 8px 3px 20px;
- position: relative;
- min-height: 18px;
- line-height: 15px;
- display: flex;
- flex-wrap: wrap;
+ padding: 3px 8px 3px 20px;
+ position: relative;
+ min-height: 18px;
+ line-height: 15px;
+ display: flex;
+ flex-wrap: wrap;
}
.call-frame-title-text {
- text-overflow: ellipsis;
- overflow: hidden;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
.call-frame-item:not(.async-header) {
- border-top: 1px solid #efefef;
+ border-top: 1px solid #efefef;
}
.call-frame-item:not(.async-header):hover {
- background-color: #eee;
+ background-color: #eee;
}
.call-frame-item[data-keyboard-focus="true"]:focus,
.call-frame-item.async-header[data-keyboard-focus="true"]:focus .call-frame-item-title {
- background-color: var(--focus-bg-color);
+ background-color: var(--focus-bg-color);
}
.async-header + .call-frame-item {
- border-top: 0;
+ border-top: 0;
}
.call-frame-item-title,
.call-frame-location {
- display: flex;
- white-space: nowrap;
+ display: flex;
+ white-space: nowrap;
}
.call-frame-location {
- color: #888;
- margin-left: auto;
- padding: 0 10px 0 10px;
+ color: #888;
+ margin-left: auto;
+ padding: 0 10px 0 10px;
}
.async-header::before {
- content: " ";
- width: 100%;
- border-top: 1px solid #d8d8d8;
- margin-top: 8px;
- position: absolute;
- left: 0;
+ content: " ";
+ width: 100%;
+ border-top: 1px solid #d8d8d8;
+ margin-top: 8px;
+ position: absolute;
+ left: 0;
}
.async-header .call-frame-item-title {
- font-weight: bold;
- color: #999;
- background-color: white;
- margin-left: -5px;
- padding: 0 5px;
- z-index: 1;
+ font-weight: bold;
+ color: #999;
+ background-color: white;
+ margin-left: -5px;
+ padding: 0 5px;
+ z-index: 1;
}
.blackboxed-call-frame {
- opacity: 0.6;
- font-style: italic;
+ opacity: 0.6;
+ font-style: italic;
}
.selected-call-frame-icon {
- display: none;
- position: absolute;
- top: 5px;
- left: 4px;
+ display: none;
+ position: absolute;
+ top: 5px;
+ left: 4px;
}
.call-frame-item.selected .selected-call-frame-icon {
- display: block;
+ display: block;
}
:host-context(.-theme-with-dark-background) .blackboxed-message {
- background-color: hsl(46, 98%, 22%);
- color: #aaa;
+ background-color: hsl(46, 98%, 22%);
+ color: #aaa;
}
:host-context(.-theme-with-dark-background) .blackboxed-message > .link {
- color: hsl(0, 0%, 67%);
+ color: hsl(0, 0%, 67%);
}
@media (forced-colors: active) {
- .call-frame-item:not(.async-header):hover,
- .call-frame-item[data-keyboard-focus="true"]:focus {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- .call-frame-item:not(.async-header):hover *,
- .call-frame-item[data-keyboard-focus="true"]:focus * {
- color: HighlightText;
- }
+ .call-frame-item:not(.async-header):hover,
+ .call-frame-item[data-keyboard-focus="true"]:focus {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ .call-frame-item:not(.async-header):hover *,
+ .call-frame-item[data-keyboard-focus="true"]:focus * {
+ color: HighlightText;
+ }
}
diff --git a/front_end/sources/debuggerPausedMessage.css b/front_end/sources/debuggerPausedMessage.css
index 591d261..3d8abbd 100644
--- a/front_end/sources/debuggerPausedMessage.css
+++ b/front_end/sources/debuggerPausedMessage.css
@@ -5,50 +5,50 @@
*/
.paused-status {
- padding: 6px;
- border-bottom: 1px solid transparent;
- border-top: 1px solid rgb(189, 189, 189);
- background-color: hsl(50, 100%, 95%);
- color: rgb(107, 97, 48);
+ padding: 6px;
+ border-bottom: 1px solid transparent;
+ border-top: 1px solid rgb(189, 189, 189);
+ background-color: hsl(50, 100%, 95%);
+ color: rgb(107, 97, 48);
}
.-theme-with-dark-background .paused-status {
- background-color: hsl(46, 98%, 22%);
- color: #ccc;
+ background-color: hsl(46, 98%, 22%);
+ color: #ccc;
}
.paused-status.error-reason {
- background-color: hsl(0, 100%, 97%);
- color: #6b3b3b;
+ background-color: hsl(0, 100%, 97%);
+ color: #6b3b3b;
}
.status-main {
- font-weight: bold;
- padding-left: 15px;
- position: relative;
+ font-weight: bold;
+ padding-left: 15px;
+ position: relative;
}
.status-sub:not(:empty) {
- padding-left: 15px;
- padding-top: 5px;
- overflow: hidden;
- text-overflow: ellipsis;
+ padding-left: 15px;
+ padding-top: 5px;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.paused-status.error-reason .status-sub {
- color: red;
- line-height: 11px;
- max-height: 27px;
- user-select: text;
+ color: red;
+ line-height: 11px;
+ max-height: 27px;
+ user-select: text;
}
.status-icon {
- -webkit-filter: hue-rotate(190deg);
- position: absolute;
- left: 0;
- top: calc(50% - 5px);
+ -webkit-filter: hue-rotate(190deg);
+ position: absolute;
+ left: 0;
+ top: calc(50% - 5px);
}
.paused-status.error-reason .status-icon {
- -webkit-filter: none;
+ -webkit-filter: none;
}
diff --git a/front_end/sources/dialog.css b/front_end/sources/dialog.css
index 4e53125..0369e54 100644
--- a/front_end/sources/dialog.css
+++ b/front_end/sources/dialog.css
@@ -5,19 +5,19 @@
*/
:host {
- padding: 10px;
+ padding: 10px;
}
.widget {
- align-items: center;
+ align-items: center;
}
label {
- white-space: nowrap;
+ white-space: nowrap;
}
input[type=text].add-source-map {
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
- font-size: inherit;
- margin: 0 8px 0 5px;
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
+ font-size: inherit;
+ margin: 0 8px 0 5px;
}
diff --git a/front_end/sources/javaScriptBreakpointsSidebarPane.css b/front_end/sources/javaScriptBreakpointsSidebarPane.css
index 9e6abcc..348fcbd 100644
--- a/front_end/sources/javaScriptBreakpointsSidebarPane.css
+++ b/front_end/sources/javaScriptBreakpointsSidebarPane.css
@@ -5,56 +5,57 @@
*/
.breakpoint-entry {
- padding: 3px 8px 3px 8px;
- min-height: 18px;
- line-height: 15px;
- border-top: 1px solid #efefef;
+ padding: 3px 8px 3px 8px;
+ min-height: 18px;
+ line-height: 15px;
+ border-top: 1px solid #efefef;
}
.breakpoint-entry:focus {
- background-color: var(--focus-bg-color);
+ background-color: var(--focus-bg-color);
}
.breakpoint-entry [is=dt-checkbox] {
- max-width: 100%;
- white-space: nowrap;
+ max-width: 100%;
+ white-space: nowrap;
}
:not(.breakpoints-list-deactivated) > .breakpoint-entry:hover {
- background-color: #eee;
+ background-color: #eee;
}
.breakpoint-entry > .source-text {
- cursor: pointer;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- margin-left: 22px;
+ cursor: pointer;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ margin-left: 22px;
}
.breakpoints-list-deactivated {
- background-color: #eee;
- opacity: 0.3;
+ background-color: #eee;
+ opacity: 0.3;
}
.breakpoint-hit {
- background-color: rgb(255, 255, 194);
- border-right: 3px solid rgb(107, 97, 48);
+ background-color: rgb(255, 255, 194);
+ border-right: 3px solid rgb(107, 97, 48);
}
:host-context(.-theme-with-dark-background) .breakpoint-hit {
- background-color: hsl(46, 98%, 22%);
- color: #ccc;
+ background-color: hsl(46, 98%, 22%);
+ color: #ccc;
}
@media (forced-colors: active) {
- :not(.breakpoints-list-deactivated) > .breakpoint-entry:hover,
- .breakpoint-entry:focus {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- :not(.breakpoints-list-deactivated) > .breakpoint-entry:hover > *,
- .breakpoint-entry:focus > * {
- color: HighlightText;
- }
+ :not(.breakpoints-list-deactivated) > .breakpoint-entry:hover,
+ .breakpoint-entry:focus {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ :not(.breakpoints-list-deactivated) > .breakpoint-entry:hover > *,
+ .breakpoint-entry:focus > * {
+ color: HighlightText;
+ }
}
diff --git a/front_end/sources/navigatorTree.css b/front_end/sources/navigatorTree.css
index bd9ef0b..c0238d0 100644
--- a/front_end/sources/navigatorTree.css
+++ b/front_end/sources/navigatorTree.css
@@ -27,94 +27,98 @@
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-.icon, .icon-badge {
- margin: -3px -5px -3px -5px;
+.icon,
+.icon-badge {
+ margin: -3px -5px -3px -5px;
}
.icon-stack {
- position: relative;
- display: inline-flex;
+ position: relative;
+ display: inline-flex;
}
.icon-stack > [is=ui-icon]:not(:first-child) {
- position: absolute;
- left: 0;
- top: 0;
+ position: absolute;
+ left: 0;
+ top: 0;
}
.navigator-file-tree-item .icon {
- background: linear-gradient(45deg, hsl(0, 0%, 50%), hsl(0, 0%, 70%));
+ background: linear-gradient(45deg, hsl(0, 0%, 50%), hsl(0, 0%, 70%));
}
.navigator-fs-tree-item:not(.has-mapped-files):not(.selected) > :not(.selection),
.navigator-fs-folder-tree-item:not(.has-mapped-files):not(.selected) > :not(.selection) {
- filter: grayscale(50%);
- opacity: 0.5;
+ filter: grayscale(50%);
+ opacity: 0.5;
}
.tree-outline li {
- min-height: 20px;
+ min-height: 20px;
}
.tree-outline li:hover:not(.selected) .selection {
- display: block;
- background-color: var(--item-hover-color);
+ display: block;
+ background-color: var(--item-hover-color);
}
.navigator-folder-tree-item .icon {
- background-color: #555;
+ background-color: #555;
}
.navigator-sm-folder-tree-item .icon,
.navigator-fs-tree-item .icon,
.navigator-fs-folder-tree-item .icon {
- background: linear-gradient(45deg, hsl(28, 75%, 50%), hsl(28, 75%, 70%));
+ background: linear-gradient(45deg, hsl(28, 75%, 50%), hsl(28, 75%, 70%));
}
.navigator-nw-folder-tree-item .icon {
- background: linear-gradient(45deg, hsl(210, 82%, 65%), hsl(210, 82%, 80%));
+ background: linear-gradient(45deg, hsl(210, 82%, 65%), hsl(210, 82%, 80%));
}
.navigator-sm-script-tree-item .icon,
.navigator-script-tree-item .icon,
.navigator-snippet-tree-item .icon {
- background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
+ background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
}
.navigator-sm-stylesheet-tree-item .icon,
.navigator-stylesheet-tree-item .icon {
- background: linear-gradient(45deg, hsl(256, 50%, 50%), hsl(256, 50%, 70%));
+ background: linear-gradient(45deg, hsl(256, 50%, 50%), hsl(256, 50%, 70%));
}
.navigator-image-tree-item .icon,
.navigator-font-tree-item .icon {
- background: linear-gradient(45deg, hsl(109, 33%, 50%), hsl(109, 33%, 70%));
+ background: linear-gradient(45deg, hsl(109, 33%, 50%), hsl(109, 33%, 70%));
}
.navigator-sm-folder-tree-item .tree-element-title,
.navigator-sm-script-tree-item .tree-element-title,
.navigator-sm-stylesheet-tree-item .tree-element-title {
- font-style: italic;
+ font-style: italic;
}
-:host{
- overflow-y: auto;
+:host {
+ overflow-y: auto;
}
@media (forced-colors: active) {
- .tree-outline li .leading-icons [is=ui-icon].icon-mask {
- background: ButtonText;
- }
- .tree-outline li:hover:not(.selected) .selection {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- .tree-outline:not(.hide-selection-when-blurred) li.parent:hover:not(.selected)::before,
- .tree-outline:not(.hide-selection-when-blurred) li:hover:not(.selected) [is=ui-icon].icon-mask {
- background-color: HighlightText;
- }
- .tree-outline li:not(.selected):hover .tree-element-title {
- forced-color-adjust: none;
- color: HighlightText;
- }
+ .tree-outline li .leading-icons [is=ui-icon].icon-mask {
+ background: ButtonText;
+ }
+
+ .tree-outline li:hover:not(.selected) .selection {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ .tree-outline:not(.hide-selection-when-blurred) li.parent:hover:not(.selected)::before,
+ .tree-outline:not(.hide-selection-when-blurred) li:hover:not(.selected) [is=ui-icon].icon-mask {
+ background-color: HighlightText;
+ }
+
+ .tree-outline li:not(.selected):hover .tree-element-title {
+ forced-color-adjust: none;
+ color: HighlightText;
+ }
}
diff --git a/front_end/sources/navigatorView.css b/front_end/sources/navigatorView.css
index 2db86d1..bad6e96 100644
--- a/front_end/sources/navigatorView.css
+++ b/front_end/sources/navigatorView.css
@@ -5,6 +5,6 @@
*/
.navigator-toolbar {
- border-bottom: 1px solid #ccc;
- padding-left: 8px;
+ border-bottom: 1px solid #ccc;
+ padding-left: 8px;
}
diff --git a/front_end/sources/scopeChainSidebarPane.css b/front_end/sources/scopeChainSidebarPane.css
index f1b4bbd..ce023b3 100644
--- a/front_end/sources/scopeChainSidebarPane.css
+++ b/front_end/sources/scopeChainSidebarPane.css
@@ -5,24 +5,24 @@
*/
.scope-chain-sidebar-pane-section-header {
- flex: auto;
+ flex: auto;
}
.scope-chain-sidebar-pane-section-subtitle {
- float: right;
- margin-left: 5px;
- max-width: 55%;
- text-overflow: ellipsis;
- overflow: hidden;
+ float: right;
+ margin-left: 5px;
+ max-width: 55%;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
.scope-chain-sidebar-pane-section-title {
- font-weight: normal;
- word-wrap: break-word;
- white-space: normal;
+ font-weight: normal;
+ word-wrap: break-word;
+ white-space: normal;
}
.scope-chain-sidebar-pane-section {
- padding: 2px 4px;
- flex: none;
+ padding: 2px 4px;
+ flex: none;
}
diff --git a/front_end/sources/serviceWorkersSidebar.css b/front_end/sources/serviceWorkersSidebar.css
index 0df08cc..91f14d3 100644
--- a/front_end/sources/serviceWorkersSidebar.css
+++ b/front_end/sources/serviceWorkersSidebar.css
@@ -5,12 +5,12 @@
*/
.service-worker {
- padding: 5px 5px 5px 8px;
- border-bottom: 1px solid #aaa;
- display: flex;
- align-items: center;
+ padding: 5px 5px 5px 8px;
+ border-bottom: 1px solid #aaa;
+ display: flex;
+ align-items: center;
}
.service-worker:last-child {
- border-bottom: none;
+ border-bottom: none;
}
diff --git a/front_end/sources/sourcesPanel.css b/front_end/sources/sourcesPanel.css
index 258325b..a14061a 100644
--- a/front_end/sources/sourcesPanel.css
+++ b/front_end/sources/sourcesPanel.css
@@ -28,42 +28,42 @@
*/
.scripts-debug-toolbar {
- position: absolute;
- top: 0;
- width: 100%;
- background-color: var(--toolbar-bg-color);
- border-bottom: 1px solid #ccc;
- overflow: hidden;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ background-color: var(--toolbar-bg-color);
+ border-bottom: 1px solid #ccc;
+ overflow: hidden;
}
.scripts-debug-toolbar-drawer {
- flex: 0 0 52px;
- -webkit-transition: margin-top 0.1s ease-in-out;
- margin-top: -26px;
- padding-top: 25px;
- background-color: white;
- overflow: hidden;
- white-space: nowrap;
+ flex: 0 0 52px;
+ -webkit-transition: margin-top 0.1s ease-in-out;
+ margin-top: -26px;
+ padding-top: 25px;
+ background-color: white;
+ overflow: hidden;
+ white-space: nowrap;
}
.scripts-debug-toolbar-drawer.expanded {
- margin-top: 0;
+ margin-top: 0;
}
.scripts-debug-toolbar-drawer > [is=dt-checkbox] {
- display: none;
- padding-left: 3px;
- height: 28px;
+ display: none;
+ padding-left: 3px;
+ height: 28px;
}
.scripts-debug-toolbar-drawer.expanded > [is=dt-checkbox] {
- display: flex;
+ display: flex;
}
.cursor-auto {
- cursor: auto;
+ cursor: auto;
}
.navigator-tabbed-pane {
- background-color: var(--toolbar-bg-color);
+ background-color: var(--toolbar-bg-color);
}
diff --git a/front_end/sources/sourcesView.css b/front_end/sources/sourcesView.css
index d28dab8..5eec9cf 100644
--- a/front_end/sources/sourcesView.css
+++ b/front_end/sources/sourcesView.css
@@ -29,107 +29,109 @@
*/
#sources-panel-sources-view {
- flex: auto;
- position: relative;
+ flex: auto;
+ position: relative;
}
#sources-panel-sources-view .sources-toolbar {
- display: flex;
- flex: 0 0 27px;
- background-color: var(--toolbar-bg-color);
- border-top: var(--divider-border);
- overflow: hidden;
- z-index: 0;
+ display: flex;
+ flex: 0 0 27px;
+ background-color: var(--toolbar-bg-color);
+ border-top: var(--divider-border);
+ overflow: hidden;
+ z-index: 0;
}
.sources-toolbar .toolbar {
- cursor: default;
+ cursor: default;
}
.source-frame-debugger-script {
- background-color: rgba(255, 255, 194, 0.5);
+ background-color: rgba(255, 255, 194, 0.5);
}
.-theme-with-dark-background .source-frame-debugger-script {
- background-color: #444;
+ background-color: #444;
}
@-webkit-keyframes source-frame-value-update-highlight-animation {
- from {
- background-color: inherit;
- color: inherit;
- }
- 10% {
- background-color: rgb(158, 54, 153);
- color: white;
- }
- to {
- background-color: inherit;
- color: inherit;
- }
+ from {
+ background-color: inherit;
+ color: inherit;
+ }
+
+ 10% {
+ background-color: rgb(158, 54, 153);
+ color: white;
+ }
+
+ to {
+ background-color: inherit;
+ color: inherit;
+ }
}
.source-frame-value-update-highlight {
- -webkit-animation: source-frame-value-update-highlight-animation 0.8s 1 cubic-bezier(0, 0, 0.2, 1);
- border-radius: 2px;
+ -webkit-animation: source-frame-value-update-highlight-animation 0.8s 1 cubic-bezier(0, 0, 0.2, 1);
+ border-radius: 2px;
}
.diff-entry-insert .diff-marker {
- border-left: 4px solid hsla(144, 55%, 37%, 1);
+ border-left: 4px solid hsla(144, 55%, 37%, 1);
}
.diff-entry-insert .CodeMirror-gutter-background {
- background-color: hsla(144,55%,49%,.2);
+ background-color: hsla(144, 55%, 49%, 0.2);
}
.diff-entry-modify .diff-marker {
- border-left: 4px solid #9C27B0;
+ border-left: 4px solid #9c27b0;
}
.diff-entry-modify .CodeMirror-gutter-background {
- background-color: rgba(186,104,200,0.2);
+ background-color: rgba(186, 104, 200, 0.2);
}
.diff-entry-delete .diff-marker {
- width: 0;
- height: 0;
- border-top: 6px solid transparent;
- border-bottom: 6px solid transparent;
- border-left: 6px solid #D32F2F;
- position: relative;
- top: 6px;
- cursor: pointer;
- left: 0px;
+ width: 0;
+ height: 0;
+ border-top: 6px solid transparent;
+ border-bottom: 6px solid transparent;
+ border-left: 6px solid #d32f2f;
+ position: relative;
+ top: 6px;
+ cursor: pointer;
+ left: 0;
}
.diff-entry-delete .CodeMirror-gutter-background {
- border-bottom: 2px solid #D32F2F;
+ border-bottom: 2px solid #d32f2f;
}
.CodeMirror-gutter-diff {
- width: 4px;
+ width: 4px;
}
.highlight-line-modification {
- animation: source-line-modification-background-fadeout 0.4s 0s;
- animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+ animation: source-line-modification-background-fadeout 0.4s 0s;
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.highlight-line-modification span {
- animation: source-line-modification-foreground-fadeout 0.4s 0s;
- animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+ animation: source-line-modification-foreground-fadeout 0.4s 0s;
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@keyframes source-line-modification-background-fadeout {
- from { background-color: rgba(158, 54, 153, 0.5); }
- 50% { background-color: rgba(158, 54, 153, 0.5); }
- 90% { background-color: rgba(158, 54, 153, 0); }
- to { background-color: transparent; }
+ from { background-color: rgba(158, 54, 153, 0.5); }
+ 50% { background-color: rgba(158, 54, 153, 0.5); }
+ 90% { background-color: rgba(158, 54, 153, 0); }
+ to { background-color: transparent; }
}
@keyframes source-line-modification-foreground-fadeout {
- from { color: white; }
- 50% { color: white; }
- 90% { color: initial; }
- to { color: initial; }
+ from { color: white; }
+ 50% { color: white; }
+ 90% { color: initial; }
+ to { color: initial; }
}
diff --git a/front_end/sources/threadsSidebarPane.css b/front_end/sources/threadsSidebarPane.css
index 8b7f6b4..f955ed5 100644
--- a/front_end/sources/threadsSidebarPane.css
+++ b/front_end/sources/threadsSidebarPane.css
@@ -5,58 +5,59 @@
*/
.thread-item {
- padding: 3px 8px 3px 20px;
- position: relative;
- min-height: 18px;
- line-height: 15px;
- display: flex;
- flex-wrap: wrap;
+ padding: 3px 8px 3px 20px;
+ position: relative;
+ min-height: 18px;
+ line-height: 15px;
+ display: flex;
+ flex-wrap: wrap;
}
.thread-item + .thread-item {
- border-top: 1px solid #efefef;
+ border-top: 1px solid #efefef;
}
.thread-item:hover {
- background-color: #eee;
+ background-color: #eee;
}
.thread-item[data-keyboard-focus="true"] {
- background-color: var(--focus-bg-color);
+ background-color: var(--focus-bg-color);
}
.thread-item-title,
.thread-item-paused-state {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
}
.thread-item-paused-state {
- color: #888;
- margin-left: auto;
- padding: 0 10px 0 10px;
+ color: #888;
+ margin-left: auto;
+ padding: 0 10px 0 10px;
}
.selected-thread-icon {
- display: none;
- position: absolute;
- top: 5px;
- left: 4px;
+ display: none;
+ position: absolute;
+ top: 5px;
+ left: 4px;
}
.thread-item.selected .selected-thread-icon {
- display: block;
+ display: block;
}
@media (forced-colors: active) {
- .thread-item:hover,
- .thread-item[data-keyboard-focus="true"] {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- .thread-item:hover > div,
- .thread-item[data-keyboard-focus="true"] > div {
- color: HighlightText;
- }
+ .thread-item:hover,
+ .thread-item[data-keyboard-focus="true"] {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ .thread-item:hover > div,
+ .thread-item[data-keyboard-focus="true"] > div {
+ color: HighlightText;
+ }
}
diff --git a/front_end/sources/watchExpressionsSidebarPane.css b/front_end/sources/watchExpressionsSidebarPane.css
index 085a57d..67886a5 100644
--- a/front_end/sources/watchExpressionsSidebarPane.css
+++ b/front_end/sources/watchExpressionsSidebarPane.css
@@ -5,124 +5,127 @@
*/
.watch-expression-delete-button {
- position: absolute;
- top: 5px;
- right: 6px;
- cursor: pointer;
- opacity: 0;
- min-width: 20px;
+ position: absolute;
+ top: 5px;
+ right: 6px;
+ cursor: pointer;
+ opacity: 0;
+ min-width: 20px;
}
.watch-expression-header:hover .watch-expression-delete-button {
- opacity: 0.5;
+ opacity: 0.5;
}
.watch-expression-header:hover .watch-expression-delete-button:hover {
- opacity: 1;
+ opacity: 1;
}
.watch-expression-title:hover {
- padding-right: 26px;
+ padding-right: 26px;
}
.watch-expressions {
- overflow-x: hidden;
- min-height: 26px;
+ overflow-x: hidden;
+ min-height: 26px;
}
.watch-expression-title {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- line-height: 20px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ line-height: 20px;
}
.watch-expression-object-header .watch-expression-title {
- margin-left: 1px;
+ margin-left: 1px;
}
.watch-expression {
- position: relative;
- flex: auto;
- min-height: 20px;
+ position: relative;
+ flex: auto;
+ min-height: 20px;
}
.watch-expressions .name {
- color: rgb(136, 19, 145);
- flex: none;
- white-space: nowrap;
- text-overflow: ellipsis ;
- overflow: hidden;
+ color: rgb(136, 19, 145);
+ flex: none;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
.watch-expression-error {
- color: red;
+ color: red;
}
:host-context(.-theme-with-dark-background) .watch-expression-error {
- color: hsl(0, 100%, 65%);
+ color: hsl(0, 100%, 65%);
}
.watch-expressions-separator {
- flex: none;
+ flex: none;
}
.watch-expressions .value {
- white-space: nowrap;
- display: inline;
+ white-space: nowrap;
+ display: inline;
}
.watch-expression .text-prompt {
- text-overflow: clip;
- overflow: hidden;
- white-space: nowrap;
- padding-left: 4px;
- min-height: 18px;
- line-height: 18px;
- user-select: text;
+ text-overflow: clip;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-left: 4px;
+ min-height: 18px;
+ line-height: 18px;
+ user-select: text;
}
.watch-expression-text-prompt-proxy {
- margin: 2px 12px 2px -4px;
- padding-bottom: 3px;
+ margin: 2px 12px 2px -4px;
+ padding-bottom: 3px;
}
.watch-expression-header {
- flex: auto;
- margin-left: -16px;
- padding-left: 15px;
+ flex: auto;
+ margin-left: -16px;
+ padding-left: 15px;
}
li.watch-expression-tree-item:hover {
- background-color: #F0F0F0;
+ background-color: #f0f0f0;
}
li.watch-expression-tree-item {
- padding-left: 4px;
+ padding-left: 4px;
}
.watch-expression-header:focus[data-keyboard-focus="true"] {
- background: var(--focus-bg-color);
+ background: var(--focus-bg-color);
}
li.watch-expression-editing::before {
- background-color: transparent;
+ background-color: transparent;
}
@media (forced-colors: active) {
- .watch-expression-header:hover .watch-expression-delete-button,
- .watch-expressions .dimmed {
- opacity: 1;
- }
- li.watch-expression-tree-item * {
- forced-color-adjust: none;
- color: ButtonText;
- }
- li.watch-expression-tree-item:hover {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- li.watch-expression-tree-item:hover * {
- color: HighlightText;
- }
+ .watch-expression-header:hover .watch-expression-delete-button,
+ .watch-expressions .dimmed {
+ opacity: 1;
+ }
+
+ li.watch-expression-tree-item * {
+ forced-color-adjust: none;
+ color: ButtonText;
+ }
+
+ li.watch-expression-tree-item:hover {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ li.watch-expression-tree-item:hover * {
+ color: HighlightText;
+ }
}
diff --git a/front_end/text_editor/autocompleteTooltip.css b/front_end/text_editor/autocompleteTooltip.css
index 763a770..5d425fa 100644
--- a/front_end/text_editor/autocompleteTooltip.css
+++ b/front_end/text_editor/autocompleteTooltip.css
@@ -3,17 +3,18 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
+
.autocomplete-tooltip {
pointer-events: none;
margin-left: -3px;
}
.autocomplete-tooltip > div > * {
- padding: 0px 4px;
+ padding: 0 4px;
white-space: nowrap;
vertical-align: middle;
line-height: 20px;
box-shadow: var(--drop-shadow);
- background-color: #FFFFFF;
+ background-color: #fff;
width: fit-content;
-}
\ No newline at end of file
+}
diff --git a/front_end/text_editor/cmdevtools.css b/front_end/text_editor/cmdevtools.css
index 0dae675..3bd88e4 100644
--- a/front_end/text_editor/cmdevtools.css
+++ b/front_end/text_editor/cmdevtools.css
@@ -1,704 +1,715 @@
.CodeMirror {
- --breakpoint-background-red: #FF4E4226;
+ --breakpoint-background-red: #ff4e4226;
}
:host-context(.-theme-with-dark-background) .CodeMirror,
.-theme-with-dark-background .CodeMirror {
- --breakpoint-background-red: #FF4E4233;
+ --breakpoint-background-red: #ff4e4233;
}
.CodeMirror {
- line-height: 1.2em !important;
- background-color: transparent !important;
- color: #222;
- height: 300px;
+ line-height: 1.2em !important;
+ background-color: transparent !important;
+ color: #222;
+ height: 300px;
}
.CodeMirror-linewidget {
- overflow: visible !important;
+ overflow: visible !important;
}
.CodeMirror-gutter-performance {
- width: 60px;
- background-color: white;
- margin-left: 3px;
+ width: 60px;
+ background-color: white;
+ margin-left: 3px;
}
.CodeMirror-gutter-memory {
- width: 48px;
- background-color: white;
- margin-left: 3px;
+ width: 48px;
+ background-color: white;
+ margin-left: 3px;
}
.CodeMirror-gutter-coverage {
- width: 5px;
- background-color: white;
- margin-left: 3px;
+ width: 5px;
+ background-color: white;
+ margin-left: 3px;
}
.CodeMirror-gutter-breakpoints {
- width: 10px;
- margin: 0 -4px 0 2px;
- pointer-events: none;
- cursor: default;
+ width: 10px;
+ margin: 0 -4px 0 2px;
+ pointer-events: none;
+ cursor: default;
}
.CodeMirror .source-frame-eval-expression {
- outline: 0;
- border: 1px solid rgb(163, 41, 34);
- border-left-width: 0;
- border-right-width: 0;
- background-color: rgb(255, 255, 194);
+ outline: 0;
+ border: 1px solid rgb(163, 41, 34);
+ border-left-width: 0;
+ border-right-width: 0;
+ background-color: rgb(255, 255, 194);
}
.CodeMirror .source-frame-eval-expression-start {
- border-left-width: 1px;
- margin-left: -1px;
+ border-left-width: 1px;
+ margin-left: -1px;
}
.CodeMirror .source-frame-eval-expression-end {
- border-right-width: 1px;
- margin-right: -1px;
+ border-right-width: 1px;
+ margin-right: -1px;
}
.CodeMirror .source-frame-continue-to-location {
- outline: 0;
- border: 1px solid transparent;
- border-left-width: 0;
- border-right-width: 0;
- background-color: rgb(230, 236, 255);
- cursor: pointer;
+ outline: 0;
+ border: 1px solid transparent;
+ border-left-width: 0;
+ border-right-width: 0;
+ background-color: rgb(230, 236, 255);
+ cursor: pointer;
}
.CodeMirror .source-frame-continue-to-location:hover {
- border: 1px solid rgb(121, 141, 254);
- background-color: rgb(171, 191, 254);
+ border: 1px solid rgb(121, 141, 254);
+ background-color: rgb(171, 191, 254);
}
:host-context(.-theme-with-dark-background) .CodeMirror .source-frame-continue-to-location,
.-theme-with-dark-background .CodeMirror .source-frame-continue-to-location {
- background-color: #14522b;
+ background-color: #14522b;
}
:host-context(.-theme-with-dark-background) .CodeMirror .source-frame-continue-to-location:hover,
.-theme-with-dark-background .CodeMirror .source-frame-continue-to-location:hover {
- border: 1px solid #33cc6b;
- background-color: #14522b;
+ border: 1px solid #33cc6b;
+ background-color: #14522b;
}
.CodeMirror .source-frame-continue-to-location-start {
- border-left-width: 1px;
- margin-left: -1px;
+ border-left-width: 1px;
+ margin-left: -1px;
}
.CodeMirror .source-frame-continue-to-location-end {
- border-right-width: 1px;
- margin-right: -1px;
+ border-right-width: 1px;
+ margin-right: -1px;
}
.CodeMirror .source-frame-async-step-in {
- outline: 0;
- background-color: hsla(100, 46%, 80%, 1);
- cursor: pointer;
- border: 1px solid transparent;
- border-left-width: 0;
- border-right-width: 0;
+ outline: 0;
+ background-color: hsla(100, 46%, 80%, 1);
+ cursor: pointer;
+ border: 1px solid transparent;
+ border-left-width: 0;
+ border-right-width: 0;
}
.source-frame-async-step-in-hovered .source-frame-async-step-in {
- background-color: hsl(96, 53%, 65%);
- border-color: rgb(100, 154, 100);
+ background-color: hsl(96, 53%, 65%);
+ border-color: rgb(100, 154, 100);
}
.source-frame-async-step-in-hovered .source-frame-async-step-in-start {
- border-left-width: 1px;
- margin-left: -1px;
+ border-left-width: 1px;
+ margin-left: -1px;
}
.source-frame-async-step-in-hovered .source-frame-async-step-in-end {
- border-right-width: 1px;
- margin-right: -1px;
+ border-right-width: 1px;
+ margin-right: -1px;
}
.CodeMirror-readonly .CodeMirror-cursor {
- display: none;
+ display: none;
}
.CodeMirror-gutters {
- border-right: 1px solid var(--divider-color);
- white-space: nowrap;
- background-color: white;
+ border-right: 1px solid var(--divider-color);
+ white-space: nowrap;
+ background-color: white;
}
.CodeMirror-linenumber {
- color: hsl(0, 0%, 46%);
- padding: 0 3px 0 5px;
- min-width: 22px;
- text-align: right;
- white-space: nowrap;
+ color: hsl(0, 0%, 46%);
+ padding: 0 3px 0 5px;
+ min-width: 22px;
+ text-align: right;
+ white-space: nowrap;
}
.pretty-printed .CodeMirror-linenumber {
- color: var(--accent-color);
+ color: var(--accent-color);
}
.cm-highlight {
- -webkit-animation: fadeout 2s 0s;
+ -webkit-animation: fadeout 2s 0s;
}
+
:host-context(.-theme-with-dark-background) .cm-highlight,
.-theme-with-dark-background .cm-highlight {
- -webkit-animation: fadeout-dark 2s 0s;
+ -webkit-animation: fadeout-dark 2s 0s;
}
+
@-webkit-keyframes fadeout {
- from {background-color: rgb(255, 255, 120); }
- to { background-color: white; }
+ from { background-color: rgb(255, 255, 120); }
+ to { background-color: white; }
}
+
@-webkit-keyframes fadeout-dark {
- from {background-color: hsla(133, 100%, 30%, 0.5); }
- to { background-color: transparent; }
+ from { background-color: hsla(133, 100%, 30%, 0.5); }
+ to { background-color: transparent; }
}
.cm-readonly-highlight {
- background-color: rgb(255, 255, 120);
+ background-color: rgb(255, 255, 120);
}
+
:host-context(.-theme-with-dark-background) .cm-readonly-highlight,
.-theme-with-dark-background .cm-readonly-highlight {
- background-color: hsla(133, 100%, 30%, 0.5);
+ background-color: hsla(133, 100%, 30%, 0.5);
}
.cm-highlight.cm-execution-line {
- -webkit-animation: fadeout-execution-line 1s 0s;
+ -webkit-animation: fadeout-execution-line 1s 0s;
}
+
:host-context(.-theme-with-dark-background) .cm-highlight.cm-execution-line,
.-theme-with-dark-background .cm-highlight.cm-execution-line {
- -webkit-animation: fadeout-execution-line-dark 1s 0s;
+ -webkit-animation: fadeout-execution-line-dark 1s 0s;
}
@-webkit-keyframes fadeout-execution-line {
- from {background-color: rgb(121, 141, 254); }
- to { background-color: rgb(171, 191, 254); }
+ from { background-color: rgb(121, 141, 254); }
+ to { background-color: rgb(171, 191, 254); }
}
+
@-webkit-keyframes fadeout-execution-line-dark {
- from {background-color: #208043; }
- to { background-color: #14522b; }
+ from { background-color: #208043; }
+ to { background-color: #14522b; }
}
.cm-non-breakable-line .CodeMirror-linenumber {
- color: rgba(128, 128, 128, 0.4);
+ color: rgba(128, 128, 128, 0.4);
}
.breakpoint-element {
- padding-top: 1.5px;
+ padding-top: 1.5px;
}
.breakpoint-element::before {
- content: "\00AD";
+ content: "\00AD";
}
.CodeMirror-gutter-background.cm-breakpoint {
- background-color: var(--breakpoint-background-red);
+ background-color: var(--breakpoint-background-red);
}
.cm-breakpoint .breakpoint-element::before {
- content: url(Images/breakpoint.svg);
+ content: url(Images/breakpoint.svg);
}
.breakpoints-deactivated .cm-breakpoint .breakpoint-element::before,
.cm-breakpoint-unbound .breakpoint-element::before,
.cm-breakpoint-disabled .breakpoint-element::before {
- content: url(Images/breakpoint-disabled.svg);
+ content: url(Images/breakpoint-disabled.svg);
}
.cm-breakpoint.cm-breakpoint-conditional .breakpoint-element::before {
- content: url(Images/breakpoint-conditional.svg);
+ content: url(Images/breakpoint-conditional.svg);
}
.cm-breakpoint-disabled.cm-breakpoint-conditional .breakpoint-element::before,
.cm-breakpoint-unbound.cm-breakpoint-conditional .breakpoint-element::before,
.breakpoints-deactivated .cm-breakpoint.cm-breakpoint-conditional .breakpoint-element::before {
- content: url(Images/breakpoint-conditional-disabled.svg);
+ content: url(Images/breakpoint-conditional-disabled.svg);
}
.cm-breakpoint.cm-breakpoint-logpoint .breakpoint-element::before {
- content: url(Images/logpoint.svg);
+ content: url(Images/logpoint.svg);
}
.cm-breakpoint-disabled.cm-breakpoint-logpoint .breakpoint-element::before,
.cm-breakpoint-unbound.cm-breakpoint-logpoint .breakpoint-element::before,
.breakpoints-deactivated .cm-breakpoint.cm-breakpoint-logpoint .breakpoint-element::before {
- content: url(Images/logpoint-disabled.svg);
+ content: url(Images/logpoint-disabled.svg);
}
.cm-inline-breakpoint {
- cursor: pointer;
- padding-left: 1px;
- padding-right: 2px;
- position:relative;
- top: 1px;
+ cursor: pointer;
+ padding-left: 1px;
+ padding-right: 2px;
+ position: relative;
+ top: 1px;
}
.cm-inline-breakpoint::before {
- content: url(Images/breakpoint.svg);
+ content: url(Images/breakpoint.svg);
}
.cm-inline-breakpoint.cm-inline-disabled::before {
- content: url(Images/breakpoint-disabled.svg);
+ content: url(Images/breakpoint-disabled.svg);
}
.breakpoints-deactivated .cm-inline-breakpoint::before {
- content: url(Images/breakpoint-disabled.svg);
+ content: url(Images/breakpoint-disabled.svg);
}
.cm-inline-breakpoint.cm-inline-breakpoint-conditional::before {
- content: url(Images/breakpoint-conditional.svg);
+ content: url(Images/breakpoint-conditional.svg);
}
.cm-inline-breakpoint.cm-inline-breakpoint-conditional.cm-inline-disabled::before {
- content: url(Images/breakpoint-conditional-disabled.svg);
+ content: url(Images/breakpoint-conditional-disabled.svg);
}
.breakpoints-deactivated .cm-inline-breakpoint.cm-inline-breakpoint-conditional::before {
- content: url(Images/breakpoint-conditional-disabled.svg);
+ content: url(Images/breakpoint-conditional-disabled.svg);
}
.cm-inline-breakpoint.cm-inline-logpoint::before {
- content: url(Images/logpoint.svg);
+ content: url(Images/logpoint.svg);
}
.cm-inline-breakpoint.cm-inline-logpoint.cm-inline-disabled::before {
- content: url(Images/logpoint-disabled.svg);
+ content: url(Images/logpoint-disabled.svg);
}
.breakpoints-deactivated .cm-inline-breakpoint.cm-inline-logpoint::before {
- content: url(Images/logpoint-disabled.svg);
+ content: url(Images/logpoint-disabled.svg);
}
.cm-execution-line-tail + .CodeMirror-widget {
- background-color: #abbffe;
+ background-color: #abbffe;
}
.source-frame-eval-expression + .CodeMirror-widget {
- border: 1px solid rgb(163, 41, 34);
- border-left-width: 0;
- border-right-width: 0;
- background-color: rgb(255, 255, 194);
+ border: 1px solid rgb(163, 41, 34);
+ border-left-width: 0;
+ border-right-width: 0;
+ background-color: rgb(255, 255, 194);
}
.cm-inline-breakpoint.cm-execution-line-tail {
- background-color: #698cfe;
+ background-color: #698cfe;
}
.cm-execution-line-tail .cm-inline-breakpoint {
- background-color: white
+ background-color: white;
}
.cm-inline-breakpoint.cm-inline-conditional {
- background-color: #ef9d0d;
+ background-color: #ef9d0d;
}
.cm-continue-to-location {
- cursor: pointer;
- opacity: 0.8;
- position: relative;
- top: 2px;
+ cursor: pointer;
+ opacity: 0.8;
+ position: relative;
+ top: 2px;
}
.cm-continue-to-location:hover {
- opacity: 1;
+ opacity: 1;
}
div.CodeMirror:focus-within span.CodeMirror-matchingbracket {
- background-color: rgba(0, 0, 0, 0.07);
- border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+ background-color: rgba(0, 0, 0, 0.07);
+ border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket {
- background-color: rgba(255, 0, 0, 0.07);
- border-bottom: 1px solid rgba(255, 0, 0, 0.5);
+ background-color: rgba(255, 0, 0, 0.07);
+ border-bottom: 1px solid rgba(255, 0, 0, 0.5);
}
:host-context(.-theme-with-dark-background) div.CodeMirror:focus-within span.CodeMirror-matchingbracket,
.-theme-with-dark-background div.CodeMirror:focus-within span.CodeMirror-matchingbracket {
- border-bottom: 1px solid rgb(217,217,217);
- background-color:initial;
+ border-bottom: 1px solid rgb(217, 217, 217);
+ background-color: initial;
}
:host-context(.-theme-with-dark-background) div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket,
.-theme-with-dark-background div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket {
- border-bottom: 1px solid rgb(255, 26, 26);
- background-color:initial;
+ border-bottom: 1px solid rgb(255, 26, 26);
+ background-color: initial;
}
.cm-whitespace::before {
- position: absolute;
- pointer-events: none;
- color: rgb(175, 175, 175);
+ position: absolute;
+ pointer-events: none;
+ color: rgb(175, 175, 175);
}
.cm-tab {
- display: inline-block;
- text-decoration: inherit;
- position: relative;
+ display: inline-block;
+ text-decoration: inherit;
+ position: relative;
}
.cm-tab::before {
- display: none;
- content: ".";
- color: transparent;
- border-bottom: 1px solid rgb(175, 175, 175);
- position: absolute;
- width: 90%;
- bottom: 50%;
- left: 5%;
+ display: none;
+ content: ".";
+ color: transparent;
+ border-bottom: 1px solid rgb(175, 175, 175);
+ position: absolute;
+ width: 90%;
+ bottom: 50%;
+ left: 5%;
}
.show-whitespaces .CodeMirror .cm-tab::before {
- display: block !important;
+ display: block !important;
}
.cm-execution-line {
- background-color: rgba(0, 59, 255, 0.10);
+ background-color: rgba(0, 59, 255, 0.1);
}
.cm-execution-line-outline {
- outline: 1px solid rgb(64, 115, 244);
+ outline: 1px solid rgb(64, 115, 244);
}
.cm-execution-line-tail {
- background-color: rgb(171, 191, 254);
+ background-color: rgb(171, 191, 254);
}
:host-context(.-theme-with-dark-background) .cm-execution-line,
.-theme-with-dark-background .cm-execution-line {
- background-color: #14522b;
+ background-color: #14522b;
}
:host-context(.-theme-with-dark-background) .cm-execution-line-outline,
.-theme-with-dark-background .cm-execution-line-outline {
- outline: 1px solid #33cc6b;
+ outline: 1px solid #33cc6b;
}
:host-context(.-theme-with-dark-background) .cm-execution-line-tail,
.-theme-with-dark-background .cm-execution-line-tail {
- background-color: #347132;
+ background-color: #347132;
}
.cm-token-highlight {
- position: relative;
+ position: relative;
}
.cm-token-highlight::before {
- position: absolute;
- border: 1px solid gray;
- border-radius: 3px;
- top: 0;
- bottom: -1px;
- left: 0;
- right: 0;
- content: "";
+ position: absolute;
+ border: 1px solid gray;
+ border-radius: 3px;
+ top: 0;
+ bottom: -1px;
+ left: 0;
+ right: 0;
+ content: "";
}
.cm-line-with-selection .cm-column-with-selection::before {
- border: none;
+ border: none;
}
.cm-search-highlight {
- position: relative;
+ position: relative;
}
.cm-search-highlight::before {
- position: absolute;
- border-top-style: solid;
- border-bottom-style: solid;
- border-top-color: gray;
- border-bottom-color: gray;
- border-top-width: 1px;
- border-bottom-width: 1px;
- top: -1px;
- bottom: 0;
- left: 0;
- right: 0;
- content: "";
+ position: absolute;
+ border-top-style: solid;
+ border-bottom-style: solid;
+ border-top-color: gray;
+ border-bottom-color: gray;
+ border-top-width: 1px;
+ border-bottom-width: 1px;
+ top: -1px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ content: "";
}
.cm-search-highlight-full::before {
- border: 1px solid gray;
- border-radius: 3px;
+ border: 1px solid gray;
+ border-radius: 3px;
}
.cm-search-highlight-start::before {
- border-left-width: 1px;
- border-top-left-radius: 2px;
- border-bottom-left-radius: 2px;
- border-left-style: solid;
- border-left-color: gray;
+ border-left-width: 1px;
+ border-top-left-radius: 2px;
+ border-bottom-left-radius: 2px;
+ border-left-style: solid;
+ border-left-color: gray;
}
.cm-search-highlight-end::before {
- border-right-width: 1px;
- border-top-right-radius: 2px;
- border-bottom-right-radius: 2px;
- border-right-style: solid;
- border-right-color: gray;
+ border-right-width: 1px;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-right-style: solid;
+ border-right-color: gray;
}
.cm-line-with-selection .cm-column-with-selection.cm-search-highlight-full::before {
- border-radius: 1px;
+ border-radius: 1px;
}
.cm-line-with-selection .cm-column-with-selection.cm-search-highlight-start::before {
- border-top-left-radius: 1px;
- border-bottom-left-radius: 1px;
+ border-top-left-radius: 1px;
+ border-bottom-left-radius: 1px;
}
.cm-line-with-selection .cm-column-with-selection.cm-search-highlight-end::before {
- border-top-right-radius: 1px;
- border-bottom-right-radius: 1px;
+ border-top-right-radius: 1px;
+ border-bottom-right-radius: 1px;
}
.cm-line-with-selection .cm-column-with-selection.cm-search-highlight::before {
- margin: -1px -1px -1px -1px;
- background-color: rgb(241, 234, 0);
- z-index: -1;
+ margin: -1px -1px -1px -1px;
+ background-color: rgb(241, 234, 0);
+ z-index: -1;
}
:host-context(.-theme-with-dark-background) .cm-line-with-selection .cm-column-with-selection.cm-search-highlight::before,
.-theme-with-dark-background .cm-line-with-selection .cm-column-with-selection.cm-search-highlight::before {
- background-color: hsl(133, 100%, 30%);
+ background-color: hsl(133, 100%, 30%);
}
:host-context(.-theme-with-dark-background) .cm-line-with-selection .cm-search-highlight,
.-theme-with-dark-background .cm-line-with-selection .cm-search-highlight {
- color: #eee;
+ color: #eee;
}
.CodeMirror .text-editor-line-marker-text {
- text-align: right;
- padding-right: 3px;
- height: 12px;
+ text-align: right;
+ padding-right: 3px;
+ height: 12px;
}
.CodeMirror .text-editor-line-marker-text span.line-marker-units {
- color: #555;
- font-size: 75%;
- margin-left: 3px;
+ color: #555;
+ font-size: 75%;
+ margin-left: 3px;
}
.CodeMirror .text-editor-coverage-unused-marker {
- text-align: right;
- padding-right: 2px;
- background-color: #EE442F;
+ text-align: right;
+ padding-right: 2px;
+ background-color: #ee442f;
}
.CodeMirror .text-editor-coverage-unused-marker::after {
- content: "\200B";
+ content: "\200B";
}
.CodeMirror .text-editor-coverage-used-marker {
- text-align: right;
- padding-right: 2px;
- background-color: #63ACBE;
+ text-align: right;
+ padding-right: 2px;
+ background-color: #63acbe;
}
.CodeMirror .text-editor-coverage-used-marker::after {
- content: "\200B";
+ content: "\200B";
}
.CodeMirror .text-editor-line-decoration {
- position: absolute;
+ position: absolute;
}
.CodeMirror .text-editor-line-decoration-wave {
- position: absolute;
- top: -2px;
- right: -4px;
- left: 4px;
- cursor: pointer;
- height: 4px;
+ position: absolute;
+ top: -2px;
+ right: -4px;
+ left: 4px;
+ cursor: pointer;
+ height: 4px;
}
.CodeMirror .text-editor-value-decoration {
- position: absolute;
- bottom: 0;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 1000px;
- opacity: 0.8;
- background-color: #FFE3C7;
- margin-left: 10px;
- padding-left: 5px;
- color: #222;
- user-select: text;
+ position: absolute;
+ bottom: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 1000px;
+ opacity: 0.8;
+ background-color: #ffe3c7;
+ margin-left: 10px;
+ padding-left: 5px;
+ color: #222;
+ user-select: text;
}
.CodeMirror .cm-execution-line .text-editor-value-decoration {
- background-color: transparent;
- opacity: 0.5;
+ background-color: transparent;
+ opacity: 0.5;
}
.CodeMirror .text-editor-line-decoration-icon {
- position: absolute;
- cursor: pointer;
- right: -16px;
- top: -9px;
+ position: absolute;
+ cursor: pointer;
+ right: -16px;
+ top: -9px;
}
.CodeMirror .text-editor-line-with-warning:not(.cm-execution-line):not(.cm-readonly-highlight) {
- background-color: rgba(241, 230, 0, 0.1);
+ background-color: rgba(241, 230, 0, 0.1);
}
.CodeMirror .text-editor-line-with-error:not(.cm-execution-line):not(.cm-readonly-highlight) {
- background-color: rgba(255, 0, 0, 0.05);
+ background-color: rgba(255, 0, 0, 0.05);
}
.CodeMirror .text-editor-line-decoration-wave {
- background-image: url(Images/errorWave.svg);
- background-repeat: repeat-x;
- background-size: contain;
+ background-image: url(Images/errorWave.svg);
+ background-repeat: repeat-x;
+ background-size: contain;
}
/** @see crbug.com/358161 */
-.CodeMirror .CodeMirror-vscrollbar, .CodeMirror .CodeMirror-hscrollbar {
- transform: translateZ(0);
+
+.CodeMirror .CodeMirror-vscrollbar,
+.CodeMirror .CodeMirror-hscrollbar {
+ transform: translateZ(0);
}
.cm-trailing-whitespace {
- background-color: rgba(255, 0, 0, 0.05);
+ background-color: rgba(255, 0, 0, 0.05);
}
.CodeMirror-activeline .cm-trailing-whitespace {
- background-color: transparent;
+ background-color: transparent;
}
:host-context(.-theme-with-dark-background) .CodeMirror .CodeMirror-selected,
.-theme-with-dark-background .CodeMirror .CodeMirror-selected {
- background-color: #454545;
+ background-color: #454545;
}
.CodeMirror .auto-complete-text {
- color: rgb(128,128,128);
+ color: rgb(128, 128, 128);
}
.CodeMirror .placeholder-text {
- height: 0;
- color: rgb(128,128,128);
+ height: 0;
+ color: rgb(128, 128, 128);
}
/** Prevent the codemirror textarea from stealing PageUp events **/
+
.CodeMirror textarea {
- resize: none;
- overflow: hidden;
+ resize: none;
+ overflow: hidden;
}
.CodeMirror-lines {
- padding: 4px 0; /* Vertical padding around content */
+ padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
- padding: 0 4px; /* Horizontal padding of content */
+ padding: 0 4px; /* Horizontal padding of content */
}
-.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
- background-color: white; /* The little square between H and V scrollbars */
+.CodeMirror-scrollbar-filler,
+.CodeMirror-gutter-filler {
+ background-color: white; /* The little square between H and V scrollbars */
}
.CodeMirror-cursor {
- border-left: 1px solid black;
- border-right: none;
- width: 0;
+ border-left: 1px solid black;
+ border-right: none;
+ width: 0;
}
/* Shown when moving in bi-directional text */
+
.CodeMirror div.CodeMirror-secondarycursor {
- border-left: 1px solid silver;
+ border-left: 1px solid silver;
}
.CodeMirror-composing {
- border-bottom: 2px solid;
+ border-bottom: 2px solid;
}
.pretty-printed .CodeMirror-linenumber {
- color: var(--accent-color);
+ color: var(--accent-color);
}
.CodeMirror-foldmarker {
- cursor: pointer;
- font-size: 0;
- line-height: 0;
- height:0px;
+ cursor: pointer;
+ font-size: 0;
+ line-height: 0;
+ height: 0;
}
.CodeMirror-foldmarker::before {
- content: '\2026';
- font-size: 13px;
- color: #666;
+ content: '\2026';
+ font-size: 13px;
+ color: #666;
}
.CodeMirror-foldgutter {
- width: 1.5em;
+ width: 1.5em;
}
.CodeMirror-gutters:hover .CodeMirror-foldgutter {
- background-color: transparent;
+ background-color: transparent;
}
.CodeMirror-foldgutter-open,
.CodeMirror-foldgutter-folded {
- cursor: pointer;
- position: relative;
+ cursor: pointer;
+ position: relative;
}
.CodeMirror-foldgutter-open {
- transition: opacity .2s;
- opacity: 0;
+ transition: opacity 0.2s;
+ opacity: 0;
}
.CodeMirror-gutter-hovered .CodeMirror-foldgutter-open {
- opacity: 1;
+ opacity: 1;
}
.CodeMirror-foldgutter-open::before,
.CodeMirror-foldgutter-folded::before {
- background-color: #727272;
- user-select: none;
- -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
- -webkit-mask-size: 32px 24px;
- content: "";
- display:block;
- width: 8px;
- color: transparent;
- text-shadow: none;
- height: 12px;
- position: absolute;
- right: 4px;
+ background-color: #727272;
+ user-select: none;
+ -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+ -webkit-mask-size: 32px 24px;
+ content: "";
+ display: block;
+ width: 8px;
+ color: transparent;
+ text-shadow: none;
+ height: 12px;
+ position: absolute;
+ right: 4px;
}
.CodeMirror-foldgutter-open::before {
- -webkit-mask-position: -16px 0;
+ -webkit-mask-position: -16px 0;
}
.CodeMirror-foldgutter-folded::before {
- -webkit-mask-position: 0 0;
+ -webkit-mask-position: 0 0;
}
.CodeMirror .CodeMirror-selected {
- background-color: var(--item-selection-inactive-bg-color);
+ background-color: var(--item-selection-inactive-bg-color);
}
.CodeMirror-focused .CodeMirror-selected {
- background-color: var(--item-selection-bg-color);
+ background-color: var(--item-selection-bg-color);
}
.CodeMirror .CodeMirror-line::selection,
.CodeMirror .CodeMirror-line > span::selection,
.CodeMirror .CodeMirror-line > span > span::selection {
- background: var(--item-selection-bg-color);
+ background: var(--item-selection-bg-color);
}
@media (forced-colors: active) {
- .cm-token-highlight::before {
- forced-color-adjust: none;
- border-color: Highlight;
- }
+ .cm-token-highlight::before {
+ forced-color-adjust: none;
+ border-color: Highlight;
+ }
}
diff --git a/front_end/timeline/historyToolbarButton.css b/front_end/timeline/historyToolbarButton.css
index ab66194..744fbc3 100644
--- a/front_end/timeline/historyToolbarButton.css
+++ b/front_end/timeline/historyToolbarButton.css
@@ -17,7 +17,7 @@
}
.history-dropdown-button[disabled] {
- opacity: .5;
+ opacity: 0.5;
border: 1px solid transparent;
}
@@ -33,8 +33,8 @@
content: "";
position: absolute;
top: 2px;
- left: 0px;
- right: 0px;
+ left: 0;
+ right: 0;
bottom: 2px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.08);
@@ -44,6 +44,7 @@
.history-dropdown-button[disabled] {
opacity: 1;
}
+
.history-dropdown-button[disabled] [is=ui-icon].icon-mask {
background-color: GrayText;
}
diff --git a/front_end/timeline/invalidationsTree.css b/front_end/timeline/invalidationsTree.css
index 98d5004..390b394 100644
--- a/front_end/timeline/invalidationsTree.css
+++ b/front_end/timeline/invalidationsTree.css
@@ -4,25 +4,29 @@
* found in the LICENSE file.
*/
-.header, .children, .content {
- min-height: initial;
- line-height: initial;
+.header,
+.children,
+.content {
+ min-height: initial;
+ line-height: initial;
}
/* This TreeElement is always expanded and has no arrow. */
+
/* FIXME(crbug.com/475618): Implement this in TreeElement. */
+
.children li::before {
- display: none;
+ display: none;
}
.content {
- margin-bottom: 4px;
+ margin-bottom: 4px;
}
.content .stack-preview-container {
- margin-left: 8px;
+ margin-left: 8px;
}
.content .node-list {
- margin-left: 10px;
+ margin-left: 10px;
}
diff --git a/front_end/timeline/timelineFlamechartPopover.css b/front_end/timeline/timelineFlamechartPopover.css
index dacf7d1..38d1162 100644
--- a/front_end/timeline/timelineFlamechartPopover.css
+++ b/front_end/timeline/timelineFlamechartPopover.css
@@ -5,25 +5,25 @@
*/
.timeline-flamechart-popover {
- overflow: hidden;
+ overflow: hidden;
}
.timeline-flamechart-popover span {
- margin-right: 5px;
+ margin-right: 5px;
}
.timeline-flamechart-popover span.timeline-info-network-time {
- color: #009;
+ color: #009;
}
.timeline-flamechart-popover span.timeline-info-time {
- color: #282;
+ color: #282;
}
.timeline-flamechart-popover span.timeline-info-warning {
- color: #e44;
+ color: #e44;
}
.timeline-flamechart-popover span.timeline-info-warning * {
- color: inherit;
+ color: inherit;
}
diff --git a/front_end/timeline/timelineHistoryManager.css b/front_end/timeline/timelineHistoryManager.css
index 4068fa4..59d72e0 100644
--- a/front_end/timeline/timelineHistoryManager.css
+++ b/front_end/timeline/timelineHistoryManager.css
@@ -14,7 +14,7 @@
border-color: transparent;
border-style: solid;
border-width: 1px 5px;
- padding: 2px 0px;
+ padding: 2px 0;
margin: 2px 1px;
}
diff --git a/front_end/timeline/timelinePaintProfiler.css b/front_end/timeline/timelinePaintProfiler.css
index 979c913..640fb1f 100644
--- a/front_end/timeline/timelinePaintProfiler.css
+++ b/front_end/timeline/timelinePaintProfiler.css
@@ -5,22 +5,22 @@
*/
.paint-profiler-image-view {
- overflow: hidden;
+ overflow: hidden;
}
.paint-profiler-image-view .paint-profiler-image-container {
- -webkit-transform-origin: 0 0;
+ -webkit-transform-origin: 0 0;
}
.paint-profiler-image-view .paint-profiler-image-container div {
- border-color: rgba(100, 100, 100, 0.4);
- border-style: solid;
- z-index: 100;
- position: absolute;
- top: 0;
- left: 0;
+ border-color: rgba(100, 100, 100, 0.4);
+ border-style: solid;
+ z-index: 100;
+ position: absolute;
+ top: 0;
+ left: 0;
}
.paint-profiler-image-view img {
- border: solid 1px black;
+ border: solid 1px black;
}
diff --git a/front_end/timeline/timelinePanel.css b/front_end/timeline/timelinePanel.css
index 112bf69..f06fee0 100644
--- a/front_end/timeline/timelinePanel.css
+++ b/front_end/timeline/timelinePanel.css
@@ -28,601 +28,604 @@
*/
.timeline-toolbar-container {
- display: flex;
- flex: none;
+ display: flex;
+ flex: none;
}
.timeline-toolbar-container > .toolbar {
- background-color: var(--toolbar-bg-color);
- border-bottom: var(--divider-border);
+ background-color: var(--toolbar-bg-color);
+ border-bottom: var(--divider-border);
}
.timeline-main-toolbar {
- flex: 1 1 auto;
+ flex: 1 1 auto;
}
.timeline-settings-pane {
- flex: none;
- background-color: var(--toolbar-bg-color);
- border-bottom: var(--divider-border);
+ flex: none;
+ background-color: var(--toolbar-bg-color);
+ border-bottom: var(--divider-border);
}
#timeline-overview-panel {
- flex: none;
- position: relative;
- border-bottom: 1px solid #bbb;
+ flex: none;
+ position: relative;
+ border-bottom: 1px solid #bbb;
}
#timeline-overview-grid {
- background-color: rgb(255, 255, 255);
+ background-color: rgb(255, 255, 255);
}
#timeline-overview-grid .timeline-grid-header {
- height: 12px;
+ height: 12px;
}
#timeline-overview-grid .resources-dividers-label-bar {
- pointer-events: auto;
- height: 12px;
+ pointer-events: auto;
+ height: 12px;
}
#timeline-overview-grid .resources-divider-label {
- top: 1px;
+ top: 1px;
}
.timeline-details-split {
- flex: auto;
+ flex: auto;
}
.timeline.panel .status-pane-container {
- z-index: 1000;
- display: flex;
- align-items: center;
- pointer-events: none;
+ z-index: 1000;
+ display: flex;
+ align-items: center;
+ pointer-events: none;
}
.timeline.panel .status-pane-container.tinted {
- background-color: lightgray;
- pointer-events: auto;
+ background-color: lightgray;
+ pointer-events: auto;
}
.timeline.panel .status-pane-container > div {
- pointer-events: auto;
+ pointer-events: auto;
}
#timeline-overview-panel .overview-strip {
- margin-top: 2px;
- justify-content: center;
+ margin-top: 2px;
+ justify-content: center;
}
#timeline-overview-panel .overview-strip .timeline-overview-strip-title {
- color: #666;
- font-size: 10px;
- font-weight: bold;
- z-index: 100;
- background-color: rgba(255, 255, 255, 0.7);
- padding: 0 4px;
- position: absolute;
- top: -2px;
- right: 0;
+ color: #666;
+ font-size: 10px;
+ font-weight: bold;
+ z-index: 100;
+ background-color: rgba(255, 255, 255, 0.7);
+ padding: 0 4px;
+ position: absolute;
+ top: -2px;
+ right: 0;
}
#timeline-overview-cpu-activity {
- flex-basis: 20px;
+ flex-basis: 20px;
}
#timeline-overview-network {
- flex-basis: 8px;
+ flex-basis: 8px;
}
#timeline-overview-framerate {
- flex-basis: 16px;
- margin-top: 0 !important;
+ flex-basis: 16px;
+ margin-top: 0 !important;
}
#timeline-overview-filmstrip {
- flex-basis: 30px;
+ flex-basis: 30px;
}
#timeline-overview-memory {
- flex-basis: 20px;
+ flex-basis: 20px;
}
#timeline-overview-framerate::before,
#timeline-overview-network::before,
#timeline-overview-cpu-activity::before {
- content: "";
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- border-bottom: 1px solid hsla(0, 0%, 0%, 0.06);
- z-index: -200;
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border-bottom: 1px solid hsla(0, 0%, 0%, 0.06);
+ z-index: -200;
}
.overview-strip .background {
- z-index: -10;
+ z-index: -10;
}
#timeline-overview-responsiveness {
- flex-basis: 5px;
- margin-top: 0 !important;
+ flex-basis: 5px;
+ margin-top: 0 !important;
}
#timeline-overview-input {
- flex-basis: 6px;
+ flex-basis: 6px;
}
#timeline-overview-pane {
- flex: auto;
- position: relative;
- overflow: hidden;
+ flex: auto;
+ position: relative;
+ overflow: hidden;
}
#timeline-overview-container {
- display: flex;
- flex-direction: column;
- flex: none;
- position: relative;
- overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ flex: none;
+ position: relative;
+ overflow: hidden;
}
#timeline-overview-container canvas {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
.popover ul {
- margin: 0;
- padding: 0;
- list-style-type: none;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
}
.memory-graph-label {
- position: absolute;
- right: 0;
- bottom: 0;
- font-size: 9px;
- color: #888;
- white-space: nowrap;
- padding: 0 4px;
- background-color: hsla(0, 0%, 100%, 0.8);
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ font-size: 9px;
+ color: #888;
+ white-space: nowrap;
+ padding: 0 4px;
+ background-color: hsla(0, 0%, 100%, 0.8);
}
#memory-graphs-canvas-container {
- overflow: hidden;
- flex: auto;
- position: relative;
+ overflow: hidden;
+ flex: auto;
+ position: relative;
}
#memory-counters-graph {
- flex: auto;
+ flex: auto;
}
#memory-graphs-canvas-container .memory-counter-marker {
- position: absolute;
- border-radius: 3px;
- width: 5px;
- height: 5px;
- margin-left: -3px;
- margin-top: -2px;
+ position: absolute;
+ border-radius: 3px;
+ width: 5px;
+ height: 5px;
+ margin-left: -3px;
+ margin-top: -2px;
}
#memory-graphs-container .timeline-memory-header {
- flex: 0 0 26px;
- background-color: #eee;
- border-bottom: 1px solid #ddd;
- justify-content: space-between;
+ flex: 0 0 26px;
+ background-color: #eee;
+ border-bottom: 1px solid #ddd;
+ justify-content: space-between;
}
#memory-graphs-container .timeline-memory-header::after {
- content: "";
- background-image: url(Images/toolbarResizerVertical.png);
- background-repeat: no-repeat;
- background-position: right center, center;
- flex: 20px 0 0;
- margin: 0 4px;
+ content: "";
+ background-image: url(Images/toolbarResizerVertical.png);
+ background-repeat: no-repeat;
+ background-position: right center, center;
+ flex: 20px 0 0;
+ margin: 0 4px;
}
.timeline-memory-toolbar {
- flex-shrink: 1;
+ flex-shrink: 1;
}
.memory-counter-value {
- margin: 8px;
+ margin: 8px;
}
#counter-values-bar {
- flex: 0 0 20px;
- border-top: solid 1px lightgray;
- width: 100%;
- overflow: hidden;
- line-height: 18px;
+ flex: 0 0 20px;
+ border-top: solid 1px lightgray;
+ width: 100%;
+ overflow: hidden;
+ line-height: 18px;
}
#timeline-overview-coverage {
- flex-basis: 20px;
+ flex-basis: 20px;
}
.timeline-overview-coverage-label {
- position: absolute;
- right: 0;
- bottom: 0;
- font-size: 9px;
- color: #888;
- white-space: nowrap;
- padding: 0 4px;
- background-color: hsla(0, 0%, 100%, 0.8);
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ font-size: 9px;
+ color: #888;
+ white-space: nowrap;
+ padding: 0 4px;
+ background-color: hsla(0, 0%, 100%, 0.8);
}
.timeline-details {
- vertical-align: top;
+ vertical-align: top;
}
.timeline-details-title {
- border-bottom: 1px solid #B8B8B8;
- font-weight: bold;
- padding-bottom: 5px;
- padding-top: 0;
- white-space: nowrap;
+ border-bottom: 1px solid #b8b8b8;
+ font-weight: bold;
+ padding-bottom: 5px;
+ padding-top: 0;
+ white-space: nowrap;
}
.timeline-details-row-title {
- font-weight: bold;
- text-align: right;
- white-space: nowrap;
+ font-weight: bold;
+ text-align: right;
+ white-space: nowrap;
}
.timeline-details-row-data {
- white-space: nowrap;
+ white-space: nowrap;
}
.timeline-details-view {
- color: #333;
- overflow: hidden;
+ color: #333;
+ overflow: hidden;
}
.timeline-details-view-body {
- flex: auto;
- overflow: auto;
- position: relative;
- background-color: var(--toolbar-bg-color);
- user-select: text;
+ flex: auto;
+ overflow: auto;
+ position: relative;
+ background-color: var(--toolbar-bg-color);
+ user-select: text;
}
.timeline-details-view-body > div {
- overflow-y: hidden;
- overflow-x: auto;
+ overflow-y: hidden;
+ overflow-x: auto;
}
.timeline-details-view-block {
- flex: none;
- display: flex;
- background-color: white;
- flex-direction: column;
- padding-bottom: 5px;
- border-bottom: var(--divider-border);
+ flex: none;
+ display: flex;
+ background-color: white;
+ flex-direction: column;
+ padding-bottom: 5px;
+ border-bottom: var(--divider-border);
}
.timeline-details-view-row {
- padding-left: 10px;
- line-height: 20px;
+ padding-left: 10px;
+ line-height: 20px;
}
.timeline-details-view-block .timeline-details-stack-values {
- flex-direction: column !important;
+ flex-direction: column !important;
}
.timeline-details-chip-title {
- font-size: 13px;
- padding: 8px;
- display: flex;
- align-items: center;
+ font-size: 13px;
+ padding: 8px;
+ display: flex;
+ align-items: center;
}
.timeline-details-chip-title > div {
- width: 12px;
- height: 12px;
- border: 1px solid rgba(0, 0, 0, 0.2);
- display: inline-block;
- margin-right: 4px;
- content: " ";
+ width: 12px;
+ height: 12px;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ display: inline-block;
+ margin-right: 4px;
+ content: " ";
}
.timeline-details-view-row-title:not(:empty) {
- color: rgb(152, 152, 152);
- overflow: hidden;
- padding-right: 10px;
- display: inline-block;
+ color: rgb(152, 152, 152);
+ overflow: hidden;
+ padding-right: 10px;
+ display: inline-block;
}
.timeline-details-warning {
- background-color: rgba(250, 209, 209, 0.48);
+ background-color: rgba(250, 209, 209, 0.48);
}
.timeline-details-warning .timeline-details-view-row-title {
- color: red;
+ color: red;
}
.timeline-details-warning .timeline-details-view-row-value {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.timeline-details-view-row-value {
- display : inline-block;
- user-select: text;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
+ display: inline-block;
+ user-select: text;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
.timeline-details-view-row-value .stack-preview-container {
- line-height: 11px;
+ line-height: 11px;
}
.timeline-details-view-pie-chart-wrapper {
- margin: 4px 0;
+ margin: 4px 0;
}
.timeline-details-view-pie-chart {
- margin-top: 5px;
+ margin-top: 5px;
}
.timeline-details-view-row-stack-trace {
- padding: 4px 0;
- line-height: inherit;
+ padding: 4px 0;
+ line-height: inherit;
}
.timeline-details-view-row-stack-trace div {
- white-space: nowrap;
- text-overflow: ellipsis;
- line-height: 12px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ line-height: 12px;
}
.timeline-flamechart {
- overflow: hidden;
+ overflow: hidden;
}
.timeline-flamechart-resizer {
- flex: 8px 0 0;
- background-color: var(--toolbar-bg-color);
- border: 1px #a3a3a3;
- border-style: solid none;
- display: flex;
- flex-direction: row;
- align-items: flex-end;
- justify-content: center;
+ flex: 8px 0 0;
+ background-color: var(--toolbar-bg-color);
+ border: 1px #a3a3a3;
+ border-style: solid none;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-end;
+ justify-content: center;
}
.timeline-network-resizer-disabled > .timeline-flamechart-resizer {
- display: none;
+ display: none;
}
-.timeline-flamechart-resizer:after {
- content: "...";
- font-size: 14px;
- margin-bottom: -1px;
+.timeline-flamechart-resizer::after {
+ content: "...";
+ font-size: 14px;
+ margin-bottom: -1px;
}
.timeline-layers-view > div:last-child,
.timeline-layers-view-properties > div:last-child {
- background-color: #eee;
+ background-color: #eee;
}
.timeline-layers-view-properties table {
- width: 100%;
- border-collapse: collapse;
+ width: 100%;
+ border-collapse: collapse;
}
.timeline-layers-view-properties td {
- border: 1px solid #e1e1e1;
- line-height: 22px;
+ border: 1px solid #e1e1e1;
+ line-height: 22px;
}
.timeline-paint-profiler-log-split > div:last-child {
- background-color: #eee;
- z-index: 0;
+ background-color: #eee;
+ z-index: 0;
}
.timeline-filmstrip-preview > img {
- margin-top: 5px;
- max-width: 500px;
- max-height: 300px;
- cursor: pointer;
- border: 1px solid #ddd;
+ margin-top: 5px;
+ max-width: 500px;
+ max-height: 300px;
+ cursor: pointer;
+ border: 1px solid #ddd;
}
.timeline-tree-view {
- display: flex;
- overflow: hidden;
+ display: flex;
+ overflow: hidden;
}
.timeline-tree-view .toolbar {
- background-color: var(--toolbar-bg-color);
- border-bottom: var(--divider-border);
+ background-color: var(--toolbar-bg-color);
+ border-bottom: var(--divider-border);
}
.timeline-tree-view .data-grid {
- border: none;
- flex: auto;
+ border: none;
+ flex: auto;
}
.timeline-tree-view .data-grid .data-container {
- overflow-y: scroll;
+ overflow-y: scroll;
}
.timeline-tree-view .data-grid.data-grid-fits-viewport .corner {
- display: table-cell;
+ display: table-cell;
}
.timeline-tree-view .data-grid table.data {
- background: white;
+ background: white;
}
.timeline-tree-view .data-grid tr:not(.selected) .highlight {
- background-color: rgb(255, 230, 179);
+ background-color: rgb(255, 230, 179);
}
.timeline-tree-view .data-grid tr:hover td:not(.bottom-filler-td) {
- background-color: rgba(0, 0, 0, 0.1);
+ background-color: rgba(0, 0, 0, 0.1);
}
.timeline-tree-view .data-grid td.numeric-column {
- text-align: right;
- position: relative;
+ text-align: right;
+ position: relative;
}
.timeline-tree-view .data-grid div.background-percent-bar {
- float: right;
+ float: right;
}
.timeline-tree-view .data-grid span.percent-column {
- color: #888;
- width: 45px;
- display: inline-block;
+ color: #888;
+ width: 45px;
+ display: inline-block;
}
.timeline-tree-view .data-grid tr.selected span {
- color: inherit;
+ color: inherit;
}
.timeline-tree-view .data-grid .name-container {
- display: flex;
- align-items: center;
- padding-left: 2px;
+ display: flex;
+ align-items: center;
+ padding-left: 2px;
}
.timeline-tree-view .data-grid .name-container div {
- flex: none;
+ flex: none;
}
.timeline-tree-view .data-grid .name-container .activity-icon {
- width: 12px;
- height: 12px;
- border: 1px solid rgba(0, 0, 0, 0.05);
- margin: 3px 0;
+ width: 12px;
+ height: 12px;
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ margin: 3px 0;
}
.timeline-tree-view .data-grid .name-container .activity-icon-container {
- margin-right: 3px;
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- width: 18px;
- height: 18px;
- overflow: hidden;
+ margin-right: 3px;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ width: 18px;
+ height: 18px;
+ overflow: hidden;
}
.timeline-tree-view .data-grid .name-container .activity-warning::after {
- content: "[deopt]";
- margin: 0 4px;
- line-height: 12px;
- font-size: 10px;
- color: #777;
+ content: "[deopt]";
+ margin: 0 4px;
+ line-height: 12px;
+ font-size: 10px;
+ color: #777;
}
.timeline-tree-view .data-grid tr.selected .name-container .activity-warning::after {
- color: white;
+ color: white;
}
.timeline-tree-view .data-grid .name-container .activity-link {
- flex: auto;
- text-align: right;
- overflow: hidden;
- text-overflow: ellipsis;
- margin-left: 5px;
+ flex: auto;
+ text-align: right;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-left: 5px;
}
.timeline-tree-view .data-grid .background-bar-container {
- position: absolute;
- left: 3px;
- right: 0;
+ position: absolute;
+ left: 3px;
+ right: 0;
}
.timeline-tree-view .data-grid .background-bar {
- float: right;
- height: 18px;
- background-color: hsla(43, 84%, 64%, 0.2);
- border-bottom: 1px solid hsl(43, 84%, 64%);
+ float: right;
+ height: 18px;
+ background-color: hsla(43, 84%, 64%, 0.2);
+ border-bottom: 1px solid hsl(43, 84%, 64%);
}
.timeline-tree-view .data-grid .selected .background-bar {
- background-color: rgba(255, 255, 255, 0.3);
- border-bottom-color: rgba(255, 255, 255, 0.9);
+ background-color: rgba(255, 255, 255, 0.3);
+ border-bottom-color: rgba(255, 255, 255, 0.9);
}
.timeline-tree-view .timeline-details-view-body .full-widget-dimmed-banner {
- background-color: inherit;
+ background-color: inherit;
}
.timeline-details .filter-input-field {
- width: 120px;
+ width: 120px;
}
.timeline-tree-view .data-grid .header-container {
- height: 21px;
+ height: 21px;
}
.timeline-tree-view .data-grid .data-container {
- top: 21px;
+ top: 21px;
}
.timeline-stack-view-header {
- height: 27px;
- background-color: var(--toolbar-bg-color);
- padding: 6px 10px;
- color: #5a5a5a;
- white-space: nowrap;
- border-bottom: var(--divider-border);
+ height: 27px;
+ background-color: var(--toolbar-bg-color);
+ padding: 6px 10px;
+ color: #5a5a5a;
+ white-space: nowrap;
+ border-bottom: var(--divider-border);
}
.timeline-landing-page {
- position: absolute;
- background-color: white;
- justify-content: center;
- align-items: center;
- overflow: auto;
- font-size: 13px;
- color: #777;
+ position: absolute;
+ background-color: white;
+ justify-content: center;
+ align-items: center;
+ overflow: auto;
+ font-size: 13px;
+ color: #777;
}
.timeline-landing-page > div {
- max-width: 450px;
- margin: 10px;
+ max-width: 450px;
+ margin: 10px;
}
.timeline-landing-page > div > p {
- flex: none;
- white-space: pre-line;
+ flex: none;
+ white-space: pre-line;
}
@media (forced-colors: active) {
- .timeline-tree-view .data-grid .name-container .activity-icon {
- forced-color-adjust: none;
- }
- .timeline-tree-view .data-grid tr.selected span.percent-column,
- .timeline-tree-view .data-grid tr.selected div.background-percent-bar span,
- .timeline-tree-view .data-grid tr.selected .name-container .activity-link .devtools-link {
- color: HighlightText;
- }
- .timeline-tree-view .data-grid .background-bar,
- .timeline-tree-view .data-grid tr:hover td:not(.bottom-filler-td) {
- background-color: transparent;
- }
- .timeline-tree-view .data-grid tr.selected .background-bar {
- background-color: transparent;
- border-bottom-color: HighlightText;
- }
+ .timeline-tree-view .data-grid .name-container .activity-icon {
+ forced-color-adjust: none;
+ }
+
+ .timeline-tree-view .data-grid tr.selected span.percent-column,
+ .timeline-tree-view .data-grid tr.selected div.background-percent-bar span,
+ .timeline-tree-view .data-grid tr.selected .name-container .activity-link .devtools-link {
+ color: HighlightText;
+ }
+
+ .timeline-tree-view .data-grid .background-bar,
+ .timeline-tree-view .data-grid tr:hover td:not(.bottom-filler-td) {
+ background-color: transparent;
+ }
+
+ .timeline-tree-view .data-grid tr.selected .background-bar {
+ background-color: transparent;
+ border-bottom-color: HighlightText;
+ }
}
.timeline-additional-metrics {
- display: flex;
- flex: 0 0 27px;
- background-color: var(--toolbar-bg-color);
- border-top: var(--divider-border);
- overflow: hidden;
- z-index: 100;
+ display: flex;
+ flex: 0 0 27px;
+ background-color: var(--toolbar-bg-color);
+ border-top: var(--divider-border);
+ overflow: hidden;
+ z-index: 100;
}
diff --git a/front_end/timeline/timelineStatusDialog.css b/front_end/timeline/timelineStatusDialog.css
index 408d7fa..0cacc27 100644
--- a/front_end/timeline/timelineStatusDialog.css
+++ b/front_end/timeline/timelineStatusDialog.css
@@ -5,64 +5,66 @@
*/
.timeline-status-dialog {
- display: flex;
- flex-direction: column;
- padding: 16px 16px 12px 16px;
- align-self: center;
- background-color: white;
- box-shadow: var(--drop-shadow);
+ display: flex;
+ flex-direction: column;
+ padding: 16px 16px 12px 16px;
+ align-self: center;
+ background-color: white;
+ box-shadow: var(--drop-shadow);
}
.status-dialog-line {
- margin: 2px;
- height: 14px;
- display: flex;
- align-items: baseline;
+ margin: 2px;
+ height: 14px;
+ display: flex;
+ align-items: baseline;
}
.status-dialog-line .label {
- display: inline-block;
- width: 80px;
- text-align: right;
- color: #aaa;
- margin-right: 10px;
+ display: inline-block;
+ width: 80px;
+ text-align: right;
+ color: #aaa;
+ margin-right: 10px;
}
.timeline-status-dialog .progress .indicator-container {
- display: inline-block;
- width: 200px;
- height: 8px;
- background-color: #f4f4f4;
- display: inline-block;
+ display: inline-block;
+ width: 200px;
+ height: 8px;
+ background-color: #f4f4f4;
+ display: inline-block;
}
.timeline-status-dialog .progress .indicator {
- background-color: rgb(112, 166, 255);
- height: 100%;
- width: 0;
- margin: 0;
+ background-color: rgb(112, 166, 255);
+ height: 100%;
+ width: 0;
+ margin: 0;
}
.timeline-status-dialog .stop-button {
- margin-top: 8px;
- height: 100%;
- align-self: flex-end;
+ margin-top: 8px;
+ height: 100%;
+ align-self: flex-end;
}
.timeline-status-dialog .stop-button button {
- min-width: 80px;
+ min-width: 80px;
}
@media (forced-colors: active) {
- .timeline-status-dialog {
- border: 1px solid CanvasText;
- }
- .timeline-status-dialog .progress .indicator-container {
- border: 1px solid ButtonText;
- background-color: ButtonFace;
- }
- .timeline-status-dialog .progress .indicator {
- forced-color-adjust: none;
- background-color: ButtonText;
- }
+ .timeline-status-dialog {
+ border: 1px solid canvastext;
+ }
+
+ .timeline-status-dialog .progress .indicator-container {
+ border: 1px solid ButtonText;
+ background-color: ButtonFace;
+ }
+
+ .timeline-status-dialog .progress .indicator {
+ forced-color-adjust: none;
+ background-color: ButtonText;
+ }
}
diff --git a/front_end/ui/checkboxTextLabel.css b/front_end/ui/checkboxTextLabel.css
index ec687d6..20b45b3 100644
--- a/front_end/ui/checkboxTextLabel.css
+++ b/front_end/ui/checkboxTextLabel.css
@@ -5,100 +5,107 @@
*/
:host {
- padding: 0;
- margin: 0;
- display: inline-flex;
- flex-shrink: 0;
- align-items: center !important;
+ padding: 0;
+ margin: 0;
+ display: inline-flex;
+ flex-shrink: 0;
+ align-items: center !important;
}
input {
- height: 12px;
- width: 12px;
- flex-shrink: 0;
+ height: 12px;
+ width: 12px;
+ flex-shrink: 0;
}
input.inside-datagrid {
- height: 10px;
- width: 10px;
+ height: 10px;
+ width: 10px;
}
input:focus {
- outline: auto 5px -webkit-focus-ring-color;
+ outline: auto 5px -webkit-focus-ring-color;
}
input.dt-checkbox-themed {
- -webkit-appearance: none;
- margin: auto 5px auto 2px;
- border: 1px solid rgb(45, 45, 45);
- border-radius: 3px;
- background-color: rgb(102, 102, 102);
+ -webkit-appearance: none;
+ margin: auto 5px auto 2px;
+ border: 1px solid rgb(45, 45, 45);
+ border-radius: 3px;
+ background-color: rgb(102, 102, 102);
}
-input.dt-checkbox-themed:after {
- content: '';
- line-height: 10px;
- position: absolute;
- cursor: pointer;
- width: 12px;
- height: 12px;
- background: none;
+input.dt-checkbox-themed::after {
+ content: '';
+ line-height: 10px;
+ position: absolute;
+ cursor: pointer;
+ width: 12px;
+ height: 12px;
+ background: none;
}
-input.dt-checkbox-themed:checked:after {
- background-color: #333;
+input.dt-checkbox-themed:checked::after {
+ background-color: #333;
}
-input.dt-checkbox-themed:after {
- -webkit-mask-image: url(Images/checkboxCheckmark.svg);
- -webkit-mask-size: 11px 11px;
- -webkit-mask-position: 0 0;
+input.dt-checkbox-themed::after {
+ -webkit-mask-image: url(Images/checkboxCheckmark.svg);
+ -webkit-mask-size: 11px 11px;
+ -webkit-mask-position: 0 0;
}
:host-context(.-theme-with-dark-background) input:not(.dt-checkbox-themed) {
- filter: invert(80%);
+ filter: invert(80%);
}
.dt-checkbox-text {
- margin-left: 3px;
- overflow: hidden;
- text-overflow: ellipsis;
+ margin-left: 3px;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.dt-checkbox-subtitle {
- color: gray;
+ color: gray;
}
@media (forced-colors: active) {
- input.dt-checkbox-theme-preserve {
- forced-color-adjust: none;
- }
- input.dt-checkbox-theme-preserve:hover:enabled {
- border-color: Highlight;
- }
- input.dt-checkbox-theme-preserve:active::before,
- input.dt-checkbox-theme-preserve:active::after {
- background-color: Highlight;
- }
- input.dt-checkbox-theme-preserve:active {
- background: HighlightText;
- }
- input.dt-checkbox-theme-preserve:active:checked::before,
- input.dt-checkbox-theme-preserve:active:checked::after,
- input.dt-checkbox-theme-preserve:checked::before,
- input.dt-checkbox-theme-preserve:checked::after {
- background-color: HighlightText;
- }
- input.dt-checkbox-theme-preserve:active:checked,
- input.dt-checkbox-theme-preserve:checked {
- background: Highlight;
- border-color: Highlight;
- }
- input.dt-checkbox-theme-preserve:hover:checked::before,
- input.dt-checkbox-theme-preserve:hover:checked::after {
- background-color: Highlight !important;
- }
- input.dt-checkbox-theme-preserve:hover:checked {
- background: HighlightText;
- }
+ input.dt-checkbox-theme-preserve {
+ forced-color-adjust: none;
}
+
+ input.dt-checkbox-theme-preserve:hover:enabled {
+ border-color: Highlight;
+ }
+
+ input.dt-checkbox-theme-preserve:active::before,
+ input.dt-checkbox-theme-preserve:active::after {
+ background-color: Highlight;
+ }
+
+ input.dt-checkbox-theme-preserve:active {
+ background: HighlightText;
+ }
+
+ input.dt-checkbox-theme-preserve:active:checked::before,
+ input.dt-checkbox-theme-preserve:active:checked::after,
+ input.dt-checkbox-theme-preserve:checked::before,
+ input.dt-checkbox-theme-preserve:checked::after {
+ background-color: HighlightText;
+ }
+
+ input.dt-checkbox-theme-preserve:active:checked,
+ input.dt-checkbox-theme-preserve:checked {
+ background: Highlight;
+ border-color: Highlight;
+ }
+
+ input.dt-checkbox-theme-preserve:hover:checked::before,
+ input.dt-checkbox-theme-preserve:hover:checked::after {
+ background-color: Highlight !important;
+ }
+
+ input.dt-checkbox-theme-preserve:hover:checked {
+ background: HighlightText;
+ }
+}
diff --git a/front_end/ui/closeButton.css b/front_end/ui/closeButton.css
index 3080dc8..5a43dfd 100644
--- a/front_end/ui/closeButton.css
+++ b/front_end/ui/closeButton.css
@@ -5,38 +5,41 @@
*/
.close-button {
- width: 14px;
- height: 14px;
- cursor: default;
- display: flex;
- align-items: center;
- justify-content: center;
+ width: 14px;
+ height: 14px;
+ cursor: default;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
-.hover-icon, .active-icon {
- display: none;
+.hover-icon,
+.active-icon {
+ display: none;
}
-.close-button:hover .default-icon, .close-button:active .default-icon {
- display: none;
+.close-button:hover .default-icon,
+.close-button:active .default-icon {
+ display: none;
}
.close-button:hover .hover-icon {
- display: block;
+ display: block;
}
-.close-button[data-keyboard-focus="true"]:focus .default-icon, .close-button:active .default-icon {
- display: none;
+.close-button[data-keyboard-focus="true"]:focus .default-icon,
+.close-button:active .default-icon {
+ display: none;
}
.close-button[data-keyboard-focus="true"]:focus .hover-icon {
- display: block;
+ display: block;
}
.close-button:active .hover-icon {
- display: none !important;
+ display: none !important;
}
.close-button:active .active-icon {
- display: block;
+ display: block;
}
diff --git a/front_end/ui/confirmDialog.css b/front_end/ui/confirmDialog.css
index 1e7d5e4..930ea2f 100644
--- a/front_end/ui/confirmDialog.css
+++ b/front_end/ui/confirmDialog.css
@@ -5,24 +5,25 @@
*/
.widget {
- padding: 20px;
+ padding: 20px;
}
-.message, .button {
- font-size: larger;
- white-space: pre;
- margin: 5px;
+.message,
+.button {
+ font-size: larger;
+ white-space: pre;
+ margin: 5px;
}
.button {
- text-align: center;
- margin-top: 10px;
+ text-align: center;
+ margin-top: 10px;
}
.button button {
- min-width: 80px;
+ min-width: 80px;
}
.reason {
- color: #8b0000;
+ color: #8b0000;
}
diff --git a/front_end/ui/dialog.css b/front_end/ui/dialog.css
index b91b838..ed1c96b 100644
--- a/front_end/ui/dialog.css
+++ b/front_end/ui/dialog.css
@@ -5,16 +5,16 @@
*/
.widget {
- box-shadow: var(--drop-shadow);
- background: white;
- justify-content: flex-start;
- align-items: stretch;
- display: flex;
+ box-shadow: var(--drop-shadow);
+ background: white;
+ justify-content: flex-start;
+ align-items: stretch;
+ display: flex;
}
.dialog-close-button {
- position: absolute;
- right: 9px;
- top: 9px;
- z-index: 1;
-}
\ No newline at end of file
+ position: absolute;
+ right: 9px;
+ top: 9px;
+ z-index: 1;
+}
diff --git a/front_end/ui/dropTarget.css b/front_end/ui/dropTarget.css
index 314dbae..7f63250 100644
--- a/front_end/ui/dropTarget.css
+++ b/front_end/ui/dropTarget.css
@@ -5,24 +5,24 @@
*/
:host {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- display: flex;
- background-color: rgba(255,255,255,0.8);
- z-index: 1000;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ background-color: rgba(255, 255, 255, 0.8);
+ z-index: 1000;
}
.drop-target-message {
- flex: auto;
- font-size: 30px;
- color: #999;
- display: flex;
- justify-content: center;
- align-items: center;
- margin: 20px;
- border: 4px dashed #ddd;
- pointer-events: none;
+ flex: auto;
+ font-size: 30px;
+ color: #999;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 20px;
+ border: 4px dashed #ddd;
+ pointer-events: none;
}
diff --git a/front_end/ui/emptyWidget.css b/front_end/ui/emptyWidget.css
index 530bca8..ead95a3 100644
--- a/front_end/ui/emptyWidget.css
+++ b/front_end/ui/emptyWidget.css
@@ -4,30 +4,30 @@
* found in the LICENSE file.
*/
- .empty-bold-text {
- display: block;
- font-size: 1.5em;
- margin: .83em 0 .83em;
- font-weight: bold;
- }
+.empty-bold-text {
+ display: block;
+ font-size: 1.5em;
+ margin: 0.83em 0 0.83em;
+ font-weight: bold;
+}
.empty-view {
- color: hsla(0, 0%, 43%, 1);
- padding: 30px;
- display: flex;
- align-items: center;
- flex-direction: column;
- min-width: 70px;
+ color: hsla(0, 0%, 43%, 1);
+ padding: 30px;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ min-width: 70px;
}
.empty-view-scroller {
- justify-content: center;
- overflow: auto;
+ justify-content: center;
+ overflow: auto;
}
.empty-view p {
- white-space: initial;
- line-height: 18px;
- max-width: 300px;
- flex-shrink: 0;
+ white-space: initial;
+ line-height: 18px;
+ max-width: 300px;
+ flex-shrink: 0;
}
diff --git a/front_end/ui/filter.css b/front_end/ui/filter.css
index b974217..3335033 100644
--- a/front_end/ui/filter.css
+++ b/front_end/ui/filter.css
@@ -29,148 +29,150 @@
*/
.filter-bar {
- background-color: var(--toolbar-bg-color);
- flex: none;
- flex-wrap: wrap;
- align-items: center;
- border-bottom: var(--divider-border);
+ background-color: var(--toolbar-bg-color);
+ flex: none;
+ flex-wrap: wrap;
+ align-items: center;
+ border-bottom: var(--divider-border);
}
.filter-text-filter {
- display: inline-flex;
- margin-left: 1px;
- margin-right: 2px;
- min-width: 40px;
- max-width: 200px;
- height: 24px;
- align-items: center;
+ display: inline-flex;
+ margin-left: 1px;
+ margin-right: 2px;
+ min-width: 40px;
+ max-width: 200px;
+ height: 24px;
+ align-items: center;
}
.filter-bitset-filter {
- padding: 2px;
- display: inline-flex;
- overflow: hidden;
- height: 24px;
- position: relative;
- margin: 0;
+ padding: 2px;
+ display: inline-flex;
+ overflow: hidden;
+ height: 24px;
+ position: relative;
+ margin: 0;
}
.filter-bitset-filter span {
- display: inline-block;
- flex: none;
- margin: auto 2px;
- padding: 3px;
- background: transparent;
- text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
- border-radius: 6px;
- overflow: hidden;
+ display: inline-block;
+ flex: none;
+ margin: auto 2px;
+ padding: 3px;
+ background: transparent;
+ text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+ border-radius: 6px;
+ overflow: hidden;
}
.filter-bitset-filter span[data-keyboard-focus="true"] {
- outline: -webkit-focus-ring-color auto 5px;
+ outline: -webkit-focus-ring-color auto 5px;
}
.filter-bitset-filter-divider {
- background-color: #ccc;
- height: 16px;
- width: 1px;
- margin: auto 2px;
- display: inline-block;
+ background-color: #ccc;
+ height: 16px;
+ width: 1px;
+ margin: auto 2px;
+ display: inline-block;
}
.filter-bitset-filter span.selected,
.filter-bitset-filter span:hover,
.filter-bitset-filter span:active {
- color: white;
- text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
+ color: white;
+ text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
}
.filter-bitset-filter span:hover {
- background: rgba(0, 0, 0, 0.2);
+ background: rgba(0, 0, 0, 0.2);
}
.filter-bitset-filter span.selected {
- background: rgba(0, 0, 0, 0.3);
+ background: rgba(0, 0, 0, 0.3);
}
.filter-bitset-filter span:active {
- background: rgba(0, 0, 0, 0.5);
+ background: rgba(0, 0, 0, 0.5);
}
.filter-checkbox-filter {
- padding-left: 4px;
- padding-right: 2px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- display: inline-flex;
- vertical-align: middle;
- height: 24px;
- position: relative;
+ padding-left: 4px;
+ padding-right: 2px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: inline-flex;
+ vertical-align: middle;
+ height: 24px;
+ position: relative;
}
.filter-checkbox-filter > [is=dt-checkbox] {
- display: flex;
- margin: auto 0;
+ display: flex;
+ margin: auto 0;
}
.filter-input-field {
- padding-left: 3px;
- width: 147px;
- height: 18px;
- line-height: 20px;
- display: inline-block;
- overflow: hidden;
- white-space: nowrap;
- cursor: auto;
+ padding-left: 3px;
+ width: 147px;
+ height: 18px;
+ line-height: 20px;
+ display: inline-block;
+ overflow: hidden;
+ white-space: nowrap;
+ cursor: auto;
}
.filter-input-container {
- margin: 0 3px;
- display: flex;
- background: #FFF;
- width: 163px;
+ margin: 0 3px;
+ display: flex;
+ background: #fff;
+ width: 163px;
}
.filter-input-container:hover {
- box-shadow: var(--focus-ring-inactive-shadow);
+ box-shadow: var(--focus-ring-inactive-shadow);
}
.filter-text-filter:not(.filter-text-empty) .filter-input-container,
.filter-input-container:focus-within {
- box-shadow: var(--focus-ring-active-shadow);
+ box-shadow: var(--focus-ring-active-shadow);
}
.filter-text-empty .filter-input-clear-button {
- display: none;
+ display: none;
}
.filter-input-clear-button {
- opacity: 0.7;
- height: 16px;
- margin-top: 1px;
+ opacity: 0.7;
+ height: 16px;
+ margin-top: 1px;
}
.filter-input-clear-button:hover {
- opacity: .99;
+ opacity: 0.99;
}
@media (forced-colors: active) {
- .filter-bitset-filter span:hover,
- .filter-bitset-filter span.selected,
- .filter-bitset-filter span:active {
- forced-color-adjust: none;
- background: Highlight;
- color: HighlightText;
- }
- .filter-input-container {
- forced-color-adjust: none;
- background: ButtonFace;
- box-shadow: var(--focus-ring-inactive-shadow);
- }
- .filter-input-container:hover,
- .filter-input-container:focus-within,
- .filter-text-filter:not(.filter-text-empty) .filter-input-container {
- box-shadow: var(--focus-ring-active-shadow);
- }
+ .filter-bitset-filter span:hover,
+ .filter-bitset-filter span.selected,
+ .filter-bitset-filter span:active {
+ forced-color-adjust: none;
+ background: Highlight;
+ color: HighlightText;
+ }
+
+ .filter-input-container {
+ forced-color-adjust: none;
+ background: ButtonFace;
+ box-shadow: var(--focus-ring-inactive-shadow);
+ }
+
+ .filter-input-container:hover,
+ .filter-input-container:focus-within,
+ .filter-text-filter:not(.filter-text-empty) .filter-input-container {
+ box-shadow: var(--focus-ring-active-shadow);
+ }
}
diff --git a/front_end/ui/glassPane.css b/front_end/ui/glassPane.css
index 1a170f4..eb6a7b4 100644
--- a/front_end/ui/glassPane.css
+++ b/front_end/ui/glassPane.css
@@ -5,57 +5,57 @@
*/
:host {
- position: absolute !important;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- overflow: hidden;
- contain: strict;
- background-color: transparent;
+ position: absolute !important;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ overflow: hidden;
+ contain: strict;
+ background-color: transparent;
}
:host-context(.dimmed-pane) {
- background-color: rgba(255, 255, 255, 0.5);
+ background-color: rgba(255, 255, 255, 0.5);
}
:host-context(.no-pointer-events) {
- pointer-events: none;
+ pointer-events: none;
}
.widget {
- display: flex;
- background-color: transparent;
- pointer-events: auto;
- flex: none;
+ display: flex;
+ background-color: transparent;
+ pointer-events: auto;
+ flex: none;
}
.no-pointer-events {
- pointer-events: none;
+ pointer-events: none;
}
.arrow-top {
- margin-top: -19px;
- margin-left: -9px;
+ margin-top: -19px;
+ margin-left: -9px;
}
.arrow-bottom {
- margin-left: -9px;
+ margin-left: -9px;
}
.arrow-left {
- margin-left: -19px;
- margin-top: -9px;
+ margin-left: -19px;
+ margin-top: -9px;
}
.arrow-right {
- margin-top: -9px;
+ margin-top: -9px;
}
.arrow-none {
- display: none;
+ display: none;
}
:host-context(.-theme-with-dark-background) .arrow {
- -webkit-filter: invert(80%);
+ -webkit-filter: invert(80%);
}
diff --git a/front_end/ui/infobar.css b/front_end/ui/infobar.css
index 91b18b8..6979218 100644
--- a/front_end/ui/infobar.css
+++ b/front_end/ui/infobar.css
@@ -5,92 +5,92 @@
*/
.infobar {
- color: rgb(34, 34, 34);
- display: flex;
- flex: auto;
- border-bottom: 1px solid rgb(171, 171, 171);
- flex-direction: column;
- position: relative;
- padding: 1px 6px 1px;
+ color: rgb(34, 34, 34);
+ display: flex;
+ flex: auto;
+ border-bottom: 1px solid rgb(171, 171, 171);
+ flex-direction: column;
+ position: relative;
+ padding: 1px 6px 1px;
}
.infobar:focus {
- box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2) inset;
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2) inset;
}
.infobar-warning {
- background-color: rgb(253, 242, 192);
+ background-color: rgb(253, 242, 192);
}
.infobar-info {
- background-color: rgb(255, 255, 255);
+ background-color: rgb(255, 255, 255);
}
.infobar-main-row {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- min-height: 25px;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ min-height: 25px;
}
.infobar-info-container {
- display: flex;
- align-items: center;
- flex-grow: 1;
- flex-wrap: wrap;
+ display: flex;
+ align-items: center;
+ flex-grow: 1;
+ flex-wrap: wrap;
}
.infobar-info-message {
- display: flex;
- margin: 5px 0;
+ display: flex;
+ margin: 5px 0;
}
.infobar-info-text {
- display: flex;
- align-items: center;
- margin: 0 4px;
+ display: flex;
+ align-items: center;
+ margin: 0 4px;
}
.infobar-details-rows {
- padding: 5px 5px 0 5px;
+ padding: 5px 5px 0 5px;
}
.infobar-details-row {
- display: flex;
- flex-direction: column;
- line-height: 18px;
- padding-bottom: 6px;
+ display: flex;
+ flex-direction: column;
+ line-height: 18px;
+ padding-bottom: 6px;
}
.infobar-close-container {
- display: flex;
- flex-shrink: 0;
- align-items: center;
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
}
.infobar-close-container > .infobar-button.link-style {
- margin: 4px;
+ margin: 4px;
}
.infobar-button {
- color: #757575;
- cursor: pointer;
- padding: 0 4px;
+ color: #757575;
+ cursor: pointer;
+ padding: 0 4px;
}
.info-icon {
- -webkit-mask-image: url(Images/ic_info_black_18dp.svg);
- background-color: hsl(214, 92%, 50%);
+ -webkit-mask-image: url(Images/ic_info_black_18dp.svg);
+ background-color: hsl(214, 92%, 50%);
}
.warning-icon {
- -webkit-mask-image: url(Images/ic_warning_black_18dp.svg);
- background-color: hsl(44, 92%, 50%);
+ -webkit-mask-image: url(Images/ic_warning_black_18dp.svg);
+ background-color: hsl(44, 92%, 50%);
}
.icon {
- -webkit-mask-size: 18px 18px;
- width: 18px;
- height: 18px;
- flex-shrink: 0;
+ -webkit-mask-size: 18px 18px;
+ width: 18px;
+ height: 18px;
+ flex-shrink: 0;
}
diff --git a/front_end/ui/inspectorCommon.css b/front_end/ui/inspectorCommon.css
index 09f7f22..6bfd005 100644
--- a/front_end/ui/inspectorCommon.css
+++ b/front_end/ui/inspectorCommon.css
@@ -5,220 +5,220 @@
*/
* {
- /* This is required for correct sizing of flex items because we rely
+ /* This is required for correct sizing of flex items because we rely
* on an old version of the flexbox spec.
* Longer-term we should remove this, see crbug.com/473625 */
- min-width: 0;
- min-height: 0;
+ min-width: 0;
+ min-height: 0;
}
:host-context(.platform-mac) .monospace,
:host-context(.platform-mac) .source-code,
.platform-mac .monospace,
.platform-mac .source-code {
- font-size: 11px !important;
- font-family: Menlo, monospace;
+ font-size: 11px !important;
+ font-family: Menlo, monospace;
}
:host-context(.platform-windows) .monospace,
:host-context(.platform-windows) .source-code,
.platform-windows .monospace,
.platform-windows .source-code {
- font-size: 12px !important;
- font-family: Consolas, Lucida Console, Courier New, monospace;
+ font-size: 12px !important;
+ font-family: Consolas, Lucida Console, Courier New, monospace;
}
:host-context(.platform-linux) .monospace,
:host-context(.platform-linux) .source-code,
.platform-linux .monospace,
.platform-linux .source-code {
- font-size: 11px !important;
- font-family: dejavu sans mono, monospace;
+ font-size: 11px !important;
+ font-family: dejavu sans mono, monospace;
}
.source-code {
- font-family: monospace;
- font-size: 11px !important;
- white-space: pre-wrap;
+ font-family: monospace;
+ font-size: 11px !important;
+ white-space: pre-wrap;
}
* {
- box-sizing: border-box;
+ box-sizing: border-box;
}
:focus {
- outline-width: 0;
+ outline-width: 0;
}
img {
- -webkit-user-drag: none;
+ -webkit-user-drag: none;
}
iframe,
a img {
- border: none;
+ border: none;
}
.fill {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
}
iframe.fill {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
.widget {
- position: relative;
- flex: auto;
- contain: style;
+ position: relative;
+ flex: auto;
+ contain: style;
}
.hbox {
- display: flex;
- flex-direction: row !important;
- position: relative;
+ display: flex;
+ flex-direction: row !important;
+ position: relative;
}
.vbox {
- display: flex;
- flex-direction: column !important;
- position: relative;
+ display: flex;
+ flex-direction: column !important;
+ position: relative;
}
.view-container > .toolbar {
- border-bottom: 1px solid #eee;
+ border-bottom: 1px solid #eee;
}
.flex-auto {
- flex: auto;
+ flex: auto;
}
.flex-none {
- flex: none;
+ flex: none;
}
.flex-centered {
- display: flex;
- align-items: center;
- justify-content: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.overflow-auto {
- overflow: auto;
+ overflow: auto;
}
iframe.widget {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
}
.hidden {
- display: none !important;
+ display: none !important;
}
.monospace {
- font-size: 10px !important;
- font-family: monospace;
+ font-size: 10px !important;
+ font-family: monospace;
}
.highlighted-search-result {
- border-radius: 1px;
- background-color: rgba(255, 255, 0, 0.8);
- outline: 1px solid rgba(255, 255, 0, 0.8);
+ border-radius: 1px;
+ background-color: rgba(255, 255, 0, 0.8);
+ outline: 1px solid rgba(255, 255, 0, 0.8);
}
.-theme-with-dark-background .highlighted-search-result,
:host-context(.-theme-with-dark-background) .highlighted-search-result {
- background-color: hsl(133, 100%, 30%);
- color: #333;
+ background-color: hsl(133, 100%, 30%);
+ color: #333;
}
.link {
- cursor: pointer;
- text-decoration: underline;
- color: rgb(17, 85, 204);
+ cursor: pointer;
+ text-decoration: underline;
+ color: rgb(17, 85, 204);
}
button,
input,
select {
- /* Form elements do not automatically inherit font style from ancestors. */
- font-family: inherit;
- font-size: inherit;
+ /* Form elements do not automatically inherit font style from ancestors. */
+ font-family: inherit;
+ font-size: inherit;
}
input {
- background-color: white;
- color: inherit;
+ background-color: white;
+ color: inherit;
}
input::placeholder {
- color: rgba(0, 0, 0, 0.54);
+ color: rgba(0, 0, 0, 0.54);
}
:host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) {
- -webkit-filter: invert(80%);
+ -webkit-filter: invert(80%);
}
.harmony-input:not([type]),
.harmony-input[type=number],
.harmony-input[type=text] {
- padding: 3px 6px;
- height: 24px;
- border: none;
- box-shadow: var(--focus-ring-inactive-shadow);
+ padding: 3px 6px;
+ height: 24px;
+ border: none;
+ box-shadow: var(--focus-ring-inactive-shadow);
}
.harmony-input:not([type]):not(.error-input):not(:invalid):hover,
.harmony-input[type=number]:not(.error-input):not(:invalid):hover,
.harmony-input[type=text]:not(.error-input):not(:invalid):hover {
- box-shadow: var(--focus-ring-inactive-shadow);
+ box-shadow: var(--focus-ring-inactive-shadow);
}
.harmony-input:not([type]):not(.error-input):not(:invalid):focus,
.harmony-input[type=number]:not(.error-input):not(:invalid):focus,
.harmony-input[type=text]:not(.error-input):not(:invalid):focus {
- box-shadow: var(--focus-ring-active-shadow);
+ box-shadow: var(--focus-ring-active-shadow);
}
.highlighted-search-result.current-search-result {
- border-radius: 1px;
- padding: 1px;
- margin: -1px;
- background-color: rgba(255, 127, 0, 0.8);
+ border-radius: 1px;
+ padding: 1px;
+ margin: -1px;
+ background-color: rgba(255, 127, 0, 0.8);
}
.dimmed {
- opacity: 0.6;
+ opacity: 0.6;
}
.editing {
- box-shadow: var(--drop-shadow);
- background-color: white;
- text-overflow: clip !important;
- padding-left: 2px;
- margin-left: -2px;
- padding-right: 2px;
- margin-right: -2px;
- margin-bottom: -1px;
- padding-bottom: 1px;
- opacity: 1.0 !important;
+ box-shadow: var(--drop-shadow);
+ background-color: white;
+ text-overflow: clip !important;
+ padding-left: 2px;
+ margin-left: -2px;
+ padding-right: 2px;
+ margin-right: -2px;
+ margin-bottom: -1px;
+ padding-bottom: 1px;
+ opacity: 1 !important;
}
.editing,
.editing * {
- color: #222 !important;
- text-decoration: none !important;
+ color: #222 !important;
+ text-decoration: none !important;
}
.harmony-input:not([type]).error-input,
@@ -227,51 +227,51 @@
.harmony-input:not([type]):invalid,
.harmony-input[type=number]:invalid,
.harmony-input[type=text]:invalid {
- box-shadow: 0 0 0 1px #ff1a00;
+ box-shadow: 0 0 0 1px #ff1a00;
}
.chrome-select {
- -webkit-appearance: none;
- user-select: none;
- border: 1px solid rgba(0, 0, 0, 0.2);
- border-radius: 2px;
- color: #333;
- font: inherit;
- margin: 0;
- outline: none;
- padding-right: 20px;
- padding-left: 6px;
- background-image: -webkit-image-set(url(Images/chromeSelect.png) 1x, url(Images/chromeSelect_2x.png) 2x);
- background-color: hsl(0, 0%, 98%);
- background-position: right center;
- background-repeat: no-repeat;
- min-height: 24px;
- min-width: 80px;
- background-size: 15px;
+ -webkit-appearance: none;
+ user-select: none;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 2px;
+ color: #333;
+ font: inherit;
+ margin: 0;
+ outline: none;
+ padding-right: 20px;
+ padding-left: 6px;
+ background-image: -webkit-image-set(url(Images/chromeSelect.png) 1x, url(Images/chromeSelect_2x.png) 2x);
+ background-color: hsl(0, 0%, 98%);
+ background-position: right center;
+ background-repeat: no-repeat;
+ min-height: 24px;
+ min-width: 80px;
+ background-size: 15px;
}
.chrome-select:enabled:active,
.chrome-select:enabled:focus,
.chrome-select:enabled:hover {
- background-color: hsl(0, 0%, 96%);
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ background-color: hsl(0, 0%, 96%);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.chrome-select:enabled:active {
- background-color: #f2f2f2;
+ background-color: #f2f2f2;
}
.chrome-select:enabled:focus {
- border-color: transparent;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(66, 133, 244, 0.4);
+ border-color: transparent;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(66, 133, 244, 0.4);
}
.chrome-select:disabled {
- opacity: 0.38;
+ opacity: 0.38;
}
.chrome-select-label {
- margin: 0px 22px;
+ margin: 0 22px;
flex: none;
}
@@ -282,210 +282,232 @@
.chrome-select optgroup,
.chrome-select option {
- background-color: #EEEEEE;
- color: #222;
+ background-color: #eee;
+ color: #222;
}
:not(.platform-mac).-theme-with-dark-background ::-webkit-scrollbar,
:host-context(:not(.platform-mac).-theme-with-dark-background) ::-webkit-scrollbar {
- width: 14px;
- height: 14px;
+ width: 14px;
+ height: 14px;
}
:not(.platform-mac).-theme-with-dark-background ::-webkit-scrollbar-track,
:host-context(:not(.platform-mac).-theme-with-dark-background) ::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 1px rgba(255,255,255,0.3);
- background: rgb(36, 36, 36);
+ -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.3);
+ background: rgb(36, 36, 36);
}
:not(.platform-mac).-theme-with-dark-background ::-webkit-scrollbar-thumb,
:host-context(:not(.platform-mac).-theme-with-dark-background) ::-webkit-scrollbar-thumb {
- border-radius: 2px;
- background-color: #333;
- -webkit-box-shadow: inset 0 0 1px rgba(255,255,255,0.5);
+ border-radius: 2px;
+ background-color: #333;
+ -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
}
:not(.platform-mac).-theme-with-dark-background ::-webkit-scrollbar-corner,
:host-context(:not(.platform-mac).-theme-with-dark-background) ::-webkit-scrollbar-corner {
- background-color: #242424;
+ background-color: #242424;
}
.gray-info-message {
- text-align: center;
- font-style: italic;
- padding: 6px;
- color: #888;
- white-space: nowrap;
+ text-align: center;
+ font-style: italic;
+ padding: 6px;
+ color: #888;
+ white-space: nowrap;
}
span[is=dt-icon-label] {
- flex: none;
+ flex: none;
}
.full-widget-dimmed-banner a {
- color: inherit;
+ color: inherit;
}
.full-widget-dimmed-banner {
- color: #777;
- background-color: white;
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- padding: 20px;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- font-size: 13px;
- overflow: auto;
- z-index: 500;
+ color: #777;
+ background-color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding: 20px;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ font-size: 13px;
+ overflow: auto;
+ z-index: 500;
}
[is=ui-icon] {
- display: inline-block;
- flex-shrink: 0;
+ display: inline-block;
+ flex-shrink: 0;
}
.-theme-with-dark-background [is=ui-icon].icon-invert,
:host-context(.-theme-with-dark-background) [is=ui-icon].icon-invert {
- filter: invert(80%) hue-rotate(180deg);
+ filter: invert(80%) hue-rotate(180deg);
}
[is=ui-icon].icon-mask {
- background-color: rgb(110, 110, 110);
- -webkit-mask-position: var(--spritesheet-position);
+ background-color: rgb(110, 110, 110);
+ -webkit-mask-position: var(--spritesheet-position);
}
[is=ui-icon]:not(.icon-mask) {
- background-position: var(--spritesheet-position);
+ background-position: var(--spritesheet-position);
}
.spritesheet-smallicons:not(.icon-mask) {
- background-image: url(Images/smallIcons.svg);
+ background-image: url(Images/smallIcons.svg);
}
.spritesheet-smallicons.icon-mask {
- -webkit-mask-image: url(Images/smallIcons.svg);
+ -webkit-mask-image: url(Images/smallIcons.svg);
}
.spritesheet-largeicons:not(.icon-mask) {
- background-image: url(Images/largeIcons.svg);
+ background-image: url(Images/largeIcons.svg);
}
.spritesheet-largeicons.icon-mask {
- -webkit-mask-image: url(Images/largeIcons.svg);
+ -webkit-mask-image: url(Images/largeIcons.svg);
}
.spritesheet-mediumicons:not(.icon-mask) {
- background-image: url(Images/mediumIcons.svg);
+ background-image: url(Images/mediumIcons.svg);
}
.spritesheet-mediumicons.icon-mask {
- -webkit-mask-image: url(Images/mediumIcons.svg);
+ -webkit-mask-image: url(Images/mediumIcons.svg);
}
.spritesheet-arrowicons {
- background-image: url(Images/popoverArrows.png);
+ background-image: url(Images/popoverArrows.png);
}
-:host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons, .force-white-icons [is=ui-icon].spritesheet-smallicons, [is=ui-icon].force-white-icons.spritesheet-smallicons, -theme-preserve {
- -webkit-mask-image: url(Images/smallIcons.svg);
- -webkit-mask-position: var(--spritesheet-position);
- background: #fafafa !important;
+:host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons,
+.force-white-icons [is=ui-icon].spritesheet-smallicons,
+[is=ui-icon].force-white-icons.spritesheet-smallicons,
+-theme-preserve {
+ -webkit-mask-image: url(Images/smallIcons.svg);
+ -webkit-mask-position: var(--spritesheet-position);
+ background: #fafafa !important;
}
-:host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons, .force-white-icons [is=ui-icon].spritesheet-largeicons, [is=ui-icon].force-white-icons.spritesheet-largeicons, -theme-preserve {
- -webkit-mask-image: url(Images/largeIcons.svg);
- -webkit-mask-position: var(--spritesheet-position);
- background: #fafafa !important;
+:host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons,
+.force-white-icons [is=ui-icon].spritesheet-largeicons,
+[is=ui-icon].force-white-icons.spritesheet-largeicons,
+-theme-preserve {
+ -webkit-mask-image: url(Images/largeIcons.svg);
+ -webkit-mask-position: var(--spritesheet-position);
+ background: #fafafa !important;
}
-:host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicon, .force-white-icons [is=ui-icon].spritesheet-mediumicons, [is=ui-icon].force-white-icons.spritesheet-mediumicons, -theme-preserve {
- -webkit-mask-image: url(Images/mediumIcons.svg);
- -webkit-mask-position: var(--spritesheet-position);
- background: #fafafa !important;
+:host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicon,
+.force-white-icons [is=ui-icon].spritesheet-mediumicons,
+[is=ui-icon].force-white-icons.spritesheet-mediumicons,
+-theme-preserve {
+ -webkit-mask-image: url(Images/mediumIcons.svg);
+ -webkit-mask-position: var(--spritesheet-position);
+ background: #fafafa !important;
}
.expandable-inline-button {
- background-color: #dedede;
- color: #333;
- cursor: pointer;
- border-radius: 3px;
+ background-color: #dedede;
+ color: #333;
+ cursor: pointer;
+ border-radius: 3px;
}
.undisplayable-text,
.expandable-inline-button {
- padding: 1px 3px;
- margin: 0 2px;
- font-size: 11px;
- font-family: sans-serif;
- white-space: nowrap;
- display: inline-block;
+ padding: 1px 3px;
+ margin: 0 2px;
+ font-size: 11px;
+ font-family: sans-serif;
+ white-space: nowrap;
+ display: inline-block;
}
.undisplayable-text::after,
.expandable-inline-button::after {
- content: attr(data-text);
+ content: attr(data-text);
}
.undisplayable-text {
- color: rgb(128, 128, 128);
- font-style: italic;
+ color: rgb(128, 128, 128);
+ font-style: italic;
}
.expandable-inline-button:hover {
- background-color: #d5d5d5;
+ background-color: #d5d5d5;
}
.expandable-inline-button[data-keyboard-focus="true"] {
- background-color: #bbbbbb;
+ background-color: #bbb;
}
::selection {
- background-color: #bbdefb;
+ background-color: #bbdefb;
}
.-theme-with-dark-background *::selection,
:host-context(.-theme-with-dark-background) *::selection {
- background-color: #9e9e9e;
+ background-color: #9e9e9e;
}
button.link {
- border: none;
- background: none;
- padding: 3px;
+ border: none;
+ background: none;
+ padding: 3px;
}
button.link[data-keyboard-focus="true"]:focus {
- background-color: rgba(0, 0, 0, 0.08);
- border-radius: 2px;
+ background-color: rgba(0, 0, 0, 0.08);
+ border-radius: 2px;
}
/* See ARIAUtils.js */
+
[data-aria-utils-animation-hack] {
- animation: ANIMATION-HACK 0s;
+ animation: ANIMATION-HACK 0s;
}
+
@keyframes ANIMATION-HACK {
}
@media (forced-colors: active) {
- .dimmed,
- .chrome-select:disabled {
- opacity: 1;
- }
- [is=ui-icon].icon-mask,
- :host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons, .force-white-icons [is=ui-icon].spritesheet-smallicons, [is=ui-icon].force-white-icons.spritesheet-smallicons, -theme-preserve,
- :host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons, .force-white-icons [is=ui-icon].spritesheet-largeicons, [is=ui-icon].force-white-icons.spritesheet-largeicons, -theme-preserve,
- :host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicon, .force-white-icons [is=ui-icon].spritesheet-mediumicons, [is=ui-icon].force-white-icons.spritesheet-mediumicons, -theme-preserve {
- forced-color-adjust: none;
- background-color: ButtonText;
- }
- .harmony-input:not([type]),
- .harmony-input[type=number],
- .harmony-input[type=text] {
- border: 1px solid ButtonText;
- }
+ .dimmed,
+ .chrome-select:disabled {
+ opacity: 1;
+ }
+
+ [is=ui-icon].icon-mask,
+ :host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons,
+ .force-white-icons [is=ui-icon].spritesheet-smallicons,
+ [is=ui-icon].force-white-icons.spritesheet-smallicons,
+ -theme-preserve,
+ :host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons,
+ .force-white-icons [is=ui-icon].spritesheet-largeicons,
+ [is=ui-icon].force-white-icons.spritesheet-largeicons,
+ -theme-preserve,
+ :host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicon,
+ .force-white-icons [is=ui-icon].spritesheet-mediumicons,
+ [is=ui-icon].force-white-icons.spritesheet-mediumicons,
+ -theme-preserve {
+ forced-color-adjust: none;
+ background-color: ButtonText;
+ }
+
+ .harmony-input:not([type]),
+ .harmony-input[type=number],
+ .harmony-input[type=text] {
+ border: 1px solid ButtonText;
+ }
}
diff --git a/front_end/ui/inspectorStyle.css b/front_end/ui/inspectorStyle.css
index 13d8e73..17d7529 100644
--- a/front_end/ui/inspectorStyle.css
+++ b/front_end/ui/inspectorStyle.css
@@ -28,151 +28,151 @@
*/
:root {
- height: 100%;
- overflow: hidden;
+ height: 100%;
+ overflow: hidden;
}
:root {
- --accent-color: #1a73e8;
- --accent-fg-color: #1a73e8;
- --accent-color-hover: #3b86e8;
- --accent-fg-color-hover: #1567D3;
- --active-control-bg-color: #5a5a5a;
- --focus-bg-color: hsl(214, 40%, 92%);
- --focus-ring-inactive-shadow-color: #e0e0e0;
- --input-validation-error: #db1600;
- --toolbar-bg-color: #f3f3f3;
- --toolbar-hover-bg-color: #eaeaea;
- --selection-fg-color: white;
- --selection-inactive-fg-color: #5a5a5a;
- --selection-inactive-bg-color: #dadada;
- --tab-selected-fg-color: #333;
- --tab-selected-bg-color: var(--toolbar-bg-color);
- --drop-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),
- 0 2px 4px rgba(0, 0, 0, 0.2),
- 0 2px 6px rgba(0, 0, 0, 0.1);
- --divider-color: #d0d0d0;
- --focus-ring-inactive-shadow: 0 0 0 1px var(--focus-ring-inactive-shadow-color);
- --item-selection-bg-color: #cfe8fc;
- --item-selection-inactive-bg-color: #e0e0e0;
-
- --network-grid-default-color: rgba(255, 255, 255, 1.0);
- --network-grid-stripe-color: rgba(245, 245, 245, 1.0);
- --network-grid-navigation-color: rgba(221, 238, 255, 1.0);
- --network-grid-hovered-color: rgba(235, 242, 252, 0.7);
- --network-grid-initiator-path-color: rgba(58, 217, 58, 0.4);
- --network-grid-initiated-path-color: rgba(217, 58, 58, 0.4);
- --network-grid-selected-color: rgba(219, 219, 219, .6);
- --network-grid-focus-selected-color: var(--selection-bg-color);
- --network-grid-focus-selected-color-has-error: rgb(255, 240, 240, 1.0);
- --network-grid-from-frame-color: rgba(224, 247, 250, .4);
- --network-grid-is-product-color: rgba(255, 252, 225, .6);
+ --accent-color: #1a73e8;
+ --accent-fg-color: #1a73e8;
+ --accent-color-hover: #3b86e8;
+ --accent-fg-color-hover: #1567d3;
+ --active-control-bg-color: #5a5a5a;
+ --focus-bg-color: hsl(214, 40%, 92%);
+ --focus-ring-inactive-shadow-color: #e0e0e0;
+ --input-validation-error: #db1600;
+ --toolbar-bg-color: #f3f3f3;
+ --toolbar-hover-bg-color: #eaeaea;
+ --selection-fg-color: white;
+ --selection-inactive-fg-color: #5a5a5a;
+ --selection-inactive-bg-color: #dadada;
+ --tab-selected-fg-color: #333;
+ --tab-selected-bg-color: var(--toolbar-bg-color);
+ --drop-shadow:
+ 0 0 0 1px rgba(0, 0, 0, 0.05),
+ 0 2px 4px rgba(0, 0, 0, 0.2),
+ 0 2px 6px rgba(0, 0, 0, 0.1);
+ --divider-color: #d0d0d0;
+ --focus-ring-inactive-shadow: 0 0 0 1px var(--focus-ring-inactive-shadow-color);
+ --item-selection-bg-color: #cfe8fc;
+ --item-selection-inactive-bg-color: #e0e0e0;
+ --network-grid-default-color: rgba(255, 255, 255, 1);
+ --network-grid-stripe-color: rgba(245, 245, 245, 1);
+ --network-grid-navigation-color: rgba(221, 238, 255, 1);
+ --network-grid-hovered-color: rgba(235, 242, 252, 0.7);
+ --network-grid-initiator-path-color: rgba(58, 217, 58, 0.4);
+ --network-grid-initiated-path-color: rgba(217, 58, 58, 0.4);
+ --network-grid-selected-color: rgba(219, 219, 219, 0.6);
+ --network-grid-focus-selected-color: var(--selection-bg-color);
+ --network-grid-focus-selected-color-has-error: rgb(255, 240, 240, 1);
+ --network-grid-from-frame-color: rgba(224, 247, 250, 0.4);
+ --network-grid-is-product-color: rgba(255, 252, 225, 0.6);
}
.-theme-with-dark-background {
- --accent-color: #0e639c;
- --accent-fg-color: #cccccc;
- --accent-fg-color-hover: #cccccc;
- --accent-color-hover: rgb(17, 119, 187);
- --active-control-bg-color: #cdcdcd;
- --focus-bg-color: hsl(214, 19%, 27%);
- --focus-ring-inactive-shadow-color: #5a5a5a;
- --toolbar-bg-color: #292a2d; /* --google-grey-900-white-4-percent */
- --toolbar-hover-bg-color: #202020;
- --selection-fg-color: #cdcdcd;
- --selection-inactive-fg-color: #cdcdcd;
- --selection-inactive-bg-color: hsl(0, 0%, 28%);
- --tab-selected-fg-color: #eaeaea;
- --tab-selected-bg-color: #000;
- --drop-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2),
- 0 2px 4px 2px rgba(0, 0, 0, 0.2),
- 0 2px 6px 2px rgba(0, 0, 0, 0.1);
- --divider-color: #525252;
- --focus-ring-inactive-shadow: 0 0 0 1px var(--focus-ring-inactive-shadow-color);
- --item-selection-bg-color: hsl(207, 88%, 22%);
- --item-selection-inactive-bg-color: #454545;
-
- --network-grid-default-color: rgba(36, 36, 36, 1.0);
- --network-grid-stripe-color: rgba(41, 41, 41, 1.0);
- --network-grid-navigation-color: rgba(221, 238, 255, 1.0);
- --network-grid-hovered-color: rgba(20, 37, 63, 0.7);
- --network-grid-initiator-path-color: rgba(58, 217, 58, 0.4);
- --network-grid-initiated-path-color: rgba(217, 58, 58, 0.4);
- --network-grid-selected-color: rgba(57, 57, 57, .6);
- --network-grid-focus-selected-color: var(--selection-bg-color);
- --network-grid-focus-selected-color-has-error: rgba(217, 58, 58, 0.15);
- --network-grid-from-frame-color: rgba(224, 247, 250, .4);
- --network-grid-is-product-color: rgba(255, 252, 225, .6);
+ --accent-color: #0e639c;
+ --accent-fg-color: #ccc;
+ --accent-fg-color-hover: #ccc;
+ --accent-color-hover: rgb(17, 119, 187);
+ --active-control-bg-color: #cdcdcd;
+ --focus-bg-color: hsl(214, 19%, 27%);
+ --focus-ring-inactive-shadow-color: #5a5a5a;
+ --toolbar-bg-color: #292a2d; /* --google-grey-900-white-4-percent */
+ --toolbar-hover-bg-color: #202020;
+ --selection-fg-color: #cdcdcd;
+ --selection-inactive-fg-color: #cdcdcd;
+ --selection-inactive-bg-color: hsl(0, 0%, 28%);
+ --tab-selected-fg-color: #eaeaea;
+ --tab-selected-bg-color: #000;
+ --drop-shadow:
+ 0 0 0 1px rgba(255, 255, 255, 0.2),
+ 0 2px 4px 2px rgba(0, 0, 0, 0.2),
+ 0 2px 6px 2px rgba(0, 0, 0, 0.1);
+ --divider-color: #525252;
+ --focus-ring-inactive-shadow: 0 0 0 1px var(--focus-ring-inactive-shadow-color);
+ --item-selection-bg-color: hsl(207, 88%, 22%);
+ --item-selection-inactive-bg-color: #454545;
+ --network-grid-default-color: rgba(36, 36, 36, 1);
+ --network-grid-stripe-color: rgba(41, 41, 41, 1);
+ --network-grid-navigation-color: rgba(221, 238, 255, 1);
+ --network-grid-hovered-color: rgba(20, 37, 63, 0.7);
+ --network-grid-initiator-path-color: rgba(58, 217, 58, 0.4);
+ --network-grid-initiated-path-color: rgba(217, 58, 58, 0.4);
+ --network-grid-selected-color: rgba(57, 57, 57, 0.6);
+ --network-grid-focus-selected-color: var(--selection-bg-color);
+ --network-grid-focus-selected-color-has-error: rgba(217, 58, 58, 0.15);
+ --network-grid-from-frame-color: rgba(224, 247, 250, 0.4);
+ --network-grid-is-product-color: rgba(255, 252, 225, 0.6);
}
:root {
- --focus-ring-active-shadow: 0 0 0 1px var(--accent-color);
- --selection-bg-color: var(--accent-color);
- --divider-border: 1px solid var(--divider-color);
- --item-hover-color: rgba(56, 121, 217, 0.1);
- --network-frame-divider-color: #fccc49;
+ --focus-ring-active-shadow: 0 0 0 1px var(--accent-color);
+ --selection-bg-color: var(--accent-color);
+ --divider-border: 1px solid var(--divider-color);
+ --item-hover-color: rgba(56, 121, 217, 0.1);
+ --network-frame-divider-color: #fccc49;
}
body {
- height: 100%;
- width: 100%;
- position: relative;
- overflow: hidden;
- margin: 0;
- cursor: default;
- font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
- font-size: 12px;
- tab-size: 4;
- user-select: none;
- color: #222;
- background: white;
+ height: 100%;
+ width: 100%;
+ position: relative;
+ overflow: hidden;
+ margin: 0;
+ cursor: default;
+ font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
+ font-size: 12px;
+ tab-size: 4;
+ user-select: none;
+ color: #222;
+ background: white;
}
.platform-linux {
- color: rgb(48, 57, 66);
- font-family: Roboto, Ubuntu, Arial, sans-serif;
+ color: rgb(48, 57, 66);
+ font-family: Roboto, Ubuntu, Arial, sans-serif;
}
.platform-mac {
- color: rgb(48, 57, 66);
- font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
+ color: rgb(48, 57, 66);
+ font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
}
.platform-windows {
- font-family: 'Segoe UI', Tahoma, sans-serif;
+ font-family: 'Segoe UI', Tahoma, sans-serif;
}
.panel {
- display: flex;
- overflow: hidden;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 0;
- background-color: white;
+ display: flex;
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 0;
+ background-color: white;
}
.panel-sidebar {
- overflow-x: hidden;
- background-color: var(--toolbar-bg-color);
+ overflow-x: hidden;
+ background-color: var(--toolbar-bg-color);
}
iframe.extension {
- flex: auto;
- width: 100%;
- height: 100%;
+ flex: auto;
+ width: 100%;
+ height: 100%;
}
iframe.panel.extension {
- display: block;
- height: 100%;
+ display: block;
+ height: 100%;
}
@media (forced-colors: active) {
- :root {
- --accent-color: Highlight;
- --focus-ring-inactive-shadow-color: ButtonText
- }
+ :root {
+ --accent-color: Highlight;
+ --focus-ring-inactive-shadow-color: ButtonText;
+ }
}
diff --git a/front_end/ui/inspectorSyntaxHighlight.css b/front_end/ui/inspectorSyntaxHighlight.css
index 5fa3459..e746a16 100644
--- a/front_end/ui/inspectorSyntaxHighlight.css
+++ b/front_end/ui/inspectorSyntaxHighlight.css
@@ -25,155 +25,163 @@
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-.cm-js-keyword {color: hsl(310, 86%, 36%);}
-.cm-js-number {color: hsl(248, 100%, 41%);}
-.cm-js-comment {color: hsl(120, 100%, 23%); font-style: italic;}
-.cm-js-string {color: hsl(1, 80%, 43%);}
-.cm-js-string-2 {color: hsl(1, 99%, 39%);}
-.cm-js-atom {color: hsl(310, 86%, 36%);}
-.cm-js-def {color: hsl(240, 73%, 38%);}
-.cm-js-operator {color: hsl(27, 100%, 30%);}
-.cm-js-meta {color: hsl(27, 100%, 30%);}
-.cm-js-variable-2 {color: hsl(240, 73%, 38%);}
+.cm-js-keyword { color: hsl(310, 86%, 36%); }
+.cm-js-number { color: hsl(248, 100%, 41%); }
+.cm-js-comment { color: hsl(120, 100%, 23%); font-style: italic; }
+.cm-js-string { color: hsl(1, 80%, 43%); }
+.cm-js-string-2 { color: hsl(1, 99%, 39%); }
+.cm-js-atom { color: hsl(310, 86%, 36%); }
+.cm-js-def { color: hsl(240, 73%, 38%); }
+.cm-js-operator { color: hsl(27, 100%, 30%); }
+.cm-js-meta { color: hsl(27, 100%, 30%); }
+.cm-js-variable-2 { color: hsl(240, 73%, 38%); }
-.cm-css-keyword { color: rgb(7, 144, 154);}
-.cm-css-number {color: rgb(50, 0, 255);}
-.cm-css-comment {color: rgb(0, 116, 0);}
-.cm-css-def {color: rgb(200, 0, 0);}
-.cm-css-meta {color: rgb(200, 0, 0);}
-.cm-css-atom {color: rgb(7, 144, 154);}
-.cm-css-string {color: rgb(7, 144, 154);}
-.cm-css-string-2 {color: rgb(7, 144, 154);}
-.cm-css-link {color: rgb(7, 144, 154);}
-.cm-css-variable {color: rgb(200, 0, 0);}
-.cm-css-variable-2 {color: rgb(0, 0, 128);}
-.cm-css-property, .webkit-css-property {color: rgb(200, 0, 0);}
+.cm-css-keyword { color: rgb(7, 144, 154); }
+.cm-css-number { color: rgb(50, 0, 255); }
+.cm-css-comment { color: rgb(0, 116, 0); }
+.cm-css-def { color: rgb(200, 0, 0); }
+.cm-css-meta { color: rgb(200, 0, 0); }
+.cm-css-atom { color: rgb(7, 144, 154); }
+.cm-css-string { color: rgb(7, 144, 154); }
+.cm-css-string-2 { color: rgb(7, 144, 154); }
+.cm-css-link { color: rgb(7, 144, 154); }
+.cm-css-variable { color: rgb(200, 0, 0); }
+.cm-css-variable-2 { color: rgb(0, 0, 128); }
-.cm-xml-meta {color: rgb(192, 192, 192);}
-.cm-xml-comment {color: rgb(35, 110, 37);}
-.cm-xml-string {color: rgb(26, 26, 166);}
-.cm-xml-tag {color: var(--dom-tag-name-color);}
-.cm-xml-attribute {color: rgb(153, 69, 0);}
-.cm-xml-link {color: #00e;}
+.cm-css-property,
+.webkit-css-property { color: rgb(200, 0, 0); }
+
+.cm-xml-meta { color: rgb(192, 192, 192); }
+.cm-xml-comment { color: rgb(35, 110, 37); }
+.cm-xml-string { color: rgb(26, 26, 166); }
+.cm-xml-tag { color: var(--dom-tag-name-color); }
+.cm-xml-attribute { color: rgb(153, 69, 0); }
+.cm-xml-link { color: #00e; }
:root {
- --dom-tag-name-color: rgb(136, 18, 128);
- --dom-attribute-name-color: rgb(153, 69, 0);
+ --dom-tag-name-color: rgb(136, 18, 128);
+ --dom-attribute-name-color: rgb(153, 69, 0);
}
.webkit-html-comment {
- /* Keep this in sync with view-source.css (.webkit-html-comment) */
- color: rgb(35, 110, 37);
+ /* Keep this in sync with view-source.css (.webkit-html-comment) */
+ color: rgb(35, 110, 37);
}
.webkit-html-tag {
- color: rgb(168, 148, 166);
+ color: rgb(168, 148, 166);
}
-.webkit-html-tag-name, .webkit-html-close-tag-name {
- /* Keep this in sync with view-source.css (.webkit-html-tag) */
- color: var(--dom-tag-name-color);
+.webkit-html-tag-name,
+.webkit-html-close-tag-name {
+ /* Keep this in sync with view-source.css (.webkit-html-tag) */
+ color: var(--dom-tag-name-color);
}
.webkit-html-pseudo-element {
- /* This one is non-standard. */
- color: brown;
+ /* This one is non-standard. */
+ color: brown;
}
.webkit-html-js-node,
.webkit-html-css-node {
- white-space: pre-wrap;
+ white-space: pre-wrap;
}
.webkit-html-text-node {
- unicode-bidi: -webkit-isolate;
+ unicode-bidi: -webkit-isolate;
}
.webkit-html-entity-value {
- /* This one is non-standard. */
- background-color: rgba(0, 0, 0, 0.15);
- unicode-bidi: -webkit-isolate;
+ /* This one is non-standard. */
+ background-color: rgba(0, 0, 0, 0.15);
+ unicode-bidi: -webkit-isolate;
}
.webkit-html-doctype {
- /* Keep this in sync with view-source.css (.webkit-html-doctype) */
- color: rgb(192, 192, 192);
+ /* Keep this in sync with view-source.css (.webkit-html-doctype) */
+ color: rgb(192, 192, 192);
}
.webkit-html-attribute-name {
- /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
- color: var(--dom-attribute-name-color);
- unicode-bidi: -webkit-isolate;
+ /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
+ color: var(--dom-attribute-name-color);
+ unicode-bidi: -webkit-isolate;
}
.webkit-html-attribute-value {
- /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
- color: rgb(26, 26, 166);
- unicode-bidi: -webkit-isolate;
+ /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
+ color: rgb(26, 26, 166);
+ unicode-bidi: -webkit-isolate;
}
.devtools-link {
- color: rgb(17, 85, 204);
- text-decoration: underline;
+ color: rgb(17, 85, 204);
+ text-decoration: underline;
}
.devtools-link [is=ui-icon] {
- vertical-align: middle;
+ vertical-align: middle;
}
.devtools-link[data-keyboard-focus="true"]:focus {
- outline-width: unset;
+ outline-width: unset;
}
.devtools-link:not(.devtools-link-prevent-click) {
- cursor: pointer;
+ cursor: pointer;
}
.-theme-with-dark-background .devtools-link,
:host-context(.-theme-with-dark-background) .devtools-link {
- color: hsl(0, 0%, 67%);
+ color: hsl(0, 0%, 67%);
}
/* Default CodeMirror Theme */
-.cm-negative {color: #d44;}
-.cm-positive {color: #292;}
-.cm-header, .cm-strong {font-weight: bold;}
-.cm-em {font-style: italic;}
-.cm-link {text-decoration: underline;}
-.cm-strikethrough {text-decoration: line-through;}
+.cm-negative { color: #d44; }
+.cm-positive { color: #292; }
-.cm-invalidchar {color: #f00;}
+.cm-header,
+.cm-strong { font-weight: bold; }
+.cm-em { font-style: italic; }
+.cm-link { text-decoration: underline; }
+.cm-strikethrough { text-decoration: line-through; }
-.cm-header {color: blue;}
-.cm-quote {color: #090;}
+.cm-invalidchar { color: #f00; }
-.cm-keyword {color: #708;}
-.cm-atom {color: #219;}
-.cm-number {color: #164;}
-.cm-def {color: #00f;}
-.cm-variable-2 {color: #05a;}
-.cm-variable-3, .cm-type {color: #085;}
-.cm-comment {color: #a50;}
-.cm-string {color: #a11;}
-.cm-string-2 {color: #f50;}
-.cm-meta {color: #555;}
-.cm-qualifier {color: #555;}
-.cm-builtin {color: #30a;}
-.cm-bracket {color: #997;}
-.cm-tag {color: #170;}
-.cm-attribute {color: #00c;}
-.cm-hr {color: #999;}
-.cm-link {color: #00c;}
+.cm-header { color: blue; }
+.cm-quote { color: #090; }
-.cm-error {color: #f00;}
+.cm-keyword { color: #708; }
+.cm-atom { color: #219; }
+.cm-number { color: #164; }
+.cm-def { color: #00f; }
+.cm-variable-2 { color: #05a; }
+
+.cm-variable-3,
+.cm-type { color: #085; }
+.cm-comment { color: #a50; }
+.cm-string { color: #a11; }
+.cm-string-2 { color: #f50; }
+.cm-meta { color: #555; }
+.cm-qualifier { color: #555; }
+.cm-builtin { color: #30a; }
+.cm-bracket { color: #997; }
+.cm-tag { color: #170; }
+.cm-attribute { color: #00c; }
+.cm-hr { color: #999; }
+.cm-link { color: #00c; }
+
+.cm-error { color: #f00; }
@media (forced-colors: active) {
- .devtools-link:not(.devtools-link-prevent-click) {
- forced-color-adjust: none;
- color: LinkText;
- }
- .devtools-link[data-keyboard-focus="true"]:focus {
- background: Highlight;
- color: HighlightText;
- }
+ .devtools-link:not(.devtools-link-prevent-click) {
+ forced-color-adjust: none;
+ color: linktext;
+ }
+
+ .devtools-link[data-keyboard-focus="true"]:focus {
+ background: Highlight;
+ color: HighlightText;
+ }
}
diff --git a/front_end/ui/inspectorSyntaxHighlightDark.css b/front_end/ui/inspectorSyntaxHighlightDark.css
index 011ca04..91a556e 100644
--- a/front_end/ui/inspectorSyntaxHighlightDark.css
+++ b/front_end/ui/inspectorSyntaxHighlightDark.css
@@ -4,81 +4,83 @@
* found in the LICENSE file.
*/
-.cm-js-atom{color:rgb(161, 247, 181);}
-.cm-js-attribute{color:rgb(97, 148, 198);}
-.cm-js-builtin{color:rgb(159, 180, 214);}
-.cm-js-comment{color:rgb(116, 116, 116);}
-.cm-js-def{color:var(--dom-tag-name-color);}
-.cm-js-keyword{color:rgb(154, 127, 213);}
-.cm-js-link{color:rgb(159, 180, 214);}
-.cm-js-meta{color:rgb(221, 251, 85);}
-.cm-js-number{color:rgb(161, 247, 181);}
-.cm-js-operator{color:rgb(210, 192, 87);}
-.cm-js-property{color:rgb(210, 192, 87);}
-.cm-js-string{color:rgb(242, 139, 84);}
-.cm-js-string-2{color:rgb(242, 139, 84);}
-.cm-js-tag{color:var(--dom-tag-name-color);}
-.cm-js-variable{color:rgb(217, 217, 217);}
-.cm-js-variable-2{color:rgb(217, 217, 217);}
-.cm-atom{color:rgb(161, 247, 181);}
-.cm-comment{color:rgb(116, 116, 116);}
-.cm-variable{color:rgb(217, 217, 217);}
-.cm-string{color:rgb(242, 139, 84);}
-.cm-keyword{color:rgb(154, 127, 213);}
-.cm-number{color:rgb(161, 247, 181);}
-.cm-operator{color:rgb(210, 192, 87);}
-.cm-css-atom{color:rgb(217, 217, 217);}
-.cm-css-builtin{color:rgb(255, 163, 79);}
-.cm-css-def{color:rgb(255, 163, 79);}
-.cm-css-comment{color:rgb(116, 116, 116);}
-.cm-css-meta{color:rgb(132, 240, 255);}
-.cm-css-number{color:rgb(217, 217, 217);}
-.cm-css-operator{color:rgb(217, 217, 217);}
-.cm-css-property{color:rgb(132, 240, 255);}
-.cm-css-qualifier{color:rgb(255, 163, 79);}
-.cm-css-string{color:rgb(231, 194, 111);}
-.cm-css-string-2{color:rgb(217, 217, 217);}
-.cm-css-tag{color:rgb(255, 163, 79);}
-.cm-css-variable{color:rgb(255, 163, 79);}
-.cm-css-variable-2{color:rgb(255, 163, 79);}
-.cm-xml-comment{color:rgb(137, 137, 137);}
-.cm-xml-error{color:rgb(198, 95, 95);}
-.cm-xml-string{color:rgb(242, 151, 102);}
-.cm-xml-tag{color:var(--dom-tag-name-color);}
-.cm-xml-attribute{color:var(--dom-attribute-name-color);}
-.cm-xml-link{color:rgb(231, 194, 111);}
+.cm-js-atom { color: rgb(161, 247, 181); }
+.cm-js-attribute { color: rgb(97, 148, 198); }
+.cm-js-builtin { color: rgb(159, 180, 214); }
+.cm-js-comment { color: rgb(116, 116, 116); }
+.cm-js-def { color: var(--dom-tag-name-color); }
+.cm-js-keyword { color: rgb(154, 127, 213); }
+.cm-js-link { color: rgb(159, 180, 214); }
+.cm-js-meta { color: rgb(221, 251, 85); }
+.cm-js-number { color: rgb(161, 247, 181); }
+.cm-js-operator { color: rgb(210, 192, 87); }
+.cm-js-property { color: rgb(210, 192, 87); }
+.cm-js-string { color: rgb(242, 139, 84); }
+.cm-js-string-2 { color: rgb(242, 139, 84); }
+.cm-js-tag { color: var(--dom-tag-name-color); }
+.cm-js-variable { color: rgb(217, 217, 217); }
+.cm-js-variable-2 { color: rgb(217, 217, 217); }
+.cm-atom { color: rgb(161, 247, 181); }
+.cm-comment { color: rgb(116, 116, 116); }
+.cm-variable { color: rgb(217, 217, 217); }
+.cm-string { color: rgb(242, 139, 84); }
+.cm-keyword { color: rgb(154, 127, 213); }
+.cm-number { color: rgb(161, 247, 181); }
+.cm-operator { color: rgb(210, 192, 87); }
+.cm-css-atom { color: rgb(217, 217, 217); }
+.cm-css-builtin { color: rgb(255, 163, 79); }
+.cm-css-def { color: rgb(255, 163, 79); }
+.cm-css-comment { color: rgb(116, 116, 116); }
+.cm-css-meta { color: rgb(132, 240, 255); }
+.cm-css-number { color: rgb(217, 217, 217); }
+.cm-css-operator { color: rgb(217, 217, 217); }
+.cm-css-property { color: rgb(132, 240, 255); }
+.cm-css-qualifier { color: rgb(255, 163, 79); }
+.cm-css-string { color: rgb(231, 194, 111); }
+.cm-css-string-2 { color: rgb(217, 217, 217); }
+.cm-css-tag { color: rgb(255, 163, 79); }
+.cm-css-variable { color: rgb(255, 163, 79); }
+.cm-css-variable-2 { color: rgb(255, 163, 79); }
+.cm-xml-comment { color: rgb(137, 137, 137); }
+.cm-xml-error { color: rgb(198, 95, 95); }
+.cm-xml-string { color: rgb(242, 151, 102); }
+.cm-xml-tag { color: var(--dom-tag-name-color); }
+.cm-xml-attribute { color: var(--dom-attribute-name-color); }
+.cm-xml-link { color: rgb(231, 194, 111); }
-.webkit-html-attribute-name{color:var(--dom-attribute-name-color);}
-.webkit-html-attribute-value{color:rgb(242, 151, 102);}
-.webkit-html-comment{color:rgb(137, 137, 137);}
-.devtools-link{color:rgb(231, 194, 111);}
-.webkit-html-tag{color:var(--dom-tag-name-color);}
-.webkit-html-tag-name{color:var(--dom-tag-name-color);}
-.webkit-html-close-tag-name{color:var(--dom-tag-name-color);}
-.webkit-html-text-node{color:rgb(207, 208, 208);}
-.webkit-html-css-node{color:rgb(207, 208, 208);}
-.webkit-html-js-node{color:rgb(207, 208, 208);}
-.webkit-html-pseudo-element{color:rgb(93, 175, 215);}
-.webkit-css-property{color: rgb(53, 212, 199);}
+.webkit-html-attribute-name { color: var(--dom-attribute-name-color); }
+.webkit-html-attribute-value { color: rgb(242, 151, 102); }
+.webkit-html-comment { color: rgb(137, 137, 137); }
+.devtools-link { color: rgb(231, 194, 111); }
+.webkit-html-tag { color: var(--dom-tag-name-color); }
+.webkit-html-tag-name { color: var(--dom-tag-name-color); }
+.webkit-html-close-tag-name { color: var(--dom-tag-name-color); }
+.webkit-html-text-node { color: rgb(207, 208, 208); }
+.webkit-html-css-node { color: rgb(207, 208, 208); }
+.webkit-html-js-node { color: rgb(207, 208, 208); }
+.webkit-html-pseudo-element { color: rgb(93, 175, 215); }
+.webkit-css-property { color: rgb(53, 212, 199); }
-.cm-def{color:var(--dom-tag-name-color);}
-.cm-header{color:var(--dom-tag-name-color);}
-.cm-variable-2{color:rgb(217, 217, 217);}
+.cm-def { color: var(--dom-tag-name-color); }
+.cm-header { color: var(--dom-tag-name-color); }
+.cm-variable-2 { color: rgb(217, 217, 217); }
-.cm-variable-2 {color: #05a;}
-.cm-variable-3, .cm-type {color: rgb(93, 176, 215);}
-.cm-string {color: rgb(242, 139, 84);}
-.cm-meta {color: #555;}
-.cm-meta {color:rgb(221, 251, 85);}
-.cm-qualifier{color:rgb(255, 163, 79);}
-.cm-builtin{color:rgb(159, 180, 214);}
-.cm-bracket {color: #997;}
-.cm-tag{color:var(--dom-tag-name-color);}
-.cm-attribute{color:rgb(97, 148, 198);}
-.cm-hr {color: #999;}
-.cm-link{color:rgb(159, 180, 214);}
+.cm-variable-2 { color: #05a; }
+
+.cm-variable-3,
+.cm-type { color: rgb(93, 176, 215); }
+.cm-string { color: rgb(242, 139, 84); }
+.cm-meta { color: #555; }
+.cm-meta { color: rgb(221, 251, 85); }
+.cm-qualifier { color: rgb(255, 163, 79); }
+.cm-builtin { color: rgb(159, 180, 214); }
+.cm-bracket { color: #997; }
+.cm-tag { color: var(--dom-tag-name-color); }
+.cm-attribute { color: rgb(97, 148, 198); }
+.cm-hr { color: #999; }
+.cm-link { color: rgb(159, 180, 214); }
:root {
- --dom-tag-name-color: rgb(93, 176, 215);
- --dom-attribute-name-color: rgb(155, 187, 220);
+ --dom-tag-name-color: rgb(93, 176, 215);
+ --dom-attribute-name-color: rgb(155, 187, 220);
}
diff --git a/front_end/ui/inspectorViewTabbedPane.css b/front_end/ui/inspectorViewTabbedPane.css
index c461ce2..077252b 100644
--- a/front_end/ui/inspectorViewTabbedPane.css
+++ b/front_end/ui/inspectorViewTabbedPane.css
@@ -6,21 +6,21 @@
.tabbed-pane-header-tab,
.tabbed-pane-header-tab.selected {
- height: 26px;
- margin: 0;
- border: none;
- border-left: 2px solid transparent;
- border-right: 2px solid transparent;
+ height: 26px;
+ margin: 0;
+ border: none;
+ border-left: 2px solid transparent;
+ border-right: 2px solid transparent;
}
.tabbed-pane-header-tab.selected {
- border-width: 0 2px 0 2px;
+ border-width: 0 2px 0 2px;
}
.tabbed-pane-header-contents {
- margin-left: 0;
+ margin-left: 0;
}
.tabbed-pane-left-toolbar {
- margin-right: 0 !important;
+ margin-right: 0 !important;
}
diff --git a/front_end/ui/listWidget.css b/front_end/ui/listWidget.css
index 6c3be44..124a44d 100644
--- a/front_end/ui/listWidget.css
+++ b/front_end/ui/listWidget.css
@@ -5,122 +5,125 @@
*/
.list {
- flex: auto 0 1;
- overflow-y: auto;
- border: 1px solid rgb(231, 231, 231);
- flex-direction: column;
+ flex: auto 0 1;
+ overflow-y: auto;
+ border: 1px solid rgb(231, 231, 231);
+ flex-direction: column;
}
.list-separator {
- background: rgb(231, 231, 231);
- height: 1px;
+ background: rgb(231, 231, 231);
+ height: 1px;
}
.list-item {
- flex: none;
- min-height: 30px;
- display: flex;
- align-items: center;
- position: relative;
- overflow: hidden;
+ flex: none;
+ min-height: 30px;
+ display: flex;
+ align-items: center;
+ position: relative;
+ overflow: hidden;
}
.list-item:focus-within,
.list-item:hover {
- background: hsl(0, 0%, 96%);
+ background: hsl(0, 0%, 96%);
}
.list-widget-input-validation-error {
- color: var(--input-validation-error);
- margin: 0 5px;
+ color: var(--input-validation-error);
+ margin: 0 5px;
}
.controls-container {
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- align-items: stretch;
- pointer-events: none;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: stretch;
+ pointer-events: none;
}
.controls-gradient {
- flex: 0 1 50px;
+ flex: 0 1 50px;
}
.list-item:focus-within .controls-gradient,
.list-item:hover .controls-gradient {
- background-image: linear-gradient(90deg, transparent, hsl(0, 0%, 96%));
+ background-image: linear-gradient(90deg, transparent, hsl(0, 0%, 96%));
}
.controls-buttons {
- flex: none;
- display: flex;
- flex-direction: row;
- align-items: center;
- pointer-events: auto;
- visibility: hidden;
+ flex: none;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ pointer-events: auto;
+ visibility: hidden;
}
.list-item:focus-within .controls-buttons,
.list-item:hover .controls-buttons {
- background-color: hsl(0, 0%, 96%);
- visibility: visible;
+ background-color: hsl(0, 0%, 96%);
+ visibility: visible;
}
.editor-container {
- display: flex;
- flex-direction: column;
- align-items: stretch;
- flex: none;
- background: hsl(0, 0%, 96%);
- overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ flex: none;
+ background: hsl(0, 0%, 96%);
+ overflow: hidden;
}
.editor-content {
- flex: auto;
- display: flex;
- flex-direction: column;
- align-items: stretch;
+ flex: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
}
.editor-buttons {
- flex: none;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- padding: 5px;
+ flex: none;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ padding: 5px;
}
.editor-buttons > button {
- flex: none;
- margin-right: 10px;
+ flex: none;
+ margin-right: 10px;
}
.editor-content input {
- margin-right: 10px;
+ margin-right: 10px;
}
.editor-content input.error-input {
- background-color: white;
+ background-color: white;
}
@media (forced-colors: active) {
- .list-item:focus-within .controls-buttons,
- .list-item:hover .controls-buttons {
- background-color: Canvas;
- }
- .list-item:focus-within,
- .list-item:hover {
- forced-color-adjust: none;
- background: Highlight;
- }
- .list-item:focus-within *,
- .list-item:hover * {
- color: HighlightText;
- }
- .list-item:focus-within .controls-gradient,
- .list-item:hover .controls-gradient {
- background-image: unset;
- }
+ .list-item:focus-within .controls-buttons,
+ .list-item:hover .controls-buttons {
+ background-color: canvas;
+ }
+
+ .list-item:focus-within,
+ .list-item:hover {
+ forced-color-adjust: none;
+ background: Highlight;
+ }
+
+ .list-item:focus-within *,
+ .list-item:hover * {
+ color: HighlightText;
+ }
+
+ .list-item:focus-within .controls-gradient,
+ .list-item:hover .controls-gradient {
+ background-image: unset;
+ }
}
diff --git a/front_end/ui/popover.css b/front_end/ui/popover.css
index f2d8704..19fe4e4 100644
--- a/front_end/ui/popover.css
+++ b/front_end/ui/popover.css
@@ -5,16 +5,16 @@
*/
.widget {
- display: flex;
- background: white;
- border: 1px solid transparent;
- box-shadow: var(--drop-shadow);
- border-radius: 2px;
- overflow: auto;
- user-select: text;
- line-height: 11px;
+ display: flex;
+ background: white;
+ border: 1px solid transparent;
+ box-shadow: var(--drop-shadow);
+ border-radius: 2px;
+ overflow: auto;
+ user-select: text;
+ line-height: 11px;
}
.widget.has-padding {
- padding: 6px;
+ padding: 6px;
}
diff --git a/front_end/ui/progressIndicator.css b/front_end/ui/progressIndicator.css
index 6844f60..c8e3cc6 100644
--- a/front_end/ui/progressIndicator.css
+++ b/front_end/ui/progressIndicator.css
@@ -5,29 +5,29 @@
*/
.progress-indicator-shadow-stop-button {
- background-color: rgb(216, 0, 0) !important;
- border: 0;
- width: 10px;
- height: 12px;
- border-radius: 2px;
+ background-color: rgb(216, 0, 0) !important;
+ border: 0;
+ width: 10px;
+ height: 12px;
+ border-radius: 2px;
}
.progress-indicator-shadow-container {
- display: flex;
- flex: 1 0 auto;
- align-items: center;
+ display: flex;
+ flex: 1 0 auto;
+ align-items: center;
}
.progress-indicator-shadow-container .title {
- text-overflow: ellipsis;
- overflow: hidden;
- max-width: 150px;
- margin-right: 2px;
- color: #777;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: 150px;
+ margin-right: 2px;
+ color: #777;
}
.progress-indicator-shadow-container progress {
- flex: auto;
- margin: 0 2px;
- width: 100px
+ flex: auto;
+ margin: 0 2px;
+ width: 100px;
}
diff --git a/front_end/ui/radioButton.css b/front_end/ui/radioButton.css
index 25b713e..17a7319 100644
--- a/front_end/ui/radioButton.css
+++ b/front_end/ui/radioButton.css
@@ -5,13 +5,14 @@
*/
::slotted(input.dt-radio-button) {
- --gradient-start: #FCFCFC;
- --gradient-end: #DFDFDF;
+ --gradient-start: #fcfcfc;
+ --gradient-end: #dfdfdf;
--radio-dot: url(Images/radioDot.png);
+
height: 17px;
width: 17px;
min-width: 17px;
- border: 1px solid #A5A5A5;
+ border: 1px solid #a5a5a5;
background-image: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
border-radius: 8px;
-webkit-appearance: none;
@@ -20,8 +21,9 @@
}
::slotted(input.dt-radio-button:checked) {
- background: var(--radio-dot) center no-repeat,
- linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
+ background:
+ var(--radio-dot) center no-repeat,
+ linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
}
::slotted(input.dt-radio-button:focus) {
@@ -36,13 +38,13 @@
::slotted(input.dt-radio-button:checked:active),
::slotted(input.dt-radio-button:active:not(:disabled)) {
- --gradient-start: #C2C2C2;
- --gradient-end: #EFEFEF;
+ --gradient-start: #c2c2c2;
+ --gradient-end: #efefef;
}
:host-context(.-theme-with-dark-background) ::slotted(input.dt-radio-button:checked:active),
:host-context(.-theme-with-dark-background) ::slotted(input.dt-radio-button:active:not(:disabled)) {
- --gradient-start: #3D3D3D;
+ --gradient-start: #3d3d3d;
--gradient-end: #101010;
}
@@ -51,6 +53,7 @@
--gradient-start: ButtonFace;
--gradient-end: ButtonFace;
}
+
::slotted(input.dt-radio-button:checked) {
--gradient-start: Highlight;
--gradient-end: Highlight;
diff --git a/front_end/ui/remoteDebuggingTerminatedScreen.css b/front_end/ui/remoteDebuggingTerminatedScreen.css
index 84916e1..bfcc0a4 100644
--- a/front_end/ui/remoteDebuggingTerminatedScreen.css
+++ b/front_end/ui/remoteDebuggingTerminatedScreen.css
@@ -5,20 +5,21 @@
*/
.widget {
- padding: 20px;
+ padding: 20px;
}
-.message, .button {
- font-size: larger;
- white-space: pre;
- margin: 5px;
+.message,
+.button {
+ font-size: larger;
+ white-space: pre;
+ margin: 5px;
}
.button {
- text-align: center;
- margin-top: 10px;
+ text-align: center;
+ margin-top: 10px;
}
.reason {
- color: #8b0000;
+ color: #8b0000;
}
diff --git a/front_end/ui/reportView.css b/front_end/ui/reportView.css
index 6b2bd98..68b63cf 100644
--- a/front_end/ui/reportView.css
+++ b/front_end/ui/reportView.css
@@ -36,7 +36,8 @@
font-size: 15px;
}
-.report-url, .report-subtitle {
+.report-url,
+.report-subtitle {
font-size: 12px;
margin-top: 10px;
}
@@ -100,7 +101,8 @@
user-select: text;
}
-.image-wrapper, .image-wrapper img {
+.image-wrapper,
+.image-wrapper img {
max-width: 200px;
max-height: 200px;
display: block;
diff --git a/front_end/ui/rootView.css b/front_end/ui/rootView.css
index c6f8964..ddf3b17 100644
--- a/front_end/ui/rootView.css
+++ b/front_end/ui/rootView.css
@@ -5,11 +5,11 @@
*/
.root-view {
- background-color: white;
- overflow: hidden;
- position: absolute !important;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
+ background-color: white;
+ overflow: hidden;
+ position: absolute !important;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
}
diff --git a/front_end/ui/searchableView.css b/front_end/ui/searchableView.css
index 6ea9c1a..a579e08 100644
--- a/front_end/ui/searchableView.css
+++ b/front_end/ui/searchableView.css
@@ -5,138 +5,139 @@
*/
.search-bar {
- flex: 0 0 31px;
- background-color: #eee;
- border-top: 1px solid #ccc;
- display: flex;
- overflow: hidden;
- z-index: 0;
+ flex: 0 0 31px;
+ background-color: #eee;
+ border-top: 1px solid #ccc;
+ display: flex;
+ overflow: hidden;
+ z-index: 0;
}
.search-bar.replaceable {
- flex: 0 0 57px;
+ flex: 0 0 57px;
}
.search-replace {
- -webkit-appearance: none;
- border: 0;
- padding: 0 3px;
- margin: 0;
- flex: 1;
+ -webkit-appearance: none;
+ border: 0;
+ padding: 0 3px;
+ margin: 0;
+ flex: 1;
}
.search-replace:focus {
- outline: none;
+ outline: none;
}
.toolbar-search {
- display: flex;
- width: 100%;
+ display: flex;
+ width: 100%;
}
.toolbar-search > div {
- margin: 2px 2px;
- flex-shrink: 0;
+ margin: 2px 2px;
+ flex-shrink: 0;
}
.toolbar-search-inputs {
- flex-grow: 1;
- min-width: 150px;
+ flex-grow: 1;
+ min-width: 150px;
}
.toolbar-search-navigation-controls {
- align-self: stretch;
+ align-self: stretch;
}
.toolbar-search-navigation {
- display: inline-block;
- width: 20px;
- height: 20px;
- background-repeat: no-repeat;
- background-position: 4px 7px;
- border-left: 1px solid rgb(170, 170, 170);
- opacity: 0.3;
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ background-repeat: no-repeat;
+ background-position: 4px 7px;
+ border-left: 1px solid rgb(170, 170, 170);
+ opacity: 0.3;
}
.toolbar-search-navigation.enabled {
- opacity: 1.0;
+ opacity: 1;
}
.toolbar-search button.search-action-button {
- font-weight: 400;
- height: 22px;
- width: 87px;
+ font-weight: 400;
+ height: 22px;
+ width: 87px;
}
.toolbar-search-control {
- display: -webkit-flex;
- position: relative;
- background-color: white;
+ display: -webkit-flex;
+ position: relative;
+ background-color: white;
}
.toolbar-search-buttons {
- display: flex;
- flex-direction: column;
+ display: flex;
+ flex-direction: column;
}
.toolbar-replace-control,
#search-input-field {
- margin-top: 1px;
- line-height: 17px;
+ margin-top: 1px;
+ line-height: 17px;
}
-.toolbar-search-control, .toolbar-replace-control {
- border: 1px solid rgb(163, 163, 163);
- height: 22px;
- border-radius: 2px;
- width: 100%;
- margin-top: 2px;
- margin-bottom: 2px;
+.toolbar-search-control,
+.toolbar-replace-control {
+ border: 1px solid rgb(163, 163, 163);
+ height: 22px;
+ border-radius: 2px;
+ width: 100%;
+ margin-top: 2px;
+ margin-bottom: 2px;
}
.toolbar-search-navigation.enabled:active {
- background-position: 4px 7px, 0 0;
+ background-position: 4px 7px, 0 0;
}
.toolbar-search-navigation.toolbar-search-navigation-prev {
- background-image: url(Images/searchPrev.png);
- border-left: 1px solid rgb(163, 163, 163);
+ background-image: url(Images/searchPrev.png);
+ border-left: 1px solid rgb(163, 163, 163);
}
:host-context(.-theme-with-dark-background) .toolbar-search-navigation {
- -webkit-filter: invert(90%);
+ -webkit-filter: invert(90%);
}
.toolbar-search-navigation.toolbar-search-navigation-prev.enabled:active {
- background-image: url(Images/searchPrev.png), #f2f2f2;
+ background-image: url(Images/searchPrev.png), #f2f2f2;
}
.toolbar-search-navigation.toolbar-search-navigation-next {
- background-image: url(Images/searchNext.png);
- border-left: 1px solid rgb(230, 230, 230);
+ background-image: url(Images/searchNext.png);
+ border-left: 1px solid rgb(230, 230, 230);
}
.toolbar-search-navigation.toolbar-search-navigation-next.enabled:active {
- background-image: url(Images/searchNext.png), #f2f2f2;
+ background-image: url(Images/searchNext.png), #f2f2f2;
}
.search-results-matches {
- display: inline-block;
- text-align: right;
- padding: 0 4px;
- color: rgb(165, 165, 165);
- align-self: center;
+ display: inline-block;
+ text-align: right;
+ padding: 0 4px;
+ color: rgb(165, 165, 165);
+ align-self: center;
}
.first-row-buttons {
- display: flex;
- justify-content: space-between;
+ display: flex;
+ justify-content: space-between;
}
.toolbar-search > .replace-toggle-toolbar {
- margin: 2px -2px 0 0;
+ margin: 2px -2px 0 0;
}
.toolbar-search-options {
- margin: 0 auto;
+ margin: 0 auto;
}
diff --git a/front_end/ui/segmentedButton.css b/front_end/ui/segmentedButton.css
index 725b487..e2f8622 100644
--- a/front_end/ui/segmentedButton.css
+++ b/front_end/ui/segmentedButton.css
@@ -22,7 +22,7 @@
}
.segmented-button-segment:hover {
- background-color: #F4F4F4;
+ background-color: #f4f4f4;
color: #333;
}
@@ -40,15 +40,16 @@
.segmented-button-segment.segmented-button-segment-selected {
background-color: hsl(218, 81%, 59%);
border-color: transparent;
- color: #FAFAFA;
+ color: #fafafa;
}
.segmented-button-segment.segmented-button-segment-selected:hover {
background-color: hsl(218, 81%, 62%);
- color: #FFF;
+ color: #fff;
}
/* Remove a border between the selected button and its siblin */
+
.segmented-button-segment-selected + .segmented-button-segment {
border-left-color: transparent;
}
diff --git a/front_end/ui/slider.css b/front_end/ui/slider.css
index b2c833c..801f441 100644
--- a/front_end/ui/slider.css
+++ b/front_end/ui/slider.css
@@ -5,46 +5,48 @@
*/
.dt-range-input {
- -webkit-appearance: none;
- margin: 0;
- padding: 0;
- height: 10px;
- width: 88px;
- outline: none;
- background: none;
+ -webkit-appearance: none;
+ margin: 0;
+ padding: 0;
+ height: 10px;
+ width: 88px;
+ outline: none;
+ background: none;
}
-.dt-range-input::-webkit-slider-thumb, -theme-preserve {
- -webkit-appearance: none;
- margin: 0;
- padding: 0;
- border: 0;
- width: 12px;
- height: 12px;
- margin-top: -5px;
- border-radius: 50%;
- background-color: #4285F4;
+.dt-range-input::-webkit-slider-thumb,
+-theme-preserve {
+ -webkit-appearance: none;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ width: 12px;
+ height: 12px;
+ margin-top: -5px;
+ border-radius: 50%;
+ background-color: #4285f4;
}
.dt-range-input::-webkit-slider-runnable-track {
- -webkit-appearance: none;
- margin: 0;
- padding: 0;
- width: 100%;
- height: 2px;
- background-color: rgba(0, 0, 0, 0.26);
+ -webkit-appearance: none;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 2px;
+ background-color: rgba(0, 0, 0, 0.26);
}
-.dt-range-input:focus::-webkit-slider-thumb, -theme-preserve {
- box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.4);
+.dt-range-input:focus::-webkit-slider-thumb,
+-theme-preserve {
+ box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.4);
}
.dt-range-input:disabled::-webkit-slider-thumb {
- background-color: #bdbdbd;
+ background-color: #bdbdbd;
}
@media (forced-colors: active) {
- .dt-range-input {
- forced-color-adjust: none;
- }
+ .dt-range-input {
+ forced-color-adjust: none;
+ }
}
diff --git a/front_end/ui/smallBubble.css b/front_end/ui/smallBubble.css
index 856890b..3b7b695 100644
--- a/front_end/ui/smallBubble.css
+++ b/front_end/ui/smallBubble.css
@@ -5,33 +5,33 @@
*/
div {
- display: inline-block;
- height: 14px;
- vertical-align: middle;
- white-space: nowrap;
- padding: 1px 4px;
- text-align: left;
- font-size: 11px;
- line-height: normal;
- font-weight: bold;
- text-shadow: none;
- color: white;
- margin-top: -1px;
- border-radius: 7px;
+ display: inline-block;
+ height: 14px;
+ vertical-align: middle;
+ white-space: nowrap;
+ padding: 1px 4px;
+ text-align: left;
+ font-size: 11px;
+ line-height: normal;
+ font-weight: bold;
+ text-shadow: none;
+ color: white;
+ margin-top: -1px;
+ border-radius: 7px;
}
div.verbose {
- background-color: rgb(0, 0, 255);
+ background-color: rgb(0, 0, 255);
}
div.info {
- background-color: rgb(128, 151, 189);
+ background-color: rgb(128, 151, 189);
}
div.warning {
- background-color: rgb(232, 164, 0);
+ background-color: rgb(232, 164, 0);
}
div.error {
- background-color: rgb(216, 35, 35);
+ background-color: rgb(216, 35, 35);
}
diff --git a/front_end/ui/softContextMenu.css b/front_end/ui/softContextMenu.css
index b711c07..f9f11be 100644
--- a/front_end/ui/softContextMenu.css
+++ b/front_end/ui/softContextMenu.css
@@ -5,156 +5,168 @@
*/
.soft-context-menu {
- overflow-y: auto;
- min-width: 160px !important;
- /* NOTE: Keep padding in sync with padding adjustment in SoftContextMenu.js */
- padding: 4px 0 4px 0;
- border: 1px solid #b9b9b9;
- background-color: #FFF;
- box-shadow: var(--drop-shadow);
- --context-menu-hover-bg: #ebebeb;
- --context-menu-hover-color: #222;
- --context-menu-seperator-color: var(--divider-color);
+ overflow-y: auto;
+ min-width: 160px !important;
+
+ /* NOTE: Keep padding in sync with padding adjustment in SoftContextMenu.js */
+ padding: 4px 0 4px 0;
+ border: 1px solid #b9b9b9;
+ background-color: #fff;
+ box-shadow: var(--drop-shadow);
+
+ --context-menu-hover-bg: #ebebeb;
+ --context-menu-hover-color: #222;
+ --context-menu-seperator-color: var(--divider-color);
}
:host:host-context(.platform-mac):host-context(html:not(.-theme-with-dark-background)) .soft-context-menu {
- border: 1px solid rgba(196, 196, 196, 0.9);
- border-top: 1px solid rgba(196, 196, 196, 0.5);
- border-radius: 4px;
- background-color: rgb(240, 240, 240);
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
- --context-menu-hover-color: #FFF;
- --context-menu-seperator-color: rgb(222, 222, 222);
+ border: 1px solid rgba(196, 196, 196, 0.9);
+ border-top: 1px solid rgba(196, 196, 196, 0.5);
+ border-radius: 4px;
+ background-color: rgb(240, 240, 240);
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
+
+ --context-menu-hover-color: #fff;
+ --context-menu-seperator-color: rgb(222, 222, 222);
}
:host-context(.-theme-with-dark-background) .soft-context-menu {
- --context-menu-hover-bg: var(--selection-bg-color);
- --context-menu-hover-color: var(--selection-fg-color);
- border: none;
+ --context-menu-hover-bg: var(--selection-bg-color);
+ --context-menu-hover-color: var(--selection-fg-color);
+
+ border: none;
}
.soft-context-menu-item {
- display: flex;
- width: 100%;
- font-size: 12px;
- border-top: 1px solid transparent;
- border-bottom: 1px solid transparent;
- padding: 2px 7px 2px 8px;
- margin: 0 13px 0 0;
- white-space: nowrap;
+ display: flex;
+ width: 100%;
+ font-size: 12px;
+ border-top: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+ padding: 2px 7px 2px 8px;
+ margin: 0 13px 0 0;
+ white-space: nowrap;
}
.soft-context-menu-disabled {
- color: #999;
- pointer-events: none;
+ color: #999;
+ pointer-events: none;
}
.soft-context-menu-separator {
- height: 10px;
- margin: 0 1px;
+ height: 10px;
+ margin: 0 1px;
}
.soft-context-menu-separator > .separator-line {
- margin: 0;
- height: 5px;
- border-bottom: 1px solid var(--context-menu-seperator-color);
- pointer-events: none;
+ margin: 0;
+ height: 5px;
+ border-bottom: 1px solid var(--context-menu-seperator-color);
+ pointer-events: none;
}
.soft-context-menu-item-mouse-over {
- border-top: 1px solid var(--context-menu-hover-bg);
- border-bottom: 1px solid var(--context-menu-hover-bg);
- background-color: var(--context-menu-hover-bg);
- color: var(--context-menu-hover-color);
+ border-top: 1px solid var(--context-menu-hover-bg);
+ border-bottom: 1px solid var(--context-menu-hover-bg);
+ background-color: var(--context-menu-hover-bg);
+ color: var(--context-menu-hover-color);
}
:host:host-context(.platform-mac):host-context(html:not(.-theme-with-dark-background)) .soft-context-menu-item-mouse-over {
- border-top: 1px solid transparent;
- border-bottom: 1px solid transparent;
- background-image: linear-gradient(to right, hsl(214, 81%, 60%), hsl(214, 100%, 56%));
+ border-top: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+ background-image: linear-gradient(to right, hsl(214, 81%, 60%), hsl(214, 100%, 56%));
}
:host:host-context(.platform-mac):host-context(html:not(.-theme-with-dark-background)) .separator-line {
- border-width: 2px;
+ border-width: 2px;
}
.soft-context-menu-item-submenu-arrow {
- pointer-events: none;
- font-size: 11px;
- text-align: right;
- align-self: center;
- margin-left: auto;
+ pointer-events: none;
+ font-size: 11px;
+ text-align: right;
+ align-self: center;
+ margin-left: auto;
}
.soft-context-menu-item-mouse-over .soft-context-menu-item-checkmark {
- color: var(--selection-fg-color);
+ color: var(--selection-fg-color);
}
.soft-context-menu-custom-item {
- display: inline-flex;
- justify-content: center;
- align-items: center;
- flex: auto;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ flex: auto;
}
.soft-context-menu-shortcut {
- color: gray;
- pointer-events: none;
- flex: 1 1 auto;
- text-align: right;
- padding-left: 10px;
+ color: gray;
+ pointer-events: none;
+ flex: 1 1 auto;
+ text-align: right;
+ padding-left: 10px;
}
.soft-context-menu-item-mouse-over .soft-context-menu-shortcut {
- color: inherit;
+ color: inherit;
}
.checkmark {
- opacity: 0.7;
- pointer-events: none;
- margin: auto 5px auto 0px;
+ opacity: 0.7;
+ pointer-events: none;
+ margin: auto 5px auto 0;
}
:host-context(.-theme-with-dark-background) .checkmark {
- filter: invert(80%);
+ filter: invert(80%);
}
.soft-context-menu-item-mouse-over .checkmark {
- opacity: 1;
- filter: none;
+ opacity: 1;
+ filter: none;
}
@media (forced-colors: active) {
- .soft-context-menu-item {
- forced-color-adjust: none;
- }
- .soft-context-menu-item-mouse-over {
- border-top-color: Highlight;
- border-bottom-color: Highlight;
- background-color: Highlight;
- color: HighlightText;
- }
- .soft-context-menu-shortcut {
- color: ButtonText;
- }
- .soft-context-menu-item-mouse-over .soft-context-menu-shortcut {
- color: HighlightText;
- }
- .soft-context-menu[data-keyboard-focus="true"]:focus {
- forced-color-adjust: none;
- background: Canvas;
- border-color: Highlight;
- }
- .soft-context-menu-separator > .separator-line {
- border-bottom-color: ButtonText;
- }
- .checkmark {
- opacity: 1;
- }
- .spritesheet-smallicons:not(.icon-mask) {
- filter: invert(100%);
- }
- .soft-context-menu-item-mouse-over .spritesheet-smallicons:not(.icon-mask) {
- filter: invert(0);
- }
+ .soft-context-menu-item {
+ forced-color-adjust: none;
+ }
+
+ .soft-context-menu-item-mouse-over {
+ border-top-color: Highlight;
+ border-bottom-color: Highlight;
+ background-color: Highlight;
+ color: HighlightText;
+ }
+
+ .soft-context-menu-shortcut {
+ color: ButtonText;
+ }
+
+ .soft-context-menu-item-mouse-over .soft-context-menu-shortcut {
+ color: HighlightText;
+ }
+
+ .soft-context-menu[data-keyboard-focus="true"]:focus {
+ forced-color-adjust: none;
+ background: canvas;
+ border-color: Highlight;
+ }
+
+ .soft-context-menu-separator > .separator-line {
+ border-bottom-color: ButtonText;
+ }
+
+ .checkmark {
+ opacity: 1;
+ }
+
+ .spritesheet-smallicons:not(.icon-mask) {
+ filter: invert(100%);
+ }
+
+ .soft-context-menu-item-mouse-over .spritesheet-smallicons:not(.icon-mask) {
+ filter: invert(0);
+ }
}
diff --git a/front_end/ui/softDropDown.css b/front_end/ui/softDropDown.css
index b7d4e99..c7e25f7 100644
--- a/front_end/ui/softDropDown.css
+++ b/front_end/ui/softDropDown.css
@@ -5,33 +5,35 @@
*/
.item.disabled {
- opacity: 0.5;
+ opacity: 0.5;
}
.item-list {
- background-color: white;
- box-shadow: var(--drop-shadow);
- overflow-x: hidden;
- overflow-y: auto;
- width: 100%;
+ background-color: white;
+ box-shadow: var(--drop-shadow);
+ overflow-x: hidden;
+ overflow-y: auto;
+ width: 100%;
}
.item.highlighted {
- color: var(--selection-fg-color);
- background-color: var(--selection-bg-color);
+ color: var(--selection-fg-color);
+ background-color: var(--selection-bg-color);
}
@media (forced-colors: active) {
- .item.disabled {
- opacity: 1;
- }
- .item-list {
- border: 1px solid ButtonText;
- background-color: ButtonFace;
- }
- .item.highlighted {
- forced-color-adjust: none;
- color: HighlightText;
- background-color: Highlight;
- }
+ .item.disabled {
+ opacity: 1;
+ }
+
+ .item-list {
+ border: 1px solid ButtonText;
+ background-color: ButtonFace;
+ }
+
+ .item.highlighted {
+ forced-color-adjust: none;
+ color: HighlightText;
+ background-color: Highlight;
+ }
}
diff --git a/front_end/ui/softDropDownButton.css b/front_end/ui/softDropDownButton.css
index ed3aa98..0fcbc58 100644
--- a/front_end/ui/softDropDownButton.css
+++ b/front_end/ui/softDropDownButton.css
@@ -3,44 +3,47 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
+
button.soft-dropdown {
- height: 26px;
- text-align: left;
- position: relative;
- border: none;
- background: none;
+ height: 26px;
+ text-align: left;
+ position: relative;
+ border: none;
+ background: none;
}
button.soft-dropdown[disabled] {
- opacity: .5;
+ opacity: 0.5;
}
button.soft-dropdown > .title {
- padding-right: 5px;
- width: 120px;
- overflow: hidden;
- text-overflow: ellipsis;
+ padding-right: 5px;
+ width: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
button.soft-dropdown[data-keyboard-focus="true"]:focus::before {
- content: "";
- position: absolute;
- top: 2px;
- left: 2px;
- right: 2px;
- bottom: 2px;
- border-radius: 2px;
- background: rgba(0, 0, 0, 0.08);
+ content: "";
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ right: 2px;
+ bottom: 2px;
+ border-radius: 2px;
+ background: rgba(0, 0, 0, 0.08);
}
@media (forced-colors: active) {
- button.soft-dropdown {
- border: 1px solid ButtonText;
- }
- button.soft-dropdown[disabled] {
- opacity: 1;
- }
- button.soft-dropdown:disabled > .smallicon-triangle-down {
- background-color: GrayText;
- }
+ button.soft-dropdown {
+ border: 1px solid ButtonText;
+ }
+
+ button.soft-dropdown[disabled] {
+ opacity: 1;
+ }
+
+ button.soft-dropdown:disabled > .smallicon-triangle-down {
+ background-color: GrayText;
+ }
}
diff --git a/front_end/ui/splitWidget.css b/front_end/ui/splitWidget.css
index b4f60ae..7de1bc0 100644
--- a/front_end/ui/splitWidget.css
+++ b/front_end/ui/splitWidget.css
@@ -27,69 +27,70 @@
*/
:host {
- overflow: hidden;
+ overflow: hidden;
}
.shadow-split-widget {
- display: flex;
- overflow: hidden;
+ display: flex;
+ overflow: hidden;
}
.shadow-split-widget-contents {
- display: flex;
- position: relative;
- flex-direction: column;
- contain: layout size style;
+ display: flex;
+ position: relative;
+ flex-direction: column;
+ contain: layout size style;
}
.shadow-split-widget-sidebar {
- flex: none;
+ flex: none;
}
-.shadow-split-widget-main, .shadow-split-widget-sidebar.maximized {
- flex: auto;
+.shadow-split-widget-main,
+.shadow-split-widget-sidebar.maximized {
+ flex: auto;
}
.shadow-split-widget.hbox > .shadow-split-widget-resizer {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 6px;
- z-index: 500;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 6px;
+ z-index: 500;
}
.shadow-split-widget.vbox > .shadow-split-widget-resizer {
- position: absolute;
- left: 0;
- right: 0;
- height: 6px;
- z-index: 500;
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: 6px;
+ z-index: 500;
}
.shadow-split-widget.vbox > .shadow-split-widget-sidebar.no-default-splitter {
- border: 0 !important;
+ border: 0 !important;
}
.shadow-split-widget.vbox > .shadow-split-widget-sidebar:not(.maximized) {
- border: 0;
- border-top: 1px solid var(--divider-color);
+ border: 0;
+ border-top: 1px solid var(--divider-color);
}
.shadow-split-widget.vbox > .shadow-split-widget-sidebar:first-child:not(.maximized) {
- border: 0;
- border-bottom: 1px solid var(--divider-color);
+ border: 0;
+ border-bottom: 1px solid var(--divider-color);
}
.shadow-split-widget.hbox > .shadow-split-widget-sidebar:not(.maximized) {
- border: 0;
- border-left: 1px solid var(--divider-color);
+ border: 0;
+ border-left: 1px solid var(--divider-color);
}
.shadow-split-widget.hbox > .shadow-split-widget-sidebar:first-child:not(.maximized) {
- border: 0;
- border-right: 1px solid var(--divider-color);
+ border: 0;
+ border-right: 1px solid var(--divider-color);
}
:host-context(.disable-resizer-for-elements-hack) .shadow-split-widget-resizer {
- pointer-events: none;
+ pointer-events: none;
}
diff --git a/front_end/ui/suggestBox.css b/front_end/ui/suggestBox.css
index b601721..423d935 100644
--- a/front_end/ui/suggestBox.css
+++ b/front_end/ui/suggestBox.css
@@ -29,72 +29,72 @@
*/
:host {
- display: flex;
- flex: auto;
+ display: flex;
+ flex: auto;
}
.suggest-box {
- flex: auto;
- background-color: #FFFFFF;
- pointer-events: auto;
- margin-left: -3px;
- box-shadow: var(--drop-shadow);
- overflow-x: hidden;
+ flex: auto;
+ background-color: #fff;
+ pointer-events: auto;
+ margin-left: -3px;
+ box-shadow: var(--drop-shadow);
+ overflow-x: hidden;
}
.suggest-box-content-item {
- padding: 1px 0 1px 1px;
- margin: 0;
- border: 1px solid transparent;
- white-space: nowrap;
- display: flex;
+ padding: 1px 0 1px 1px;
+ margin: 0;
+ border: 1px solid transparent;
+ white-space: nowrap;
+ display: flex;
}
.suggest-box-content-item.secondary {
- background-color: #f9f9f9;
+ background-color: #f9f9f9;
}
.suggestion-title {
- overflow: hidden;
- text-overflow: ellipsis;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.suggestion-title span {
- white-space: pre;
+ white-space: pre;
}
.suggestion-subtitle {
- flex: auto;
- text-align: right;
- color: #999;
- margin-right: 3px;
- overflow: hidden;
- text-overflow: ellipsis;
+ flex: auto;
+ text-align: right;
+ color: #999;
+ margin-right: 3px;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.suggestion-icon {
- user-select: none;
- align-self: center;
- flex-shrink: 0;
+ user-select: none;
+ align-self: center;
+ flex-shrink: 0;
}
.suggest-box-content-item .query {
- font-weight: bold;
+ font-weight: bold;
}
.suggest-box-content-item .spacer {
- display: inline-block;
- width: 20px;
+ display: inline-block;
+ width: 20px;
}
.suggest-box-content-item.selected {
- background-color: var(--selection-bg-color);
+ background-color: var(--selection-bg-color);
}
.suggest-box-content-item.selected > span {
- color: var(--selection-fg-color);
+ color: var(--selection-fg-color);
}
.suggest-box-content-item:hover:not(.selected) {
- background-color: var(--item-hover-color);
+ background-color: var(--item-hover-color);
}
diff --git a/front_end/ui/tabbedPane.css b/front_end/ui/tabbedPane.css
index 4a7827f..de16dda 100644
--- a/front_end/ui/tabbedPane.css
+++ b/front_end/ui/tabbedPane.css
@@ -29,301 +29,308 @@
*/
.tabbed-pane {
- flex: auto;
- overflow: hidden;
+ flex: auto;
+ overflow: hidden;
}
.tabbed-pane-content {
- position: relative;
- overflow: auto;
- flex: auto;
- display: flex;
- flex-direction: column;
+ position: relative;
+ overflow: auto;
+ flex: auto;
+ display: flex;
+ flex-direction: column;
}
.tabbed-pane-content.has-no-tabs {
- background-color: lightgray;
+ background-color: lightgray;
}
.tabbed-pane-placeholder {
- font-size: 14px;
- text-align: center;
- width: fit-content;
- margin: 20px auto 0px;
- text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
- line-height: 28px;
- overflow: hidden;
+ font-size: 14px;
+ text-align: center;
+ width: fit-content;
+ margin: 20px auto 0;
+ text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
+ line-height: 28px;
+ overflow: hidden;
}
.tabbed-pane-placeholder-row {
- display: flex;
- white-space: nowrap;
- padding: 0 5px;
- margin: 2px;
+ display: flex;
+ white-space: nowrap;
+ padding: 0 5px;
+ margin: 2px;
}
.tabbed-pane-placeholder-row[data-keyboard-focus="true"]:focus {
- outline-width: unset;
+ outline-width: unset;
}
.tabbed-pane-placeholder-key {
- flex: 1;
- text-align: right;
- padding-right: 14px;
- overflow: hidden;
- text-overflow: ellipsis;
+ flex: 1;
+ text-align: right;
+ padding-right: 14px;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.tabbed-pane-no-shortcut {
- flex: 1;
- text-align: center;
+ flex: 1;
+ text-align: center;
}
.tabbed-pane-placeholder-value {
- flex: 1;
- text-align: left;
- padding-left: 14px;
+ flex: 1;
+ text-align: left;
+ padding-left: 14px;
}
.tabbed-pane-header {
- display: flex;
- flex: 0 0 27px;
- border-bottom: 1px solid #ccc;
- overflow: visible;
- width: 100%;
- background-color: var(--toolbar-bg-color);
+ display: flex;
+ flex: 0 0 27px;
+ border-bottom: 1px solid #ccc;
+ overflow: visible;
+ width: 100%;
+ background-color: var(--toolbar-bg-color);
}
.tabbed-pane-header-contents {
- flex: auto;
- pointer-events: none;
- margin-left: 0;
- position: relative;
+ flex: auto;
+ pointer-events: none;
+ margin-left: 0;
+ position: relative;
}
.tabbed-pane-header-contents > * {
- pointer-events: initial;
+ pointer-events: initial;
}
.tabbed-pane-header-tab-icon {
- min-width: 14px;
- display: flex;
- align-items: center;
- margin-right: 2px;
+ min-width: 14px;
+ display: flex;
+ align-items: center;
+ margin-right: 2px;
}
.tabbed-pane-header-tab {
- float: left;
- padding: 2px 0.8em;
- height: 26px;
- line-height: 15px;
- white-space: nowrap;
- cursor: default;
- display: flex;
- align-items: center;
- color: #5a5a5a;
+ float: left;
+ padding: 2px 0.8em;
+ height: 26px;
+ line-height: 15px;
+ white-space: nowrap;
+ cursor: default;
+ display: flex;
+ align-items: center;
+ color: #5a5a5a;
}
.tabbed-pane-header-tab.closeable {
- padding-right: 4px;
+ padding-right: 4px;
}
.tabbed-pane-header-tab:hover,
.tabbed-pane-shadow .tabbed-pane-header-tab[data-keyboard-focus="true"]:focus {
- color: #333;
- background-color: var(--toolbar-hover-bg-color);
+ color: #333;
+ background-color: var(--toolbar-hover-bg-color);
}
.tabbed-pane-header-tab-title {
- text-overflow: ellipsis;
- overflow: hidden;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
.tabbed-pane-header-tab.measuring {
- visibility: hidden;
+ visibility: hidden;
}
.tabbed-pane-header-tab.selected {
- border-bottom: none;
+ border-bottom: none;
}
.tabbed-pane-header-tab.selected {
- background-color: var(--tab-selected-bg-color);
- color: var(--tab-selected-fg-color);
+ background-color: var(--tab-selected-bg-color);
+ color: var(--tab-selected-fg-color);
}
.tabbed-pane-header-tab.dragging {
- position: relative;
- box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
- background-color: #e5e5e5;
+ position: relative;
+ box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+ background-color: #e5e5e5;
}
.tabbed-pane-header-tab .tabbed-pane-close-button {
- margin: 0 -3px 0 4px;
- visibility: hidden;
+ margin: 0 -3px 0 4px;
+ visibility: hidden;
}
.tabbed-pane-header-tab:hover .tabbed-pane-close-button,
.tabbed-pane-header-tab.selected .tabbed-pane-close-button {
- visibility: visible;
+ visibility: visible;
}
.tabbed-pane-header-tabs-drop-down-container {
- float: left;
- opacity: 0.8;
- cursor: pointer;
- display: flex;
- align-items: center;
- height: 100%;
+ float: left;
+ opacity: 0.8;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ height: 100%;
}
.tabbed-pane-header-tabs-drop-down-container > .chevron-icon {
- background-color: hsla(0,0%,20%,1);
- display: block;
+ background-color: hsla(0, 0%, 20%, 1);
+ display: block;
}
.tabbed-pane-header-tabs-drop-down-container:hover,
.tabbed-pane-header-tabs-drop-down-container[data-keyboard-focus="true"]:focus {
- background-color: rgba(0, 0, 0, 0.08);
+ background-color: rgba(0, 0, 0, 0.08);
}
.tabbed-pane-header-tabs-drop-down-container.measuring {
- visibility: hidden;
+ visibility: hidden;
}
.tabbed-pane-header-tabs-drop-down-container:active {
- opacity: 0.8;
+ opacity: 0.8;
}
/* Web page style */
.tabbed-pane-shadow.vertical-tab-layout {
- flex-direction: row !important;
+ flex-direction: row !important;
}
.tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header {
- background-color: transparent;
- border: none transparent !important;
- width: auto;
- flex: 0 0 auto;
- flex-direction: column;
- padding-top: 10px;
- overflow: hidden;
+ background-color: transparent;
+ border: none transparent !important;
+ width: auto;
+ flex: 0 0 auto;
+ flex-direction: column;
+ padding-top: 10px;
+ overflow: hidden;
}
.tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-content {
- padding: 10px 10px 10px 0;
- overflow-x: hidden;
+ padding: 10px 10px 10px 0;
+ overflow-x: hidden;
}
.tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-contents {
- margin: 0;
- flex: none;
+ margin: 0;
+ flex: none;
}
.tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tabs {
- display: flex;
- flex-direction: column;
- width: 120px;
+ display: flex;
+ flex-direction: column;
+ width: 120px;
}
.tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tab {
- background-color: transparent;
- border: none transparent;
- font-weight: normal;
- text-shadow: none;
- color: #777;
- height: 26px;
- padding-left: 10px;
- border-left: 6px solid transparent;
- margin: 0;
- display: flex;
- align-items: center;
+ background-color: transparent;
+ border: none transparent;
+ font-weight: normal;
+ text-shadow: none;
+ color: #777;
+ height: 26px;
+ padding-left: 10px;
+ border-left: 6px solid transparent;
+ margin: 0;
+ display: flex;
+ align-items: center;
}
.tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tab:not(.selected) {
- cursor: pointer !important;
+ cursor: pointer !important;
}
.tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tab.selected {
- color: inherit;
- border: none transparent;
- border-left: 6px solid #666;
+ color: inherit;
+ border: none transparent;
+ border-left: 6px solid #666;
}
.tabbed-pane-tab-slider {
- height: 2px;
- position: absolute;
- bottom: -1px;
- background-color: var(--accent-color);
- left: 0;
- z-index: 50;
- transform-origin: 0 100%;
- transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
- visibility: hidden;
+ height: 2px;
+ position: absolute;
+ bottom: -1px;
+ background-color: var(--accent-color);
+ left: 0;
+ z-index: 50;
+ transform-origin: 0 100%;
+ transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
+ visibility: hidden;
}
:host-context(.-theme-with-dark-background) .tabbed-pane-tab-slider {
- display: none;
+ display: none;
}
@media (-webkit-min-device-pixel-ratio: 1.1) {
- .tabbed-pane-tab-slider {
- border-top: none;
- }
+ .tabbed-pane-tab-slider {
+ border-top: none;
+ }
}
.tabbed-pane-tab-slider.enabled {
- visibility: visible;
+ visibility: visible;
}
.tabbed-pane-header-tab.disabled {
- opacity: 0.5;
- pointer-events: none;
+ opacity: 0.5;
+ pointer-events: none;
}
.tabbed-pane-left-toolbar {
- margin-right: -4px;
- flex: none;
+ margin-right: -4px;
+ flex: none;
}
.tabbed-pane-right-toolbar {
- margin-left: -4px;
- flex: none;
+ margin-left: -4px;
+ flex: none;
}
@media (forced-colors: active) {
- .tabbed-pane-tab-slider {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- .tabbed-pane-header {
- forced-color-adjust: none;
- border-bottom: 1px solid transparent;
- background-color: ButtonFace;
- }
- .tabbed-pane-header-tab,
- .tabbed-pane-header-tab.selected {
- background: ButtonFace;
- color: ButtonText;
- }
- .tabbed-pane-header-tab:hover,
- .tabbed-pane-shadow .tabbed-pane-header-tab[data-keyboard-focus="true"]:focus {
- background-color: Highlight;
- color: HighlightText;
- }
- .tabbed-pane-header-tabs-drop-down-container {
- opacity: 1;
- }
- .tabbed-pane-header-tabs-drop-down-container:hover,
- .tabbed-pane-header-tabs-drop-down-container[data-keyboard-focus="true"]:focus {
- background-color: Highlight;
- }
- .tabbed-pane-header-tabs-drop-down-container > .chevron-icon {
- background-color: ButtonText;
- }
- .tabbed-pane-header-tabs-drop-down-container:hover > .chevron-icon,
- .tabbed-pane-header-tabs-drop-down-container[data-keyboard-focus="true"]:focus > .chevron-icon {
- background-color: HighlightText;
- }
+ .tabbed-pane-tab-slider {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ .tabbed-pane-header {
+ forced-color-adjust: none;
+ border-bottom: 1px solid transparent;
+ background-color: ButtonFace;
+ }
+
+ .tabbed-pane-header-tab,
+ .tabbed-pane-header-tab.selected {
+ background: ButtonFace;
+ color: ButtonText;
+ }
+
+ .tabbed-pane-header-tab:hover,
+ .tabbed-pane-shadow .tabbed-pane-header-tab[data-keyboard-focus="true"]:focus {
+ background-color: Highlight;
+ color: HighlightText;
+ }
+
+ .tabbed-pane-header-tabs-drop-down-container {
+ opacity: 1;
+ }
+
+ .tabbed-pane-header-tabs-drop-down-container:hover,
+ .tabbed-pane-header-tabs-drop-down-container[data-keyboard-focus="true"]:focus {
+ background-color: Highlight;
+ }
+
+ .tabbed-pane-header-tabs-drop-down-container > .chevron-icon {
+ background-color: ButtonText;
+ }
+
+ .tabbed-pane-header-tabs-drop-down-container:hover > .chevron-icon,
+ .tabbed-pane-header-tabs-drop-down-container[data-keyboard-focus="true"]:focus > .chevron-icon {
+ background-color: HighlightText;
+ }
}
diff --git a/front_end/ui/targetCrashedScreen.css b/front_end/ui/targetCrashedScreen.css
index 037c3d5..027218c 100644
--- a/front_end/ui/targetCrashedScreen.css
+++ b/front_end/ui/targetCrashedScreen.css
@@ -5,11 +5,11 @@
*/
.widget {
- padding: 25px;
+ padding: 25px;
}
.message {
- font-size: larger;
- white-space: pre;
- margin: 5px;
+ font-size: larger;
+ white-space: pre;
+ margin: 5px;
}
diff --git a/front_end/ui/textButton.css b/front_end/ui/textButton.css
index dc21ef9..ce4051a 100644
--- a/front_end/ui/textButton.css
+++ b/front_end/ui/textButton.css
@@ -5,55 +5,56 @@
*/
.text-button {
- margin: 2px;
- height: 24px;
- font-size: 12px;
- border: 1px solid rgba(0, 0, 0, 0.2);
- border-radius: 4px;
- padding: 0px 12px;
- font-weight: 500;
- color: var(--accent-fg-color);
- background-color: #fff;
- flex: none;
- white-space: nowrap;
+ margin: 2px;
+ height: 24px;
+ font-size: 12px;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 4px;
+ padding: 0 12px;
+ font-weight: 500;
+ color: var(--accent-fg-color);
+ background-color: #fff;
+ flex: none;
+ white-space: nowrap;
}
.text-button:not(:disabled):focus,
.text-button:not(:disabled):hover,
.text-button:not(:disabled):active {
- background-color: var(--toolbar-bg-color);
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
- cursor: pointer;
+ background-color: var(--toolbar-bg-color);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ cursor: pointer;
}
.text-button:not(:disabled):not(.running):focus,
.text-button:not(:disabled):not(.running):hover,
.text-button:not(:disabled):not(.running):active {
- color: var(--accent-fg-color-hover);
+ color: var(--accent-fg-color-hover);
}
.text-button:not(:disabled):active {
- background-color: #f2f2f2;
+ background-color: #f2f2f2;
}
.text-button:not(:disabled):focus {
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(66, 133, 244, 0.4);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(66, 133, 244, 0.4);
}
.text-button:disabled {
- opacity: 0.38;
+ opacity: 0.38;
}
-.text-button.primary-button, -theme-preserve {
- background-color: var(--accent-color);
- border: none;
- color: #fff;
+.text-button.primary-button,
+-theme-preserve {
+ background-color: var(--accent-color);
+ border: none;
+ color: #fff;
}
.text-button.link-style {
background: none;
border: none;
- padding: 0!important;
+ padding: 0 !important;
font: inherit;
cursor: pointer;
height: 18px;
@@ -61,68 +62,75 @@
.text-button.primary-button:not(:disabled):focus,
.text-button.primary-button:not(:disabled):hover,
-.text-button.primary-button:not(:disabled):active, -theme-preserve {
- background-color: var(--accent-color-hover);
- color: #fff;
+.text-button.primary-button:not(:disabled):active,
+-theme-preserve {
+ background-color: var(--accent-color-hover);
+ color: #fff;
}
.-theme-with-dark-background .text-button:not(.primary-button):not(:disabled):focus,
.-theme-with-dark-background .text-button:not(.primary-button):not(:disabled):hover,
.-theme-with-dark-background .text-button:not(.primary-button):not(:disabled):active {
- background-color: #313131;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ background-color: #313131;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.-theme-with-dark-background .text-button:not(.primary-button):not(:disabled):focus {
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(94, 151, 246, 0.6);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(94, 151, 246, 0.6);
}
.-theme-with-dark-background .text-button:not(.primary-button):not(:disabled):active {
- background-color: #3e3e3e;
+ background-color: #3e3e3e;
}
@media (forced-colors: active) {
- .text-button {
- background-color: ButtonFace;
- color: ButtonText;
- border-color: ButtonText;
- }
- .text-button:not(:disabled):focus {
- forced-color-adjust: none;
- background-color: ButtonFace;
- color: ButtonText;
- border-color: Highlight;
- box-shadow: var(--focus-ring-active-shadow);
- }
- .text-button:not(:disabled):hover,
- .text-button:not(:disabled):active {
- forced-color-adjust: none;
- background-color: Highlight;
- color: HighlightText;
- box-shadow: var(--accent-color);
- }
- .text-button.primary-button {
- forced-color-adjust: none;
- background-color: Highlight;
- color: HighlightText;
- border: 1px solid Highlight;
- }
- .text-button.primary-button:not(:disabled):focus {
- background-color: Highlight;
- color: HighlightText;
- border-color: ButtonText;
- }
- .text-button.primary-button:not(:disabled):hover,
- .text-button.primary-button:not(:disabled):active {
- background-color: HighlightText;
- color: Highlight;
- border-color: Highlight;
- }
- .text-button:disabled {
- forced-color-adjust: none;
- opacity: 1;
- background: ButtonFace;
- border-color: GrayText;
- color: GrayText;
- }
+ .text-button {
+ background-color: ButtonFace;
+ color: ButtonText;
+ border-color: ButtonText;
+ }
+
+ .text-button:not(:disabled):focus {
+ forced-color-adjust: none;
+ background-color: ButtonFace;
+ color: ButtonText;
+ border-color: Highlight;
+ box-shadow: var(--focus-ring-active-shadow);
+ }
+
+ .text-button:not(:disabled):hover,
+ .text-button:not(:disabled):active {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ color: HighlightText;
+ box-shadow: var(--accent-color);
+ }
+
+ .text-button.primary-button {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ color: HighlightText;
+ border: 1px solid Highlight;
+ }
+
+ .text-button.primary-button:not(:disabled):focus {
+ background-color: Highlight;
+ color: HighlightText;
+ border-color: ButtonText;
+ }
+
+ .text-button.primary-button:not(:disabled):hover,
+ .text-button.primary-button:not(:disabled):active {
+ background-color: HighlightText;
+ color: Highlight;
+ border-color: Highlight;
+ }
+
+ .text-button:disabled {
+ forced-color-adjust: none;
+ opacity: 1;
+ background: ButtonFace;
+ border-color: GrayText;
+ color: GrayText;
+ }
}
diff --git a/front_end/ui/textPrompt.css b/front_end/ui/textPrompt.css
index a0989f0..f9e2333 100644
--- a/front_end/ui/textPrompt.css
+++ b/front_end/ui/textPrompt.css
@@ -4,72 +4,73 @@
* found in the LICENSE file.
*/
- .text-prompt-root {
- display: flex;
- align-items: center;
+.text-prompt-root {
+ display: flex;
+ align-items: center;
}
.text-prompt-editing {
- box-shadow: var(--drop-shadow);
- background-color: white;
- text-overflow: clip !important;
- padding-left: 2px;
- margin-left: -2px;
- padding-right: 2px;
- margin-right: -2px;
- margin-bottom: -1px;
- padding-bottom: 1px;
- opacity: 1.0 !important;
+ box-shadow: var(--drop-shadow);
+ background-color: white;
+ text-overflow: clip !important;
+ padding-left: 2px;
+ margin-left: -2px;
+ padding-right: 2px;
+ margin-right: -2px;
+ margin-bottom: -1px;
+ padding-bottom: 1px;
+ opacity: 1 !important;
}
.text-prompt-editing > .text-prompt {
- color: #222 !important;
- text-decoration: none !important;
- white-space: pre;
+ color: #222 !important;
+ text-decoration: none !important;
+ white-space: pre;
}
.text-prompt > .auto-complete-text {
- color: rgb(128, 128, 128) !important;
+ color: rgb(128, 128, 128) !important;
}
.text-prompt[data-placeholder]:empty::before {
- content: attr(data-placeholder);
- color: rgb(128, 128, 128);
+ content: attr(data-placeholder);
+ color: rgb(128, 128, 128);
}
.text-prompt:not([data-placeholder]):empty::after {
- content: '\00A0';
- width: 0;
- display: block;
+ content: '\00A0';
+ width: 0;
+ display: block;
}
.text-prompt {
- cursor: text;
- overflow-x: visible;
+ cursor: text;
+ overflow-x: visible;
}
.text-prompt::-webkit-scrollbar {
- display: none;
+ display: none;
}
.text-prompt.disabled {
- opacity: 0.5;
- cursor: default;
+ opacity: 0.5;
+ cursor: default;
}
.text-prompt-editing br {
- display: none;
+ display: none;
}
.text-prompt-root:not(:focus-within) ::selection {
- background: transparent;
+ background: transparent;
}
@media (forced-colors: active) {
- .text-prompt[data-placeholder]:empty::before {
- color: GrayText !important;
- }
- .text-prompt.disabled {
- opacity: 1;
- }
+ .text-prompt[data-placeholder]:empty::before {
+ color: GrayText !important;
+ }
+
+ .text-prompt.disabled {
+ opacity: 1;
+ }
}
diff --git a/front_end/ui/toolbar.css b/front_end/ui/toolbar.css
index b3a3068..8372157 100644
--- a/front_end/ui/toolbar.css
+++ b/front_end/ui/toolbar.css
@@ -5,403 +5,415 @@
*/
:host {
- flex: none;
- padding: 0 2px;
+ flex: none;
+ padding: 0 2px;
}
.toolbar-shadow {
- position: relative;
- white-space: nowrap;
- height: 26px;
- overflow: hidden;
- z-index: 12;
- display: flex;
- flex: none;
- align-items: center;
+ position: relative;
+ white-space: nowrap;
+ height: 26px;
+ overflow: hidden;
+ z-index: 12;
+ display: flex;
+ flex: none;
+ align-items: center;
}
.toolbar-shadow.wrappable {
- flex-wrap: wrap;
- overflow: visible;
+ flex-wrap: wrap;
+ overflow: visible;
}
.toolbar-shadow.toolbar-grow-vertical {
- height: initial;
+ height: initial;
}
.toolbar-shadow.vertical {
- flex-direction: column;
- height: auto;
- align-items: flex-start;
+ flex-direction: column;
+ height: auto;
+ align-items: flex-start;
}
.toolbar-item {
- position: relative;
- display: flex;
- background-color: transparent;
- flex: none;
- align-items: center;
- justify-content: center;
- padding: 0;
- height: 26px;
- border: none;
- white-space: pre;
+ position: relative;
+ display: flex;
+ background-color: transparent;
+ flex: none;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ height: 26px;
+ border: none;
+ white-space: pre;
}
.toolbar-item,
.toolbar-item .devtools-link {
- color: #5a5a5a;
+ color: #5a5a5a;
}
select.toolbar-item:disabled {
- opacity: 0.5;
+ opacity: 0.5;
}
.toolbar-dropdown-arrow {
- background-color: #6D6D6D;
- pointer-events: none;
- flex: none;
+ background-color: #6d6d6d;
+ pointer-events: none;
+ flex: none;
}
select.toolbar-item:disabled + .toolbar-dropdown-arrow {
- opacity: 0.5;
+ opacity: 0.5;
}
/* Toolbar item */
.toolbar-button {
- white-space: nowrap;
- overflow: hidden;
- min-width: 28px;
- background: transparent;
- border-radius: 0;
- cursor: pointer;
+ white-space: nowrap;
+ overflow: hidden;
+ min-width: 28px;
+ background: transparent;
+ border-radius: 0;
+ cursor: pointer;
}
.toolbar-text {
- margin: 0 5px;
- flex: none;
- color: #5a5a5a;
+ margin: 0 5px;
+ flex: none;
+ color: #5a5a5a;
}
.toolbar-text:empty {
- margin: 0;
+ margin: 0;
}
.toolbar-has-dropdown {
- justify-content: space-between;
- padding: 0 3px 0 5px;
- border: 1px solid transparent;
+ justify-content: space-between;
+ padding: 0 3px 0 5px;
+ border: 1px solid transparent;
}
.toolbar-has-dropdown .toolbar-text {
- margin: 0 4px 0 0;
- text-overflow: ellipsis;
- flex: auto;
- overflow: hidden;
- text-align: right;
+ margin: 0 4px 0 0;
+ text-overflow: ellipsis;
+ flex: auto;
+ overflow: hidden;
+ text-align: right;
}
.toolbar-button.dark-text .toolbar-dropdown-arrow {
- background-color: #333;
+ background-color: #333;
}
.toolbar-has-glyph .toolbar-text {
- margin-left: -4px;
+ margin-left: -4px;
}
.toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu):not(.toolbar-button-secondary) {
- font-weight: bold;
+ font-weight: bold;
}
.toolbar-render-as-links * {
- font-weight: initial;
- color: rgb(17, 85, 204);
- text-decoration: underline;
- cursor: pointer;
+ font-weight: initial;
+ color: rgb(17, 85, 204);
+ text-decoration: underline;
+ cursor: pointer;
}
.toolbar-toggled-gray:not(.toolbar-render-as-links) .toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu):hover {
- background-color: var(--toolbar-bg-color);
+ background-color: var(--toolbar-bg-color);
}
.toolbar-glyph {
- background-color: #5a5a5a;
- flex: none;
+ background-color: #5a5a5a;
+ flex: none;
}
/* Button */
.toolbar-button:disabled {
- opacity: 0.5;
+ opacity: 0.5;
}
-.toolbar-button.dark-text .toolbar-text{
- color: #333 !important;
+.toolbar-button.dark-text .toolbar-text {
+ color: #333 !important;
}
:not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-glyph {
- background-color: #333;
+ background-color: #333;
}
:not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-text {
- color: #333;
+ color: #333;
}
.toolbar-button.toolbar-state-on .toolbar-glyph,
.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover:not(:active) {
- background-color: var(--accent-color);
+ background-color: var(--accent-color);
}
.toolbar-button.toolbar-state-on .toolbar-text {
- color: var(--accent-color);
+ color: var(--accent-color);
}
.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover .toolbar-glyph {
- background-color: white;
+ background-color: white;
}
.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover .toolbar-text {
- color: white;
+ color: white;
}
.toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-glyph,
.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:active:hover {
- background-color: var(--accent-color);
+ background-color: var(--accent-color);
}
.toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-text {
- color: var(--accent-color);
+ color: var(--accent-color);
}
.toolbar-toggled-gray .toolbar-button.toolbar-state-on {
- background-color: var(--toolbar-bg-color) !important;
+ background-color: var(--toolbar-bg-color) !important;
}
.toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph,
.toolbar-button.toolbar-state-off.toolbar-default-with-red-color .toolbar-glyph {
- background-color: rgb(216, 0, 0) !important;
+ background-color: rgb(216, 0, 0) !important;
}
:host-context(.-theme-with-dark-background) .toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph,
:host-context(.-theme-with-dark-background) .toolbar-button.toolbar-state-off.toolbar-default-with-red-color .toolbar-glyph {
- background-color: hsl(0, 100%, 65%) !important;
+ background-color: hsl(0, 100%, 65%) !important;
}
/* Checkbox */
.toolbar-item.checkbox {
- padding: 0 5px 0 2px;
+ padding: 0 5px 0 2px;
}
.toolbar-item.checkbox:hover {
- color: #333;
+ color: #333;
}
/* Select */
.toolbar-select-container {
- display: inline-flex;
- flex-shrink: 0;
- margin-right: 6px;
+ display: inline-flex;
+ flex-shrink: 0;
+ margin-right: 6px;
}
select.toolbar-item {
- min-width: 38px;
- -webkit-appearance: none;
- border: 1px solid transparent;
- border-radius: 0;
- padding: 0 13px 0 5px;
- margin-right: -10px;
- position: relative;
- height: 22px;
- margin-top: 2px;
- margin-bottom: 2px;
+ min-width: 38px;
+ -webkit-appearance: none;
+ border: 1px solid transparent;
+ border-radius: 0;
+ padding: 0 13px 0 5px;
+ margin-right: -10px;
+ position: relative;
+ height: 22px;
+ margin-top: 2px;
+ margin-bottom: 2px;
}
select.toolbar-item[data-keyboard-focus="true"]:focus {
- background: rgba(0, 0, 0, 0.08);
- border-radius: 2px;
+ background: rgba(0, 0, 0, 0.08);
+ border-radius: 2px;
}
select.toolbar-item[data-keyboard-focus="true"]:focus > * {
- background: white;
+ background: white;
}
/* Input */
.toolbar-input {
- width: 120px;
- height: 19px;
- padding: 4px 3px 3px 3px;
- margin: 1px 3px;
- background-color: white;
- border: 1px solid transparent ;
- min-width: 35px;
+ width: 120px;
+ height: 19px;
+ padding: 4px 3px 3px 3px;
+ margin: 1px 3px;
+ background-color: white;
+ border: 1px solid transparent;
+ min-width: 35px;
}
.toolbar-input:hover {
- box-shadow: var(--focus-ring-inactive-shadow);
+ box-shadow: var(--focus-ring-inactive-shadow);
}
.toolbar-input.focused,
.toolbar-input:not(.toolbar-input-empty) {
- box-shadow: var(--focus-ring-active-shadow);
+ box-shadow: var(--focus-ring-active-shadow);
}
.toolbar-input > input {
- border: none;
- flex-grow: 1;
+ border: none;
+ flex-grow: 1;
}
.toolbar-input-clear-button {
- opacity: 0.7;
- flex-basis: 13px;
- flex-shrink: 0;
- height: 16px;
+ opacity: 0.7;
+ flex-basis: 13px;
+ flex-shrink: 0;
+ height: 16px;
}
.toolbar-input-clear-button:hover {
- opacity: .99;
+ opacity: 0.99;
}
.toolbar-input-empty .toolbar-input-clear-button {
- display: none;
+ display: none;
}
.toolbar-prompt-proxy {
- flex: 1;
+ flex: 1;
}
.toolbar-input-prompt {
- flex: 1;
- overflow: hidden;
- white-space: nowrap;
- cursor: auto;
+ flex: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ cursor: auto;
}
/* Separator */
.toolbar-divider {
- background-color: #ccc;
- width: 1px;
- margin: 5px 4px;
- height: 16px;
+ background-color: #ccc;
+ width: 1px;
+ margin: 5px 4px;
+ height: 16px;
}
.toolbar-spacer {
- flex: auto;
+ flex: auto;
}
/* Long click */
.long-click-glyph {
- position: absolute;
- background-color: #5a5a5a;
- top: 0;
- left: 0;
+ position: absolute;
+ background-color: #5a5a5a;
+ top: 0;
+ left: 0;
}
.toolbar-button.emulate-active {
- background-color: rgb(163, 163, 163);
+ background-color: rgb(163, 163, 163);
}
.toolbar-button[data-keyboard-focus="true"]:focus::after {
- position: absolute;
- top: 2px;
- bottom: 2px;
- left: 2px;
- right: 2px;
- background-color: rgba(0, 0, 0, 0.08);
- border-radius: 2px;
- content: "";
+ position: absolute;
+ top: 2px;
+ bottom: 2px;
+ left: 2px;
+ right: 2px;
+ background-color: rgba(0, 0, 0, 0.08);
+ border-radius: 2px;
+ content: "";
}
.toolbar-shadow.floating {
- flex-direction: column;
- height: auto;
- background-color: white;
- border: 1px solid #ccc;
- margin-top: -1px;
- width: 28px;
- left: -2px;
+ flex-direction: column;
+ height: auto;
+ background-color: white;
+ border: 1px solid #ccc;
+ margin-top: -1px;
+ width: 28px;
+ left: -2px;
}
input[is=history-input] {
- border: 1px solid transparent;
- line-height: 16px;
- padding: 1px;
+ border: 1px solid transparent;
+ line-height: 16px;
+ padding: 1px;
}
input[is=history-input]:hover {
- box-shadow: var(--focus-ring-inactive-shadow);
+ box-shadow: var(--focus-ring-inactive-shadow);
}
input[is=history-input]:focus,
input[is=history-input]:not(:placeholder-shown) {
- box-shadow: var(--focus-ring-active-shadow);
+ box-shadow: var(--focus-ring-active-shadow);
}
.toolbar-item.warning {
- background: hsl(0, 100%, 95%);
+ background: hsl(0, 100%, 95%);
}
@media (forced-colors: active) {
- select.toolbar-item:disabled,
- select.toolbar-item:disabled + .toolbar-dropdown-arrow {
- opacity: 1;
- background-color: Graytext;
- }
- :not(.toolbar-render-as-links) .toolbar-button:enabled:hover .toolbar-glyph,
- :not(.toolbar-render-as-links) .toolbar-button:enabled:focus .toolbar-glyph,
- :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-glyph,
- .toolbar-button:enabled:hover [is=ui-icon].icon-mask,
- .toolbar-button:enabled:focus [is=ui-icon].icon-mask {
- background-color: HighlightText;
- }
- :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-text,
- :not(.toolbar-render-as-links) .toolbar-button:enabled:focus:not(:active) .toolbar-text {
- color: HighlightText;
- }
- .toolbar-button:enabled.hover:not(:active) .toolbar-glyph, .toolbar-button.toolbar-state-on .toolbar-glyph,
- .toolbar-button:hover:enabled,
- .toolbar-button:focus,
- .toolbar-toggled-gray:not(.toolbar-render-as-links) .toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu):hover {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- .toolbar-button:disabled {
- opacity: 1;
- }
- :not(.toolbar-render-as-links) .toolbar-button:disabled .toolbar-glyph,
- .toolbar-button:disabled [is=ui-icon].icon-mask {
- background-color: GrayText;
- color: GrayText;
- }
- .toolbar-item,
- .toolbar-text {
- color: ButtonText;
- }
- .toolbar-button.toolbar-state-on .toolbar-text {
- forced-color-adjust: none;
- color: Highlight;
- }
- .toolbar-input {
- forced-color-adjust: none;
- background: Canvas;
- box-shadow: var(--focus-ring-inactive-shadow);
- }
- .toolbar-input.focused,
- .toolbar-input:not(.toolbar-input-empty) {
- forced-color-adjust: none;
- background: Canvas;
- box-shadow: var(--focus-ring-active-shadow);
- }
- .toolbar-input:hover {
- box-shadow: var(--focus-ring-active-shadow);
- }
- .toolbar-item .devtools-link {
- color: LinkText;
- }
+ select.toolbar-item:disabled,
+ select.toolbar-item:disabled + .toolbar-dropdown-arrow {
+ opacity: 1;
+ background-color: Graytext;
+ }
+
+ :not(.toolbar-render-as-links) .toolbar-button:enabled:hover .toolbar-glyph,
+ :not(.toolbar-render-as-links) .toolbar-button:enabled:focus .toolbar-glyph,
+ :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-glyph,
+ .toolbar-button:enabled:hover [is=ui-icon].icon-mask,
+ .toolbar-button:enabled:focus [is=ui-icon].icon-mask {
+ background-color: HighlightText;
+ }
+
+ :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-text,
+ :not(.toolbar-render-as-links) .toolbar-button:enabled:focus:not(:active) .toolbar-text {
+ color: HighlightText;
+ }
+
+ .toolbar-button:enabled.hover:not(:active) .toolbar-glyph,
+ .toolbar-button.toolbar-state-on .toolbar-glyph,
+ .toolbar-button:hover:enabled,
+ .toolbar-button:focus,
+ .toolbar-toggled-gray:not(.toolbar-render-as-links) .toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu):hover {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ .toolbar-button:disabled {
+ opacity: 1;
+ }
+
+ :not(.toolbar-render-as-links) .toolbar-button:disabled .toolbar-glyph,
+ .toolbar-button:disabled [is=ui-icon].icon-mask {
+ background-color: GrayText;
+ color: GrayText;
+ }
+
+ .toolbar-item,
+ .toolbar-text {
+ color: ButtonText;
+ }
+
+ .toolbar-button.toolbar-state-on .toolbar-text {
+ forced-color-adjust: none;
+ color: Highlight;
+ }
+
+ .toolbar-input {
+ forced-color-adjust: none;
+ background: canvas;
+ box-shadow: var(--focus-ring-inactive-shadow);
+ }
+
+ .toolbar-input.focused,
+ .toolbar-input:not(.toolbar-input-empty) {
+ forced-color-adjust: none;
+ background: canvas;
+ box-shadow: var(--focus-ring-active-shadow);
+ }
+
+ .toolbar-input:hover {
+ box-shadow: var(--focus-ring-active-shadow);
+ }
+
+ .toolbar-item .devtools-link {
+ color: linktext;
+ }
}
diff --git a/front_end/ui/tooltip.css b/front_end/ui/tooltip.css
index a0ad022..29e85cb 100644
--- a/front_end/ui/tooltip.css
+++ b/front_end/ui/tooltip.css
@@ -5,46 +5,46 @@
*/
.tooltip {
- background: hsl(0, 0%, 95%);
- border-radius: 2px;
- color: hsl(0, 0%, 20%);
- padding: 5px 8px;
- line-height: 14px;
- display: flex;
- align-items: center;
- -webkit-filter: drop-shadow(0 1px 2px hsla(0, 0%, 0%, 0.3));
- border: 1px solid hsla(0, 0%, 0%, 0.1);
- background-clip: padding-box;
- box-sizing: border-box;
- position: absolute;
- visibility: hidden;
- transition: visibility 0s 100ms, opacity 150ms cubic-bezier(0, 0, .2, 1);
- z-index: 20001;
- top: 0;
- left: 0;
- opacity: 0;
- text-overflow: ellipsis;
- overflow: hidden;
- pointer-events: none;
+ background: hsl(0, 0%, 95%);
+ border-radius: 2px;
+ color: hsl(0, 0%, 20%);
+ padding: 5px 8px;
+ line-height: 14px;
+ display: flex;
+ align-items: center;
+ -webkit-filter: drop-shadow(0 1px 2px hsla(0, 0%, 0%, 0.3));
+ border: 1px solid hsla(0, 0%, 0%, 0.1);
+ background-clip: padding-box;
+ box-sizing: border-box;
+ position: absolute;
+ visibility: hidden;
+ transition: visibility 0s 100ms, opacity 150ms cubic-bezier(0, 0, 0.2, 1);
+ z-index: 20001;
+ top: 0;
+ left: 0;
+ opacity: 0;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ pointer-events: none;
}
.tooltip-breakword {
- word-break: break-word;
+ word-break: break-word;
}
.tooltip.shown {
- visibility: visible;
- transition-delay: 600ms;
- opacity: 1;
+ visibility: visible;
+ transition-delay: 600ms;
+ opacity: 1;
}
.tooltip.shown.instant {
- transition-delay: 0s;
+ transition-delay: 0s;
}
.tooltip-shortcut {
- color: hsl(0, 0%, 45%);
- display: inline-block;
- margin-left: 8px;
- flex: 0 0 auto;
+ color: hsl(0, 0%, 45%);
+ display: inline-block;
+ margin-left: 8px;
+ flex: 0 0 auto;
}
diff --git a/front_end/ui/treeoutline.css b/front_end/ui/treeoutline.css
index c1d457c..0a99612 100644
--- a/front_end/ui/treeoutline.css
+++ b/front_end/ui/treeoutline.css
@@ -5,210 +5,217 @@
*/
:host {
- flex: 1 1 auto;
- padding: 2px 0 0 0;
+ flex: 1 1 auto;
+ padding: 2px 0 0 0;
}
.tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) {
- min-width: 100%;
- display: inline-block;
+ min-width: 100%;
+ display: inline-block;
}
.tree-outline {
- padding: 0 0 4px 4px;
- margin: 0;
- z-index: 0;
- position: relative;
+ padding: 0 0 4px 4px;
+ margin: 0;
+ z-index: 0;
+ position: relative;
}
.tree-outline[data-keyboard-focus="true"] {
- box-shadow: 0px 0px 0px 2px var(--accent-color) inset;
+ box-shadow: 0 0 0 2px var(--accent-color) inset;
}
.tree-outline:not(.hide-selection-when-blurred) li.hovered:not(.selected) .selection {
- display: block;
- left: 3px;
- right: 3px;
- background-color: var(--item-hover-color);
- border-radius: 5px;
+ display: block;
+ left: 3px;
+ right: 3px;
+ background-color: var(--item-hover-color);
+ border-radius: 5px;
}
.tree-outline li .selection {
- display: none;
- z-index: -1;
- margin-left: -10000px;
+ display: none;
+ z-index: -1;
+ margin-left: -10000px;
}
.tree-outline:not(.hide-selection-when-blurred) li.selected {
- color: var(--selection-inactive-fg-color);
+ color: var(--selection-inactive-fg-color);
}
.tree-outline:not(.hide-selection-when-blurred) li.selected .selection {
- display: block;
- background-color: var(--selection-inactive-bg-color);
+ display: block;
+ background-color: var(--selection-inactive-bg-color);
}
.tree-outline:not(.hide-selection-when-blurred) li.in-clipboard .highlight {
- outline: 1px dotted darkgrey;
+ outline: 1px dotted darkgrey;
}
.tree-outline:not(.hide-selection-when-blurred) li.elements-drag-over .selection {
- display: block;
- margin-top: -2px;
- border-top: 2px solid;
- border-top-color: var(--selection-bg-color);
+ display: block;
+ margin-top: -2px;
+ border-top: 2px solid;
+ border-top-color: var(--selection-bg-color);
}
ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection {
- background-color: var(--selection-bg-color);
+ background-color: var(--selection-bg-color);
}
ol.tree-outline:not(.hide-selection-when-blurred) li.parent.selected:focus::before {
- background-color: var(--selection-fg-color);
+ background-color: var(--selection-fg-color);
}
ol.tree-outline,
.tree-outline ol {
- list-style-type: none;
+ list-style-type: none;
}
.tree-outline ol {
- padding-left: 12px;
+ padding-left: 12px;
}
.tree-outline li {
- text-overflow: ellipsis;
- white-space: nowrap;
- position: relative;
- display: flex;
- align-items: center;
- min-height: 16px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ position: relative;
+ display: flex;
+ align-items: center;
+ min-height: 16px;
}
ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
- color: var(--selection-fg-color);
+ color: var(--selection-fg-color);
}
ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * {
- color: inherit;
+ color: inherit;
}
.tree-outline li .icons-container {
- align-self: center;
- display: flex;
- align-items: center;
+ align-self: center;
+ display: flex;
+ align-items: center;
}
.tree-outline li .leading-icons {
- margin-right: 4px;
+ margin-right: 4px;
}
.tree-outline li .trailing-icons {
- margin-left: 4px;
+ margin-left: 4px;
}
.tree-outline li::before {
- user-select: none;
- -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
- -webkit-mask-size: 32px 24px;
- content: "\00a0\00a0";
- text-shadow: none;
- margin-right: -2px;
- height: 12px;
- width: 13px;
+ user-select: none;
+ -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+ -webkit-mask-size: 32px 24px;
+ content: "\00a0\00a0";
+ text-shadow: none;
+ margin-right: -2px;
+ height: 12px;
+ width: 13px;
}
.tree-outline li:not(.parent)::before {
- background-color: transparent;
+ background-color: transparent;
}
.tree-outline li::before {
- -webkit-mask-position: 0 0;
- background-color: #727272;
+ -webkit-mask-position: 0 0;
+ background-color: #727272;
}
.tree-outline li.parent.expanded::before {
- -webkit-mask-position: -16px 0;
+ -webkit-mask-position: -16px 0;
}
.tree-outline ol.children {
- display: none;
+ display: none;
}
.tree-outline ol.children.expanded {
- display: block;
+ display: block;
}
.tree-outline.tree-outline-dense li {
- margin-top: 1px;
- min-height: 12px;
+ margin-top: 1px;
+ min-height: 12px;
}
.tree-outline.tree-outline-dense li.parent {
- margin-top: 0;
+ margin-top: 0;
}
.tree-outline.tree-outline-dense li.parent::before {
- top: 0;
+ top: 0;
}
.tree-outline.tree-outline-dense ol {
- padding-left: 10px;
+ padding-left: 10px;
}
.tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
- background: var(--focus-bg-color);
- border-radius: 2px;
+ background: var(--focus-bg-color);
+ border-radius: 2px;
}
.tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
- width: fit-content;
- padding-right: 3px;
+ width: fit-content;
+ padding-right: 3px;
}
@media (forced-colors: active) {
- .tree-outline li:not(.parent)::before,
- .tree-outline li:not(.parent):hover::before,
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"]:not(.parent)::before {
- forced-color-adjust: none;
- background-color: transparent;
- }
- .tree-outline-disclosure li.parent::before,
- .tree-outline:not(.hide-selection-when-blurred) li.parent:not(.selected)::before,
- .tree-outline li [is=ui-icon].icon-mask {
- forced-color-adjust: none;
- background-color: ButtonText;
- }
- .tree-outline-disclosure li.parent:hover:not(.selected)::before,
- .tree-outline:not(.hide-selection-when-blurred) li.parent:hover:not(.selected)::before {
- background-color: ButtonText;
- }
- ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection,
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- .tree-outline:not(.hide-selection-when-blurred) li.selected .selection {
- forced-color-adjust: none;
- background-color: ButtonText;
- }
- ol.tree-outline:not(.hide-selection-when-blurred) li.parent.selected::before,
- ol.tree-outline:not(.hide-selection-when-blurred) li.parent.selected:focus::before,
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"]::before {
- background-color: HighlightText;
- }
- .tree-outline li.selected [is=ui-icon].icon-mask,
- .tree-outline li.selected:focus [is=ui-icon]:not(.icon-mask) {
- background-color: HighlightText !important;
- }
- ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus,
- .tree-outline:not(.hide-selection-when-blurred) li.selected:focus .tree-element-title,
- .tree-outline:not(.hide-selection-when-blurred) li[data-keyboard-focus="true"]:focus .tree-element-title,
- .tree-outline:not(.hide-selection-when-blurred) li.selected .tree-element-title,
- .tree-outline:not(.hide-selection-when-blurred) li.selected,
- .tree-outline:not(.hide-selection-when-blurred) li.selected span,
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] span {
- forced-color-adjust: none;
- color: HighlightText;
- }
+ .tree-outline li:not(.parent)::before,
+ .tree-outline li:not(.parent):hover::before,
+ .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"]:not(.parent)::before {
+ forced-color-adjust: none;
+ background-color: transparent;
+ }
+
+ .tree-outline-disclosure li.parent::before,
+ .tree-outline:not(.hide-selection-when-blurred) li.parent:not(.selected)::before,
+ .tree-outline li [is=ui-icon].icon-mask {
+ forced-color-adjust: none;
+ background-color: ButtonText;
+ }
+
+ .tree-outline-disclosure li.parent:hover:not(.selected)::before,
+ .tree-outline:not(.hide-selection-when-blurred) li.parent:hover:not(.selected)::before {
+ background-color: ButtonText;
+ }
+
+ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection,
+ .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ .tree-outline:not(.hide-selection-when-blurred) li.selected .selection {
+ forced-color-adjust: none;
+ background-color: ButtonText;
+ }
+
+ ol.tree-outline:not(.hide-selection-when-blurred) li.parent.selected::before,
+ ol.tree-outline:not(.hide-selection-when-blurred) li.parent.selected:focus::before,
+ .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"]::before {
+ background-color: HighlightText;
+ }
+
+ .tree-outline li.selected [is=ui-icon].icon-mask,
+ .tree-outline li.selected:focus [is=ui-icon]:not(.icon-mask) {
+ background-color: HighlightText !important;
+ }
+
+ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus,
+ .tree-outline:not(.hide-selection-when-blurred) li.selected:focus .tree-element-title,
+ .tree-outline:not(.hide-selection-when-blurred) li[data-keyboard-focus="true"]:focus .tree-element-title,
+ .tree-outline:not(.hide-selection-when-blurred) li.selected .tree-element-title,
+ .tree-outline:not(.hide-selection-when-blurred) li.selected,
+ .tree-outline:not(.hide-selection-when-blurred) li.selected span,
+ .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] span {
+ forced-color-adjust: none;
+ color: HighlightText;
+ }
}
diff --git a/front_end/ui/viewContainers.css b/front_end/ui/viewContainers.css
index fe26465..aec5edd 100644
--- a/front_end/ui/viewContainers.css
+++ b/front_end/ui/viewContainers.css
@@ -28,50 +28,50 @@
*/
.expandable-view-title {
- display: flex;
- align-items: center;
- background-color: var(--toolbar-bg-color);
- height: 22px;
- padding: 0 5px;
- border-top: var(--divider-border);
- white-space: nowrap;
- overflow: hidden;
- position: relative;
- border-bottom: 1px solid transparent;
+ display: flex;
+ align-items: center;
+ background-color: var(--toolbar-bg-color);
+ height: 22px;
+ padding: 0 5px;
+ border-top: var(--divider-border);
+ white-space: nowrap;
+ overflow: hidden;
+ position: relative;
+ border-bottom: 1px solid transparent;
}
.expandable-view-title.expanded,
.expandable-view-title:last-child {
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid #ddd;
}
.expandable-view-title .toolbar {
- margin-top: -3px;
+ margin-top: -3px;
}
.expandable-view-title:not(.expanded) .toolbar {
- display: none;
+ display: none;
}
.title-expand-icon {
- margin-right: 2px;
- margin-bottom: -2px;
+ margin-right: 2px;
+ margin-bottom: -2px;
}
.expandable-view-title[data-keyboard-focus="true"]:focus {
- background-color: var(--focus-bg-color);
+ background-color: var(--focus-bg-color);
}
.expandable-view-title > .toolbar {
- position: absolute;
- right: 0;
- top: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
}
@media (forced-colors: active) {
- .expandable-view-title[data-keyboard-focus="true"]:focus {
- forced-color-adjust: none;
- background: Canvas !important;
- box-shadow: 0 0 0 2px Highlight inset;
- }
+ .expandable-view-title[data-keyboard-focus="true"]:focus {
+ forced-color-adjust: none;
+ background: canvas !important;
+ box-shadow: 0 0 0 2px Highlight inset;
+ }
}
diff --git a/front_end/web_audio/audioContextSelector.css b/front_end/web_audio/audioContextSelector.css
index a689f25..79f48b6 100644
--- a/front_end/web_audio/audioContextSelector.css
+++ b/front_end/web_audio/audioContextSelector.css
@@ -17,4 +17,4 @@
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 0;
-}
\ No newline at end of file
+}
diff --git a/test/e2e/resources/sources/dynamic.css b/test/e2e/resources/sources/dynamic.css
index 9eb3b3d..50d9743 100644
--- a/test/e2e/resources/sources/dynamic.css
+++ b/test/e2e/resources/sources/dynamic.css
@@ -3,6 +3,7 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
+
body {
color: red;
}
diff --git a/test/screenshots/interactive/interactive.css b/test/screenshots/interactive/interactive.css
index 97e55d6..4768d1e 100644
--- a/test/screenshots/interactive/interactive.css
+++ b/test/screenshots/interactive/interactive.css
@@ -8,8 +8,10 @@
box-sizing: border-box;
}
-html, body {
+html,
+body {
--max-width: 1600px;
+
width: 100%;
height: 100%;
margin: 0;
@@ -24,9 +26,9 @@
header {
height: 85px;
- background: #0083C3;
- color: #FFF;
- box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
+ background: #0083c3;
+ color: #fff;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
@@ -58,8 +60,8 @@
}
.shortcuts {
- background: #003B59;
- box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
+ background: #003b59;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
height: 48px;
position: relative;
z-index: 2;
@@ -73,7 +75,7 @@
position: fixed;
z-index: 10;
pointer-events: none;
- background: rgba(0,0,0,0.70);
+ background: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
align-items: center;
@@ -107,9 +109,9 @@
main img,
.diff img {
max-width: 100%;
- border: 1px solid #D0D0D0;
- box-shadow: 0 6px 7px 0 rgba(0,0,0,0.11);
- background: #FFF;
+ border: 1px solid #d0d0d0;
+ box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.11);
+ background: #fff;
cursor: pointer;
}
@@ -137,12 +139,12 @@
padding: 4px 8px;
border-radius: 2px;
background: none;
- border: 1px solid #FFF;
- color: #FFF;
+ border: 1px solid #fff;
+ color: #fff;
}
footer button[disabled] {
- opacity: 0.4;;
+ opacity: 0.4;
}
.status {
@@ -162,7 +164,7 @@
flex-direction: row;
align-items: center;
justify-content: left;
- color: #FFF;
+ color: #fff;
margin: 0 auto;
width: 100%;
max-width: var(--max-width);
@@ -189,10 +191,11 @@
content: '';
padding: 3px 8px;
border-radius: 3px;
- border: 1px solid rgba(255,255,255,0.7);
+ border: 1px solid rgba(255, 255, 255, 0.7);
margin-right: 8px;
font-size: 12px;
}
+
.shortcut-container li.shortcut-golden::before {
content: '←';
}
