added stuff to WebBox so that it will work with Firefox browsers (which have the benefit of rendering web pages without blur the way Chrome does on windows)

3 files changed, 36 insertions, 14 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 4444a3944..71bff86c4 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -193,8 +193,8 @@ export class MainView extends React.Component {
         document.addEventListener("pointerdown", this.globalPointerDown);
         document.addEventListener("click", (e: MouseEvent) => {
             if (!e.cancelBubble) {
-                const pathstr = (e as any)?.path.map((p: any) => p.classList?.toString()).join();
-                if (pathstr.includes("libraryFlyout")) {
+                const pathstr = (e as any)?.path?.map((p: any) => p.classList?.toString()).join();
+                if (pathstr?.includes("libraryFlyout")) {
                     SelectionManager.DeselectAll();
                 }
             }
diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx
index d59ed7770..f15287788 100644
--- a/src/client/views/MarqueeAnnotator.tsx
+++ b/src/client/views/MarqueeAnnotator.tsx
@@ -1,6 +1,5 @@
-import { action, observable, runInAction, ObservableMap } from "mobx";
+import { action, observable, ObservableMap, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import { Dictionary } from "typescript-collections";
 import { AclAddonly, AclAdmin, AclEdit, DataSym, Doc, Opt } from "../../fields/Doc";
 import { Id } from "../../fields/FieldSymbols";
 import { List } from "../../fields/List";
@@ -8,7 +7,6 @@ import { NumCast } from "../../fields/Types";
 import { GetEffectiveAcl } from "../../fields/util";
 import { Utils } from "../../Utils";
 import { Docs } from "../documents/Documents";
-import { DocumentType } from "../documents/DocumentTypes";
 import { CurrentUserUtils } from "../util/CurrentUserUtils";
 import { DragManager } from "../util/DragManager";
 import { undoBatch } from "../util/UndoManager";
@@ -22,8 +20,10 @@ const _global = (window /* browser */ || global /* node */) as any;
 export interface MarqueeAnnotatorProps {
     rootDoc: Doc;
     down: number[];
+    iframe?: () => undefined | HTMLIFrameElement;
     scrollTop: number;
     scaling?: () => number;
+    iframeScaling?: () => number;
     containerOffset?: () => number[];
     mainCont: HTMLDivElement;
     docView: DocumentView;
@@ -60,8 +60,10 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
         this._startX = this._left = (this.props.down[0] - boundingRect.left) * (this.props.mainCont.offsetWidth / boundingRect.width);
         this._startY = this._top = (this.props.down[1] - boundingRect.top) * (this.props.mainCont.offsetHeight / boundingRect.height) + this.props.mainCont.scrollTop;
         this._height = this._width = 0;
-        document.addEventListener("pointermove", this.onSelectMove, true);
-        document.addEventListener("pointerup", this.onSelectEnd, true);
+
+        const doc = (this.props.iframe?.()?.contentDocument ?? document);
+        doc.addEventListener("pointermove", this.onSelectMove);
+        doc.addEventListener("pointerup", this.onSelectEnd);
 
         AnchorMenu.Instance.OnClick = (e: PointerEvent) => this.props.anchorMenuClick?.(this.highlight("rgba(173, 216, 230, 0.75)", true));
         AnchorMenu.Instance.Highlight = this.highlight;
@@ -92,8 +94,9 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
         });
     }
     componentWillUnmount() {
-        document.removeEventListener("pointermove", this.onSelectMove, true);
-        document.removeEventListener("pointerup", this.onSelectEnd, true);
+        const doc = (this.props.iframe?.()?.contentDocument ?? document);
+        doc.removeEventListener("pointermove", this.onSelectMove);
+        doc.removeEventListener("pointerup", this.onSelectEnd);
     }
 
     @undoBatch
@@ -169,9 +172,12 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
     @action
     onSelectMove = (e: PointerEvent) => {
         // transform positions and find the width and height to set the marquee to
-        const boundingRect = this.props.mainCont.getBoundingClientRect();
-        this._width = ((e.clientX - boundingRect.left) * (this.props.mainCont.offsetWidth / boundingRect.width)) - this._startX;
-        this._height = ((e.clientY - boundingRect.top) * (this.props.mainCont.offsetHeight / boundingRect.height)) - this._startY + this.props.mainCont.scrollTop;
+        const boundingRect = (this.props.iframe?.()?.contentDocument?.body || this.props.mainCont).getBoundingClientRect();
+        const mainRect = this.props.mainCont.getBoundingClientRect();
+        const cliX = e.clientX * (this.props.iframeScaling?.() || 1) - boundingRect.left;
+        const cliY = e.clientY * (this.props.iframeScaling?.() || 1) - boundingRect.top;
+        this._width = (cliX * (this.props.mainCont.offsetWidth / mainRect.width)) - this._startX;
+        this._height = (cliY * (this.props.mainCont.offsetHeight / mainRect.height)) - this._startY + this.props.mainCont.scrollTop;
         this._left = Math.min(this._startX, this._startX + this._width);
         this._top = Math.min(this._startY, this._startY + this._height);
         this._width = Math.abs(this._width);
@@ -180,6 +186,10 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
     }
 
     onSelectEnd = (e: PointerEvent) => {
+        console.log("Scaling = " + this.props.iframeScaling?.() + " " + this.props.scaling?.())
+        const mainRect = this.props.mainCont.getBoundingClientRect();
+        const cliX = e.clientX * (this.props.iframeScaling?.() || 1) + (this.props.iframe ? mainRect.left : 0);
+        const cliY = e.clientY * (this.props.iframeScaling?.() || 1) + (this.props.iframe ? mainRect.top : 0);
         if (this._width > 10 || this._height > 10) {  // configure and show the annotation/link menu if a the drag region is big enough
             const marquees = this.props.mainCont.getElementsByClassName("marqueeAnnotator-dragBox");
             if (marquees?.length) { // copy the temporary marquee to allow for multiple selections (not currently available though).
@@ -199,7 +209,7 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
                 MarqueeAnnotator.previewNewAnnotation(this.props.savedAnnotations, this.props.annotationLayer, copy, this.props.getPageFromScroll?.(this._top) || 0);
             }
 
-            AnchorMenu.Instance.jumpTo(e.clientX, e.clientY);
+            AnchorMenu.Instance.jumpTo(cliX, cliY);
 
             if (AnchorMenu.Instance.Highlighting) {// when highlighter has been toggled when menu is pinned, we auto-highlight immediately on mouse up
                 this.highlight("rgba(245, 230, 95, 0.75)", false);  // yellowish highlight color for highlighted text (should match AnchorMenu's highlight color)
@@ -207,7 +217,7 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
             this.props.finishMarquee();
         } else {
             runInAction(() => this._width = this._height = 0);
-            this.props.finishMarquee(e.clientX, e.clientY);
+            this.props.finishMarquee(cliX, cliY);
         }
     }
 
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index a60a35b01..bfe8782ac 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -32,6 +32,7 @@ import { FieldView, FieldViewProps } from './FieldView';
 import { LinkDocPreview } from "./LinkDocPreview";
 import "./WebBox.scss";
 import React = require("react");
+const _global = (window /* browser */ || global /* node */) as any;
 const htmlToText = require("html-to-text");
 
 type WebDocument = makeInterface<[typeof documentSchema]>;
@@ -53,6 +54,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
     @observable private _marqueeing: number[] | undefined;
     @observable private _url: string = "hello";
     @observable private _isAnnotating = false;
+    @observable private _iframeClick: HTMLIFrameElement | undefined = undefined;
     @observable private _iframe: HTMLIFrameElement | null = null;
     @observable private _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
     @observable private _scrollHeight = 1500;
@@ -200,6 +202,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
             this._iframe?.contentDocument?.addEventListener("pointerup", this.iframeUp);
             setTimeout(action(() => this._marqueeing = undefined), 100); // bcz: hack .. anchor menu is setup within MarqueeAnnotator so we need to at least create the marqueeAnnotator even though we aren't using it.
         } else {
+            this._iframeClick = this._iframe ?? undefined;
             this._isAnnotating = true;
             this.props.select(false);
             e.stopPropagation();
@@ -207,6 +210,12 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         }
     }
 
+    isFirefox = () => {
+        return "InstallTrigger" in window; // navigator.userAgent.indexOf("Chrome") !== -1;
+    }
+    iframeClick = () => this._iframeClick;
+    iframeScaling = () => 1 / this.props.ScreenToLocalTransform().Scale;
+
     @action
     iframeLoaded = (e: any) => {
         const iframe = this._iframe;
@@ -388,6 +397,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
     @action finishMarquee = (x?: number, y?: number) => {
         this._marqueeing = undefined;
         this._isAnnotating = false;
+        this._iframeClick = undefined;
         x !== undefined && y !== undefined && this._setPreviewCursor?.(x, y, false);
     }
 
@@ -493,6 +503,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
                     </div>
                     {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) :
                         <MarqueeAnnotator rootDoc={this.rootDoc}
+                            iframe={this.isFirefox() ? this.iframeClick : undefined}
+                            iframeScaling={this.isFirefox() ? this.iframeScaling : undefined}
                             anchorMenuClick={this._sidebarRef.current?.anchorMenuClick}
                             scrollTop={0}
                             down={this._marqueeing} scaling={returnOne}