Skip to content

Commit c0ed2fb

Browse files
bmeurerDevtools-frontend LUCI CQ
bmeurer
authored and
Devtools-frontend LUCI CQ
committed
[cleanup] Remove -webkit prefix from mask-* properties.
Chrome now supports the `mask-*` CSS properties unprefixed[^1] and in a spec compliant manner, so we can drop the `-webkit` prefix here. [^1]: https://chromestatus.com/feature/5839739127332864 Bug: chromium:1418401 Change-Id: I5fdf44042782131aeab75a16275a058ef513abb1 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5173889 Commit-Queue: Alex Rudenko <[email protected]> Auto-Submit: Benedikt Meurer <[email protected]> Reviewed-by: Alex Rudenko <[email protected]>
1 parent 525f280 commit c0ed2fb

File tree

26 files changed

+62
-70
lines changed

26 files changed

+62
-70
lines changed

‎extensions/cxx_debugging/src/ModuleConfigurationList.ts

-3
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,6 @@ export class ModuleConfigurationList extends HTMLElement {
139139
cursor: pointer;
140140
display: inline-block;
141141
mask-size: contain;
142-
-webkit-mask-size: contain;
143142
width: 20px;
144143
height: 20px;
145144
background-color: rgb(110 110 110);
@@ -153,13 +152,11 @@ export class ModuleConfigurationList extends HTMLElement {
153152
}
154153
.mc-delete {
155154
mask-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M15 4V3H9v1H4v2h1v13c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V6h1V4h-5zm2 15H7V6h10v13zM9 8h2v9H9zm4 0h2v9h-2z'/%3E%3C/svg%3E");
156-
-webkit-mask-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M15 4V3H9v1H4v2h1v13c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V6h1V4h-5zm2 15H7V6h10v13zM9 8h2v9H9zm4 0h2v9h-2z'/%3E%3C/svg%3E");
157155
width: 32px;
158156
height: 32px;
159157
}
160158
.sm-delete {
161159
mask-image: url('data:image/svg+xml,%0A%3Csvg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%23000000"%3E%3Cpath d="M0 0h24v24H0V0z" fill="none"/%3E%3Cpath d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/%3E%3C/svg%3E');
162-
-webkit-mask-image: url('data:image/svg+xml,%0A%3Csvg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%23000000"%3E%3Cpath d="M0 0h24v24H0V0z" fill="none"/%3E%3Cpath d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/%3E%3C/svg%3E');
163160
}
164161
</style>
165162
<p>

‎front_end/panels/accessibility/axBreadcrumbs.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@
4040
}
4141

4242
.ax-breadcrumbs .ax-node::before {
43-
-webkit-mask-image: var(--image-file-chevron-right);
44-
-webkit-mask-repeat: no-repeat;
43+
mask-image: var(--image-file-chevron-right);
44+
mask-repeat: no-repeat;
4545
background-color: var(--icon-default);
4646
transform: scale(0.7);
4747
content: "";
@@ -59,15 +59,15 @@
5959
}
6060

6161
.ax-breadcrumbs .ax-node.parent::before {
62-
-webkit-mask-image: var(--image-file-chevron-down);
62+
mask-image: var(--image-file-chevron-down);
6363
}
6464

6565
.ax-breadcrumbs .ax-node.no-dom-node {
6666
opacity: 70%;
6767
}
6868

6969
.ax-breadcrumbs .ax-node.children-unloaded::before {
70-
-webkit-mask-position: 0 1px;
70+
mask-position: 0 1px;
7171
width: 13px;
7272
opacity: 40%;
7373
}

‎front_end/panels/application/serviceWorkerUpdateCycleView.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636

3737
.service-worker-update-timing-bar-clickable::before {
3838
user-select: none;
39-
-webkit-mask-image: var(--image-file-triangle-right);
39+
mask-image: var(--image-file-triangle-right);
4040
float: left;
4141
width: 14px;
4242
height: 14px;

‎front_end/panels/elements/elementsTreeOutline.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
.elements-disclosure li.parent:not(.always-parent)::before {
9797
box-sizing: border-box;
9898
user-select: none;
99-
-webkit-mask-image: var(--image-file-triangle-right);
99+
mask-image: var(--image-file-triangle-right);
100100
height: 14px;
101101
width: 14px;
102102
content: "\A0\A0";

‎front_end/panels/issues/components/elementsPanelLink.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
display: inline-block;
99
width: 20px;
1010
height: 20px;
11-
-webkit-mask-image: var(--image-file-select-element);
11+
mask-image: var(--image-file-select-element);
1212
background-color: var(--icon-default);
1313
}

‎front_end/panels/issues/issuesTree.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -247,12 +247,12 @@ devtools-icon.leading-issue-icon {
247247
/* We inherit all the styles from treeoutline, but these are simple text <li>, so we override some styles */
248248
.link-list li::before {
249249
content: none;
250-
-webkit-mask-image: none;
250+
mask-image: none;
251251
}
252252

253253
.resolutions-list li::before {
254254
content: "→";
255-
-webkit-mask-image: none;
255+
mask-image: none;
256256
padding-right: 5px;
257257
position: relative;
258258
top: -1px;

‎front_end/panels/network/NetworkDataGridNode.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1146,7 +1146,7 @@ export class NetworkRequestNode extends NetworkNode {
11461146
const iconElement = document.createElement('div');
11471147
iconElement.title = title;
11481148
iconElement.style.setProperty(
1149-
'-webkit-mask',
1149+
'mask',
11501150
`url('${
11511151
new URL(`../../Images/${iconData.iconName}.svg`, import.meta.url).toString()}') no-repeat center /99%`);
11521152
iconElement.style.setProperty('background-color', iconData.color);

‎front_end/panels/network/networkTimingTable.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ table.network-timing-table > tr:not(.network-timing-table-header):not(.network-t
127127

128128
.network-fetch-timing-bar-clickable::before {
129129
user-select: none;
130-
-webkit-mask-image: var(--image-file-triangle-right);
130+
mask-image: var(--image-file-triangle-right);
131131
float: left;
132132
width: 14px;
133133
height: 14px;

‎front_end/panels/profiler/profilesSidebarTree.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -146,12 +146,12 @@ li.selected:hover button {
146146
/* Heap profiles and CPU profiles */
147147
.heap-snapshot-sidebar-tree-item .icon,
148148
.profile-sidebar-tree-item .icon {
149-
-webkit-mask-image: var(--image-file-heap-snapshot);
149+
mask-image: var(--image-file-heap-snapshot);
150150
background: var(--icon-default);
151151
}
152152

153153
.profile-group-sidebar-tree-item .icon {
154-
-webkit-mask-image: var(--image-file-heap-snapshots);
154+
mask-image: var(--image-file-heap-snapshots);
155155
background: var(--icon-default);
156156
}
157157

@@ -165,17 +165,17 @@ li.wait .icon {
165165
}
166166

167167
.heap-snapshot-sidebar-tree-item.wait .icon {
168-
-webkit-mask-image: unset;
168+
mask-image: unset;
169169
background-color: inherit;
170170
}
171171

172172
.heap-snapshot-sidebar-tree-item.small .icon {
173-
-webkit-mask-image: var(--image-file-heap-snapshots);
173+
mask-image: var(--image-file-heap-snapshots);
174174
background: var(--icon-default);
175175
}
176176

177177
.profile-sidebar-tree-item.small .icon {
178-
-webkit-mask-image: var(--image-file-heap-snapshots);
178+
mask-image: var(--image-file-heap-snapshots);
179179
background: var(--icon-default);
180180
}
181181

‎front_end/panels/recorder/components/selectButton.css

-3
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,11 @@
2727
background-color: var(--sys-color-on-surface);
2828
display: inline-block;
2929
mask-repeat: no-repeat;
30-
-webkit-mask-repeat: no-repeat;
3130
mask-position: center;
32-
-webkit-mask-position: center;
3331
width: 24px;
3432
height: 24px;
3533
margin-right: 4px;
3634
mask-image: var(--item-mask-icon);
37-
-webkit-mask-image: var(--item-mask-icon);
3835
}
3936

4037
devtools-select-menu {

‎front_end/panels/security/lockIcon.css

+12-12
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,19 @@
88
.security-property {
99
height: 16px;
1010
width: 16px;
11-
-webkit-mask-image: var(--image-file-securityIcons);
12-
-webkit-mask-size: 80px 32px;
11+
mask-image: var(--image-file-securityIcons);
12+
mask-size: 80px 32px;
1313
background-color: var(--sys-color-state-disabled);
1414
}
1515

1616
.lock-icon-secure {
17-
-webkit-mask-position: 0 0;
17+
mask-position: 0 0;
1818
background-color: var(--sys-color-green-bright);
1919
}
2020

2121
.lock-icon-unknown,
2222
.lock-icon-neutral {
23-
-webkit-mask-position: -16px 0;
23+
mask-position: -16px 0;
2424
background-color: var(--sys-color-on-surface);
2525
}
2626

@@ -32,41 +32,41 @@
3232
}
3333

3434
.lock-icon-insecure {
35-
-webkit-mask-position: -32px 0;
35+
mask-position: -32px 0;
3636
background-color: var(--sys-color-token-subtle);
3737
}
3838

3939
.lock-icon-insecure-broken {
40-
-webkit-mask-position: -32px 0;
40+
mask-position: -32px 0;
4141
background-color: var(--sys-color-error-bright);
4242
}
4343

4444
.security-property-secure {
45-
-webkit-mask-position: 0 -16px;
45+
mask-position: 0 -16px;
4646
background-color: var(--sys-color-green-bright);
4747
}
4848

4949
.security-property-neutral {
50-
-webkit-mask-position: -16px -16px;
50+
mask-position: -16px -16px;
5151
background-color: var(--sys-color-error-bright);
5252

5353
.security-property-insecure {
54-
-webkit-mask-position: -32px -16px;
54+
mask-position: -32px -16px;
5555
background-color: var(--sys-color-error-bright);
5656
}
5757

5858
.security-property-insecure-broken {
59-
-webkit-mask-position: -32px -16px;
59+
mask-position: -32px -16px;
6060
background-color: var(--sys-color-error-bright);
6161
}
6262

6363
.security-property-info {
64-
-webkit-mask-position: -48px -16px;
64+
mask-position: -48px -16px;
6565
background-color: var(--sys-color-on-surface-subtle);
6666
}
6767

6868
.security-property-unknown {
69-
-webkit-mask-position: -64px -16px;
69+
mask-position: -64px -16px;
7070
background-color: var(--sys-color-on-surface-subtle);
7171
}
7272

‎front_end/panels/sources/components/breakpointsView.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ details > summary:hover {
5858
details > summary::before {
5959
display: block;
6060
user-select: none;
61-
-webkit-mask-image: var(--image-file-triangle-right);
61+
mask-image: var(--image-file-triangle-right);
6262
background-color: var(--icon-default);
6363
content: "";
6464
height: 14px;

‎front_end/ui/components/expandable_list/expandableList.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ div {
2222

2323
.arrow-icon {
2424
display: inline-block;
25-
-webkit-mask-image: var(--image-file-triangle-right);
25+
mask-image: var(--image-file-triangle-right);
2626
background-color: var(--icon-default);
2727
margin-top: 2px;
2828
height: 14px;

‎front_end/ui/components/markdown_view/markdownView.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030

3131
.message li::before {
3232
content: "→";
33-
-webkit-mask-image: none;
33+
mask-image: none;
3434
padding-right: 5px;
3535
position: relative;
3636
top: -1px;

‎front_end/ui/components/menus/menuItem.css

-3
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,10 @@
3333
transform: translateY(-50%);
3434
display: inline-block;
3535
mask-repeat: no-repeat;
36-
-webkit-mask-repeat: no-repeat;
3736
mask-position: center;
38-
-webkit-mask-position: center;
3937
width: calc(var(--menu-checkmark-width) - 10px);
4038
height: var(--menu-checkmark-height);
4139
mask-image: var(--selected-item-check);
42-
-webkit-mask-image: var(--selected-item-check);
4340
background: var(--sys-color-token-subtle);
4441
}
4542

‎front_end/ui/components/menus/selectMenuButton.css

+1-3
Original file line numberDiff line numberDiff line change
@@ -55,18 +55,16 @@
5555

5656
#arrow {
5757
mask-image: var(--deploy-menu-arrow);
58-
-webkit-mask-image: var(--deploy-menu-arrow);
5958
-webkit-mask-position-y: center;
6059
margin-left: 5px;
6160
width: 14px;
6261
flex-shrink: 0;
6362
height: 14px;
6463
display: inline-block;
65-
-webkit-mask-repeat: no-repeat;
64+
mask-repeat: no-repeat;
6665
background-color: var(--override-throttling-icon-and-text-color, var(--override-select-menu-arrow-color, var(--sys-color-on-surface)));
6766
transform: rotate(var(--arrow-angle));
6867
transform-origin: center;
69-
mask-repeat: no-repeat;
7068
transition: 200ms;
7169
}
7270

‎front_end/ui/components/tree_outline/treeOutline.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ li {
3333
.arrow-icon {
3434
display: block;
3535
user-select: none;
36-
-webkit-mask-image: var(--image-file-triangle-right);
36+
mask-image: var(--image-file-triangle-right);
3737
background-color: var(--icon-default);
3838
content: "";
3939
text-shadow: none;
@@ -54,7 +54,7 @@ ul[role="group"] {
5454
}
5555

5656
li:not(.parent) > .arrow-and-key-wrapper > .arrow-icon {
57-
-webkit-mask-size: 0;
57+
mask-size: 0;
5858
}
5959

6060
li.parent.expanded > .arrow-and-key-wrapper > .arrow-icon {

‎front_end/ui/legacy/components/data_grid/dataGrid.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@
203203

204204
.data-grid td.disclosure::before {
205205
user-select: none;
206-
-webkit-mask-image: var(--image-file-triangle-right);
206+
mask-image: var(--image-file-triangle-right);
207207
float: left;
208208
width: 14px;
209209
height: 14px;

‎front_end/ui/legacy/components/inline_editor/colorMixSwatch.css

-1
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,4 @@
3434
box-shadow: none;
3535
justify-self: end;
3636
mask: radial-gradient(circle at 0% center, rgb(0 0 0) 50%, rgb(0 0 0 / 0%) calc(50% + 0.5px));
37-
-webkit-mask: radial-gradient(circle at 0% center, rgb(0 0 0) 50%, rgb(0 0 0 / 0%) calc(50% + 0.5px));
3837
}

‎front_end/ui/legacy/components/inline_editor/cssLength.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@
3333
.icon {
3434
position: absolute;
3535
display: inline-block;
36-
-webkit-mask-image: var(--image-file-chevron-down);
37-
-webkit-mask-repeat: no-repeat;
36+
mask-image: var(--image-file-chevron-down);
37+
mask-repeat: no-repeat;
3838
background-color: var(--icon-default);
3939
transform: scale(0.7);
4040
margin-left: -7px;

‎front_end/ui/legacy/infobar.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -89,27 +89,27 @@
8989
}
9090

9191
.info-icon {
92-
-webkit-mask-image: var(--image-file-info);
92+
mask-image: var(--image-file-info);
9393
background-color: var(--icon-info);
9494
}
9595

9696
.warning-icon {
97-
-webkit-mask-image: var(--image-file-warning);
97+
mask-image: var(--image-file-warning);
9898
background-color: var(--icon-warning);
9999
}
100100

101101
.error-icon {
102-
-webkit-mask-image: var(--image-file-cross-circle);
102+
mask-image: var(--image-file-cross-circle);
103103
background-color: var(--icon-error);
104104
}
105105

106106
.issue-icon {
107-
-webkit-mask-image: var(--image-file-issue-text-filled);
107+
mask-image: var(--image-file-issue-text-filled);
108108
background-color: var(--icon-info);
109109
}
110110

111111
.icon {
112-
-webkit-mask-size: 20px 20px;
112+
mask-size: 20px 20px;
113113
width: 20px;
114114
height: 20px;
115115
flex-shrink: 0;

‎front_end/ui/legacy/inspectorCommon.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -568,10 +568,10 @@ input.custom-search-input::-webkit-search-cancel-button {
568568
height: 15px;
569569
margin-right: 0;
570570
opacity: 70%;
571-
-webkit-mask-image: var(--image-file-cross-circle-filled);
572-
-webkit-mask-position: center;
573-
-webkit-mask-repeat: no-repeat;
574-
-webkit-mask-size: 99%;
571+
mask-image: var(--image-file-cross-circle-filled);
572+
mask-position: center;
573+
mask-repeat: no-repeat;
574+
mask-size: 99%;
575575
background-color: var(--icon-default);
576576
}
577577

‎front_end/ui/legacy/treeoutline.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
114114

115115
.tree-outline li::before {
116116
user-select: none;
117-
-webkit-mask-image: var(--image-file-triangle-right);
117+
mask-image: var(--image-file-triangle-right);
118118
background-color: var(--icon-default);
119119
content: "\A0\A0";
120120
text-shadow: none;

0 commit comments

Comments
 (0)