From 2efbb1b8024a35b4fa4dfc2422d0b97582c96fc0 Mon Sep 17 00:00:00 2001 From: Tim van der Lippe Date: Tue, 14 Jul 2020 14:24:20 +0000 Subject: [PATCH] Revert "Enable property-no-vendor-prefix stylelint check" This reverts commit 190803bad8b5a4cbe714bced86e72f3b6bc2fffc. Reason for revert: This breaks the icons in DevTools, which leaves gray backgrounds behind. Original change's description: > Enable property-no-vendor-prefix stylelint check > > This patch drops unnecessary -webkit- prefixes in CSS and enables > a lint check to enforce that prevent such properties from being > added in the future. Note that the use of vendor-prefixed CSS > properties is still accepted in cases where there is no standardized > and browser-supported alternative. > > Bug: chromium:1104187 > Change-Id: I29ae93d5a760c4f5037f20663754f448b5083235 > Fixed: chromium:1031475 > Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2297386 > Reviewed-by: Changhao Han > Commit-Queue: Mathias Bynens TBR=mathias@chromium.org,changhaohan@chromium.org Change-Id: I5fe13b7afd8b71180163c7419092cc6a758903b6 No-Presubmit: true No-Tree-Checks: true No-Try: true Bug: chromium:1104187 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2297391 Reviewed-by: Tim van der Lippe Commit-Queue: Tim van der Lippe --- .stylelintrc.json | 1 - front_end/accessibility/axBreadcrumbs.css | 12 ++--- front_end/animation/animationTimeline.css | 6 +-- front_end/color_picker/spectrum.css | 2 +- front_end/data_grid/dataGrid.css | 12 ++--- front_end/elements/elementsTreeOutline.css | 18 ++++---- front_end/elements/metricsSidebarPane.css | 4 +- front_end/emulation/sensors.css | 8 ++-- front_end/issues/issuesTree.css | 6 +-- front_end/network/networkLogView.css | 6 +-- front_end/network/networkTimingTable.css | 8 ++-- .../persistence/workspaceSettingsTab.css | 6 +-- front_end/profiler/profilesPanel.css | 4 +- front_end/profiler/profilesSidebarTree.css | 2 +- front_end/resources/serviceWorkersView.css | 6 +-- front_end/screencast/screencastView.css | 2 +- front_end/security/lockIcon.css | 24 +++++----- front_end/settings/keybindsSettingsTab.css | 2 +- front_end/settings/settingsScreen.css | 8 ++-- front_end/sources/debuggerPausedMessage.css | 4 +- front_end/sources/sourcesPanel.css | 2 +- front_end/sources/sourcesView.css | 4 +- front_end/text_editor/cmdevtools.css | 46 +++++++++---------- front_end/timeline/timelinePaintProfiler.css | 2 +- front_end/ui/checkboxTextLabel.css | 8 ++-- front_end/ui/glassPane.css | 2 +- front_end/ui/infobar.css | 6 +-- front_end/ui/inspectorCommon.css | 32 ++++++------- front_end/ui/radioButton.css | 2 +- front_end/ui/searchableView.css | 6 +-- front_end/ui/slider.css | 6 +-- front_end/ui/toolbar.css | 2 +- front_end/ui/tooltip.css | 2 +- front_end/ui/treeoutline.css | 10 ++-- 34 files changed, 135 insertions(+), 136 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index e8a3d870fa..12ca1afe5d 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -4,7 +4,6 @@ "alpha-value-notation": "percentage", "color-function-notation": "modern", "hue-degree-notation": "angle", - "property-no-vendor-prefix": true, "selector-type-no-unknown": [ true, { diff --git a/front_end/accessibility/axBreadcrumbs.css b/front_end/accessibility/axBreadcrumbs.css index 9b4e1a6901..12dbaaa29a 100644 --- a/front_end/accessibility/axBreadcrumbs.css +++ b/front_end/accessibility/axBreadcrumbs.css @@ -40,10 +40,10 @@ } .ax-breadcrumbs .ax-node::before { - mask-image: url(Images/chevrons.svg); - mask-position: 0 0; - mask-size: 30px 10px; - mask-repeat: no-repeat; + -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; @@ -59,7 +59,7 @@ } .ax-breadcrumbs .ax-node.parent::before { - mask-position: -20px 1px; + -webkit-mask-position: -20px 1px; } .ax-breadcrumbs .ax-node.no-dom-node { @@ -67,7 +67,7 @@ } .ax-breadcrumbs .ax-node.children-unloaded::before { - mask-position: 0 1px; + -webkit-mask-position: 0 1px; width: 13px; opacity: 40%; } diff --git a/front_end/animation/animationTimeline.css b/front_end/animation/animationTimeline.css index 488813267a..6cfae9419c 100644 --- a/front_end/animation/animationTimeline.css +++ b/front_end/animation/animationTimeline.css @@ -242,7 +242,7 @@ rect.animation-timeline-grid-line { } .animation-node-removed { - filter: saturate(0); + -webkit-filter: saturate(0); cursor: not-allowed; } @@ -378,11 +378,11 @@ text.animation-timeline-grid-label { @keyframes newGroupAnim { from { - clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%); + -webkit-clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%); } to { - clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); + -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); } } diff --git a/front_end/color_picker/spectrum.css b/front_end/color_picker/spectrum.css index 63eec1c9cd..a2a50eb4f5 100644 --- a/front_end/color_picker/spectrum.css +++ b/front_end/color_picker/spectrum.css @@ -624,7 +624,7 @@ div.palette-preview { } :host-context(.-theme-with-dark-background) .spectrum-switcher { - filter: unset; + -webkit-filter: unset; } .spectrum-switcher:hover svg, diff --git a/front_end/data_grid/dataGrid.css b/front_end/data_grid/dataGrid.css index 0bc27554ff..13d7308d4c 100644 --- a/front_end/data_grid/dataGrid.css +++ b/front_end/data_grid/dataGrid.css @@ -192,9 +192,9 @@ .data-grid td.disclosure::before { user-select: none; - mask-image: url(Images/treeoutlineTriangles.svg); - mask-position: 0 0; - mask-size: 32px 24px; + -webkit-mask-image: url(Images/treeoutlineTriangles.svg); + -webkit-mask-position: 0 0; + -webkit-mask-size: 32px 24px; float: left; width: 8px; height: 12px; @@ -210,7 +210,7 @@ } .data-grid tr.expanded td.disclosure::before { - mask-position: -16px 0; + -webkit-mask-position: -16px 0; } .data-grid table.data tr.revealed.selected { @@ -233,12 +233,12 @@ .data-grid:focus tr.parent.selected td.disclosure::before { background-color: var(--selection-fg-color); - mask-position: 0 0; + -webkit-mask-position: 0 0; } .data-grid:focus tr.expanded.selected td.disclosure::before { background-color: var(--selection-fg-color); - mask-position: -16px 0; + -webkit-mask-position: -16px 0; } .data-grid tr.inactive { diff --git a/front_end/elements/elementsTreeOutline.css b/front_end/elements/elementsTreeOutline.css index c3932a688e..c12c7eb9fd 100644 --- a/front_end/elements/elementsTreeOutline.css +++ b/front_end/elements/elementsTreeOutline.css @@ -63,18 +63,18 @@ .elements-disclosure li.parent::before { box-sizing: border-box; user-select: none; - mask-image: url(Images/treeoutlineTriangles.svg); - mask-size: 32px 24px; - content: '\A0\A0'; + -webkit-mask-image: url(Images/treeoutlineTriangles.svg); + -webkit-mask-size: 32px 24px; + content: '\00a0\00a0'; color: transparent; text-shadow: none; margin-right: -3px; - mask-position: 0 0; + -webkit-mask-position: 0 0; background-color: #727272; } .elements-disclosure li.parent.expanded::before { - mask-position: -16px 0; + -webkit-mask-position: -16px 0; } .elements-disclosure li.always-parent::before { @@ -228,7 +228,7 @@ select { } /* DOM update highlight */ -@keyframes dom-update-highlight-animation { +@-webkit-keyframes dom-update-highlight-animation { from { background-color: rgb(158 54 153); color: white; @@ -244,7 +244,7 @@ select { } } -@keyframes dom-update-highlight-animation-dark { +@-webkit-keyframes dom-update-highlight-animation-dark { from { background-color: rgb(158 54 153); color: white; @@ -261,12 +261,12 @@ select { } .dom-update-highlight { - animation: dom-update-highlight-animation 1.4s 1 cubic-bezier(0, 0, 0.2, 1); + -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 { - 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 { diff --git a/front_end/elements/metricsSidebarPane.css b/front_end/elements/metricsSidebarPane.css index 684add0437..0e3b8aaff9 100644 --- a/front_end/elements/metricsSidebarPane.css +++ b/front_end/elements/metricsSidebarPane.css @@ -12,8 +12,8 @@ min-height: var(--metrics-height); display: flex; flex-direction: column; - align-items: center; - justify-content: center; + -webkit-align-items: center; + -webkit-justify-content: center; } :host { diff --git a/front_end/emulation/sensors.css b/front_end/emulation/sensors.css index 23e937d089..146715aa49 100644 --- a/front_end/emulation/sensors.css +++ b/front_end/emulation/sensors.css @@ -84,18 +84,18 @@ } .orientation-stage { - perspective: 700px; - perspective-origin: 50% 50%; + -webkit-perspective: 700px; + -webkit-perspective-origin: 50% 50%; width: 160px; height: 150px; background: linear-gradient(#e1f5fe 0%, #e1f5fe 64%, #b0ebf3 64%, #def6f9 100%); - transition: 0.2s ease opacity, 0.2s ease filter; + transition: 0.2s ease opacity, 0.2s ease -webkit-filter; overflow: hidden; margin-bottom: 10px; } .orientation-stage.disabled { - filter: grayscale(); + -webkit-filter: grayscale(); opacity: 50%; cursor: default !important; } diff --git a/front_end/issues/issuesTree.css b/front_end/issues/issuesTree.css index 07c355823f..9fde997ac6 100644 --- a/front_end/issues/issuesTree.css +++ b/front_end/issues/issuesTree.css @@ -50,7 +50,7 @@ } .issues li.parent.expanded::before { - mask-position: 0 0; + -webkit-mask-position: 0 0; transform: rotate(90deg); } @@ -191,12 +191,12 @@ p { .link-list li::before { content: none; - mask-image: none; + -webkit-mask-image: none; } .resolutions-list li::before { content: "→"; - mask-image: none; + -webkit-mask-image: none; padding-right: 5px; position: relative; top: -1px; diff --git a/front_end/network/networkLogView.css b/front_end/network/networkLogView.css index 576d55ee31..b4cbe4c94b 100644 --- a/front_end/network/networkLogView.css +++ b/front_end/network/networkLogView.css @@ -118,7 +118,7 @@ } .network-log-grid.data-grid select { - appearance: none; + -webkit-appearance: none; border: none; width: 100%; color: inherit; @@ -198,13 +198,13 @@ } .network-log-grid tr.highlighted-row { - animation: network-row-highlight-fadeout 2s 0s; + -webkit-animation: network-row-highlight-fadeout 2s 0s; } /* See comment above why the rules were disabled */ /* stylelint-enable no-descending-specificity */ -@keyframes network-row-highlight-fadeout { +@-webkit-keyframes network-row-highlight-fadeout { from { background-color: rgb(255 255 120 / 100%); } to { background-color: rgb(255 255 120 / 0%); } } diff --git a/front_end/network/networkTimingTable.css b/front_end/network/networkTimingTable.css index f2bc56842b..6eff681818 100644 --- a/front_end/network/networkTimingTable.css +++ b/front_end/network/networkTimingTable.css @@ -127,9 +127,9 @@ table.network-timing-table > tr:not(.network-timing-table-header):not(.network-t .network-fetch-timing-bar-clickable::before { user-select: none; - mask-image: url(Images/treeoutlineTriangles.svg); - mask-position: 0 0; - mask-size: 32px 24px; + -webkit-mask-image: url(Images/treeoutlineTriangles.svg); + -webkit-mask-position: 0 0; + -webkit-mask-size: 32px 24px; float: left; width: 8px; height: 12px; @@ -145,7 +145,7 @@ table.network-timing-table > tr:not(.network-timing-table-header):not(.network-t } .network-fetch-timing-bar-clickable[aria-checked="true"]::before { - mask-position: -16px 0; + -webkit-mask-position: -16px 0; } .network-fetch-timing-bar-details-collapsed { diff --git a/front_end/persistence/workspaceSettingsTab.css b/front_end/persistence/workspaceSettingsTab.css index db9c720771..e3a47653a6 100644 --- a/front_end/persistence/workspaceSettingsTab.css +++ b/front_end/persistence/workspaceSettingsTab.css @@ -26,11 +26,11 @@ header > h1 { .settings-container { width: 100%; - column-width: 288px; + -webkit-column-width: 288px; } .settings-tab.settings-container { - column-width: 308px; + -webkit-column-width: 308px; } .settings-tab label { @@ -102,7 +102,7 @@ p.folder-exclude-pattern > input { } .settings-tab.settings-content.settings-container { - column-width: initial; + -webkit-column-width: initial; overflow: hidden; padding-right: 10px; } diff --git a/front_end/profiler/profilesPanel.css b/front_end/profiler/profilesPanel.css index 15e1af813d..7a651af1fd 100644 --- a/front_end/profiler/profilesPanel.css +++ b/front_end/profiler/profilesPanel.css @@ -113,10 +113,10 @@ } .highlighted-row { - animation: row_highlight 2s 0s; + -webkit-animation: row_highlight 2s 0s; } -@keyframes row_highlight { +@-webkit-keyframes row_highlight { from { background-color: rgb(255 255 120 / 100%); } to { background-color: rgb(255 255 120 / 0%); } } diff --git a/front_end/profiler/profilesSidebarTree.css b/front_end/profiler/profilesSidebarTree.css index 13647f653c..44500b3206 100644 --- a/front_end/profiler/profilesSidebarTree.css +++ b/front_end/profiler/profilesSidebarTree.css @@ -92,7 +92,7 @@ li.wait.selected .spinner::before { --spinner-color: white; } -@keyframes spinner-animation { +@-webkit-keyframes spinner-animation { from { transform: rotate(0); } to { transform: rotate(360deg); } } diff --git a/front_end/resources/serviceWorkersView.css b/front_end/resources/serviceWorkersView.css index 549f26a54a..86ba8c5dc2 100644 --- a/front_end/resources/serviceWorkersView.css +++ b/front_end/resources/serviceWorkersView.css @@ -156,8 +156,8 @@ .service-worker-filter-label::before { user-select: none; - mask-image: url(Images/treeoutlineTriangles.svg); - mask-size: 32px 24px; + -webkit-mask-image: url(Images/treeoutlineTriangles.svg); + -webkit-mask-size: 32px 24px; content: ''; color: transparent; background-color: rgb(110 110 110); @@ -168,7 +168,7 @@ } .service-worker-filter[aria-checked="true"] .service-worker-filter-label::before { - mask-position: -16px 0; + -webkit-mask-position: -16px 0; } .service-worker-filter-toolbar { diff --git a/front_end/screencast/screencastView.css b/front_end/screencast/screencastView.css index 2f9230c817..0ce5dd3d3e 100644 --- a/front_end/screencast/screencastView.css +++ b/front_end/screencast/screencastView.css @@ -86,7 +86,7 @@ } .screencast-navigation input { - flex: 1; + -webkit-flex: 1; margin: 2px; max-height: 19px; } diff --git a/front_end/security/lockIcon.css b/front_end/security/lockIcon.css index 2b31d29b17..0e4bfb142a 100644 --- a/front_end/security/lockIcon.css +++ b/front_end/security/lockIcon.css @@ -7,19 +7,19 @@ .security-property { height: 16px; width: 16px; - mask-image: url(Images/securityIcons.svg); - mask-size: 80px 32px; + -webkit-mask-image: url(Images/securityIcons.svg); + -webkit-mask-size: 80px 32px; background-color: #888; } .lock-icon-secure { - mask-position: 0 0; + -webkit-mask-position: 0 0; background-color: #0b8043; } .lock-icon-unknown, .lock-icon-neutral { - mask-position: -16px 0; + -webkit-mask-position: -16px 0; background-color: #000; /* Black for clarity on lower DPI screens */ } @@ -31,42 +31,42 @@ } .lock-icon-insecure { - mask-position: -32px 0; + -webkit-mask-position: -32px 0; background-color: #5a5a5a; } .lock-icon-insecure-broken { - mask-position: -32px 0; + -webkit-mask-position: -32px 0; background-color: #c63626; } .security-property-secure { - mask-position: 0 -16px; + -webkit-mask-position: 0 -16px; background-color: #0b8043; } .security-property-neutral { - mask-position: -16px -16px; + -webkit-mask-position: -16px -16px; background-color: #c63626; } .security-property-insecure { - mask-position: -32px -16px; + -webkit-mask-position: -32px -16px; background-color: #c63626; } .security-property-insecure-broken { - mask-position: -32px -16px; + -webkit-mask-position: -32px -16px; background-color: #c63626; } .security-property-info { - mask-position: -48px -16px; + -webkit-mask-position: -48px -16px; background-color: rgb(0 0 0 / 50%); } .security-property-unknown { - mask-position: -64px -16px; + -webkit-mask-position: -64px -16px; background-color: rgb(0 0 0 / 50%); } diff --git a/front_end/settings/keybindsSettingsTab.css b/front_end/settings/keybindsSettingsTab.css index 3b72c05f2f..9a970d64e4 100644 --- a/front_end/settings/keybindsSettingsTab.css +++ b/front_end/settings/keybindsSettingsTab.css @@ -68,7 +68,7 @@ h1 { padding: 3px 0; white-space: nowrap; text-overflow: ellipsis; - user-select: none; + -webkit-user-select: none; color: #222; text-align: start; position: relative; diff --git a/front_end/settings/settingsScreen.css b/front_end/settings/settingsScreen.css index f6cc0c7766..846d62e4d7 100644 --- a/front_end/settings/settingsScreen.css +++ b/front_end/settings/settingsScreen.css @@ -26,18 +26,18 @@ .settings-container { width: 100%; - column-width: 288px; + -webkit-column-width: 288px; } .settings-block { display: block; padding-bottom: 9px; width: 288px; - break-inside: avoid; + -webkit-column-break-inside: avoid; } .settings-tab.settings-container { - column-width: 308px; + -webkit-column-width: 308px; } .settings-tab .settings-block { @@ -162,7 +162,7 @@ fieldset { } #experiments-tab-content .settings-container { - column-width: 470px; + -webkit-column-width: 470px; } #experiments-tab-content .settings-block { diff --git a/front_end/sources/debuggerPausedMessage.css b/front_end/sources/debuggerPausedMessage.css index fbac9dc234..bdbceef9cf 100644 --- a/front_end/sources/debuggerPausedMessage.css +++ b/front_end/sources/debuggerPausedMessage.css @@ -43,12 +43,12 @@ } .status-icon { - filter: hue-rotate(190deg); + -webkit-filter: hue-rotate(190deg); position: absolute; left: 0; top: calc(50% - 5px); } .paused-status.error-reason .status-icon { - filter: none; + -webkit-filter: none; } diff --git a/front_end/sources/sourcesPanel.css b/front_end/sources/sourcesPanel.css index 6cc04f40d8..a14061aed7 100644 --- a/front_end/sources/sourcesPanel.css +++ b/front_end/sources/sourcesPanel.css @@ -38,7 +38,7 @@ .scripts-debug-toolbar-drawer { flex: 0 0 52px; - transition: margin-top 0.1s ease-in-out; + -webkit-transition: margin-top 0.1s ease-in-out; margin-top: -26px; padding-top: 25px; background-color: white; diff --git a/front_end/sources/sourcesView.css b/front_end/sources/sourcesView.css index d689a37bd7..0cba20ff55 100644 --- a/front_end/sources/sourcesView.css +++ b/front_end/sources/sourcesView.css @@ -54,7 +54,7 @@ background-color: #444; } -@keyframes source-frame-value-update-highlight-animation { +@-webkit-keyframes source-frame-value-update-highlight-animation { from { background-color: inherit; color: inherit; @@ -72,7 +72,7 @@ } .source-frame-value-update-highlight { - animation: source-frame-value-update-highlight-animation 0.8s 1 cubic-bezier(0, 0, 0.2, 1); + -webkit-animation: source-frame-value-update-highlight-animation 0.8s 1 cubic-bezier(0, 0, 0.2, 1); border-radius: 2px; } diff --git a/front_end/text_editor/cmdevtools.css b/front_end/text_editor/cmdevtools.css index b4496ae6ff..6a94a4efe2 100644 --- a/front_end/text_editor/cmdevtools.css +++ b/front_end/text_editor/cmdevtools.css @@ -137,20 +137,20 @@ } .cm-highlight { - animation: fadeout 2s 0s; + -webkit-animation: fadeout 2s 0s; } .-theme-with-dark-background .cm-highlight, :host-context(.-theme-with-dark-background) .cm-highlight { - animation: fadeout-dark 2s 0s; + -webkit-animation: fadeout-dark 2s 0s; } -@keyframes fadeout { +@-webkit-keyframes fadeout { from { background-color: rgb(255 255 120); } to { background-color: white; } } -@keyframes fadeout-dark { +@-webkit-keyframes fadeout-dark { from { background-color: hsl(133deg 100% 30% / 50%); } to { background-color: transparent; } } @@ -165,20 +165,20 @@ } .cm-highlight.cm-execution-line { - animation: fadeout-execution-line 1s 0s; + -webkit-animation: fadeout-execution-line 1s 0s; } .-theme-with-dark-background .cm-highlight.cm-execution-line, :host-context(.-theme-with-dark-background) .cm-highlight.cm-execution-line { - animation: fadeout-execution-line-dark 1s 0s; + -webkit-animation: fadeout-execution-line-dark 1s 0s; } -@keyframes fadeout-execution-line { +@-webkit-keyframes fadeout-execution-line { from { background-color: rgb(121 141 254); } to { background-color: rgb(171 191 254); } } -@keyframes fadeout-execution-line-dark { +@-webkit-keyframes fadeout-execution-line-dark { from { background-color: #208043; } to { background-color: #14522b; } } @@ -202,25 +202,25 @@ /* stylelint-disable no-descending-specificity */ .CodeMirror-linenumber:hover { - border-image: url('data:image/svg+xml,') 1 3 1 1; + -webkit-border-image: url('data:image/svg+xml,') 1 3 1 1; padding-left: 8px; } .-theme-with-dark-background .CodeMirror-linenumber:hover, :host-context(.-theme-with-dark-background) .CodeMirror-linenumber:hover { - border-image: url('data:image/svg+xml,') 1 3 1 1; + -webkit-border-image: url('data:image/svg+xml,') 1 3 1 1; } .cm-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber, .-theme-preserve { color: white; - border-image: url('data:image/svg+xml,') 1 3 1 1; + -webkit-border-image: url('data:image/svg+xml,') 1 3 1 1; } .cm-breakpoint-disabled .CodeMirror-gutter-wrapper .CodeMirror-linenumber, .breakpoints-deactivated .cm-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber { color: #1a73e8; - border-image: url('data:image/svg+xml,') 1 3 1 1; + -webkit-border-image: url('data:image/svg+xml,') 1 3 1 1; } .-theme-with-dark-background .cm-breakpoint-disabled .CodeMirror-gutter-wrapper .CodeMirror-linenumber, @@ -228,18 +228,18 @@ :host-context(.-theme-with-dark-background) .cm-breakpoint-disabled .CodeMirror-gutter-wrapper .CodeMirror-linenumber, :host-context(.-theme-with-dark-background) .breakpoints-deactivated .cm-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber { color: #1a73e8; - border-image: url('data:image/svg+xml,') 1 3 1 1; + -webkit-border-image: url('data:image/svg+xml,') 1 3 1 1; } .cm-breakpoint-conditional .CodeMirror-gutter-wrapper .CodeMirror-linenumber, .-theme-preserve { - border-image: url('data:image/svg+xml,') 1 3 1 1; + -webkit-border-image: url('data:image/svg+xml,') 1 3 1 1; } .cm-breakpoint-disabled.cm-breakpoint-conditional .CodeMirror-gutter-wrapper .CodeMirror-linenumber, .breakpoints-deactivated .cm-breakpoint-conditional .CodeMirror-gutter-wrapper .CodeMirror-linenumber { color: #e37400; - border-image: url('data:image/svg+xml,') 1 3 1 1; + -webkit-border-image: url('data:image/svg+xml,') 1 3 1 1; } .-theme-with-dark-background .cm-breakpoint-disabled.cm-breakpoint-conditional .CodeMirror-gutter-wrapper .CodeMirror-linenumber, @@ -247,18 +247,18 @@ :host-context(.-theme-with-dark-background) .cm-breakpoint-disabled.cm-breakpoint-conditional .CodeMirror-gutter-wrapper .CodeMirror-linenumber, :host-context(.-theme-with-dark-background) .breakpoints-deactivated .cm-breakpoint-conditional .CodeMirror-gutter-wrapper .CodeMirror-linenumber { color: #e37400; - border-image: url('data:image/svg+xml,') 1 3 1 1; + -webkit-border-image: url('data:image/svg+xml,') 1 3 1 1; } .cm-breakpoint-logpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber, .-theme-preserve { - border-image: url('data:image/svg+xml,') 1 3 1 1; + -webkit-border-image: url('data:image/svg+xml,') 1 3 1 1; } .cm-breakpoint-disabled.cm-breakpoint-logpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber, .breakpoints-deactivated .cm-breakpoint-logpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber { color: #d01884; - border-image: url('data:image/svg+xml,') 1 3 1 1; + -webkit-border-image: url('data:image/svg+xml,') 1 3 1 1; } .-theme-with-dark-background .cm-breakpoint-disabled.cm-breakpoint-logpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber, @@ -266,7 +266,7 @@ :host-context(.-theme-with-dark-background) .cm-breakpoint-disabled.cm-breakpoint-logpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber, :host-context(.-theme-with-dark-background) .breakpoints-deactivated .cm-breakpoint-logpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber { color: #d01884; - border-image: url('data:image/svg+xml,') 1 3 1 1; + -webkit-border-image: url('data:image/svg+xml,') 1 3 1 1; } /* stylelint-enable no-descending-specificity */ @@ -707,8 +707,8 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket { .CodeMirror-foldgutter-folded::before { background-color: #727272; user-select: none; - mask-image: url(Images/treeoutlineTriangles.svg); - mask-size: 32px 24px; + -webkit-mask-image: url(Images/treeoutlineTriangles.svg); + -webkit-mask-size: 32px 24px; content: ""; display: block; width: 8px; @@ -720,11 +720,11 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket { } .CodeMirror-foldgutter-open::before { - mask-position: -16px 0; + -webkit-mask-position: -16px 0; } .CodeMirror-foldgutter-folded::before { - mask-position: 0 0; + -webkit-mask-position: 0 0; } .CodeMirror .CodeMirror-line::selection, diff --git a/front_end/timeline/timelinePaintProfiler.css b/front_end/timeline/timelinePaintProfiler.css index cdde0b8f1d..391f996f46 100644 --- a/front_end/timeline/timelinePaintProfiler.css +++ b/front_end/timeline/timelinePaintProfiler.css @@ -9,7 +9,7 @@ } .paint-profiler-image-view .paint-profiler-image-container { - transform-origin: 0 0; + -webkit-transform-origin: 0 0; } .paint-profiler-image-view .paint-profiler-image-container div { diff --git a/front_end/ui/checkboxTextLabel.css b/front_end/ui/checkboxTextLabel.css index 1cea4bf761..d1b4703371 100644 --- a/front_end/ui/checkboxTextLabel.css +++ b/front_end/ui/checkboxTextLabel.css @@ -28,7 +28,7 @@ input:focus { } input.dt-checkbox-themed { - appearance: none; + -webkit-appearance: none; margin: auto 5px auto 2px; border: 1px solid rgb(45 45 45); border-radius: 3px; @@ -43,9 +43,9 @@ input.dt-checkbox-themed::after { width: 12px; height: 12px; background: none; - mask-image: url(Images/checkboxCheckmark.svg); - mask-size: 11px 11px; - mask-position: 0 0; + -webkit-mask-image: url(Images/checkboxCheckmark.svg); + -webkit-mask-size: 11px 11px; + -webkit-mask-position: 0 0; } input.dt-checkbox-themed:checked::after { diff --git a/front_end/ui/glassPane.css b/front_end/ui/glassPane.css index 09acc05e00..c6ef6fd2ce 100644 --- a/front_end/ui/glassPane.css +++ b/front_end/ui/glassPane.css @@ -57,5 +57,5 @@ } :host-context(.-theme-with-dark-background) .arrow { - filter: invert(80%); + -webkit-filter: invert(80%); } diff --git a/front_end/ui/infobar.css b/front_end/ui/infobar.css index abc5b41c14..684d07c629 100644 --- a/front_end/ui/infobar.css +++ b/front_end/ui/infobar.css @@ -80,17 +80,17 @@ } .info-icon { - mask-image: url(Images/ic_info_black_18dp.svg); + -webkit-mask-image: url(Images/ic_info_black_18dp.svg); background-color: hsl(214deg 92% 50%); } .warning-icon { - mask-image: url(Images/ic_warning_black_18dp.svg); + -webkit-mask-image: url(Images/ic_warning_black_18dp.svg); background-color: hsl(44deg 92% 50%); } .icon { - mask-size: 18px 18px; + -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 31ebca5d68..bc8ed9291b 100644 --- a/front_end/ui/inspectorCommon.css +++ b/front_end/ui/inspectorCommon.css @@ -182,7 +182,7 @@ input::placeholder { } :host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) { - filter: invert(80%); + -webkit-filter: invert(80%); } .harmony-input:not([type]), @@ -246,7 +246,7 @@ input::placeholder { } .chrome-select { - appearance: none; + -webkit-appearance: none; user-select: none; border: 1px solid rgb(0 0 0 / 20%); border-radius: 2px; @@ -307,14 +307,14 @@ input::placeholder { } :not(.platform-mac).-theme-with-dark-background ::-webkit-scrollbar-track { - box-shadow: inset 0 0 1px rgb(255 255 255 / 30%); + -webkit-box-shadow: inset 0 0 1px rgb(255 255 255 / 30%); background: rgb(36 36 36); } :not(.platform-mac).-theme-with-dark-background ::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #333; - box-shadow: inset 0 0 1px rgb(255 255 255 / 50%); + -webkit-box-shadow: inset 0 0 1px rgb(255 255 255 / 50%); } :not(.platform-mac).-theme-with-dark-background ::-webkit-scrollbar-corner { @@ -327,14 +327,14 @@ input::placeholder { } :host-context(:not(.platform-mac).-theme-with-dark-background) ::-webkit-scrollbar-track { - box-shadow: inset 0 0 1px rgb(255 255 255 / 30%); + -webkit-box-shadow: inset 0 0 1px rgb(255 255 255 / 30%); background: rgb(36 36 36); } :host-context(:not(.platform-mac).-theme-with-dark-background) ::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #333; - box-shadow: inset 0 0 1px rgb(255 255 255 / 50%); + -webkit-box-shadow: inset 0 0 1px rgb(255 255 255 / 50%); } :host-context(:not(.platform-mac).-theme-with-dark-background) ::-webkit-scrollbar-corner { @@ -387,7 +387,7 @@ span[is=dt-icon-label] { [is=ui-icon].icon-mask { background-color: rgb(110 110 110); - mask-position: var(--spritesheet-position); + -webkit-mask-position: var(--spritesheet-position); } [is=ui-icon]:not(.icon-mask) { @@ -399,7 +399,7 @@ span[is=dt-icon-label] { } .spritesheet-smallicons.icon-mask { - mask-image: url(Images/smallIcons.svg); + -webkit-mask-image: url(Images/smallIcons.svg); } .spritesheet-largeicons:not(.icon-mask) { @@ -407,7 +407,7 @@ span[is=dt-icon-label] { } .spritesheet-largeicons.icon-mask { - mask-image: url(Images/largeIcons.svg); + -webkit-mask-image: url(Images/largeIcons.svg); } .spritesheet-mediumicons:not(.icon-mask) { @@ -415,7 +415,7 @@ span[is=dt-icon-label] { } .spritesheet-mediumicons.icon-mask { - mask-image: url(Images/mediumIcons.svg); + -webkit-mask-image: url(Images/mediumIcons.svg); } .spritesheet-arrowicons { @@ -426,8 +426,8 @@ span[is=dt-icon-label] { :host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons, [is=ui-icon].force-white-icons.spritesheet-smallicons, .-theme-preserve { - mask-image: url(Images/smallIcons.svg); - mask-position: var(--spritesheet-position); + -webkit-mask-image: url(Images/smallIcons.svg); + -webkit-mask-position: var(--spritesheet-position); background: #fafafa !important; } @@ -435,8 +435,8 @@ span[is=dt-icon-label] { :host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons, [is=ui-icon].force-white-icons.spritesheet-largeicons, .-theme-preserve { - mask-image: url(Images/largeIcons.svg); - mask-position: var(--spritesheet-position); + -webkit-mask-image: url(Images/largeIcons.svg); + -webkit-mask-position: var(--spritesheet-position); background: #fafafa !important; } @@ -444,8 +444,8 @@ span[is=dt-icon-label] { :host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicons, [is=ui-icon].force-white-icons.spritesheet-mediumicons, .-theme-preserve { - mask-image: url(Images/mediumIcons.svg); - mask-position: var(--spritesheet-position); + -webkit-mask-image: url(Images/mediumIcons.svg); + -webkit-mask-position: var(--spritesheet-position); background: #fafafa !important; } diff --git a/front_end/ui/radioButton.css b/front_end/ui/radioButton.css index cfe509548f..17a73191f3 100644 --- a/front_end/ui/radioButton.css +++ b/front_end/ui/radioButton.css @@ -15,7 +15,7 @@ border: 1px solid #a5a5a5; background-image: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end)); border-radius: 8px; - appearance: none; + -webkit-appearance: none; vertical-align: middle; margin: 0 5px 5px 0; } diff --git a/front_end/ui/searchableView.css b/front_end/ui/searchableView.css index ee178b9d0b..eef13d74e9 100644 --- a/front_end/ui/searchableView.css +++ b/front_end/ui/searchableView.css @@ -18,7 +18,7 @@ } .search-replace { - appearance: none; + -webkit-appearance: none; border: 0; padding: 0 3px; margin: 0; @@ -69,7 +69,7 @@ } .toolbar-search-control { - display: flex; + display: -webkit-flex; position: relative; background-color: white; } @@ -104,7 +104,7 @@ } :host-context(.-theme-with-dark-background) .toolbar-search-navigation { - filter: invert(90%); + -webkit-filter: invert(90%); } .toolbar-search-navigation.toolbar-search-navigation-prev.enabled:active { diff --git a/front_end/ui/slider.css b/front_end/ui/slider.css index a9fa9af591..4f14772903 100644 --- a/front_end/ui/slider.css +++ b/front_end/ui/slider.css @@ -5,7 +5,7 @@ */ .dt-range-input { - appearance: none; + -webkit-appearance: none; margin: 0; padding: 0; height: 10px; @@ -16,7 +16,7 @@ .dt-range-input::-webkit-slider-thumb, .-theme-preserve { - appearance: none; + -webkit-appearance: none; margin: 0; padding: 0; border: 0; @@ -28,7 +28,7 @@ } .dt-range-input::-webkit-slider-runnable-track { - appearance: none; + -webkit-appearance: none; margin: 0; padding: 0; width: 100%; diff --git a/front_end/ui/toolbar.css b/front_end/ui/toolbar.css index a28dd6e242..524aa04248 100644 --- a/front_end/ui/toolbar.css +++ b/front_end/ui/toolbar.css @@ -210,7 +210,7 @@ select.toolbar-item:disabled + .toolbar-dropdown-arrow { select.toolbar-item { min-width: 38px; - appearance: none; + -webkit-appearance: none; border: 1px solid transparent; border-radius: 0; padding: 0 13px 0 5px; diff --git a/front_end/ui/tooltip.css b/front_end/ui/tooltip.css index 697c674d31..3ac0b71c8e 100644 --- a/front_end/ui/tooltip.css +++ b/front_end/ui/tooltip.css @@ -12,7 +12,7 @@ line-height: 14px; display: flex; align-items: center; - filter: drop-shadow(0 1px 2px hsl(0deg 0% 0% / 30%)); + -webkit-filter: drop-shadow(0 1px 2px hsl(0deg 0% 0% / 30%)); border: 1px solid hsl(0deg 0% 0% / 10%); background-clip: padding-box; box-sizing: border-box; diff --git a/front_end/ui/treeoutline.css b/front_end/ui/treeoutline.css index 0ffe25c621..1a159c009f 100644 --- a/front_end/ui/treeoutline.css +++ b/front_end/ui/treeoutline.css @@ -109,11 +109,11 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * { .tree-outline li::before { user-select: none; - mask-image: url(Images/treeoutlineTriangles.svg); - mask-size: 32px 24px; - mask-position: 0 0; + -webkit-mask-image: url(Images/treeoutlineTriangles.svg); + -webkit-mask-size: 32px 24px; + -webkit-mask-position: 0 0; background-color: #727272; - content: "\A0\A0"; + content: "\00a0\00a0"; text-shadow: none; margin-right: -2px; height: 12px; @@ -125,7 +125,7 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * { } .tree-outline li.parent.expanded::before { - mask-position: -16px 0; + -webkit-mask-position: -16px 0; } .tree-outline ol.children {