Revert "Enable property-no-vendor-prefix stylelint check"

This reverts commit 190803bad8.

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 <changhaohan@chromium.org>
> Commit-Queue: Mathias Bynens <mathias@chromium.org>

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 <tvanderlippe@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>

.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,
       {

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%;
 }

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%);
   }
 }
 

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,

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 {

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 {

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 {

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;
 }

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;

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%); }
 }

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 {

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;
 }

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%); }
 }

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); }
 }

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 {

front_end/screencast/screencastView.css

@@ -86,7 +86,7 @@
 }
 
 .screencast-navigation input {
-  flex: 1;
+  -webkit-flex: 1;
   margin: 2px;
   max-height: 19px;
 }

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%);
 }
 

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;

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 {

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;
 }

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;

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;
 }
 

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,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23ebeced" stroke="%23ebeced"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23ebeced" stroke="%23ebeced"/></svg>') 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,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%233c4043" stroke="%233c4043"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%233c4043" stroke="%233c4043"/></svg>') 1 3 1 1;
 }
 
 .cm-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber,
 .-theme-preserve {
   color: white;
-  border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%234285f4" stroke="%231a73e8"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%234285f4" stroke="%231a73e8"/></svg>') 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,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23d9e7fd" stroke="%231a73e8"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23d9e7fd" stroke="%231a73e8"/></svg>') 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,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%232a384e" stroke="%231a73e8"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%232a384e" stroke="%231a73e8"/></svg>') 1 3 1 1;
 }
 
 .cm-breakpoint-conditional .CodeMirror-gutter-wrapper .CodeMirror-linenumber,
 .-theme-preserve {
-  border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23f29900" stroke="%23e37400"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23f29900" stroke="%23e37400"/></svg>') 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,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23fcebcc" stroke="%23e37400"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23fcebcc" stroke="%23e37400"/></svg>') 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,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%234d3c1d" stroke="%23e37400"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%234d3c1d" stroke="%23e37400"/></svg>') 1 3 1 1;
 }
 
 .cm-breakpoint-logpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber,
 .-theme-preserve {
-  border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23f439a0" stroke="%23d01884"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23f439a0" stroke="%23d01884"/></svg>') 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,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23fdd7ec" stroke="%23f439a0"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%23fdd7ec" stroke="%23f439a0"/></svg>') 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,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%234e283d" stroke="%23f439a0"/></svg>') 1 3 1 1;
+  -webkit-border-image: url('data:image/svg+xml,<svg height="11" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M22.8.5l2.7 5-2.7 5H.5V.5z" fill="%234e283d" stroke="%23f439a0"/></svg>') 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,

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 {

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 {

front_end/ui/glassPane.css

@@ -57,5 +57,5 @@
 }
 
 :host-context(.-theme-with-dark-background) .arrow {
-  filter: invert(80%);
+  -webkit-filter: invert(80%);
 }

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;

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;
 }
 

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;
 }

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 {

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%;

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;

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;

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 {