fix: adjustments based on feedback

2022-08-17 21:00:10 +09:00 · 2022-08-17 21:00:10 +09:00 · 354ac532fe
commit 354ac532fe
parent af4160eb20
14 changed files with 137 additions and 139 deletions
--- a/frontend/app/components/Session_/BottomBlock/bottomBlock.module.css
+++ b/frontend/app/components/Session_/BottomBlock/bottomBlock.module.css
@ -4,4 +4,6 @@
  /* padding-right: 10px; */
  /* border: solid thin $gray-light; */
  height: 300px;
+  
+  border-top: thin dashed #cccccc;
 }
--- a/frontend/app/components/Session_/Console/ConsoleContent.js
+++ b/frontend/app/components/Session_/Console/ConsoleContent.js
@ -96,7 +96,7 @@ export default class ConsoleContent extends React.PureComponent {
              <Autoscroll autoScrollTo={Math.max(lastIndex, 0)}>
                {filtered.map((l, index) => (
                  <div
-                    className={cn('flex', {
+                    className={cn('flex py-2 px-4', {
                      info: !l.isYellow() && !l.isRed(),
                      warn: l.isYellow(),
                      error: l.isRed(),
--- a/frontend/app/components/Session_/Console/console.module.css
+++ b/frontend/app/components/Session_/Console/console.module.css
@ -11,7 +11,6 @@

 .line {
  font-family: 'Menlo', 'monaco', 'consolas', monospace;
-  padding: 7px 0 7px 15px;
  /* margin-top: -1px; ??? */
  display: flex;
  align-items: flex-start;
@ -19,15 +18,16 @@
 }

 .timestamp {
-  padding: 7px 0 7px 15px;
+  
 }

 .activeRow {
-  background-color: rgba(54, 108, 217, 0.1) !important;
+  background-color: $teal-light !important;
 }

 .icon {
  padding-top: 4px;
+  margin-right: 7px;
 }

 .inactiveRow {
--- a/frontend/app/components/Session_/GraphQL/GraphQL.js
+++ b/frontend/app/components/Session_/GraphQL/GraphQL.js
@ -1,12 +1,11 @@
 import React from 'react';
-import { NoContent, Input, SlideModal, CloseButton, Popup, Button } from 'UI';
+import { NoContent, Input, SlideModal, CloseButton, Button } from 'UI';
 import { getRE } from 'App/utils';
 import { connectPlayer, pause, jump } from 'Player';
 import BottomBlock from '../BottomBlock';
 import TimeTable from '../TimeTable';
 import GQLDetails from './GQLDetails';
 import { renderStart } from 'Components/Session_/Network/NetworkContent';
-import stl from 'Components/Session_/Network/network.module.css';

 function renderDefaultStatus() {
  return '2xx-3xx';
@ -102,7 +101,6 @@ export default class GraphQL extends React.PureComponent {
  }

  render() {
-    const { list, listNow, timelinePointer } = this.props;
    const { current, currentIndex, filteredList, lastActiveItem } = this.state;

    return (
--- a/frontend/app/components/Session_/Network/Network.js
+++ b/frontend/app/components/Session_/Network/Network.js
@ -18,98 +18,101 @@ const MEDIA = 'media';
 const OTHER = 'other';

 const TAB_TO_TYPE_MAP = {
-    [XHR]: TYPES.XHR,
-    [JS]: TYPES.JS,
-    [CSS]: TYPES.CSS,
-    [IMG]: TYPES.IMG,
-    [MEDIA]: TYPES.MEDIA,
-    [OTHER]: TYPES.OTHER,
+  [XHR]: TYPES.XHR,
+  [JS]: TYPES.JS,
+  [CSS]: TYPES.CSS,
+  [IMG]: TYPES.IMG,
+  [MEDIA]: TYPES.MEDIA,
+  [OTHER]: TYPES.OTHER,
 };

 export function renderName(r) {
-    return (
-        <div className="flex justify-between items-center grow-0 w-full">
-            <Popup style={{ maxWidth: '75%' }} content={<div className={stl.popupNameContent}>{r.url}</div>}>
-                <TextEllipsis>{r.name}</TextEllipsis>
-            </Popup>
-            <Button
-                variant="text"
-                className="right-0 text-xs uppercase p-2 color-gray-500 hover:color-teal"
-                onClick={(e) => {
-                    e.stopPropagation();
-                    jump(r.time);
-                }}
-            >
-                Jump
-            </Button>
-        </div>
-    );
+  return (
+    <div className="flex justify-between items-center grow-0 w-full">
+      <Popup
+        style={{ maxWidth: '75%' }}
+        content={<div className={stl.popupNameContent}>{r.url}</div>}
+      >
+        <TextEllipsis>{r.name}</TextEllipsis>
+      </Popup>
+      <Button
+        variant="text"
+        className="right-0 text-xs uppercase p-2 color-gray-500 hover:color-teal"
+        onClick={(e) => {
+          e.stopPropagation();
+          jump(r.time);
+        }}
+      >
+        Jump
+      </Button>
+    </div>
+  );
 }

 export function renderDuration(r) {
-    if (!r.success) return 'x';
+  if (!r.success) return 'x';

-    const text = `${Math.round(r.duration)}ms`;
-    if (!r.isRed() && !r.isYellow()) return text;
+  const text = `${Math.round(r.duration)}ms`;
+  if (!r.isRed() && !r.isYellow()) return text;

-    let tooltipText;
-    let className = 'w-full h-full flex items-center ';
-    if (r.isYellow()) {
-        tooltipText = 'Slower than average';
-        className += 'warn color-orange';
-    } else {
-        tooltipText = 'Much slower than average';
-        className += 'error color-red';
-    }
+  let tooltipText;
+  let className = 'w-full h-full flex items-center ';
+  if (r.isYellow()) {
+    tooltipText = 'Slower than average';
+    className += 'warn color-orange';
+  } else {
+    tooltipText = 'Much slower than average';
+    className += 'error color-red';
+  }

-    return (
-        <Popup content={tooltipText}>
-            <div className={cn(className, stl.duration)}> {text} </div>
-        </Popup>
-    );
+  return (
+    <Popup content={tooltipText}>
+      <div className={cn(className, stl.duration)}> {text} </div>
+    </Popup>
+  );
 }

@connectPlayer((state) => ({
-    location: state.location,
-    resources: state.resourceList,
-    domContentLoadedTime: state.domContentLoadedTime,
-    loadTime: state.loadTime,
-    // time: state.time,
-    playing: state.playing,
-    domBuildingTime: state.domBuildingTime,
-    fetchPresented: state.fetchList.length > 0,
-    listNow: state.resourceListNow,
+  location: state.location,
+  resources: state.resourceList,
+  domContentLoadedTime: state.domContentLoadedTime,
+  loadTime: state.loadTime,
+  // time: state.time,
+  playing: state.playing,
+  domBuildingTime: state.domBuildingTime,
+  fetchPresented: state.fetchList.length > 0,
+  listNow: state.resourceListNow,
 }))
@connect(
-    (state) => ({
-        timelinePointer: state.getIn(['sessions', 'timelinePointer']),
-    }),
-    { setTimelinePointer }
+  (state) => ({
+    timelinePointer: state.getIn(['sessions', 'timelinePointer']),
+  }),
+  { setTimelinePointer }
 )
 export default class Network extends React.PureComponent {
-    state = {
-        filter: '',
-        filteredList: this.props.resources,
-        activeTab: ALL,
-        currentIndex: 0,
-    };
+  state = {
+    filter: '',
+    filteredList: this.props.resources,
+    activeTab: ALL,
+    currentIndex: 0,
+  };

-    onRowClick = (e, index) => {
-        // pause();
-        // jump(e.time);
-        // this.setState({ currentIndex: index });
-        // this.props.setTimelinePointer(null);
-    };
+  onRowClick = (e, index) => {
+    // no action for direct click on network requests (so far), there is a jump button, and we don't have more information for than is already displayed in the table
+  };

-    onTabClick = (activeTab) => this.setState({ activeTab });
+  onTabClick = (activeTab) => this.setState({ activeTab });

-    onFilterChange = (e, { value }) => {
-        const { resources } = this.props;
-        const filterRE = getRE(value, 'i');
-        const filtered = resources.filter(({ type, name }) => filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[activeTab]));
+  onFilterChange = (e, { value }) => {
+    const { resources } = this.props;
+    const filterRE = getRE(value, 'i');
+    const filtered = resources.filter(
+      ({ type, name }) =>
+        filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[activeTab])
+    );

    this.setState({ filter: value, filteredList: value ? filtered : resources, currentIndex: 0 });
-  }
+  };

  static getDerivedStateFromProps(nextProps, prevState) {
    const { filteredList } = prevState;
@ -121,35 +124,35 @@ export default class Network extends React.PureComponent {
    }
  }

-    render() {
-        const {
-            location,
-            domContentLoadedTime,
-            loadTime,
-            domBuildingTime,
-            fetchPresented,
-            listNow,
-        } = this.props;
-        const { filteredList } = this.state;
-        const resourcesSize = filteredList.reduce((sum, { decodedBodySize }) => sum + (decodedBodySize || 0), 0);
-        const transferredSize = filteredList.reduce((sum, { headerSize, encodedBodySize }) => sum + (headerSize || 0) + (encodedBodySize || 0), 0);
+  render() {
+    const { location, domContentLoadedTime, loadTime, domBuildingTime, fetchPresented, listNow } =
+      this.props;
+    const { filteredList } = this.state;
+    const resourcesSize = filteredList.reduce(
+      (sum, { decodedBodySize }) => sum + (decodedBodySize || 0),
+      0
+    );
+    const transferredSize = filteredList.reduce(
+      (sum, { headerSize, encodedBodySize }) => sum + (headerSize || 0) + (encodedBodySize || 0),
+      0
+    );

-        return (
-            <React.Fragment>
-                <NetworkContent
-                    // time = { time }
-                    location={location}
-                    resources={filteredList}
-                    domContentLoadedTime={domContentLoadedTime}
-                    loadTime={loadTime}
-                    domBuildingTime={domBuildingTime}
-                    fetchPresented={fetchPresented}
-                    resourcesSize={resourcesSize}
-                    transferredSize={transferredSize}
-                    onRowClick={this.onRowClick}
-                    currentIndex={listNow.length - 1}
-                />
-            </React.Fragment>
-        );
-    }
+    return (
+      <React.Fragment>
+        <NetworkContent
+          // time = { time }
+          location={location}
+          resources={filteredList}
+          domContentLoadedTime={domContentLoadedTime}
+          loadTime={loadTime}
+          domBuildingTime={domBuildingTime}
+          fetchPresented={fetchPresented}
+          resourcesSize={resourcesSize}
+          transferredSize={transferredSize}
+          onRowClick={this.onRowClick}
+          currentIndex={listNow.length - 1}
+        />
+      </React.Fragment>
+    );
+  }
 }
--- a/frontend/app/components/Session_/Network/NetworkContent.js
+++ b/frontend/app/components/Session_/Network/NetworkContent.js
@ -218,10 +218,6 @@ export default class NetworkContent extends React.PureComponent {
      );
    }

-    // const resourcesSize = filtered.reduce((sum, { decodedBodySize }) => sum + (decodedBodySize || 0), 0);
-    // const transferredSize = filtered
-    //   .reduce((sum, { headerSize, encodedBodySize }) => sum + (headerSize || 0) + (encodedBodySize || 0), 0);
-
    return (
      <React.Fragment>
        <BottomBlock style={{ height: 300 + additionalHeight + 'px' }} className="border">
@ -243,11 +239,6 @@ export default class NetworkContent extends React.PureComponent {
            />
          </BottomBlock.Header>
          <BottomBlock.Content>
-            {/* <div className={ stl.location }> */}
-            {/*   <Icon name="window" marginRight="8" /> */}
-            {/*   <div>{ location }</div> */}
-            {/*   <div></div> */}
-            {/* </div> */}
            <InfoLine>
              <InfoLine.Point label={filtered.length} value=" requests" />
              <InfoLine.Point
--- a/frontend/app/components/Session_/StackEvents/UserEvent/UserEvent.js
+++ b/frontend/app/components/Session_/StackEvents/UserEvent/UserEvent.js
@ -40,7 +40,7 @@ export default class UserEvent extends React.PureComponent {
        data-scroll-item={userEvent.isRed()}
        // onClick={ this.props.switchOpen } //
        onClick={this.props.onJump} //
-        className={cn('group flex py-3 px-4 ', stl.userEvent, this.getLevelClassname(), {
+        className={cn('group flex py-2 px-4 ', stl.userEvent, this.getLevelClassname(), {
          [stl.inactive]: inactive,
          [stl.selected]: selected,
        })}
--- a/frontend/app/components/Session_/StackEvents/UserEvent/userEvent.module.css
+++ b/frontend/app/components/Session_/StackEvents/UserEvent/userEvent.module.css
@ -12,6 +12,7 @@
  overflow: hidden;
  display: flex;
  align-items: flex-start;
+  font-family: 'Menlo', 'monaco', 'consolas', monospace;
 }

 .title {
@ -39,5 +40,5 @@
 }

 .selected {
-  background-color: rgba(54, 108, 217, 0.1);
+  background-color: $teal-light;
 }
--- a/frontend/app/components/Session_/TimeTable/TimeTable.tsx
+++ b/frontend/app/components/Session_/TimeTable/TimeTable.tsx
@ -4,7 +4,6 @@ import cn from 'classnames';
 import { Duration } from "luxon";
 import { NoContent, IconButton, Button } from 'UI';
 import { percentOf } from 'App/utils';
-import { formatMs } from 'App/date';

 import BarRow from './BarRow';
 import stl from './timeTable.module.css';
@ -24,7 +23,9 @@ type CanBeRed = {
  isRed: () => boolean;
 };

-type Row = Timed & Durationed & CanBeRed & { [key: string]: any, key: string };
+interface Row extends Timed, Durationed, CanBeRed {
+  [key: string]: any, key: string
+}

 type Line = {
  color: string; // Maybe use typescript?
@ -38,7 +39,7 @@ type Column = {
  dataKey?: string;
  render?: (row: any) => void
  referenceLines?: Array<Line>;
-  style?: Object;
+  style?: React.CSSProperties;
 } & RenderOrKey;

 // type RenderOrKey = { // Disjoint?
--- a/frontend/app/components/Session_/TimeTable/timeTable.module.css
+++ b/frontend/app/components/Session_/TimeTable/timeTable.module.css
@ -100,7 +100,7 @@ $offset: 10px;
 }

 .activeRow {
-  background-color: rgba(54, 108, 217, 0.1);
+  background-color: $teal-light;
 }

 .inactiveRow {
--- a/frontend/app/components/ui/ErrorItem/ErrorItem.js
+++ b/frontend/app/components/ui/ErrorItem/ErrorItem.js
@ -1,20 +1,25 @@
-import React from 'react'
-import cn from 'classnames'
-import { IconButton } from 'UI'
+import React from 'react';
+import cn from 'classnames';
+import { IconButton } from 'UI';
 import stl from './errorItem.module.css';
-import {Duration} from "luxon";
+import { Duration } from 'luxon';

 function ErrorItem({ error = {}, onErrorClick, onJump, inactive, selected }) {
  return (
-    <div className={ cn(stl.wrapper, 'py-3 px-4 flex cursor-pointer', {
+    <div
+      className={cn(stl.wrapper, 'py-2 px-4 flex cursor-pointer', {
        [stl.inactive]: inactive,
-        [stl.selected]: selected
-    }) } onClick={onJump}>
-        <div className={"self-start pr-4 color-red"}>{Duration.fromMillis(error.time).toFormat('mm:ss.SSS')}</div>
+        [stl.selected]: selected,
+      })}
+      onClick={onJump}
+    >
+      <div className={'self-start pr-4 color-red'}>
+        {Duration.fromMillis(error.time).toFormat('mm:ss.SSS')}
+      </div>
      <div className="mr-auto overflow-hidden">
        <div className="color-red mb-1 cursor-pointer code-font">
          {error.name}
-          <span className="color-gray-darkest ml-2">{ error.stack0InfoString }</span>
+          <span className="color-gray-darkest ml-2">{error.stack0InfoString}</span>
        </div>
        <div className="text-sm color-gray-medium">{error.message}</div>
      </div>
@ -22,7 +27,7 @@ function ErrorItem({ error = {}, onErrorClick, onJump, inactive, selected }) {
        <IconButton red onClick={onErrorClick} label="DETAILS" />
      </div>
    </div>
-  )
+  );
 }

-export default ErrorItem
+export default ErrorItem;
--- a/frontend/app/components/ui/ErrorItem/errorItem.module.css
+++ b/frontend/app/components/ui/ErrorItem/errorItem.module.css
@ -7,5 +7,5 @@
 }

 .selected {
-  background-color: rgba(54, 108, 217, 0.1);
+  background-color: $teal-light;
 }
--- a/frontend/app/styles/colors-autogen.css
+++ b/frontend/app/styles/colors-autogen.css
@ -35,7 +35,6 @@
 .fill-light-blue-bg { fill: $light-blue-bg }
 .fill-white { fill: $white }
 .fill-borderColor { fill: $borderColor }
-.fill-figmaColors { fill: $figmaColors }

 /* color */
 .color-main { color: $main }
@ -72,7 +71,6 @@
 .color-light-blue-bg { color: $light-blue-bg }
 .color-white { color: $white }
 .color-borderColor { color: $borderColor }
-.color-figmaColors { color: $figmaColors }

 /* hover color */
 .hover-main:hover { color: $main }
@ -109,7 +107,6 @@
 .hover-light-blue-bg:hover { color: $light-blue-bg }
 .hover-white:hover { color: $white }
 .hover-borderColor:hover { color: $borderColor }
-.hover-figmaColors:hover { color: $figmaColors }

 .border-main { border-color: $main }
 .border-gray-light-shade { border-color: $gray-light-shade }
@ -145,4 +142,3 @@
 .border-light-blue-bg { border-color: $light-blue-bg }
 .border-white { border-color: $white }
 .border-borderColor { border-color: $borderColor }
-.border-figmaColors { border-color: $figmaColors }
--- a/frontend/package.json
+++ b/frontend/package.json
@ -82,6 +82,7 @@
    "@babel/preset-typescript": "^7.17.12",
    "@babel/runtime": "^7.17.9",
    "@openreplay/sourcemap-uploader": "^3.0.0",
+    "@types/luxon": "^3.0.0",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.4",
    "@types/react-redux": "^7.1.24",