Reland “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.
[email protected]
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug: chromium:1104187
Change-Id: Ibf36fe5a3802b5f3ac663b7ac873a4758e0fda14
Fixed: chromium:1031475
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2297386
Reviewed-by: Changhao Han <[email protected]>
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2297393
Commit-Queue: Mathias Bynens <[email protected]>
Auto-Submit: Mathias Bynens <[email protected]>
Reviewed-by: Mathias Bynens <[email protected]>
diff --git a/.stylelintrc.json b/.stylelintrc.json
index 12ca1af..ed30e68 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -4,11 +4,20 @@
"alpha-value-notation": "percentage",
"color-function-notation": "modern",
"hue-degree-notation": "angle",
+ "property-no-vendor-prefix": [
+ true,
+ {
+ "ignoreProperties": [
+ "border-image",
+ "/^mask-/"
+ ]
+ }
+ ],
"selector-type-no-unknown": [
true,
{
"ignoreTypes": [
- "/^devtools-.+/"
+ "/^devtools-/"
]
}
]
diff --git a/front_end/animation/animationTimeline.css b/front_end/animation/animationTimeline.css
index 6cfae94..4888132 100644
--- a/front_end/animation/animationTimeline.css
+++ b/front_end/animation/animationTimeline.css
@@ -242,7 +242,7 @@
}
.animation-node-removed {
- -webkit-filter: saturate(0);
+ filter: saturate(0);
cursor: not-allowed;
}
@@ -378,11 +378,11 @@
@keyframes newGroupAnim {
from {
- -webkit-clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
+ clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
}
to {
- -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
+ 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 a2a50eb..63eec1c 100644
--- a/front_end/color_picker/spectrum.css
+++ b/front_end/color_picker/spectrum.css
@@ -624,7 +624,7 @@
}
:host-context(.-theme-with-dark-background) .spectrum-switcher {
- -webkit-filter: unset;
+ filter: unset;
}
.spectrum-switcher:hover svg,
diff --git a/front_end/elements/elementsTreeOutline.css b/front_end/elements/elementsTreeOutline.css
index c12c7eb..a7ad472 100644
--- a/front_end/elements/elementsTreeOutline.css
+++ b/front_end/elements/elementsTreeOutline.css
@@ -65,7 +65,7 @@
user-select: none;
-webkit-mask-image: url(Images/treeoutlineTriangles.svg);
-webkit-mask-size: 32px 24px;
- content: '\00a0\00a0';
+ content: '\A0\A0';
color: transparent;
text-shadow: none;
margin-right: -3px;
@@ -228,7 +228,7 @@
}
/* DOM update highlight */
-@-webkit-keyframes dom-update-highlight-animation {
+@keyframes dom-update-highlight-animation {
from {
background-color: rgb(158 54 153);
color: white;
@@ -244,7 +244,7 @@
}
}
-@-webkit-keyframes dom-update-highlight-animation-dark {
+@keyframes dom-update-highlight-animation-dark {
from {
background-color: rgb(158 54 153);
color: white;
@@ -261,12 +261,12 @@
}
.dom-update-highlight {
- -webkit-animation: dom-update-highlight-animation 1.4s 1 cubic-bezier(0, 0, 0.2, 1);
+ animation: dom-update-highlight-animation 1.4s 1 cubic-bezier(0, 0, 0.2, 1);
border-radius: 2px;
}
:host-context(.-theme-with-dark-background) .dom-update-highlight {
- -webkit-animation: dom-update-highlight-animation-dark 1.4s 1 cubic-bezier(0, 0, 0.2, 1);
+ 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 0e3b8aa..684add0 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;
- -webkit-align-items: center;
- -webkit-justify-content: center;
+ align-items: center;
+ justify-content: center;
}
:host {
diff --git a/front_end/emulation/sensors.css b/front_end/emulation/sensors.css
index 146715a..23e937d 100644
--- a/front_end/emulation/sensors.css
+++ b/front_end/emulation/sensors.css
@@ -84,18 +84,18 @@
}
.orientation-stage {
- -webkit-perspective: 700px;
- -webkit-perspective-origin: 50% 50%;
+ perspective: 700px;
+ 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 -webkit-filter;
+ transition: 0.2s ease opacity, 0.2s ease filter;
overflow: hidden;
margin-bottom: 10px;
}
.orientation-stage.disabled {
- -webkit-filter: grayscale();
+ filter: grayscale();
opacity: 50%;
cursor: default !important;
}
diff --git a/front_end/network/networkLogView.css b/front_end/network/networkLogView.css
index b4cbe4c..576d55e 100644
--- a/front_end/network/networkLogView.css
+++ b/front_end/network/networkLogView.css
@@ -118,7 +118,7 @@
}
.network-log-grid.data-grid select {
- -webkit-appearance: none;
+ appearance: none;
border: none;
width: 100%;
color: inherit;
@@ -198,13 +198,13 @@
}
.network-log-grid tr.highlighted-row {
- -webkit-animation: network-row-highlight-fadeout 2s 0s;
+ animation: network-row-highlight-fadeout 2s 0s;
}
/* See comment above why the rules were disabled */
/* stylelint-enable no-descending-specificity */
-@-webkit-keyframes network-row-highlight-fadeout {
+@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/persistence/workspaceSettingsTab.css b/front_end/persistence/workspaceSettingsTab.css
index e3a4765..db9c720 100644
--- a/front_end/persistence/workspaceSettingsTab.css
+++ b/front_end/persistence/workspaceSettingsTab.css
@@ -26,11 +26,11 @@
.settings-container {
width: 100%;
- -webkit-column-width: 288px;
+ column-width: 288px;
}
.settings-tab.settings-container {
- -webkit-column-width: 308px;
+ column-width: 308px;
}
.settings-tab label {
@@ -102,7 +102,7 @@
}
.settings-tab.settings-content.settings-container {
- -webkit-column-width: initial;
+ column-width: initial;
overflow: hidden;
padding-right: 10px;
}
diff --git a/front_end/profiler/profilesPanel.css b/front_end/profiler/profilesPanel.css
index 7a651af..15e1af8 100644
--- a/front_end/profiler/profilesPanel.css
+++ b/front_end/profiler/profilesPanel.css
@@ -113,10 +113,10 @@
}
.highlighted-row {
- -webkit-animation: row_highlight 2s 0s;
+ animation: row_highlight 2s 0s;
}
-@-webkit-keyframes row_highlight {
+@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 44500b3..13647f6 100644
--- a/front_end/profiler/profilesSidebarTree.css
+++ b/front_end/profiler/profilesSidebarTree.css
@@ -92,7 +92,7 @@
--spinner-color: white;
}
-@-webkit-keyframes spinner-animation {
+@keyframes spinner-animation {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
diff --git a/front_end/screencast/screencastView.css b/front_end/screencast/screencastView.css
index 0ce5dd3..2f9230c 100644
--- a/front_end/screencast/screencastView.css
+++ b/front_end/screencast/screencastView.css
@@ -86,7 +86,7 @@
}
.screencast-navigation input {
- -webkit-flex: 1;
+ flex: 1;
margin: 2px;
max-height: 19px;
}
diff --git a/front_end/settings/keybindsSettingsTab.css b/front_end/settings/keybindsSettingsTab.css
index 9a970d6..3b72c05 100644
--- a/front_end/settings/keybindsSettingsTab.css
+++ b/front_end/settings/keybindsSettingsTab.css
@@ -68,7 +68,7 @@
padding: 3px 0;
white-space: nowrap;
text-overflow: ellipsis;
- -webkit-user-select: none;
+ 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 846d62e..f6cc0c7 100644
--- a/front_end/settings/settingsScreen.css
+++ b/front_end/settings/settingsScreen.css
@@ -26,18 +26,18 @@
.settings-container {
width: 100%;
- -webkit-column-width: 288px;
+ column-width: 288px;
}
.settings-block {
display: block;
padding-bottom: 9px;
width: 288px;
- -webkit-column-break-inside: avoid;
+ break-inside: avoid;
}
.settings-tab.settings-container {
- -webkit-column-width: 308px;
+ column-width: 308px;
}
.settings-tab .settings-block {
@@ -162,7 +162,7 @@
}
#experiments-tab-content .settings-container {
- -webkit-column-width: 470px;
+ column-width: 470px;
}
#experiments-tab-content .settings-block {
diff --git a/front_end/sources/debuggerPausedMessage.css b/front_end/sources/debuggerPausedMessage.css
index bdbceef..fbac9dc 100644
--- a/front_end/sources/debuggerPausedMessage.css
+++ b/front_end/sources/debuggerPausedMessage.css
@@ -43,12 +43,12 @@
}
.status-icon {
- -webkit-filter: hue-rotate(190deg);
+ filter: hue-rotate(190deg);
position: absolute;
left: 0;
top: calc(50% - 5px);
}
.paused-status.error-reason .status-icon {
- -webkit-filter: none;
+ filter: none;
}
diff --git a/front_end/sources/sourcesPanel.css b/front_end/sources/sourcesPanel.css
index a14061a..6cc04f4 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;
- -webkit-transition: margin-top 0.1s ease-in-out;
+ 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 0cba20f..d689a37 100644
--- a/front_end/sources/sourcesView.css
+++ b/front_end/sources/sourcesView.css
@@ -54,7 +54,7 @@
background-color: #444;
}
-@-webkit-keyframes source-frame-value-update-highlight-animation {
+@keyframes source-frame-value-update-highlight-animation {
from {
background-color: inherit;
color: inherit;
@@ -72,7 +72,7 @@
}
.source-frame-value-update-highlight {
- -webkit-animation: source-frame-value-update-highlight-animation 0.8s 1 cubic-bezier(0, 0, 0.2, 1);
+ 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 6a94a4e..b01e194 100644
--- a/front_end/text_editor/cmdevtools.css
+++ b/front_end/text_editor/cmdevtools.css
@@ -137,20 +137,20 @@
}
.cm-highlight {
- -webkit-animation: fadeout 2s 0s;
+ animation: fadeout 2s 0s;
}
.-theme-with-dark-background .cm-highlight,
:host-context(.-theme-with-dark-background) .cm-highlight {
- -webkit-animation: fadeout-dark 2s 0s;
+ animation: fadeout-dark 2s 0s;
}
-@-webkit-keyframes fadeout {
+@keyframes fadeout {
from { background-color: rgb(255 255 120); }
to { background-color: white; }
}
-@-webkit-keyframes fadeout-dark {
+@keyframes fadeout-dark {
from { background-color: hsl(133deg 100% 30% / 50%); }
to { background-color: transparent; }
}
@@ -165,20 +165,20 @@
}
.cm-highlight.cm-execution-line {
- -webkit-animation: fadeout-execution-line 1s 0s;
+ 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 {
- -webkit-animation: fadeout-execution-line-dark 1s 0s;
+ animation: fadeout-execution-line-dark 1s 0s;
}
-@-webkit-keyframes fadeout-execution-line {
+@keyframes fadeout-execution-line {
from { background-color: rgb(121 141 254); }
to { background-color: rgb(171 191 254); }
}
-@-webkit-keyframes fadeout-execution-line-dark {
+@keyframes fadeout-execution-line-dark {
from { background-color: #208043; }
to { background-color: #14522b; }
}
diff --git a/front_end/timeline/timelinePaintProfiler.css b/front_end/timeline/timelinePaintProfiler.css
index 391f996..cdde0b8 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 {
- -webkit-transform-origin: 0 0;
+ 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 d1b4703..beef3b6 100644
--- a/front_end/ui/checkboxTextLabel.css
+++ b/front_end/ui/checkboxTextLabel.css
@@ -28,7 +28,7 @@
}
input.dt-checkbox-themed {
- -webkit-appearance: none;
+ appearance: none;
margin: auto 5px auto 2px;
border: 1px solid rgb(45 45 45);
border-radius: 3px;
diff --git a/front_end/ui/glassPane.css b/front_end/ui/glassPane.css
index c6ef6fd..09acc05 100644
--- a/front_end/ui/glassPane.css
+++ b/front_end/ui/glassPane.css
@@ -57,5 +57,5 @@
}
:host-context(.-theme-with-dark-background) .arrow {
- -webkit-filter: invert(80%);
+ filter: invert(80%);
}
diff --git a/front_end/ui/inspectorCommon.css b/front_end/ui/inspectorCommon.css
index bc8ed92..a4b596b 100644
--- a/front_end/ui/inspectorCommon.css
+++ b/front_end/ui/inspectorCommon.css
@@ -182,7 +182,7 @@
}
:host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) {
- -webkit-filter: invert(80%);
+ filter: invert(80%);
}
.harmony-input:not([type]),
@@ -246,7 +246,7 @@
}
.chrome-select {
- -webkit-appearance: none;
+ appearance: none;
user-select: none;
border: 1px solid rgb(0 0 0 / 20%);
border-radius: 2px;
@@ -307,14 +307,14 @@
}
:not(.platform-mac).-theme-with-dark-background ::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 1px rgb(255 255 255 / 30%);
+ 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;
- -webkit-box-shadow: inset 0 0 1px rgb(255 255 255 / 50%);
+ 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 @@
}
:host-context(:not(.platform-mac).-theme-with-dark-background) ::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 1px rgb(255 255 255 / 30%);
+ 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;
- -webkit-box-shadow: inset 0 0 1px rgb(255 255 255 / 50%);
+ box-shadow: inset 0 0 1px rgb(255 255 255 / 50%);
}
:host-context(:not(.platform-mac).-theme-with-dark-background) ::-webkit-scrollbar-corner {
diff --git a/front_end/ui/radioButton.css b/front_end/ui/radioButton.css
index 17a7319..cfe5095 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;
- -webkit-appearance: none;
+ 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 eef13d7..ee178b9 100644
--- a/front_end/ui/searchableView.css
+++ b/front_end/ui/searchableView.css
@@ -18,7 +18,7 @@
}
.search-replace {
- -webkit-appearance: none;
+ appearance: none;
border: 0;
padding: 0 3px;
margin: 0;
@@ -69,7 +69,7 @@
}
.toolbar-search-control {
- display: -webkit-flex;
+ display: flex;
position: relative;
background-color: white;
}
@@ -104,7 +104,7 @@
}
:host-context(.-theme-with-dark-background) .toolbar-search-navigation {
- -webkit-filter: invert(90%);
+ 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 4f14772..a9fa9af 100644
--- a/front_end/ui/slider.css
+++ b/front_end/ui/slider.css
@@ -5,7 +5,7 @@
*/
.dt-range-input {
- -webkit-appearance: none;
+ appearance: none;
margin: 0;
padding: 0;
height: 10px;
@@ -16,7 +16,7 @@
.dt-range-input::-webkit-slider-thumb,
.-theme-preserve {
- -webkit-appearance: none;
+ appearance: none;
margin: 0;
padding: 0;
border: 0;
@@ -28,7 +28,7 @@
}
.dt-range-input::-webkit-slider-runnable-track {
- -webkit-appearance: none;
+ appearance: none;
margin: 0;
padding: 0;
width: 100%;
diff --git a/front_end/ui/toolbar.css b/front_end/ui/toolbar.css
index 524aa04..a28dd6e 100644
--- a/front_end/ui/toolbar.css
+++ b/front_end/ui/toolbar.css
@@ -210,7 +210,7 @@
select.toolbar-item {
min-width: 38px;
- -webkit-appearance: none;
+ 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 3ac0b71..697c674 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;
- -webkit-filter: drop-shadow(0 1px 2px hsl(0deg 0% 0% / 30%));
+ 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 1a159c0..7d938ed 100644
--- a/front_end/ui/treeoutline.css
+++ b/front_end/ui/treeoutline.css
@@ -113,7 +113,7 @@
-webkit-mask-size: 32px 24px;
-webkit-mask-position: 0 0;
background-color: #727272;
- content: "\00a0\00a0";
+ content: "\A0\A0";
text-shadow: none;
margin-right: -2px;
height: 12px;
