Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (236704 => 236705)
--- trunk/Source/WebInspectorUI/ChangeLog 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/ChangeLog 2018-10-02 01:31:37 UTC (rev 236705)
@@ -1,3 +1,112 @@
+2018-10-01 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Dark Mode: use the same CSS variables for dark and light modes
+ https://bugs.webkit.org/show_bug.cgi?id=189766
+ <rdar://problem/44619650>
+
+ Use --text-color and --background-color CSS variables for both dark and light modes.
+
+ Reviewed by Matt Baker.
+
+ * UserInterface/Views/BreakpointPopoverController.css:
+ (.popover .edit-breakpoint-popover-content > label.toggle):
+ Color of the label matches the color of the popover, no need to specify it.
+
+ (.edit-breakpoint-popover-condition):
+ (@media (prefers-dark-interface)):
+ (.popover .edit-breakpoint-popover-content > table > tr > th):
+ * UserInterface/Views/CompletionSuggestionsView.css:
+ (.completion-suggestions-container > .item):
+ (@media (prefers-dark-interface)):
+ (.completion-suggestions):
+ * UserInterface/Views/ComputedStyleDetailsPanel.css:
+ (.details-section:matches(.computed-style-properties, .computed-style-box-model):not(.collapsed) > :matches(.header, .content)):
+ (.computed-style-properties .property:hover .go-to-arrow):
+ (@media (prefers-dark-interface)): Deleted.
+ (.computed-style-properties.details-section): Deleted.
+ (.details-section.style-box-model:not(.collapsed) > :matches(.header, .content)): Deleted.
+ * UserInterface/Views/DOMTreeOutline.css:
+ (.tree-outline.dom):
+ (@media (prefers-dark-interface)):
+ * UserInterface/Views/DataGrid.css:
+ (.data-grid th):
+ (body:not(.window-inactive, .window-docked-inactive) .data-grid:matches(:focus, .force-focus) tr.editable.selected .cell-content > input):
+ (@media (prefers-dark-interface)):
+ * UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
+ (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
+ (@media (prefers-dark-interface)):
+ (.sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule):
+ * UserInterface/Views/InlineSwatch.css:
+ (.inline-swatch):
+ (.inline-swatch-variable-popover .CodeMirror pre):
+ (@media (prefers-dark-interface)): Deleted.
+ * UserInterface/Views/NetworkResourceDetailView.css:
+ (.network-resource-detail):
+ (.network .network-resource-detail .navigation-bar .item.radio.button.text-only.selected):
+ (@media (prefers-dark-interface)):
+ (.resource-headers .value): Deleted.
+ Move this rule to ResourceHeadersContentView.css.
+
+ * UserInterface/Views/ObjectPreviewView.css:
+ (.object-preview):
+ (@media (prefers-dark-interface)):
+ (.object-preview .name):
+ * UserInterface/Views/ObjectTreeView.css:
+ (.object-tree):
+ (.object-tree-property :matches(.formatted-string, .formatted-regexp)):
+ (@media (prefers-dark-interface)): Deleted.
+ (.object-tree,): Deleted.
+
+ (.object-preview .name): Deleted.
+ (.object-preview > .size): Deleted.
+ Move these rules to ObjectPreviewView.css.
+
+ * UserInterface/Views/QuickConsole.css:
+ (.quick-console):
+ (@media (prefers-dark-interface)):
+ * UserInterface/Views/ResourceHeadersContentView.css:
+ (.resource-headers .value):
+ (.resource-headers.showing-find-banner .search-highlight):
+ (@media (prefers-dark-interface)): Deleted.
+ * UserInterface/Views/ResourceTimingBreakdownView.css:
+ (.resource-timing-breakdown > table > tr.header:not(.total-row) > td):
+ (@media (prefers-dark-interface)):
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+ (.spreadsheet-style-declaration-editor .property:not(.disabled) .value):
+ (.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > *):
+ (@media (prefers-dark-interface)):
+ (.spreadsheet-style-declaration-editor .property.has-warning .warning):
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
+ (.spreadsheet-css-declaration .media-label):
+ (.spreadsheet-css-declaration .selector:focus,):
+ (@media (prefers-dark-interface)):
+ (.spreadsheet-css-declaration .origin .go-to-link,):
+ * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css:
+ (.sidebar > .panel.details.css-style > .content > .rules .section-header .node-link:hover):
+ (@media (prefers-dark-interface)):
+ (.sidebar > .panel.details.css-style > .content > .rules .section-header):
+ * UserInterface/Views/SyntaxHighlightingDefaultTheme.css:
+ (.cm-s-default,):
+ (@media (prefers-dark-interface)):
+ (.syntax-highlighted,): Deleted.
+ * UserInterface/Views/Table.css:
+ (.table):
+ (.table > .header):
+ * UserInterface/Views/TimelineOverview.css:
+ (.timeline-overview > .navigation-bar.timelines):
+ (@media (prefers-dark-interface)):
+ * UserInterface/Views/TimelineRecordingContentView.css:
+ (.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple):
+ (.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows):
+ (.content-view.timeline-recording > .content-browser .recording-progress > .status > .indeterminate-progress-spinner):
+ (@media (prefers-dark-interface)): Deleted.
+ * UserInterface/Views/Variables.css:
+ (:root):
+ (@media (prefers-dark-interface)):
+ * UserInterface/Views/XHRBreakpointPopover.css:
+ (.popover .xhr-breakpoint-content > .editor-wrapper > .editor):
+ (@media (prefers-dark-interface)):
+
2018-09-28 Andy Estes <aes...@apple.com>
REGRESSION (r236091): CSSKeywordCompletions.js has "checkout" instead of "check-out" as a value for -apple-pay-button-type
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -35,7 +35,6 @@
}
.popover .edit-breakpoint-popover-content > label.toggle {
- color: black;
font-weight: bold;
text-overflow: ellipsis;
white-space: nowrap;
@@ -64,7 +63,7 @@
padding: 4px 0 2px 0;
-webkit-appearance: textfield;
border: 1px solid hsl(0, 0%, 78%);
- background: white;
+ background: var(--background-color-code);
}
.edit-breakpoint-popover-condition > .CodeMirror {
@@ -91,15 +90,7 @@
}
@media (prefers-dark-interface) {
- .popover .edit-breakpoint-popover-content > label.toggle {
- color: unset;
- }
-
.popover .edit-breakpoint-popover-content > table > tr > th {
color: var(--text-color-secondary);
}
-
- .edit-breakpoint-popover-condition {
- background: var(--background-color-code);
- }
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -67,7 +67,7 @@
overflow: hidden;
text-overflow: ellipsis;
- color: black;
+ color: var(--text-color);
}
.completion-suggestions-container:not(:active) > .item.selected,
@@ -80,8 +80,4 @@
.completion-suggestions {
background-color: var(--overlay-background);
}
-
- .completion-suggestions-container > .item {
- color: var(--text-color);
- }
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -24,7 +24,7 @@
*/
.details-section:matches(.computed-style-properties, .computed-style-box-model):not(.collapsed) > :matches(.header, .content) {
- background-color: white;
+ background-color: var(--background-color);
}
.computed-style-properties .property .go-to-arrow {
@@ -38,13 +38,3 @@
.computed-style-properties .property:hover .go-to-arrow {
display: initial;
}
-
-@media (prefers-dark-interface) {
- .computed-style-properties.details-section {
- background-color: var(--background-color);
- }
-
- .details-section.style-box-model:not(.collapsed) > :matches(.header, .content) {
- background-color: var(--background-color);
- }
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -36,7 +36,7 @@
/* Needed to make the negative z-index on .selection-area works. Otherwise the background-color from .syntax-highlighted hides the selection. */
background-color: transparent !important;
- color: black;
+ color: var(--text-color);
--item-parent-margin-start: -15px;
@@ -308,10 +308,6 @@
}
@media (prefers-dark-interface) {
- .tree-outline.dom {
- color: var(--text-color);
- }
-
.tree-outline.dom li.elements-drag-over .selection-area {
border-top-color: var(--selected-background-color);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -84,7 +84,7 @@
vertical-align: middle;
font-weight: normal;
white-space: nowrap;
- background-color: white;
+ background-color: var(--background-color);
overflow: hidden;
}
@@ -426,14 +426,10 @@
}
body:not(.window-inactive, .window-docked-inactive) .data-grid:matches(:focus, .force-focus) tr.editable.selected .cell-content > input {
- color: white;
+ color: var(--text-color);
}
@media (prefers-dark-interface) {
- .data-grid th {
- background-color: var(--background-color);
- }
-
.data-grid td .subtitle {
color: var(--selected-secondary-text-color);
}
@@ -442,10 +438,6 @@
color: hsla(0, 0%, var(--foreground-lightness), 0.9);
}
- body:not(.window-inactive, .window-docked-inactive) .data-grid:matches(:focus, .force-focus) tr.editable.selected .cell-content > input {
- color: var(--text-color);
- }
-
.data-grid tr.editable .cell-content > input {
color: inherit;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -109,6 +109,7 @@
.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
margin: 0 0 1px;
padding: 2px 4px 3px;
+ color: var(--text-color);
background: none;
border: none;
border-radius: 3px;
@@ -222,8 +223,4 @@
.sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
filter: var(--filter-invert);
}
-
- .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle{
- color: var(--text-color);
- }
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -31,7 +31,7 @@
height: 1em;
margin-right: 3px;
vertical-align: -2px;
- background-color: white;
+ background-color: var(--background-color);
border-radius: 2px;
overflow: hidden;
cursor: default;
@@ -118,9 +118,3 @@
.inline-swatch-variable-popover .CodeMirror pre {
padding: 0 3px;
}
-
-@media (prefers-dark-interface) {
- .inline-swatch {
- background: var(--background-color);
- }
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkResourceDetailView.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkResourceDetailView.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkResourceDetailView.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -31,7 +31,7 @@
bottom: 0;
/* left or right set by NetworkTableView on display / resize */
z-index: 10;
- background-color: white;
+ background-color: var(--background-color);
}
.network-resource-detail .navigation-bar {
@@ -61,7 +61,7 @@
.network .network-resource-detail .navigation-bar .item.radio.button.text-only.selected {
color: var(--selected-background-color);
- background-color: white;
+ background-color: var(--background-color);
}
.network-resource-detail > .content-browser {
@@ -87,10 +87,6 @@
}
@media (prefers-dark-interface) {
- .network-resource-detail {
- background-color: var(--background-color);
- }
-
.network-resource-detail .item.close > .glyph {
background-color: hsla(0, 0%, 100%, 0.2);
}
@@ -99,8 +95,4 @@
background-color: unset;
color: var(--glyph-color-active);
}
-
- .resource-headers .value {
- color: var(--text-color);
- }
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -24,7 +24,7 @@
*/
.object-preview {
- color: black;
+ color: var(--text-color);
font-style: italic;
font-family: Menlo, monospace;
font-size: 11px;
@@ -47,3 +47,9 @@
.object-preview > .title {
line-height: 16px;
}
+
+@media (prefers-dark-interface) {
+ .object-preview .name {
+ color: var(--syntax-highlight-boolean-color);
+ }
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -26,7 +26,7 @@
.object-tree {
position: relative;
display: inline-block;
- color: black;
+ color: var(--text-color);
font-family: Menlo, monospace;
font-size: 11px;
}
@@ -132,18 +132,3 @@
.object-tree-property :matches(.formatted-string, .formatted-regexp) {
white-space: nowrap;
}
-
-@media (prefers-dark-interface) {
- .object-tree,
- .object-preview {
- color: var(--text-color);
- }
-
- .object-preview .name {
- color: var(--syntax-highlight-boolean-color);
- }
-
- .object-preview > .size {
- color: var(--console-secondary-text-color);
- }
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -30,7 +30,8 @@
display: flex;
align-items: flex-end;
- background-color: white;
+ color: var(--text-color);
+ background-color: var(--background-color-code);
border-top: 1px solid var(--border-color);
padding: 3px 0 4px;
@@ -108,12 +109,6 @@
}
@media (prefers-dark-interface) {
- .quick-console {
- background-color: var(--background-color-code);
- color: var(--text-color);
- border-top: 1px solid var(--border-color);
- }
-
.CodeMirror .jump-to-symbol-highlight,
.meta-key-pressed .spreadsheet-css-declaration:not(.locked) :matches(.name, .value):not(.editing):hover {
color: var(--syntax-highlight-link-color) !important;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -61,7 +61,7 @@
}
.resource-headers .value {
- color: black;
+ color: var(--text-color);
}
.resource-headers .header > .key {
@@ -83,9 +83,3 @@
background-color: hsla(53, 83%, 53%, 0.2);
border-bottom: 1px solid hsl(47, 82%, 60%);
}
-
-@media (prefers-dark-interface) {
- .resource-headers .value {
- color: var(--text-color);
- }
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -53,7 +53,7 @@
}
.resource-timing-breakdown > table > tr.header:not(.total-row) > td {
- color: black;
+ color: var(--text-color);
}
.resource-timing-breakdown > table hr {
@@ -77,10 +77,6 @@
--popover-background-color: var(--panel-background-color);
}
- .resource-timing-breakdown > table > tr.header:not(.total-row) > td {
- color: var(--text-color);
- }
-
.resource-timing-breakdown > table > tr > td.label,
.resource-timing-breakdown > table > tr > td.time {
color: var(--text-color-secondary);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -42,7 +42,7 @@
}
.spreadsheet-style-declaration-editor .property:not(.disabled) .value {
- color: black;
+ color: var(--text-color);
}
.spreadsheet-style-declaration-editor :matches(.name, .value).editing {
@@ -83,7 +83,7 @@
.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > * {
text-decoration: line-through;
- -webkit-text-decoration-color: hsla(0, 0%, 0%, 0.6);
+ -webkit-text-decoration-color: hsla(0, 0%, var(--foreground-lightness), 0.6);
}
.spreadsheet-style-declaration-editor .property.invalid-name:not(.disabled) .content > * {
@@ -156,10 +156,6 @@
}
@media (prefers-dark-interface) {
- .spreadsheet-style-declaration-editor .property:not(.disabled) .value {
- color: rgb(227, 227, 227)
- }
-
.spreadsheet-style-declaration-editor :matches(.name, .value).editing {
outline-color: var(--background-color-secondary) !important;
}
@@ -171,9 +167,4 @@
.spreadsheet-style-declaration-editor .property.has-warning .warning {
filter: invert(100%) hue-rotate(150deg);
}
-
- .spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > * {
- text-decoration: line-through;
- -webkit-text-decoration-color: hsla(0, 0%, var(--text-color), 0.6);
- }
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -48,7 +48,7 @@
}
.spreadsheet-css-declaration .media-label {
- color: black;
+ color: var(--text-color);
}
.spreadsheet-css-declaration .origin {
@@ -100,7 +100,7 @@
.spreadsheet-css-declaration .selector:focus,
.spreadsheet-css-declaration .selector > .matched {
- color: black;
+ color: var(--text-color);
}
.spreadsheet-css-declaration.locked {
@@ -144,11 +144,6 @@
color: var(--text-color-secondary);
}
- .spreadsheet-css-declaration .selector:focus,
- .spreadsheet-css-declaration .selector > .matched {
- color: var(--text-color);
- }
-
.spreadsheet-css-declaration.locked .origin::after {
filter: var(--filter-invert);
}
@@ -157,8 +152,4 @@
.spreadsheet-css-declaration .origin .go-to-link:hover {
color: var(--text-color-secondary);
}
-
- .spreadsheet-css-declaration .media-label {
- color: var(--text-color);
- }
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -41,7 +41,7 @@
}
.sidebar > .panel.details.css-style > .content > .rules .section-header .node-link:hover {
- color: black;
+ color: var(--text-color);
}
.sidebar > .panel.details.css-style > .content > .rules > .message-text-view {
@@ -55,10 +55,6 @@
@media (prefers-dark-interface) {
.sidebar > .panel.details.css-style > .content > .rules .section-header {
color: var(--text-color-secondary);
- border-bottom: 0.5px solid hsla(0, 0%, var(--background-color), 0.2);
+ border-bottom-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
}
-
- .sidebar > .panel.details.css-style > .content > .rules .section-header .node-link:hover {
- color: var(--text-color);
- }
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -27,7 +27,7 @@
.cm-s-default,
.syntax-highlighted {
- color: black;
+ color: var(--text-color);
font-family: Menlo, monospace;
font-size: 11px;
@@ -126,8 +126,6 @@
}
@media (prefers-dark-interface) {
- .syntax-highlighted,
- .cm-s-default,
.CodeMirror {
color: var(--text-color);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Table.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Table.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Table.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -28,7 +28,7 @@
outline: none;
width: 100%;
height: 100%;
- background: white;
+ background: var(--background-color);
--table-column-border-start: 1px solid transparent;
--table-column-border-end: 0.5px solid var(--border-color);
@@ -40,7 +40,7 @@
height: var(--navigation-bar-height);
line-height: calc(var(--navigation-bar-height) - 1px);
border-bottom: 1px solid var(--border-color);
- background: white;
+ background: var(--background-color);
overflow-x: hidden;
vertical-align: middle;
white-space: nowrap;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -53,7 +53,7 @@
z-index: var(--z-index-header);
width: var(--timeline-sidebar-width);
height: 23px;
- background-color: white;
+ background-color: var(--background-color);
border-bottom: 1px solid var(--border-color);
}
@@ -235,10 +235,6 @@
}
@media (prefers-dark-interface) {
- .timeline-overview > .navigation-bar.timelines {
- background-color: var(--background-color);
- }
-
.timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:nth-child(even) {
background: var(--background-color-alternate);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -55,11 +55,11 @@
.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple {
background-color: transparent;
- color: black;
+ color: var(--text-color);
}
.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows {
- color: black;
+ color: var(--text-color);
}
.content-view.timeline-recording > .content-browser .recording-progress {
@@ -86,13 +86,3 @@
margin-left: 8px;
vertical-align: middle;
}
-
-@media (prefers-dark-interface) {
- .content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple {
- color: var(--text-color);
- }
-
- .content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows {
- color: unset;
- }
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -32,9 +32,15 @@
--z-index-glass-pane-for-drag: 2048;
--z-index-uncaught-exception-sheet: 4096;
+ --foreground-lightness: 0%;
+
+ --text-color: black;
--text-color-active: black;
+ --background-color: white;
+
--background-color-content: white;
+ --background-color-code: white;
--selected-foreground-color: white;
--selected-secondary-text-color: hsla(0, 100%, 100%, 0.7);
@@ -147,6 +153,8 @@
:root {
color: var(--text-color);
+ --foreground-lightness: 100%;
+
--text-color: hsl(0, 0%, 88%);
--text-color-active: white;
--text-color-secondary: hsl(0, 0%, 65%);
@@ -248,8 +256,6 @@
/* Invert colors yet preserve the hue */
--filter-invert: invert(100%) hue-rotate(180deg);
- --foreground-lightness: 100%;
-
/* TODO: Use the same variable for the default theme */
--overlay-background: hsla(0, 0%, 24%, 0.9);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.css (236704 => 236705)
--- trunk/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.css 2018-10-02 01:12:08 UTC (rev 236704)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.css 2018-10-02 01:31:37 UTC (rev 236705)
@@ -39,7 +39,7 @@
padding: 4px 0 2px 0;
-webkit-appearance: textfield;
border: 1px solid hsl(0, 0%, 78%);
- background: white;
+ background: var(--background-color-code);
--editor-margin-start: 4px;
}
@@ -66,6 +66,5 @@
.popover .xhr-breakpoint-content > .editor-wrapper > .editor {
-webkit-appearance: unset;
border-color: var(--text-color-quaternary);
- background: var(--background-color-code);
}
}
