feat(ui): fix visuals for multitab; use window focus event for tabs

2023-05-31 15:42:51 +02:00 · 2023-05-31 15:42:51 +02:00 · 3da035188e
commit 3da035188e
parent 9545879fbf
5 changed files with 111 additions and 114 deletions
--- a/frontend/app/components/Session_/Player/Controls/controls.module.css
+++ b/frontend/app/components/Session_/Player/Controls/controls.module.css
@ -15,7 +15,7 @@
  display: flex;
  justify-content: space-between;
  align-items: center;
-  height: 65px;
+  height: 55px;
  padding-left: 10px;
  padding-right: 0;
 }
--- a/frontend/app/components/Session_/Subheader.js
+++ b/frontend/app/components/Session_/Subheader.js
@ -11,39 +11,33 @@ import BugReportModal from './BugReport/BugReportModal';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import AutoplayToggle from 'Shared/AutoplayToggle';
-import { connect } from 'react-redux'
+import { connect } from 'react-redux';
+import cn from 'classnames';

-const localhostWarn = (project) => project + '_localhost_warn'
+const localhostWarn = (project) => project + '_localhost_warn';

 function SubHeader(props) {
-  const localhostWarnKey = localhostWarn(props.siteId)
-  const defaultLocalhostWarn = localStorage.getItem(localhostWarnKey) !== '1'
+  const localhostWarnKey = localhostWarn(props.siteId);
+  const defaultLocalhostWarn = localStorage.getItem(localhostWarnKey) !== '1';
  const [showWarningModal, setWarning] = React.useState(defaultLocalhostWarn);
  const { player, store } = React.useContext(PlayerContext);
-  const {
-    width,
-    height,
-    endTime,
-    tabStates,
-    currentTab,
-    tabs,
-  } = store.get();
+  const { width, height, endTime, tabStates, currentTab, tabs } = store.get();

-  const currentLocation = tabStates[currentTab]?.location || ''
-  const resourceList = tabStates[currentTab]?.resourceList || []
-  const exceptionsList = tabStates[currentTab]?.exceptionsList || []
-  const eventsList = tabStates[currentTab]?.eventsList || []
-  const graphqlList = tabStates[currentTab]?.graphqlList || []
-  const fetchList = tabStates[currentTab]?.fetchList || []
+  const currentLocation = tabStates[currentTab]?.location || '';
+  const resourceList = tabStates[currentTab]?.resourceList || [];
+  const exceptionsList = tabStates[currentTab]?.exceptionsList || [];
+  const eventsList = tabStates[currentTab]?.eventsList || [];
+  const graphqlList = tabStates[currentTab]?.graphqlList || [];
+  const fetchList = tabStates[currentTab]?.fetchList || [];

  const enabledIntegration = useMemo(() => {
    const { integrations } = props;
    if (!integrations || !integrations.size) {
      return false;
    }
-  
+
    return integrations.some((i) => i.token);
-  })
+  });

  const mappedResourceList = resourceList
    .filter((r) => r.isRed || r.isYellow)
@ -75,105 +69,109 @@ function SubHeader(props) {
  const showWarning =
    location && /(localhost)|(127.0.0.1)|(0.0.0.0)/.test(location) && showWarningModal;
  const closeWarning = () => {
-    localStorage.setItem(localhostWarnKey, '1')
-    setWarning(false)
-  }
+    localStorage.setItem(localhostWarnKey, '1');
+    setWarning(false);
+  };
  return (
-    <div className="w-full px-4 py-2 flex items-center border-b relative">
-      {showWarning ? (
-        <div
-          className="px-3 py-1 border border-gray-light drop-shadow-md rounded bg-active-blue flex items-center justify-between"
-          style={{
-            zIndex: 999,
-            position: 'absolute',
-            left: '50%',
-            bottom: '-24px',
-            transform: 'translate(-50%, 0)',
-            fontWeight: 500,
-          }}
-        >
-          Some assets may load incorrectly on localhost.
-          <a
-            href="https://docs.openreplay.com/en/troubleshooting/session-recordings/#testing-in-localhost"
-            target="_blank"
-            rel="noreferrer"
-            className="link ml-1"
-          >
-            Learn More
-          </a>
-          <div className="py-1 ml-3 cursor-pointer" onClick={closeWarning}>
-            <Icon name="close" size={16} color="black" />
-          </div>
-        </div>
-      ) : null}
-      {location && (
-        <>
+    <>
+      <div className="w-full px-4 flex items-center border-b relative">
+        {showWarning ? (
          <div
-            className="flex items-center cursor-pointer color-gray-medium text-sm p-1 hover:bg-active-blue hover:!underline rounded-md"
+            className="px-3 py-1 border border-gray-light drop-shadow-md rounded bg-active-blue flex items-center justify-between"
+            style={{
+              zIndex: 999,
+              position: 'absolute',
+              left: '50%',
+              bottom: '-24px',
+              transform: 'translate(-50%, 0)',
+              fontWeight: 500,
+            }}
          >
-            <Icon size="20" name="event/link" className="mr-1" />
-            <Tooltip title="Open in new tab" delay={0}>
-              <a href={currentLocation} target='_blank'>{location}</a>
-            </Tooltip>
-          </div>
-        </>
-      )}
-      {tabs.map((tab, i) => (
-          <div
-              key={tab}
-              onClick={() => player.changeTab(tab)}
-              className={
-                currentTab === tab
-                  ? 'outline-active-blue-border outline m-2 cursor-pointer'
-                  : 'm-2 cursor-pointer'
-              }
-          >
-            Tab {i+1}
-          </div>
-      ))}
-      <div
-        className="ml-auto text-sm flex items-center color-gray-medium gap-2"
-        style={{ width: 'max-content' }}
-      >
-        <Button icon="file-pdf" variant="text" onClick={showReportModal}>
-          Create Bug Report
-        </Button>
-        <NotePopup />
-        {enabledIntegration && <Issues sessionId={props.sessionId} /> }
-        <SharePopup
-          entity="sessions"
-          id={props.sessionId}
-          showCopyLink={true}
-          trigger={
-            <div className="relative">
-              <Button icon="share-alt" variant="text" className="relative">
-                Share
-              </Button>
+            Some assets may load incorrectly on localhost.
+            <a
+              href="https://docs.openreplay.com/en/troubleshooting/session-recordings/#testing-in-localhost"
+              target="_blank"
+              rel="noreferrer"
+              className="link ml-1"
+            >
+              Learn More
+            </a>
+            <div className="py-1 ml-3 cursor-pointer" onClick={closeWarning}>
+              <Icon name="close" size={16} color="black" />
            </div>
-          }
-        />
-        <ItemMenu
-          items={[
-            {
-              key: 1,
-              component: <AutoplayToggle />,
-            },
-            {
-              key: 2,
-              component: <Bookmark noMargin sessionId={props.sessionId} />,
-            },
-          ]}
-        />
+          </div>
+        ) : null}
+        {tabs.map((tab, i) => (
+          <div
+            key={tab}
+            style={{ marginBottom: '-2px' }}
+            onClick={() => player.changeTab(tab)}
+            className={cn(
+              'self-end py-1 px-4 cursor-pointer',
+              currentTab === tab
+                ? 'border-gray-light border-t border-l border-r !border-b-white bg-white rounded-tl rounded-tr font-semibold'
+                : 'cursor-pointer border-gray-light !border-b !border-t-0 !border-l-0 !border-r-0'
+            )}
+          >
+            Tab {i + 1}
+          </div>
+        ))}
+        <div
+          className="ml-auto text-sm flex items-center color-gray-medium gap-2"
+          style={{ width: 'max-content' }}
+        >
+          <Button icon="file-pdf" variant="text" onClick={showReportModal}>
+            Create Bug Report
+          </Button>
+          <NotePopup />
+          {enabledIntegration && <Issues sessionId={props.sessionId} />}
+          <SharePopup
+            entity="sessions"
+            id={props.sessionId}
+            showCopyLink={true}
+            trigger={
+              <div className="relative">
+                <Button icon="share-alt" variant="text" className="relative">
+                  Share
+                </Button>
+              </div>
+            }
+          />
+          <ItemMenu
+            items={[
+              {
+                key: 1,
+                component: <AutoplayToggle />,
+              },
+              {
+                key: 2,
+                component: <Bookmark noMargin sessionId={props.sessionId} />,
+              },
+            ]}
+          />

-        <div>
-          <QueueControls />
+          <div>
+            <QueueControls />
+          </div>
        </div>
      </div>
-    </div>
+      {location && (
+        <div className={'w-full bg-white border-b border-gray-light'}>
+          <div className="flex w-fit items-center cursor-pointer color-gray-medium text-sm p-1">
+            <Icon size="20" name="event/link" className="mr-1" />
+            <Tooltip title="Open in new tab" delay={0}>
+              <a href={currentLocation} target="_blank">
+                {location}
+              </a>
+            </Tooltip>
+          </div>
+        </div>
+      )}
+    </>
  );
 }

 export default connect((state) => ({
  siteId: state.getIn(['site', 'siteId']),
-  integrations: state.getIn([ 'issues', 'list' ])
+  integrations: state.getIn(['issues', 'list']),
 }))(observer(SubHeader));
--- a/frontend/app/player/web/messages/MFileReader.ts
+++ b/frontend/app/player/web/messages/MFileReader.ts
@ -23,6 +23,7 @@ export default class MFileReader extends RawMessageReader {
    const skipIndexes = this.readCustomIndex(this.buf.slice(0, 8)) === 72057594037927940
      || this.readCustomIndex(this.buf.slice(0, 9)) === 72057594037927940

+    console.log(this.readCustomIndex(this.buf.slice(0, 8)), this.readCustomIndex(this.buf.slice(0, 9)))
    if (skipIndexes) {
      this.noIndexes = true
      this.skip(8)
--- a/tracker/tracker/src/common/messages.gen.ts
+++ b/tracker/tracker/src/common/messages.gen.ts
@ -549,5 +549,5 @@ export type TabData = [
 ]


-type Message = Timestamp | SetPageLocation | SetViewportSize | SetViewportScroll | CreateDocument | CreateElementNode | CreateTextNode | MoveNode | RemoveNode | SetNodeAttribute | RemoveNodeAttribute | SetNodeData | SetNodeScroll | SetInputTarget | SetInputValue | SetInputChecked | MouseMove | NetworkRequest | ConsoleLog | PageLoadTiming | PageRenderTiming | CustomEvent | UserID | UserAnonymousID | Metadata | CSSInsertRule | CSSDeleteRule | Fetch | Profiler | OTable | StateAction | Redux | Vuex | MobX | NgRx | GraphQL | PerformanceTrack | StringDict | SetNodeAttributeDict | ResourceTimingDeprecated | ConnectionInformation | SetPageVisibility | LoadFontFace | SetNodeFocus | LongTask | SetNodeAttributeURLBased | SetCSSDataURLBased | TechnicalInfo | CustomIssue | CSSInsertRuleURLBased | MouseClick | CreateIFrameDocument | AdoptedSSReplaceURLBased | AdoptedSSInsertRuleURLBased | AdoptedSSDeleteRule | AdoptedSSAddOwner | AdoptedSSRemoveOwner | JSException | Zustand | BatchMetadata | PartitionedMessage | InputChange | SelectionChange | MouseThrashing | UnbindNodes | ResourceTiming | TabChange | TabData
+type Message =  Timestamp | SetPageLocation | SetViewportSize | SetViewportScroll | CreateDocument | CreateElementNode | CreateTextNode | MoveNode | RemoveNode | SetNodeAttribute | RemoveNodeAttribute | SetNodeData | SetNodeScroll | SetInputTarget | SetInputValue | SetInputChecked | MouseMove | NetworkRequest | ConsoleLog | PageLoadTiming | PageRenderTiming | CustomEvent | UserID | UserAnonymousID | Metadata | CSSInsertRule | CSSDeleteRule | Fetch | Profiler | OTable | StateAction | Redux | Vuex | MobX | NgRx | GraphQL | PerformanceTrack | StringDict | SetNodeAttributeDict | ResourceTimingDeprecated | ConnectionInformation | SetPageVisibility | LoadFontFace | SetNodeFocus | LongTask | SetNodeAttributeURLBased | SetCSSDataURLBased | TechnicalInfo | CustomIssue | CSSInsertRuleURLBased | MouseClick | CreateIFrameDocument | AdoptedSSReplaceURLBased | AdoptedSSInsertRuleURLBased | AdoptedSSDeleteRule | AdoptedSSAddOwner | AdoptedSSRemoveOwner | JSException | Zustand | BatchMetadata | PartitionedMessage | InputChange | SelectionChange | MouseThrashing | UnbindNodes | ResourceTiming | TabChange | TabData
 export default Message
--- a/tracker/tracker/src/main/modules/tabs.ts
+++ b/tracker/tracker/src/main/modules/tabs.ts
@ -9,7 +9,5 @@ export default function (app: App): void {
    }
  }

-  if (document.hidden !== undefined) {
-    app.attachEventListener(document, 'visibilitychange', changeTab as EventListener, false, false)
-  }
+  app.attachEventListener(window, 'focus', changeTab as EventListener, false, false)
 }