fix: {exit|enter}-html-fullscreen emitted after esc in webview (#30561)

Co-authored-by: Shelley Vohr <[email protected]>

shell/browser/api/electron_api_web_contents.cc

@@ -1237,31 +1237,29 @@ void WebContents::OnEnterFullscreenModeForTab(
     content::RenderFrameHost* requesting_frame,
     const blink::mojom::FullscreenOptions& options,
     bool allowed) {
-  if (!allowed)
-    return;
-  if (!owner_window_)
+  if (!allowed || !owner_window_)
     return;
+
   auto* source = content::WebContents::FromRenderFrameHost(requesting_frame);
   if (IsFullscreenForTabOrPending(source)) {
     DCHECK_EQ(fullscreen_frame_, source->GetFocusedFrame());
     return;
   }
+
   SetHtmlApiFullscreen(true);
-  owner_window_->NotifyWindowEnterHtmlFullScreen();
 
   if (native_fullscreen_) {
     // Explicitly trigger a view resize, as the size is not actually changing if
     // the browser is fullscreened, too.
     source->GetRenderViewHost()->GetWidget()->SynchronizeVisualProperties();
   }
-  Emit("enter-html-full-screen");
 }
 
 void WebContents::ExitFullscreenModeForTab(content::WebContents* source) {
   if (!owner_window_)
     return;
+
   SetHtmlApiFullscreen(false);
-  owner_window_->NotifyWindowLeaveHtmlFullScreen();
 
   if (native_fullscreen_) {
     // Explicitly trigger a view resize, as the size is not actually changing if
@@ -1269,7 +1267,6 @@ void WebContents::ExitFullscreenModeForTab(content::WebContents* source) {
     // `chrome/browser/ui/exclusive_access/fullscreen_controller.cc`.
     source->GetRenderViewHost()->GetWidget()->SynchronizeVisualProperties();
   }
-  Emit("leave-html-full-screen");
 }
 
 void WebContents::RendererUnresponsive(
@@ -3588,7 +3585,7 @@ void WebContents::SetHtmlApiFullscreen(bool enter_fullscreen) {
 }
 
 void WebContents::UpdateHtmlApiFullscreen(bool fullscreen) {
-  if (fullscreen == html_fullscreen_)
+  if (fullscreen == is_html_fullscreen())
     return;
 
   html_fullscreen_ = fullscreen;
@@ -3599,11 +3596,19 @@ void WebContents::UpdateHtmlApiFullscreen(bool fullscreen) {
       ->GetWidget()
       ->SynchronizeVisualProperties();
 
-  // The embedder WebContents is spearated from the frame tree of webview, so
+  // The embedder WebContents is separated from the frame tree of webview, so
   // we must manually sync their fullscreen states.
   if (embedder_)
     embedder_->SetHtmlApiFullscreen(fullscreen);
 
+  if (fullscreen) {
+    Emit("enter-html-full-screen");
+    owner_window_->NotifyWindowEnterHtmlFullScreen();
+  } else {
+    Emit("leave-html-full-screen");
+    owner_window_->NotifyWindowLeaveHtmlFullScreen();
+  }
+
   // Make sure all child webviews quit html fullscreen.
   if (!fullscreen && !IsGuest()) {
     auto* manager = WebViewManager::GetWebViewManager(web_contents());

spec-main/webview-spec.ts

@@ -456,6 +456,34 @@ describe('<webview> tag', function () {
       await delay(0);
       expect(w.isFullScreen()).to.be.false();
     });
+
+    it('pressing ESC should emit the leave-html-full-screen event', async () => {
+      const w = new BrowserWindow({
+        show: false,
+        webPreferences: {
+          webviewTag: true,
+          nodeIntegration: true,
+          contextIsolation: false
+        }
+      });
+
+      const didAttachWebview = emittedOnce(w.webContents, 'did-attach-webview');
+      w.loadFile(path.join(fixtures, 'pages', 'webview-did-attach-event.html'));
+
+      const [, webContents] = await didAttachWebview;
+
+      const enterFSWindow = emittedOnce(w, 'enter-html-full-screen');
+      const enterFSWebview = emittedOnce(webContents, 'enter-html-full-screen');
+      await webContents.executeJavaScript('document.getElementById("div").requestFullscreen()', true);
+      await enterFSWindow;
+      await enterFSWebview;
+
+      const leaveFSWindow = emittedOnce(w, 'leave-html-full-screen');
+      const leaveFSWebview = emittedOnce(webContents, 'leave-html-full-screen');
+      webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+      await leaveFSWindow;
+      await leaveFSWebview;
+    });
   });
 
   describe('nativeWindowOpen option', () => {

spec/fixtures/pages/a.html

@@ -3,6 +3,7 @@
 <link rel="icon" type="image/png" href="http://test.com/favicon.png"/>
 <meta http-equiv="content-security-policy" content="script-src 'self' 'unsafe-inline'" />
 <body>
+<div id="div">Hello World</div>
 <script type="text/javascript" charset="utf-8">
   console.log('a');
   document.title = "test"