Bug 240930 – Update internal CSS to remove '-webkit-' prefixing where possible

• Component: WebKit Misc.
• Status: RESOLVED FIXED

[Brent Fulgham]

WebKit sources contain many instances of prefixed CSS properties. We should replace each with the equivalent unprefixed-property:

Source/WebCore/Modules/mediacontrols/mediaControlsAdwaita.css
192	  -webkit-user-select: none;
229	  -webkit-appearance: media-slider !important;
252	  -webkit-appearance: media-volume-slider-container;
285	  -webkit-appearance: media-volume-slider !important;
316	  -webkit-appearance: none !important;
351	  -webkit-appearance: media-closed-captions-container;
367	  -webkit-user-select: none;
476	  -webkit-flex: 1 1 auto;
493	  -webkit-user-select: none;

Source/WebCore/Modules/mediacontrols/mediaControlsApple.css
47	  -webkit-align-items: stretch;
48	  -webkit-justify-content: flex-end;
49	  -webkit-flex-direction: column;
62	  -webkit-flex: 1 1 auto;
74	  -webkit-user-select: none;
79	  -webkit-flex-direction: row;
80	  -webkit-align-items: center;
81	  -webkit-user-select: none;
123	  -webkit-appearance: none;
141	  -webkit-clip-path: inset(20px 0px 0px 0px);
180	  -webkit-appearance: none;
198	  -webkit-transform: translateZ(0);
241	  -webkit-flex-direction: column;
242	  -webkit-justify-content: center;
243	  -webkit-align-items: center;
262	  -webkit-clip-path: inset(20px 20px 20px 20px round 4px 4px 0px 0px);
267	  -webkit-flex-direction: row;
268	  -webkit-align-items: center;
269	  -webkit-justify-content: flex-end;
328	  -webkit-appearance: none !important;
339	  -webkit-transform-origin: 0 0;
340	  -webkit-transform: rotate(-90deg) translateY(28px) translateX(-40px);
349	  -webkit-appearance: none !important;
386	  -webkit-appearance: media-closed-captions-container;
406	  -webkit-user-select: none;
526	  -webkit-flex: 1 1 0;
537	  -webkit-appearance: none !important;
538	  -webkit-flex: 1 1 0 !important;
552	  -webkit-appearance: none !important;
561	  -webkit-user-select: none;
562	  -webkit-flex: 0 0 0;
595	  -webkit-justify-content: flex-end;
604	  -webkit-justify-content: flex-start;
630	  -webkit-flex-direction: row;
631	  -webkit-align-items: center;
632	  -webkit-user-select: none;
633	  -webkit-flex: 1 1 0;
642	  -webkit-flex: 1 1 0;
647	  -webkit-align-items: stretch;
648	  -webkit-flex-direction: column;
698	  -webkit-align-items: flex-start !important;
699	  -webkit-justify-content: flex-end !important;
700	  -webkit-clip-path: inset(20px round 6px);
744	  -webkit-transform: none;
745	  -webkit-clip-path: none;
752	  -webkit-flex-direction: row;
753	  -webkit-align-items: center;
763	  -webkit-transform: none;
898	  -webkit-user-select: none;
900	  -webkit-flex: 1 1;
913	  -webkit-box-sizing: border-box;
1052	  -webkit-user-select: none;

Source/WebCore/Modules/mediacontrols/mediaControlsBase.css
56	  -webkit-align-items: stretch;
57	  -webkit-justify-content: flex-end;
58	  -webkit-flex-direction: column;
64	  -webkit-flex: 1 1 auto;
68	  -webkit-transform: translateZ(0);
82	  -webkit-user-select: none;
98	  -webkit-flex-direction: row;
99	  -webkit-align-items: center;
100	  -webkit-user-select: none;
121	  -webkit-appearance: none;
132	  -webkit-filter: drop-shadow(black 0 1px 1px);
137	  -webkit-filter: drop-shadow(white 0 0 10px);
170	  -webkit-flex-direction: column;
171	  -webkit-justify-content: center;
172	  -webkit-align-items: center;
190	  -webkit-transform: rotate(-90deg);
191	  -webkit-transform-origin: 11px 11px;
203	  -webkit-flex-direction: row;
204	  -webkit-align-items: center;
205	  -webkit-justify-content: flex-end;
227	  -webkit-appearance: none !important;
247	  -webkit-appearance: none !important;
256	  -webkit-transform: rotateZ(0) !important;
292	  -webkit-appearance: media-closed-captions-container;
314	  -webkit-user-select: none;
414	  -webkit-flex: 1 1 0;
418	  -webkit-appearance: none !important;
419	  -webkit-flex: 1 1 0 !important;
429	  -webkit-appearance: none !important;
437	  -webkit-transform: translateY(1px) rotateZ(-45deg) !important;
464	  -webkit-user-select: none;
465	  -webkit-flex: 0 0 0;
467	  -webkit-justify-content: center;
468	  -webkit-align-items: center;
494	  -webkit-flex-direction: row;
495	  -webkit-align-items: center;
496	  -webkit-user-select: none;
497	  -webkit-flex: 1 1 0;
505	  -webkit-flex: 1 1 0;
509	  -webkit-align-items: stretch;
510	  -webkit-flex-direction: column;
553	  -webkit-align-items: flex-start !important;
554	  -webkit-justify-content: flex-end !important;
586	  -webkit-transform: none;
593	  -webkit-flex-direction: row;
594	  -webkit-align-items: center;
617	  -webkit-transform: rotateZ(270deg) !important;
716	  -webkit-user-select: none;
718	  -webkit-flex: 1 1;
731	  -webkit-box-sizing: border-box;

Source/WebCore/css/html.css
730	  -webkit-line-break: after-white-space;

Source/WebCore/css/legacyFormControlsIOS.css
69	  -webkit-mask-image: initial;

Source/WebCore/css/mediaControls.css
100	  -webkit-appearance: media-slider;

Source/WebCore/css/themeAdwaita.css
25	  -webkit-appearance: none;
26	  -webkit-box-shadow: none !important;
29	  -webkit-mask-image: url("data:image/svg+xml;utf-8, \
36	  -webkit-mask-size: 1em 1em;
40	  -webkit-appearance: none;
41	  -webkit-box-shadow: none !important;
44	  -webkit-mask-image: url("data:image/svg+xml;utf-8, \
48	  -webkit-mask-size: 1em 1em;
52	  -webkit-appearance: none;
53	  -webkit-box-shadow: none !important;
54	  -webkit-mask-image: url("data:image/svg+xml;utf-8, \
58	  -webkit-mask-size: 1em 1em;

Source/WebCore/html/shadow/imageOverlay.css
88	  -webkit-user-select: none;

Source/WebCore/html/shadow/mac/imageControlsMac.css
33	  -webkit-user-select: none;

Source/WebCore/html/shadow/meterElementShadow.css
4	  -webkit-appearance: inherit;

Source/WebCore/xml/XMLViewer.css
77	  -webkit-user-select: none;

Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.css
65	  -webkit-animation: blink 1.06s steps(1) infinite;
227	  -webkit-user-select: none;
252	  -webkit-font-variant-ligatures: contextual;



Requested Changes:
===================
-webkit-align-items -> align-items
-webkit-animation -> animation
-webkit-appearance -> appearance
-webkit-box-shadow -> box-shadow
-webkit-box-sizing -> box-sizing
-webkit-clip-path -> clip-path
-webkit-flex -> flex
-webkit-flex-direction -> flex-direction
-webkit-filter -> filter
-webkit-justify-content -> justify-content
-webkit-line-break -> line-break
-webkit-mask-image -> mask-image
-webkit-mask-size -> mask-size
-webkit-transform -> transform
-webkit-user-select -> user-select

[Radar WebKit Bug Importer]

<rdar://problem/93934318>

[Tim Nguyen (:ntim)]

We'd probably want to avoid changing Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.css which is imported.

[Brent Fulgham]

(In reply to Tim Nguyen (:ntim) from comment #2)
> We'd probably want to avoid changing
> Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.css which
> is imported.

Good point. I filed https://github.com/codemirror/CodeMirror/issues/6921 requesting they remove that deprecated markup from their trunk software.

[Sammy Gill]

Pull request: https://github.com/WebKit/WebKit/pull/1100

[EWS]

Committed r294963 (251067@main): <https://commits.webkit.org/251067@main>

Reviewed commits have been landed. Closing PR #1100 and removing active labels.

[Tim Nguyen (:ntim)]

Re-opening for pull request https://github.com/WebKit/WebKit/pull/1148

[EWS]

Test gardening commit r295019 (251114@main): <https://commits.webkit.org/251114@main>

Reviewed commits have been landed. Closing PR #1148 and removing active labels.