Changeset 274593 in webkit

Timestamp:

Mar 17, 2021 2:59:47 PM (16 months ago)

Author:

Devin Rousso

Message:

Web Inspector: use native datetime-local picker for changing expires value in cookie popover
​https://bugs.webkit.org/show_bug.cgi?id=209389

Reviewed by BJ Burg.

r259173 already made it so that the <input> for Expires used datetime-local, so nothing
needs to be changed to adopt that. We still want to keep the "input" event listener that
parses and validates the value (or placeholder) of the <input type="datetime-local">
because dates in the past should be considered invalid.

• UserInterface/Views/CookiePopover.js:

(WI.CookiePopover.prototype.show): Add step = 1 so that the seconds field is shown.
(WI.CookiePopover.prototype.show.formatDate): Added.
(WI.CookiePopover.prototype.show.formatDate.pad): Added.

• UserInterface/Views/CookiePopover.css: Remove the FIXME comment.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/CookiePopover.css (modified) (1 diff)
• UserInterface/Views/CookiePopover.js (modified) (4 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2021-03-17  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: use native datetime-local picker for changing `expires` value in cookie popover
+        https://bugs.webkit.org/show_bug.cgi?id=209389
+
+        Reviewed by BJ Burg.
+
+        r259173 already made it so that the `<input>` for Expires used `datetime-local`, so nothing
+        needs to be changed to adopt that. We still want to keep the `"input"` event listener that
+        parses and validates the `value` (or `placeholder`) of the `<input type="datetime-local">`
+        because dates in the past should be considered invalid.
+
+        * UserInterface/Views/CookiePopover.js:
+        (WI.CookiePopover.prototype.show): Add `step = 1` so that the seconds field is shown.
+        (WI.CookiePopover.prototype.show.formatDate): Added.
+        (WI.CookiePopover.prototype.show.formatDate.pad): Added.
+        * UserInterface/Views/CookiePopover.css: Remove the FIXME comment.
+
 2021-03-17  Razvan Caliman  <rcaliman@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/CookiePopover.css

@@ -46 +46 @@
 }
 
-/* FIXME: <https://webkit.org/b/209389> Web Inspector: use native datetime-local picker for changing `expires` value in cookie popover */
-
 .popover .cookie-popover-content > table > tr > td > input:matches([type="text"], [type="datetime-local"]) {
     width: 100%;

trunk/Source/WebInspectorUI/UserInterface/Views/CookiePopover.js

@@ -108 +108 @@
         this._preferredEdges = preferredEdges;
 
+        function formatDate(date) {
+            function pad(number) {
+                return String(number).padStart(2, "0");
+            }
+            return [
+                date.getFullYear(),
+                "-",
+                pad(date.getMonth() + 1),
+                "-",
+                pad(date.getDate()),
+                "T",
+                pad(date.getHours()),
+                ":",
+                pad(date.getMinutes()),
+                ":",
+                pad(date.getSeconds()),
+            ].join("");
+        }
+
         let data = {};
         if (cookie) {
@@ -114 +133 @@
             data.domain = cookie.domain;
             data.path = cookie.path;
-            data.expires = (cookie.expires || this._defaultExpires()).toLocaleString();
+            data.expires = formatDate(cookie.expires || this._defaultExpires());
             data.session = cookie.session;
             data.httpOnly = cookie.httpOnly;
@@ -125 +144 @@
             data.domain = urlComponents.host;
             data.path = urlComponents.path;
-            data.expires = this._defaultExpires().toLocaleString();
+            data.expires = formatDate(this._defaultExpires());
             data.session = true;
             data.httpOnly = false;
@@ -197 +216 @@
         let expiresInputRow = createInputRow("expires", WI.unlocalizedString("Expires"), "datetime-local", data.expires);
         this._expiresInputElement = expiresInputRow.inputElement;
+        this._expiresInputElement.step = 1; // Causes the seconds field to be shown.
         this._expiresInputElement.addEventListener("input", (event) => {
             this._expiresInputElement.classList.toggle("invalid", isNaN(this._parseExpires()));