Skip to content

Commit acb7d2a

Browse files
pimterrypimterry
committed
Add Ctrl/Cmd + [] shortcuts for the View panes
1 parent 4291c11 commit acb7d2a

10 files changed

+285
-238
lines changed

‎src/components/split-pane.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ import { default as ReactSplitPane } from 'react-split-pane';
33

44
import { styled } from '../styles';
55

6+
export type SplitPane = ReactSplitPane & {
7+
pane1: HTMLElement | undefined;
8+
pane2: HTMLElement | undefined;
9+
};
10+
611
// Styles original taken from
712
// https://github.com/tomkp/react-split-pane/blob/master/README.md#example-styling
813
export const SplitPane = styled(ReactSplitPane)<{

‎src/components/view/http/http-details-pane.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { HtkRule, getRulePartKey } from '../../../model/rules/rules';
1818
import { WebSocketStream } from '../../../model/websockets/websocket-stream';
1919
import { tagsToErrorType } from '../../../model/http/error-types';
2020

21-
import { PaneOuterContainer, PaneScrollContainer } from '../view-details-pane';
21+
import { PaneScrollContainer } from '../view-details-pane';
2222
import { StreamMessageListCard } from '../stream-message-list-card';
2323
import { WebSocketCloseCard } from '../websocket-close-card';
2424

@@ -115,17 +115,17 @@ export class HttpDetailsPane extends React.Component<{
115115
const headerCard = this.renderHeaderCard(exchange);
116116

117117
if (expandedViewCard) {
118-
return <PaneOuterContainer>
118+
return <>
119119
{ headerCard }
120120
{ this.renderExpandedCard(expandedViewCard, exchange, apiExchange) }
121-
</PaneOuterContainer>;
121+
</>;
122122
}
123123

124124
const cards = (requestBreakpoint || responseBreakpoint)
125125
? this.renderBreakpointCards(exchange, apiName, apiExchange)
126126
: this.renderNormalCards(exchange, apiName, apiExchange);
127127

128-
return <PaneOuterContainer>
128+
return <>
129129
<PaneScrollContainer>
130130
{ headerCard }
131131
{ cards }
@@ -139,7 +139,7 @@ export class HttpDetailsPane extends React.Component<{
139139
navigate={navigate}
140140
isPaidUser={isPaidUser}
141141
/>
142-
</PaneOuterContainer>;
142+
</>;
143143
}
144144

145145
renderHeaderCard(exchange: HttpExchange): JSX.Element | null {

‎src/components/view/rtc/rtc-connection-details-pane.tsx

+64-66
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { RTCDataChannel } from '../../../model/webrtc/rtc-data-channel';
1515
import { RTCMediaTrack } from '../../../model/webrtc/rtc-media-track';
1616

1717
import { SelfSizedEditor } from '../../editor/base-editor';
18-
import { PaneOuterContainer, PaneScrollContainer } from '../view-details-pane';
18+
import { PaneScrollContainer } from '../view-details-pane';
1919

2020
import { RTCConnectionCard } from './rtc-connection-card';
2121
import { SDPCard } from './sdp-card';
@@ -102,71 +102,69 @@ export class RTCConnectionDetailsPane extends React.Component<{
102102
direction: locallyInitiated ? 'left' : 'right'
103103
} as const;
104104

105-
return <PaneOuterContainer>
106-
<PaneScrollContainer>
107-
<RTCConnectionCard
108-
{...uiStore!.viewCardProps.rtcConnection}
109-
connection={connection}
110-
/>
111-
<SDPCard
112-
{...offerCardProps}
113-
connection={connection}
114-
type={locallyInitiated ? 'local' : 'remote'}
115-
sessionDescription={offerDescription}
116-
editorNode={offerEditor}
117-
/>
118-
<SDPCard
119-
{...answerCardProps}
120-
connection={connection}
121-
type={locallyInitiated ? 'remote' : 'local'}
122-
sessionDescription={answerDescription}
123-
editorNode={answerEditor}
124-
/>
125-
126-
{
127-
this.mediaTracks.map((mediaTrack) =>
128-
<RTCMediaCard
129-
// Link the key to the track, to ensure selected-message state gets
130-
// reset when we switch between traffic:
131-
key={mediaTrack.id}
132-
133-
mediaTrack={mediaTrack}
134-
135-
expanded={false}
136-
collapsed={!!this.streamCardState[mediaTrack.id]?.collapsed}
137-
onCollapseToggled={this.toggleCollapse.bind(this, mediaTrack.id)}
138-
onExpandToggled={this.expandStream.bind(this, mediaTrack.id)}
139-
ariaLabel='RTC Media Stream Section'
140-
/>
141-
)
142-
}
143-
144-
{
145-
this.dataChannels.map((dataChannel, i) =>
146-
<RTCDataChannelCard
147-
key={dataChannel.id}
148-
dataChannel={dataChannel}
149-
isPaidUser={accountStore!.isPaidUser}
150-
streamMessageEditor={this.dataChannelEditors[i]}
151-
152-
expanded={false}
153-
collapsed={!!this.streamCardState[dataChannel.id]?.collapsed}
154-
onCollapseToggled={this.toggleCollapse.bind(this, dataChannel.id)}
155-
onExpandToggled={this.expandStream.bind(this, dataChannel.id)}
156-
ariaLabel='RTC Data Messages Section'
157-
/>
158-
)
159-
}
160-
161-
{ this.dataChannelEditors.map((node, i) =>
162-
<portals.InPortal key={i} node={node}>
163-
<SelfSizedEditor
164-
contentId={null}
165-
/>
166-
</portals.InPortal>
167-
)}
168-
</PaneScrollContainer>
169-
</PaneOuterContainer>;
105+
return <PaneScrollContainer>
106+
<RTCConnectionCard
107+
{...uiStore!.viewCardProps.rtcConnection}
108+
connection={connection}
109+
/>
110+
<SDPCard
111+
{...offerCardProps}
112+
connection={connection}
113+
type={locallyInitiated ? 'local' : 'remote'}
114+
sessionDescription={offerDescription}
115+
editorNode={offerEditor}
116+
/>
117+
<SDPCard
118+
{...answerCardProps}
119+
connection={connection}
120+
type={locallyInitiated ? 'remote' : 'local'}
121+
sessionDescription={answerDescription}
122+
editorNode={answerEditor}
123+
/>
124+
125+
{
126+
this.mediaTracks.map((mediaTrack) =>
127+
<RTCMediaCard
128+
// Link the key to the track, to ensure selected-message state gets
129+
// reset when we switch between traffic:
130+
key={mediaTrack.id}
131+
132+
mediaTrack={mediaTrack}
133+
134+
expanded={false}
135+
collapsed={!!this.streamCardState[mediaTrack.id]?.collapsed}
136+
onCollapseToggled={this.toggleCollapse.bind(this, mediaTrack.id)}
137+
onExpandToggled={this.expandStream.bind(this, mediaTrack.id)}
138+
ariaLabel='RTC Media Stream Section'
139+
/>
140+
)
141+
}
142+
143+
{
144+
this.dataChannels.map((dataChannel, i) =>
145+
<RTCDataChannelCard
146+
key={dataChannel.id}
147+
dataChannel={dataChannel}
148+
isPaidUser={accountStore!.isPaidUser}
149+
streamMessageEditor={this.dataChannelEditors[i]}
150+
151+
expanded={false}
152+
collapsed={!!this.streamCardState[dataChannel.id]?.collapsed}
153+
onCollapseToggled={this.toggleCollapse.bind(this, dataChannel.id)}
154+
onExpandToggled={this.expandStream.bind(this, dataChannel.id)}
155+
ariaLabel='RTC Data Messages Section'
156+
/>
157+
)
158+
}
159+
160+
{ this.dataChannelEditors.map((node, i) =>
161+
<portals.InPortal key={i} node={node}>
162+
<SelfSizedEditor
163+
contentId={null}
164+
/>
165+
</portals.InPortal>
166+
)}
167+
</PaneScrollContainer>;
170168
}
171169

172170
}

‎src/components/view/rtc/rtc-data-channel-details-pane.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import * as portals from 'react-reverse-portal';
1212
import { AccountStore } from '../../../model/account/account-store';
1313
import { RTCDataChannel } from '../../../model/webrtc/rtc-data-channel';
1414

15-
import { PaneOuterContainer } from '../view-details-pane';
1615
import { SelfSizedEditor } from '../../editor/base-editor';
1716
import { RTCDataChannelCard } from './rtc-data-channel-card';
1817
import { RTCConnectionHeader } from './rtc-connection-header';
@@ -49,7 +48,7 @@ export class RTCDataChannelDetailsPane extends React.Component<{
4948
accountStore
5049
} = this.props;
5150

52-
return <PaneOuterContainer>
51+
return <>
5352
{ !this.isConnectionHidden &&
5453
<RTCConnectionHeader
5554
connection={dataChannel.rtcConnection}
@@ -68,7 +67,7 @@ export class RTCDataChannelDetailsPane extends React.Component<{
6867
onCollapseToggled={undefined} // Hide the collapse button
6968
ariaLabel='RTC Data Messages Section'
7069
/>
71-
</PaneOuterContainer>;
70+
</>;
7271

7372
}
7473

‎src/components/view/rtc/rtc-media-details-pane.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { observer } from 'mobx-react';
1010

1111
import { RTCMediaTrack } from '../../../model/webrtc/rtc-media-track';
1212

13-
import { PaneOuterContainer } from '../view-details-pane';
1413
import { RTCMediaCard } from './rtc-media-card';
1514
import { RTCConnectionHeader } from './rtc-connection-header';
1615

@@ -38,7 +37,7 @@ export class RTCMediaDetailsPane extends React.Component<{
3837
mediaTrack
3938
} = this.props;
4039

41-
return <PaneOuterContainer>
40+
return <>
4241
{ !this.isConnectionHidden &&
4342
<RTCConnectionHeader
4443
connection={mediaTrack.rtcConnection}
@@ -59,7 +58,7 @@ export class RTCMediaDetailsPane extends React.Component<{
5958

6059
mediaTrack={mediaTrack}
6160
/>
62-
</PaneOuterContainer>;
61+
</>;
6362

6463
}
6564

0 commit comments

Comments
 (0)