Modified: trunk/Source/WebInspectorUI/ChangeLog (266734 => 266735)
--- trunk/Source/WebInspectorUI/ChangeLog 2020-09-08 18:33:40 UTC (rev 266734)
+++ trunk/Source/WebInspectorUI/ChangeLog 2020-09-08 18:49:59 UTC (rev 266735)
@@ -1,3 +1,26 @@
+2020-09-08 Patrick Angle <[email protected]>
+
+ Web Inspector: Incorrect decimal separator in Network web inspector
+ https://bugs.webkit.org/show_bug.cgi?id=216177
+
+ Reviewed by Brian Burg.
+
+ Removed separate bytes and suffix pieces for resources sizes, allowing the suffix to be localized and the number
+ to be correctly formatted for the locale.
+
+ * UserInterface/Base/Utilities.js: `Number.bytesToString(...)` now accepts a byte threshold to support
+ `ResourceSizesContentView` where we want less jitter between B and KB as you up/down through resources.
+ * UserInterface/Views/ResourceSizesContentView.css:
+ (.resource-sizes > .content > section.network .bytes): Adopted `text-align` from `.bytes-group`.
+ (.resource-sizes > .content > section.network .bytes-group): Deleted.
+ (.resource-sizes > .content > section.network .suffix): Deleted.
+ * UserInterface/Views/ResourceSizesContentView.js: No longer using a separate `suffix` element for sizes.
+ (WI.ResourceSizesContentView.prototype.initialLayout.createSizeComponents):
+ (WI.ResourceSizesContentView.prototype.initialLayout):
+ (WI.ResourceSizesContentView.prototype._formattedSizeComponent): Replaces `_sizeComponents`.
+ (WI.ResourceSizesContentView.prototype._refreshResourceSizeSection):
+ (WI.ResourceSizesContentView.prototype._sizeComponents): Deleted.
+
2020-09-05 Greg Doolittle <[email protected]>
Web Inspector: AXI: Audit: obtuse error strings
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js (266734 => 266735)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js 2020-09-08 18:33:40 UTC (rev 266734)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js 2020-09-08 18:49:59 UTC (rev 266735)
@@ -1347,12 +1347,12 @@
Object.defineProperty(Number, "bytesToString",
{
- value(bytes, higherResolution)
+ value(bytes, higherResolution, bytesThreshold)
{
- if (higherResolution === undefined)
- higherResolution = true;
+ higherResolution ??= true;
+ bytesThreshold ??= 1024;
- if (Math.abs(bytes) < 1024)
+ if (Math.abs(bytes) < bytesThreshold)
return WI.UIString("%.0f B").format(bytes);
let kilobytes = bytes / 1024;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css (266734 => 266735)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css 2020-09-08 18:33:40 UTC (rev 266734)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css 2020-09-08 18:49:59 UTC (rev 266735)
@@ -78,12 +78,9 @@
margin-bottom: 8px;
}
-.resource-sizes > .content > section.network .bytes-group {
- text-align: start;
-}
-
.resource-sizes > .content > section.network .bytes {
margin-top: 2px;
+ text-align: start;
font-size: 28px;
display: inline-block;
}
@@ -92,12 +89,6 @@
text-align: end;
}
-.resource-sizes > .content > section.network .suffix {
- display: inline-block;
- margin: 13px 1px 0 1px;
- font-size: 15px;
-}
-
.resource-sizes > .content > section.network img {
width: 32px;
height: 32px;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.js (266734 => 266735)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.js 2020-09-08 18:33:40 UTC (rev 266734)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.js 2020-09-08 18:49:59 UTC (rev 266735)
@@ -69,15 +69,9 @@
if (imageSource)
imageElement.src = ""
- let groupElement = container.appendChild(document.createElement("div"));
- groupElement.className = "bytes-group";
-
- let bytesElement = groupElement.appendChild(document.createElement("div"));
+ let bytesElement = container.appendChild(document.createElement("div"));
bytesElement.className = "bytes";
- let suffixElement = groupElement.appendChild(document.createElement("div"));
- suffixElement.className = "suffix";
-
let table = parentElement.appendChild(document.createElement("table"));
let headerRow = table.appendChild(document.createElement("tr"));
let label1Element = headerRow.appendChild(document.createElement("td"));
@@ -94,7 +88,6 @@
return {
container,
bytesElement,
- suffixElement,
imageElement,
value1Element,
value2Element,
@@ -106,7 +99,6 @@
let sendingComponents = createSizeComponents(sendingSection, WI.UIString("Bytes Sent"), "Images/Sending.svg", WI.UIString("Headers:"), WI.UIString("Body:"));
this._sendingBytesElement = sendingComponents.bytesElement;
- this._sendingBytesSuffixElement = sendingComponents.suffixElement;
this._sendingHeaderBytesElement = sendingComponents.value1Element;
this._sendingBodyBytesElement = sendingComponents.value2Element;
@@ -118,7 +110,6 @@
let receivingComponents = createSizeComponents(receivingSection, WI.UIString("Bytes Received"), "Images/Receiving.svg", WI.UIString("Headers:"), WI.UIString("Body:"));
this._receivingBytesElement = receivingComponents.bytesElement;
- this._receivingBytesSuffixElement = receivingComponents.suffixElement;
this._receivingHeaderBytesElement = receivingComponents.value1Element;
this._receivingBodyBytesElement = receivingComponents.value2Element;
@@ -136,7 +127,6 @@
resourceComponents.imageElement.title = WI.UIString("This resource was loaded from a local override");
this._resourceBytesElement = resourceComponents.bytesElement;
- this._resourceBytesSuffixElement = resourceComponents.suffixElement;
this._compressionElement = resourceComponents.value1Element;
this._contentTypeElement = resourceComponents.value2Element;
@@ -171,25 +161,15 @@
// Private
- _sizeComponents(bytes)
+ _formattedSizeComponent(bytes)
{
console.assert(bytes >= 0);
// Prefer KB over B. And prefer 1 decimal point to keep sizes simple
- // but we will still need B if bytes is less than 0.1 KB.
- if (bytes < 103)
- return [bytes.toFixed(0), "B"];
-
- let kilobytes = bytes / 1024;
- if (kilobytes < 1024)
- return [kilobytes.toFixed(1), "KB"];
-
- let megabytes = kilobytes / 1024;
- if (megabytes < 1024)
- return [megabytes.toFixed(1), "MB"];
-
- let gigabytes = megabytes / 1024;
- return [gigabytes.toFixed(1), "GB"];
+ // but we will still need B if bytes is less than 0.1 KB (103 B).
+ const higherResolution = false;
+ const bytesThreshold = 103;
+ return Number.bytesToString(bytes, higherResolution, bytesThreshold);
}
_refreshTransferSizeSections()
@@ -202,16 +182,12 @@
let bytesReceivedBody = this._resource.responseBodyTransferSize;
let bytesReceived = bytesReceivedHeader + bytesReceivedBody;
- let [sentValue, sentSuffix] = this._sizeComponents(bytesSent || 0);
- this._sendingBytesElement.textContent = sentValue;
- this._sendingBytesSuffixElement.textContent = sentSuffix;
+ this._sendingBytesElement.textContent = this._formattedSizeComponent(bytesSent || 0);
this._sendingHeaderBytesElement.textContent = bytesSentHeader ? Number.bytesToString(bytesSentHeader) : emDash;
this._sendingBodyBytesElement.textContent = bytesSentBody ? Number.bytesToString(bytesSentBody) : emDash;
- let [receivedValue, receivedSuffix] = this._sizeComponents(bytesReceived || 0);
- this._receivingBytesElement.textContent = receivedValue;
- this._receivingBytesSuffixElement.textContent = receivedSuffix;
+ this._receivingBytesElement.textContent = this._formattedSizeComponent(bytesReceived || 0);
this._receivingHeaderBytesElement.textContent = bytesReceivedHeader ? Number.bytesToString(bytesReceivedHeader) : emDash;
this._receivingBodyBytesElement.textContent = bytesReceivedBody ? Number.bytesToString(bytesReceivedBody) : emDash;
@@ -238,9 +214,7 @@
let compressionRate = decodedSize / encodedSize;
let compressionString = compressionRate > 0 && isFinite(compressionRate) ? WI.UIString("%.2f\u00d7").format(compressionRate) : WI.UIString("None");
- let [resourceSizeValue, resourceSizeSuffix] = this._sizeComponents(decodedSize || 0);
- this._resourceBytesElement.textContent = resourceSizeValue;
- this._resourceBytesSuffixElement.textContent = resourceSizeSuffix;
+ this._resourceBytesElement.textContent = this._formattedSizeComponent(decodedSize || 0);
let contentEncoding = this._resource.responseHeaders.valueForCaseInsensitiveKey("Content-Encoding");
if (contentEncoding)
