Merge branch 'main' into frame-line-number-in-tooltip-stack

Author: mstange

res/_headers

@@ -7,9 +7,6 @@
   # Protection for versions that do not support CSP yet.
   X-XSS-Protection: 1; mode=block
 
-  # Do not allow being embedded in a frame.
-  X-Frame-Options: SAMEORIGIN
-
   # Do not give the referrer for external navigations.
   Referrer-Policy: same-origin
 
@@ -25,7 +22,7 @@
   # 7. `frame-ancestors` is the same purpose as `X-Frame-Options` above.
   # 8. `form-action`prevents forms, we don't need this.`
   # 9. `frame-src` allows the embedding of YouTube videos in the docs.
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src http: https: data:; object-src 'none'; connect-src *; frame-ancestors 'self'; form-action 'none'; frame-src www.youtube-nocookie.com
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src http: https: data:; object-src 'none'; connect-src *; form-action 'none'; frame-src www.youtube-nocookie.com
 
 # Set the correct MIME type for WebAssembly modules.
 /*.wasm

server.js

@@ -47,7 +47,6 @@ const serverConfig = {
     // /!\ Don't forget to keep it sync-ed with the headers here /!\
     'X-Content-Type-Options': 'nosniff',
     'X-XSS-Protection': '1; mode=block',
-    'X-Frame-Options': 'SAMEORIGIN',
     'Referrer-Policy': 'same-origin',
     'Content-Security-Policy': oneLine`
       default-src 'self';
@@ -59,7 +58,6 @@ const serverConfig = {
       img-src http: https: data:;
       object-src 'none';
       connect-src *;
-      frame-ancestors 'self';
       form-action 'none'
     `,
   },

src/components/app/ProfileViewer.js

@@ -105,6 +105,7 @@ class ProfileViewerImpl extends PureComponent<Props> {
                 }
           }
         >
+          <div id="screenshot-hover"></div>
           <div className="profileViewerTopBar">
             {hasZipFile ? (
               <button

src/components/shared/ButtonWithPanel/ArrowPanel.css

@@ -4,7 +4,7 @@
 
 .arrowPanelAnchor {
   position: absolute;
-  z-index: 10;
+  z-index: 5;
   top: 75%;
   left: 50%;
 }

src/components/timeline/TrackScreenshots.js

@@ -231,9 +231,9 @@ const MAXIMUM_HOVER_SIZE = 350;
 const MAXIMUM_HOVER_SIZE_WHEN_SELECTING_RANGE = 100;
 
 class HoverPreview extends PureComponent<HoverPreviewProps> {
-  _overlayElement = ensureExists(
-    document.querySelector('#root-overlay'),
-    'Expected to find a root overlay element.'
+  _screenshotHoverElement = ensureExists(
+    document.querySelector('#screenshot-hover'),
+    'Expected to find a screenshot hover element.'
   );
 
   render() {
@@ -304,7 +304,7 @@ class HoverPreview extends PureComponent<HoverPreviewProps> {
           }}
         />
       </div>,
-      this._overlayElement
+      this._screenshotHoverElement
     );
   }
 }

src/test/components/TrackScreenshots.test.js

@@ -31,8 +31,8 @@ import { mockRaf } from '../fixtures/mocks/request-animation-frame';
 import { storeWithProfile } from '../fixtures/stores';
 import {
   getMouseEvent,
-  addRootOverlayElement,
-  removeRootOverlayElement,
+  addScreenshotHoverlement,
+  removeScreenshotHoverElement,
   fireFullClick,
 } from '../fixtures/utils';
 import { getScreenshotTrackProfile } from '../fixtures/profiles/processed-profile';
@@ -63,8 +63,8 @@ describe('timeline/TrackScreenshots', function () {
   autoMockElementSize(INITIAL_ELEMENT_SIZE);
   autoMockIntersectionObserver();
 
-  beforeEach(addRootOverlayElement);
-  afterEach(removeRootOverlayElement);
+  beforeEach(addScreenshotHoverlement);
+  afterEach(removeScreenshotHoverElement);
 
   it('matches the component snapshot', () => {
     const { container, unmount } = setup();

src/test/fixtures/utils.js

@@ -365,6 +365,27 @@ export function removeRootOverlayElement() {
   );
 }
 
+export function addScreenshotHoverlement() {
+  const div = document.createElement('div');
+  div.id = 'screenshot-hover';
+  ensureExists(
+    document.body,
+    'Expected the document.body to exist.'
+  ).appendChild(div);
+}
+
+export function removeScreenshotHoverElement() {
+  ensureExists(
+    document.body,
+    'Expected the document.body to exist.'
+  ).removeChild(
+    ensureExists(
+      document.querySelector('#screenshot-hover'),
+      'Expected to find a screenshot hover element to clean up.'
+    )
+  );
+}
+
 /**
  * You can't change <select>s by just clicking them using react-testing-library. This
  * utility makes it so that selects can be changed by the text that is in them.