Diff
Modified: branches/safari-612.1.5-branch/Source/WebCore/ChangeLog (273862 => 273863)
--- branches/safari-612.1.5-branch/Source/WebCore/ChangeLog 2021-03-04 01:00:49 UTC (rev 273862)
+++ branches/safari-612.1.5-branch/Source/WebCore/ChangeLog 2021-03-04 01:00:52 UTC (rev 273863)
@@ -1,5 +1,78 @@
2021-03-03 Alan Coon <alanc...@apple.com>
+ Cherry-pick r273839. rdar://problem/75009410
+
+ REGRESSION (r273154): Speedometer 2 is 1-2% regressed on iOS
+ https://bugs.webkit.org/show_bug.cgi?id=222663
+ <rdar://problem/74715929>
+
+ Reviewed by Ryosuke Niwa.
+
+ A 1-2% regression was observed in Speedometer 2 after enabling the iOS
+ Form Control Refresh (FCR). Traces indicated an increased amount of time
+ spent in style resolution. Note that currently the FCR styles are
+ appended to the base UA stylesheet at runtime, to apply the necessary
+ changes for the new appearance, while making it possible to toggle the
+ feature.
+
+ To fix, the FCR stylesheet is merged into the base UA stylesheet. This
+ avoids ruleset duplication, which made it more expensive to resolve
+ styles. To preserve the old appearance when the feature is runtime
+ disabled, the old styles are moved into a separate stylesheet, appended
+ at runtime.
+
+ The fix was verified as an equivalent progression using internal A/B
+ testing infrastructure.
+
+ Note that this solution means that disabling the FCR will result in a
+ Speedometer regression, due to ruleset duplication. However, this should
+ not be a concern since the feature is controlled by an internal switch,
+ is enabled by default, and is not intended to be disabled.
+
+ * css/formControlsIOS.css:
+ * css/html.css:
+ * style/UserAgentStyle.cpp:
+ (WebCore::Style::UserAgentStyle::ensureDefaultStyleSheetsForElement):
+
+
+ git-svn-id: https://svn.webkit.org/repository/webkit/trunk@273839 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+ 2021-03-03 Aditya Keerthi <akeer...@apple.com>
+
+ REGRESSION (r273154): Speedometer 2 is 1-2% regressed on iOS
+ https://bugs.webkit.org/show_bug.cgi?id=222663
+ <rdar://problem/74715929>
+
+ Reviewed by Ryosuke Niwa.
+
+ A 1-2% regression was observed in Speedometer 2 after enabling the iOS
+ Form Control Refresh (FCR). Traces indicated an increased amount of time
+ spent in style resolution. Note that currently the FCR styles are
+ appended to the base UA stylesheet at runtime, to apply the necessary
+ changes for the new appearance, while making it possible to toggle the
+ feature.
+
+ To fix, the FCR stylesheet is merged into the base UA stylesheet. This
+ avoids ruleset duplication, which made it more expensive to resolve
+ styles. To preserve the old appearance when the feature is runtime
+ disabled, the old styles are moved into a separate stylesheet, appended
+ at runtime.
+
+ The fix was verified as an equivalent progression using internal A/B
+ testing infrastructure.
+
+ Note that this solution means that disabling the FCR will result in a
+ Speedometer regression, due to ruleset duplication. However, this should
+ not be a concern since the feature is controlled by an internal switch,
+ is enabled by default, and is not intended to be disabled.
+
+ * css/formControlsIOS.css:
+ * css/html.css:
+ * style/UserAgentStyle.cpp:
+ (WebCore::Style::UserAgentStyle::ensureDefaultStyleSheetsForElement):
+
+2021-03-03 Alan Coon <alanc...@apple.com>
+
Cherry-pick r273821. rdar://problem/75009461
REGRESSION (r266288): Web Inspector: ::marker shows on every element now
Modified: branches/safari-612.1.5-branch/Source/WebCore/css/formControlsIOS.css (273862 => 273863)
--- branches/safari-612.1.5-branch/Source/WebCore/css/formControlsIOS.css 2021-03-04 01:00:49 UTC (rev 273862)
+++ branches/safari-612.1.5-branch/Source/WebCore/css/formControlsIOS.css 2021-03-04 01:00:52 UTC (rev 273863)
@@ -24,91 +24,101 @@
#if defined(ENABLE_IOS_FORM_CONTROL_REFRESH) && ENABLE_IOS_FORM_CONTROL_REFRESH
+/* Legacy styles for iOS form controls. */
+
textarea,
input {
- border: 1px solid rgb(217, 217, 217);
- font: 11px system-ui;
+ border: 1px solid #4c4c4c;
+ font: 11px Helvetica, -webkit-pictograph;
}
input:matches([type="checkbox"], [type="radio"]) {
- border: initial;
- box-sizing: border-box;
+ border: 1px solid #4c4c4c;
}
input::-webkit-list-button {
- width: 11px;
- content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71 42"><path fill="rgb(0, 122, 255)" d="M36.00979 41.8692c1.70898 0 3.17383-.63483 4.49219-2.00201L69.45706 10.6192c1.02539-1.07428 1.61133-2.39264 1.61133-3.95514C71.06839 3.49017 68.52933 1 65.40433 1c-1.51367 0-2.97852.63477-4.10156 1.75781L36.05863 28.4414 10.76566 2.75781C9.64261 1.63476 8.2266 1 6.61527 1c-3.125 0-5.61523 2.49017-5.61523 5.66406 0 1.5625.53711 2.88086 1.61133 3.95514l28.95508 29.24799c1.36719 1.36719 2.7832 2.00201 4.44336 2.00201z"/></svg>');
+ width: 16px;
+ content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" stroke="black" fill="black" width="16" height="16"><polygon points="8 11.031, 4.5 4.969, 11.5 4.969"/></svg>');
}
input[type="search"] {
- border: initial;
- background-color: rgb(238, 238, 238);
+ border: 1px solid #4c4c4c;
+ background-color: initial;
}
input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-results-decoration {
+ margin: auto 0;
+}
+
+input[type="search"]::-webkit-search-results-button {
+ align-self: initial;
+ margin: initial;
+}
+
+input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-decoration,
input[type="search"]::-webkit-search-results-button {
- align-self: flex-start;
- background-color: darkgray;
- flex: none;
- height: 1em;
- margin: auto 0;
- margin-inline-end: 0.4em;
- width: 1em;
- -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 73"><path fill="darkgray" d="M29.6875 59.375c6.2988 0 12.1094-1.953 16.9434-5.3222l17.334 17.334c.9277.9277 2.1484 1.3672 3.418 1.3672 2.7343 0 4.7362-2.0996 4.7362-4.7852 0-1.2695-.4394-2.4902-1.3672-3.418L53.5644 47.3145c3.6622-4.9316 5.8106-11.0352 5.8106-17.627C59.375 13.3301 46.045 0 29.6875 0 13.3301 0 0 13.3301 0 29.6875 0 46.045 13.33 59.375 29.6875 59.375zm0-7.2753c-12.2559 0-22.4121-10.1563-22.4121-22.4122 0-12.3046 10.1562-22.4121 22.4121-22.4121C41.9922 7.2754 52.1 17.3829 52.1 29.6875c0 12.256-10.1078 22.4122-22.4125 22.4122z"/></svg>');
+ background-color: initial;
+ height: initial;
+ width: initial;
+ -webkit-mask-image: initial;
}
input:matches([type="button"], [type="submit"], [type="reset"]), input[type="file"]::file-selector-button, button {
- border: initial;
- font: 11px system-ui;
+ color: ButtonText;
+ border: 1px solid #4c4c4c;
+ /* We want to be as close to background-color:transparent as possible without actually being transparent. */
+ background-color: rgba(255, 255, 255, 0.01);
+ font: 11px Helvetica;
}
-/* FIXME: Use semantic colors once final specifications are obtained. */
-/* FIXME: Add styles for additional button states once final specifications are obtained. */
+input[type="submit"] {
+ font-weight: initial;
+}
-input:matches([type="button"], [type="reset"]), input[type="file"]::file-selector-button, button {
- background-color: rgb(238, 238, 238);
- color: rgb(0, 122, 255);
+input[type="range"]::-webkit-slider-thumb {
+ background-color: white;
}
-input[type="submit"] {
- background-color: rgb(22, 122, 255);
- color: white;
- font-weight: bold;
+input[type="range"]::-webkit-slider-thumb:active {
+ background-color: black;
}
input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-slider-thumb:active {
- background-color: white;
- border: initial;
- box-shadow: 0px 6px 13px rgba(0, 0, 0, 0.2), 0px 0.5px 4px rgba(0, 0, 0, 0.2);
+ box-shadow: initial;
+ border: 1px solid rgb(66, 66, 66);
+ padding: 0px;
}
-input[type="color"]::-webkit-color-swatch-wrapper,
+input[type="color"]::-webkit-color-swatch-wrapper {
+ border-radius: initial;
+}
+
input[type="color"]::-webkit-color-swatch {
- border-radius: inherit;
+ border-radius: 2px;
}
input:matches([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
- border: initial;
- background-color: rgb(238, 238, 238);
- font-family: system-ui;
- color: rgb(0, 122, 255);
- padding: 0.2em 0.5em;
+ border: 1px solid #4c4c4c;
+ font-family: Helvetica;
+ color: initial;
}
input::-webkit-date-and-time-value {
- margin: 0px;
- text-align: center;
- width: 100%;
+ margin-right: 18px;
+ text-align: inherit;
+ width: initial;
}
select {
- color: rgb(0, 122, 255);
- font-weight: bold;
- font-family: system-ui;
- border: initial;
- border-radius: initial;
- background-color: rgb(235, 245, 255);
+ color: initial;
+ font-weight: initial;
+ font: 11px Helvetica;
+ border: 1px solid #4c4c4c;
+ border-radius: 5px;
+ /* We want to be as close to background:transparent as possible without actually being transparent */
+ background-color: rgba(255, 255, 255, 0.01);
}
#endif
Modified: branches/safari-612.1.5-branch/Source/WebCore/css/html.css (273862 => 273863)
--- branches/safari-612.1.5-branch/Source/WebCore/css/html.css 2021-03-04 01:00:49 UTC (rev 273862)
+++ branches/safari-612.1.5-branch/Source/WebCore/css/html.css 2021-03-04 01:00:52 UTC (rev 273863)
@@ -414,8 +414,8 @@
#endif
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
border-radius: 5px;
- font: 11px Helvetica, -webkit-pictograph;
- border: 1px solid #4c4c4c;
+ border: 1px solid rgb(217, 217, 217);
+ font: 11px system-ui;
padding: 0.2em 0.5em 0.3em 0.5em;
#else
border: 2px inset;
@@ -437,6 +437,10 @@
input[type="search"] {
-webkit-appearance: searchfield;
box-sizing: border-box;
+#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
+ border: initial;
+ background-color: rgb(238, 238, 238);
+#endif
}
input::-webkit-textfield-decoration-container {
@@ -480,8 +484,26 @@
-webkit-appearance: searchfield-results-button;
display: block;
flex: none;
+#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
+ align-self: flex-start;
+ margin: auto 0;
+#endif
}
+#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-results-decoration,
+input[type="search"]::-webkit-search-results-button {
+ background-color: darkgray;
+ height: 1em;
+ width: 1em;
+ margin-inline-end: 0.4em;
+ -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 73"><path fill="darkgray" d="M29.6875 59.375c6.2988 0 12.1094-1.953 16.9434-5.3222l17.334 17.334c.9277.9277 2.1484 1.3672 3.418 1.3672 2.7343 0 4.7362-2.0996 4.7362-4.7852 0-1.2695-.4394-2.4902-1.3672-3.418L53.5644 47.3145c3.6622-4.9316 5.8106-11.0352 5.8106-17.627C59.375 13.3301 46.045 0 29.6875 0 13.3301 0 0 13.3301 0 29.6875 0 46.045 13.33 59.375 29.6875 59.375zm0-7.2753c-12.2559 0-22.4121-10.1563-22.4121-22.4122 0-12.3046 10.1562-22.4121 22.4121-22.4121C41.9922 7.2754 52.1 17.3829 52.1 29.6875c0 12.256-10.1078 22.4122-22.4125 22.4122z"/></svg>');
+}
+
+#endif
+
#if defined(ENABLE_DATE_AND_TIME_INPUT_TYPES) && ENABLE_DATE_AND_TIME_INPUT_TYPES
input:matches([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
-webkit-appearance: textfield;
@@ -490,6 +512,11 @@
overflow: hidden;
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
-webkit-appearance: menulist-button;
+ border: initial;
+ background-color: rgb(238, 238, 238);
+ font-family: system-ui;
+ color: rgb(0, 122, 255);
+ padding: 0.2em 0.5em;
#else
-webkit-appearance: textfield;
outline: none;
@@ -503,7 +530,9 @@
input::-webkit-date-and-time-value {
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
- margin-right: 18px;
+ margin: 0px;
+ text-align: center;
+ width: 100%;
#else
margin: 1px 24px 1px 4px;
white-space: pre;
@@ -678,13 +707,14 @@
align-self: stretch;
flex: none;
-webkit-user-select: none;
- width: 16px;
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
- content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" stroke="black" fill="black" width="16" height="16"><polygon points="8 11.031, 4.5 4.969, 11.5 4.969"/></svg>');
+ width: 11px;
+ content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71 42"><path fill="rgb(0, 122, 255)" d="M36.00979 41.8692c1.70898 0 3.17383-.63483 4.49219-2.00201L69.45706 10.6192c1.02539-1.07428 1.61133-2.39264 1.61133-3.95514C71.06839 3.49017 68.52933 1 65.40433 1c-1.51367 0-2.97852.63477-4.10156 1.75781L36.05863 28.4414 10.76566 2.75781C9.64261 1.63476 8.2266 1 6.61527 1c-3.125 0-5.61523 2.49017-5.61523 5.66406 0 1.5625.53711 2.88086 1.61133 3.95514l28.95508 29.24799c1.36719 1.36719 2.7832 2.00201 4.44336 2.00201z"/></svg>');
/* Make it easier to hit the button on iOS */
padding: 7px;
margin: -7px;
#else
+ width: 16px;
height: 100%;
#endif
}
@@ -777,7 +807,7 @@
input:matches([type="radio"], [type="checkbox"]) {
margin: 3px 2px;
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
- border: 1px solid #4c4c4c;
+ border: initial;
box-sizing: border-box;
#else
padding: initial;
@@ -802,21 +832,31 @@
align-items: flex-start;
text-align: center;
cursor: default;
+#if !(defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY)
color: ButtonText;
-#if !(defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY)
padding: 2px 6px 3px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
#else
padding: 0 1.0em;
- border: 1px solid #4c4c4c;
- /* We want to be as close to background-color:transparent as possible without actually being transparent. */
- background-color: rgba(255, 255, 255, 0.01);
- font: 11px Helvetica;
+ border: initial;
+ font: 11px system-ui;
+ background-color: rgb(238, 238, 238);
+ color: rgb(0, 122, 255);
#endif
box-sizing: border-box;
}
+#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
+
+input[type="submit"] {
+ background-color: rgb(22, 122, 255);
+ color: white;
+ font-weight: bold;
+}
+
+#endif
+
input:matches([type="button"], [type="submit"], [type="reset"]):active, input[type="file"]::file-selector-button:active, button:active {
color: ActiveButtonText;
}
@@ -849,18 +889,21 @@
-webkit-appearance: sliderthumb-horizontal;
box-sizing: border-box;
display: block;
+}
+
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
+input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-slider-thumb:active {
background-color: white;
+ border: initial;
+ box-shadow: 0px 6px 13px rgba(0, 0, 0, 0.2), 0px 0.5px 4px rgba(0, 0, 0, 0.2);
+}
+
+input[type="range"]::-webkit-media-slider-thumb {
+ background-color: white;
border: 1px solid rgb(66, 66, 66);
padding: 0px;
-#endif
}
-#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
-input[type="range"]::-webkit-slider-thumb:active {
- background-color: black;
-}
-
input:disabled, textarea:disabled {
opacity: 0.4;
}
@@ -960,6 +1003,7 @@
input[type="color"]::-webkit-color-swatch-wrapper {
display: flex;
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
+ border-radius: inherit;
padding: 0;
#else
padding: 4px 2px 5px;
@@ -971,7 +1015,11 @@
input[type="color"]::-webkit-color-swatch {
background-color: #000000;
+#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
+ border-radius: inherit;
+#else
border-radius: 2px;
+#endif
flex: 1;
}
@@ -984,11 +1032,13 @@
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
- border: 1px solid #4c4c4c;
- /* We want to be as close to background:transparent as possible without actually being transparent */
- background-color: rgba(255, 255, 255, 0.01);
- font: 11px Helvetica;
padding: 0 0.4em 0 0.4em;
+ color: rgb(0, 122, 255);
+ font: 11px system-ui;
+ font-weight: bold;
+ border: initial;
+ border-radius: initial;
+ background-color: rgb(235, 245, 255);
#else
-webkit-appearance: menulist;
border: 1px solid;
Modified: branches/safari-612.1.5-branch/Source/WebCore/style/UserAgentStyle.cpp (273862 => 273863)
--- branches/safari-612.1.5-branch/Source/WebCore/style/UserAgentStyle.cpp 2021-03-04 01:00:49 UTC (rev 273862)
+++ branches/safari-612.1.5-branch/Source/WebCore/style/UserAgentStyle.cpp 2021-03-04 01:00:52 UTC (rev 273863)
@@ -227,7 +227,7 @@
#endif // ENABLE(FULLSCREEN_API)
#if ENABLE(IOS_FORM_CONTROL_REFRESH)
- if (!formControlsIOSStyleSheet && element.document().settings().iOSFormControlRefreshEnabled()) {
+ if (!formControlsIOSStyleSheet && !element.document().settings().iOSFormControlRefreshEnabled()) {
formControlsIOSStyleSheet = parseUASheet(formControlsIOSUserAgentStyleSheet, sizeof(formControlsIOSUserAgentStyleSheet));
addToDefaultStyle(*formControlsIOSStyleSheet);
}
