Rename showPopup->showPopUp and hidePopup->hidePopUp

Per the resolution [1] and associated discussion [2] we need to
rename showPopup to showPopUp, and hidePopup to hidePopUp. With
the new scheme, the API is the "Pop up API", not the "Popup API".

Note that this CL only changes the publicly-visible API from
"popup" to "popUp", but leaves many internal references such as
kPseudoPopupHidden instead of kPseudoPopUpHidden. crbug.com/1338587
tracks that follow-on work, which I'll do once this change is
validated as being web compatible.

[1] openui/open-ui#546 (comment)
[2] openui/open-ui#549

Bug: 1307772
Bug: 1338587
Change-Id: Iaa28d4c1b7d526bb0b06c04eaec2fad5d0431746
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3717194
Reviewed-by: David Baron <dbaron@chromium.org>
Auto-Submit: Mason Freed <masonf@chromium.org>
Commit-Queue: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1017676}

html/semantics/popups/popup-anchor-nesting.tentative.html

@@ -14,13 +14,13 @@
 <!-- This example has the anchor (b1) for one popup (p1)
      which contains a separate popup (p2) which is anchored
      by a separate anchor (b2). -->
-<button id=b1 onclick='p1.showPopup()'>Popup 1
+<button id=b1 onclick='p1.showPopUp()'>Popup 1
   <div popup id=p2 anchor=b2>
     <span id=inside2>Inside popup 2</span>
   </div>
 </button>
 <div popup id=p1 anchor=b1>This is popup 1</div>
-<button id=b2 onclick='p2.showPopup()'>Popup 2</button>
+<button id=b2 onclick='p2.showPopUp()'>Popup 2</button>
 
 <style>
   #p1 { top:50px; }
@@ -45,7 +45,7 @@
   (async function() {
     setup({ explicit_done: true });
 
-    popup2.showPopup();
+    popup2.showPopUp();
     assert_false(popup1.matches(':top-layer'));
     assert_true(popup2.matches(':top-layer'));
     await clickOn(button1);

html/semantics/popups/popup-animated-hide-cleanup.tentative.html

@@ -56,9 +56,9 @@
 promise_test(async () => {
   let popUp = addPopUp("animation");
   let dialog = document.querySelector('dialog');
-  popUp.showPopup(); // No animations here
+  popUp.showPopUp(); // No animations here
   await rAF();
-  popUp.hidePopup(); // Start animations
+  popUp.hidePopUp(); // Start animations
   await rAF();
   popUp.remove();
   garbageCollect();
@@ -69,9 +69,9 @@
 promise_test(async (t) => {
   let popUp = addPopUp("animation");
   let dialog = document.querySelector('dialog');
-  popUp.showPopup(); // No animations here
+  popUp.showPopUp(); // No animations here
   await rAF();
-  popUp.hidePopup(); // Start animations
+  popUp.hidePopUp(); // Start animations
   await rAF();
   dialog.showModal(); // Immediately hide pop-up
   t.add_cleanup(() => dialog.close());
@@ -89,7 +89,7 @@
   t.add_cleanup(() => {popUp.remove();button.remove();});
   document.body.appendChild(button);
   button.addEventListener('click',() => dialog.show());
-  popUp.showPopup(); // No animations here
+  popUp.showPopUp(); // No animations here
   await rAF();
   await clickOn(button);
   await rAF();

html/semantics/popups/popup-animated-hide-display.tentative.html

@@ -42,11 +42,11 @@
     requestAnimationFrame(() => {
       // This will show the popup, hide the popup, and start the transition.
       const popup = document.querySelector('[popup]');
-      popup.showPopup();
+      popup.showPopUp();
       popup.getAnimations()[0].finish();
       if (getComputedStyle(popup).left != "200px")
         popup.remove();
-      popup.hidePopup();
+      popup.hidePopUp();
       document.getAnimations()[0].ready.then(() => {
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {

html/semantics/popups/popup-animated-hide-finishes.tentative.html

@@ -46,8 +46,8 @@
     requestAnimationFrame(() => {
       // This will show the popup, hide the popup, and start the hide transition,
       // which should immediately finish.
-      document.querySelector('[popup]').showPopup();
-      document.querySelector('[popup]').hidePopup();
+      document.querySelector('[popup]').showPopUp();
+      document.querySelector('[popup]').hidePopUp();
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           // Take a screenshot now.

html/semantics/popups/popup-animated-show-display.tentative.html

@@ -41,7 +41,7 @@
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
       // This will show the popup, and start the transition.
-      document.querySelector('[popup]').showPopup();
+      document.querySelector('[popup]').showPopUp();
       document.getAnimations()[0].ready.then(() => {
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {

html/semantics/popups/popup-animation-corner-cases.tentative.html

@@ -45,11 +45,11 @@
   const {popUp, descendent} = createPopUp(t,'animation');
   assert_false(isElementVisible(popUp));
   assert_equals(descendent.parentElement.parentElement,popUp);
-  popUp.showPopup();
+  popUp.showPopUp();
   assert_true(popUp.matches(':top-layer'));
   assert_true(isElementVisible(popUp));
   assert_equals(popUp.getAnimations({subtree: true}).length,0);
-  popUp.hidePopup();
+  popUp.hidePopUp();
   const animations = popUp.getAnimations({subtree: true});
   assert_equals(animations.length,2,'There should be two animations running');
   assert_false(popUp.matches(':top-layer'),'popUp should not match :top-layer as soon as hidden');
@@ -71,7 +71,7 @@
   const {popUp, descendent} = createPopUp(t,'');
   assert_equals(popUp.classList.length, 0);
   assert_false(isElementVisible(popUp));
-  popUp.showPopup();
+  popUp.showPopUp();
   assert_true(popUp.matches(':top-layer'));
   assert_true(isElementVisible(popUp));
   assert_equals(popUp.getAnimations({subtree: true}).length,0);
@@ -80,7 +80,7 @@
   descendent.animate([{transform: 'rotate(0)'},{transform: 'rotate(360deg)'}],{duration: 1000000,iterations: 1});
   assert_equals(popUp.getAnimations({subtree: true}).length,2);
   // Then hide the popUp.
-  popUp.hidePopup();
+  popUp.hidePopUp();
   assert_false(popUp.matches(':top-layer'),'pop up should not match :top-layer as soon as hidden');
   assert_equals(popUp.getAnimations({subtree: true}).length,2,'animations should still be running');
   await waitForRender();

html/semantics/popups/popup-attribute-basic.tentative.html

@@ -34,36 +34,36 @@
   }
   function assertIsFunctionalPopUp(popUp) {
     assert_false(popUpVisible(popUp, /*isPopUp*/true));
-    popUp.showPopup();
+    popUp.showPopUp();
     assert_true(popUpVisible(popUp, /*isPopUp*/true));
-    assert_throws_dom("InvalidStateError",() => popUp.showPopup(),'Calling showPopup on a showing pop-up should throw InvalidStateError');
-    popUp.hidePopup();
+    assert_throws_dom("InvalidStateError",() => popUp.showPopUp(),'Calling showPopUp on a showing pop-up should throw InvalidStateError');
+    popUp.hidePopUp();
     assert_false(popUpVisible(popUp, /*isPopUp*/true));
-    assert_throws_dom("InvalidStateError",() => popUp.hidePopup(),'Calling hidePopup on a hidden pop-up should throw InvalidStateError');
+    assert_throws_dom("InvalidStateError",() => popUp.hidePopUp(),'Calling hidePopUp on a hidden pop-up should throw InvalidStateError');
     const parent = popUp.parentElement;
     popUp.remove();
-    assert_throws_dom("InvalidStateError",() => popUp.showPopup(),'Calling showPopup on a disconnected pop-up should throw InvalidStateError');
+    assert_throws_dom("InvalidStateError",() => popUp.showPopUp(),'Calling showPopUp on a disconnected pop-up should throw InvalidStateError');
     parent.appendChild(popUp);
   }
   function assertNotAPopUp(nonPopUp) {
     // Non-popup elements should already be visible.
     assert_true(popUpVisible(nonPopUp, /*isPopUp*/false));
-    assert_throws_dom("NotSupportedError",() => nonPopUp.showPopup(),'Calling showPopup on a non-pop-up should throw NotSupportedError');
+    assert_throws_dom("NotSupportedError",() => nonPopUp.showPopUp(),'Calling showPopUp on a non-pop-up should throw NotSupportedError');
     assert_true(popUpVisible(nonPopUp, /*isPopUp*/false));
-    assert_throws_dom("NotSupportedError",() => nonPopUp.hidePopup(),'Calling hidePopup on a non-pop-up should throw NotSupportedError');
+    assert_throws_dom("NotSupportedError",() => nonPopUp.hidePopUp(),'Calling hidePopUp on a non-pop-up should throw NotSupportedError');
     assert_true(popUpVisible(nonPopUp, /*isPopUp*/false));
   }
 
   Array.from(document.getElementById('popups').children).forEach(popUp => {
     test((t) => {
       assertIsFunctionalPopUp(popUp);
-    }, `The .showPopup() and .hidePopup() work on a pop-up, for ${popUp.outerHTML}.`);
+    }, `The .showPopUp() and .hidePopUp() work on a pop-up, for ${popUp.outerHTML}.`);
   });
 
   Array.from(document.getElementById('nonpopups').children).forEach(nonPopUp => {
     test((t) => {
       assertNotAPopUp(nonPopUp);
-    }, `The .showPopup() and .hidePopup() do NOT work on elements without a 'popup' attribute, ${nonPopUp.outerHTML}.`);
+    }, `The .showPopUp() and .hidePopUp() do NOT work on elements without a 'popup' attribute, ${nonPopUp.outerHTML}.`);
   });
 
   function createPopUp(t) {
@@ -152,15 +152,15 @@
 
   test((t) => {
     const popUp = createPopUp(t);
-    popUp.showPopup();
+    popUp.showPopUp();
     assert_true(popUp.matches(':top-layer'));
     popUp.setAttribute('popup','hint'); // Change pop-up type
     assert_false(popUp.matches(':top-layer'));
-    popUp.showPopup();
+    popUp.showPopUp();
     assert_true(popUp.matches(':top-layer'));
     popUp.setAttribute('popup','async');
     assert_false(popUp.matches(':top-layer'));
-    popUp.showPopup();
+    popUp.showPopUp();
     assert_true(popUp.matches(':top-layer'));
     popUp.setAttribute('popup','invalid');
     assert_false(popUp.matches(':top-layer'));
@@ -179,7 +179,7 @@
     test((t) => {
       const popUp = createPopUp(t);
       popUp.setAttribute('popup',type);
-      popUp.showPopup();
+      popUp.showPopUp();
       assert_true(popUp.matches(':top-layer'));
       popUp.remove();
       assert_false(popUp.matches(':top-layer'));
@@ -191,10 +191,10 @@
       test((t) => {
         const popUp = createPopUp(t);
         popUp.setAttribute('popup',type);
-        popUp.showPopup();
+        popUp.showPopUp();
         assert_true(popUp.matches(':top-layer'));
         assert_false(popUp.matches(':modal'));
-        popUp.hidePopup();
+        popUp.hidePopUp();
       },`A showing popup=${type} does not match :modal`);
     }
   });

html/semantics/popups/popup-backdrop-appearance.tentative.html

@@ -45,7 +45,7 @@
   </div>
 </div>
 <script>
-document.getElementById('bottom').showPopup();
-document.getElementById('middle').showPopup();
-document.getElementById('top').showPopup();
+document.getElementById('bottom').showPopUp();
+document.getElementById('middle').showPopUp();
+document.getElementById('top').showPopUp();
 </script>

html/semantics/popups/popup-defaultopen.tentative.html

@@ -39,7 +39,7 @@
         assert_true(p1.matches(':top-layer'),'removing defaultopen should not close the popup');
         assert_false(p1.hasAttribute('defaultopen'),'...but it should reflect to IDL');
 
-        p1.hidePopup();
+        p1.hidePopUp();
       }, "The defaultopen attribute should affect page load only");
     });
   });

html/semantics/popups/popup-events.tentative.html

@@ -36,14 +36,14 @@
   document.addEventListener('hide',() => ++hideCount);
   assert_equals(0,showCount);
   assert_equals(0,hideCount);
-  popup.showPopup();
+  popup.showPopUp();
   assert_true(popup.matches(':top-layer'));
   await waitUntilChange(() => showCount);
   assert_equals(1,showCount);
   assert_equals(0,hideCount);
   await requestAnimationFramePromise();
   assert_true(popup.matches(':top-layer'));
-  popup.hidePopup();
+  popup.hidePopUp();
   assert_false(popup.matches(':top-layer'));
   await waitUntilChange(() => hideCount);
   assert_equals(1,showCount);

html/semantics/popups/popup-focus.tentative.html

@@ -137,23 +137,23 @@
       // Directly show and hide the pop-up:
       priorFocus.focus();
       assert_equals(document.activeElement, priorFocus);
-      popUp.showPopup();
-      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopup()`);
-      popUp.hidePopup();
+      popUp.showPopUp();
+      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopUp()`);
+      popUp.hidePopUp();
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus on hide');
 
       // Hit Escape:
       priorFocus.focus();
       assert_equals(document.activeElement, priorFocus);
-      popUp.showPopup();
-      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopup()`);
+      popUp.showPopUp();
+      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopUp()`);
       await sendEscape();
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus after Escape');
 
       // Change the pop-up type:
       priorFocus.focus();
-      popUp.showPopup();
-      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopup()`);
+      popUp.showPopUp();
+      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopUp()`);
       assert_equals(popUp.popUp, 'auto', 'All pop-ups in this test should start as popup=auto');
       popUp.popUp = 'hint';
       assert_false(popUp.matches(':top-layer'), 'Changing the pop-up type should hide the pop-up');
@@ -162,8 +162,8 @@
 
       // Remove from the document:
       priorFocus.focus();
-      popUp.showPopup();
-      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopup()`);
+      popUp.showPopUp();
+      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopUp()`);
       popUp.remove();
       assert_false(popUp.matches(':top-layer'), 'Removing the pop-up should hide it');
       if (!popUp.hasAttribute('data-no-focus')) {
@@ -173,8 +173,8 @@
 
       // Show a modal dialog:
       priorFocus.focus();
-      popUp.showPopup();
-      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopup()`);
+      popUp.showPopUp();
+      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopUp()`);
       const dialog = document.body.appendChild(document.createElement('dialog'));
       dialog.showModal();
       assert_false(popUp.matches(':top-layer'), 'Opening a modal dialog should hide the pop-up');
@@ -206,7 +206,7 @@
       assert_false(popUp.contains(button), 'Start with a non-contained button');
       priorFocus.focus();
       assert_equals(document.activeElement, priorFocus);
-      popUp.showPopup();
+      popUp.showPopUp();
       assert_true(popUp.matches(':top-layer'));
       await clickOn(button); // This will not light dismiss, but will "toggle" the popUp.
       assert_false(popUp.matches(':top-layer'));
@@ -217,7 +217,7 @@
       button.setAttribute('hidepopup', popUp.id);
       popUp.appendChild(button);
       priorFocus.focus();
-      popUp.showPopup();
+      popUp.showPopUp();
       assert_true(popUp.matches(':top-layer'));
       if (!popUp.hasAttribute('data-no-focus')) {
         assert_not_equals(document.activeElement, priorFocus, 'focus should shift for this element');
@@ -230,7 +230,7 @@
       button = document.createElement('button');
       document.body.appendChild(button);
       priorFocus.focus();
-      popUp.showPopup();
+      popUp.showPopUp();
       assert_true(popUp.matches(':top-layer'));
       await clickOn(button); // This will light dismiss the pop-up, focus the prior focus, then focus this button.
       assert_false(popUp.matches(':top-layer'), 'clicking button should hide the pop-up (via light dismiss)');
@@ -247,25 +247,25 @@
 
       // Move the prior focus out of the document
       priorFocus.focus();
-      popUp.showPopup();
+      popUp.showPopUp();
       assert_true(popUp.matches(':top-layer'));
       const newFocus = document.activeElement;
       assert_not_equals(newFocus, priorFocus, 'focus should shift for this element');
       priorFocus.remove();
       assert_equals(document.activeElement, newFocus, 'focus should not change when prior focus is removed');
-      popUp.hidePopup();
+      popUp.hidePopUp();
       assert_not_equals(document.activeElement, priorFocus, 'focused element has been removed');
       document.body.appendChild(priorFocus); // Put it back
 
       // Move the prior focus inside the (already open) pop-up
       priorFocus.focus();
-      popUp.showPopup();
+      popUp.showPopUp();
       assert_true(popUp.matches(':top-layer'));
       assert_false(popUp.contains(priorFocus), 'Start with a non-contained prior focus');
       popUp.appendChild(priorFocus); // Move inside the pop-up
       assert_true(popUp.contains(priorFocus));
       assert_true(popUp.matches(':top-layer'), 'pop-up should stay open');
-      popUp.hidePopup();
+      popUp.hidePopUp();
       assert_not_equals(document.activeElement, priorFocus, 'focused element is display:none inside the pop-up');
       document.body.appendChild(priorFocus); // Put it back
     }, "Popup corner cases test: " + testName);

html/semantics/popups/popup-inside-display-none.tentative.html

@@ -12,7 +12,7 @@
 
 <script>
   const popup = document.querySelector('[popup]');
-  popup.showPopup();
+  popup.showPopUp();
   if (!popup.matches(':top-layer'))
     document.body.appendChild(document.createTextNode('FAIL'));
 </script>

html/semantics/popups/popup-invoking-attribute.tentative.html

@@ -148,7 +148,7 @@
               case "toggle":
               case "show":
                 assert_popUp(expectedId,true,'Toggle or show should show the pop-up');
-                (expectedId===1 ? popUp1 : popUp2).hidePopup(); // Hide the pop-up
+                (expectedId===1 ? popUp1 : popUp2).hidePopUp(); // Hide the pop-up
                 break;
               case "hide":
               case "none":
@@ -157,7 +157,7 @@
               default:
                 assert_unreached();
             }
-            (expectedId===1 ? popUp1 : popUp2).showPopup(); // Show the pop-up directly
+            (expectedId===1 ? popUp1 : popUp2).showPopUp(); // Show the pop-up directly
             assert_popUp(expectedId,true);
             assert_popUp(otherId,false);
             await testcase.invokeFn(invoker);
@@ -215,11 +215,11 @@
   await assertState(false,0,0);
   await clickOn(button);
   await assertState(true,1,0);
-  popUp.hidePopup();
+  popUp.hidePopUp();
   await assertState(false,1,1);
   button.click();
   await assertState(true,2,1);
-  popUp.hidePopup();
+  popUp.hidePopUp();
   await assertState(false,2,2);
 }, "Clicking a togglepopup button opens a closed pop-up (also check event counts)");