jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feature (Dom Inspector) (#55)

Browse source 
* feat(ui) - inspector element tooltip

* fix(ui) - inspector element selection

* fix(ui) - tooltip colors

* fix(ui) - close inspector
This commit is contained in:
Shekar Siri 2021-07-02 18:34:10 +05:30 • committed by GitHub
parent c6e2bab90f
commit 38c4e0b263
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 90 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/BugFinder/SessionList/SessionList.js
View file

@ -48,7 +48,7 @@ export default class SessionList extends React.PureComponent {
}
getNoContentMessage = activeTab => {
let str = "No Sessions Found";
let str = "No recordings found";
if (activeTab.type !== 'all') {
str += ' with ' + activeTab.name;
return str;

2
frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js
View file

@ -20,7 +20,7 @@ function FunnelSessionList(props) {
<FunnelSessionsHeader sessionsCount={inDetails ? sessionsTotal : list.size} inDetails={inDetails} />
<div className="mb-4" />
<NoContent
title="No Sessions Found!"
title="No recordings found!"
subtext="Please try changing your search parameters."
icon="exclamation-circle"
show={ list.size === 0}

2
frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js
View file

@ -27,7 +27,7 @@ class SessionList extends React.PureComponent {
<Loader loading={ loading }>
<NoContent
show={ !loading && (similarSessionWithoutCurrent.length === 0 || similarSessionWithoutCurrent.size === 0 )}
title="No sessions found."
title="No recordings found."
>
<div className={ stl.sessionList }>
{ similarSessionWithoutCurrent.map(site => (

11
frontend/app/components/Session_/Player/Controls/Controls.js
View file

@ -8,6 +8,7 @@ import {
} from 'Player/store';
import { Popup, Icon } from 'UI';
import { toggleInspectorMode } from 'Player';
import {
fullscreenOn,
fullscreenOff,
@ -72,6 +73,7 @@ function getStorageName(type) {
skipToIssue: state.skipToIssue,
speed: state.speed,
disabled: state.cssLoading || state.messagesLoading || state.inspectorMode,
inspectorMode: state.inspectorMode,
fullscreenDisabled: state.messagesLoading,
logCount: state.logListNow.length,
logRedCount: state.logRedCountNow,
@ -246,10 +248,11 @@ export default class Controls extends React.Component {
exceptionsCount,
showExceptions,
fullscreen,
skipToIssue
skipToIssue,
inspectorMode
} = this.props;
const inspectorMode = bottomBlock === INSPECTOR;
// const inspectorMode = bottomBlock === INSPECTOR;
return (
<div className={ styles.controls }>
@ -419,9 +422,9 @@ export default class Controls extends React.Component {
}
<ControlButton
disabled={ disabled && !inspectorMode }
// disabled={ disabled && !inspectorMode }
active={ bottomBlock === INSPECTOR }
onClick={ () => toggleBottomBlock(INSPECTOR) }
onClick={ toggleInspectorMode }
icon={ inspectorMode ? 'close' : 'inspect' }
label="Inspect"
/>

2
frontend/app/components/ui/SideMenuitem/SideMenuitem.js
View file

@ -30,7 +30,7 @@ function SideMenuitem({ iconBg = false, iconColor = "gray-dark", iconSize = 18,
</div>
}
disabled={ !disabled }
content={ 'No Sessions' }
content={ 'No recordings' }
size="tiny"
inverted
position="left center"

12
frontend/app/player/MessageDistributor/StatedScreen/Screen/BaseScreen.ts
View file

@ -30,11 +30,21 @@ export default class BaseScreen {
this.overlay = overlay;
const screen = document.createElement('div');
setTimeout(function() {
iframe.contentDocument?.addEventListener('mousemove', function() {
overlay.style.display = 'block';
})
overlay.addEventListener('contextmenu', function() {
overlay.style.display = 'none';
})
}, 10)
screen.className = styles.screen;
screen.appendChild(iframe);
screen.appendChild(overlay);
this._screen = screen;
}
attach(parentElement: HTMLElement) {

5
frontend/app/player/MessageDistributor/StatedScreen/Screen/Inspector.js
View file

@ -9,7 +9,7 @@ export default class Inspector {
this.marker = marker;
}
_onMouseMove = (e) => {
_onMouseMove = (e) => {
// const { overlay } = this.screen;
// if (!overlay.contains(e.target)) {
// return;
@ -21,7 +21,8 @@ export default class Inspector {
if (target === this.marker.target) {
return;
}
this.marker.mark(target);
this.marker.mark(target);
}
_onOverlayLeave = () => {

33
frontend/app/player/MessageDistributor/StatedScreen/Screen/Marker.js
View file

@ -3,10 +3,20 @@ import styles from './marker.css';
export default class Marker {
_target = null;
_selector = null;
_tooltip = null;
constructor(overlay, screen) {
this.screen = screen;
this._tooltip = document.createElement('div')
this._tooltip.className = styles.tooltip;
this._tooltip.appendChild(document.createElement('div'))
const htmlStr = document.createElement('div')
htmlStr.innerHTML = "<b>Right-click \> Inspect</b> for more details."
this._tooltip.appendChild(htmlStr)
const marker = document.createElement('div');
marker.className = styles.marker;
const markerL = document.createElement('div');
@ -21,6 +31,8 @@ export default class Marker {
marker.appendChild(markerR);
marker.appendChild(markerT);
marker.appendChild(markerB);
marker.appendChild(this._tooltip)
overlay.appendChild(marker);
this._marker = marker;
@ -72,6 +84,25 @@ export default class Marker {
this.redraw();
}
getTagString(tag) {
const attrs = tag.attributes
let str = `<span style="color:#9BBBDC">${tag.tagName.toLowerCase()}</span>`
for (let i = 0; i < attrs.length; i++) {
let k = attrs[i]
const attribute = k.name
if (attribute === 'class') {
str += `<span style="color:#F29766">${'.' + k.value.split(' ').join('.')}</span>`
}
if (attribute === 'id') {
str += `<span style="color:#F29766">${'#' + k.value.split(' ').join('#')}</span>`
}
}
return str;
}
redraw() {
if (this._selector) {
this._autodefineTarget();
@ -86,6 +117,8 @@ export default class Marker {
this._marker.style.top = rect.top + 'px';
this._marker.style.width = rect.width + 'px';
this._marker.style.height = rect.height + 'px';
this._tooltip.firstChild.innerHTML = this.getTagString(this._target);
}
}

6
frontend/app/player/MessageDistributor/StatedScreen/Screen/Screen.ts
View file

@ -39,8 +39,8 @@ export default class Screen extends BaseScreen {
this.marker = new Marker(this.substitutor.overlay, this.substitutor);
this.inspector = new Inspector(this.substitutor, this.marker);
//this.inspector.addClickListener(clickCallback, true);
this.substitutor.attach(this.parentElement);
}
this.substitutor.attach(this.parentElement);
}
this.substitutor.display(false);
@ -67,7 +67,7 @@ export default class Screen extends BaseScreen {
this.substitutor.display(true);
return doc;
}
disableInspector() {
if (this.substitutor) {
const doc = this.substitutor.document;

29
frontend/app/player/MessageDistributor/StatedScreen/Screen/marker.css
View file

@ -2,8 +2,9 @@
display: none;
position: absolute;
background: rgba(40, 40, 100, .3);
pointer-events: none;
}
.marker div {
.marker div:not(.tooltip, .tooltip > div) {
position: absolute;
background-image: linear-gradient(45deg, #00d 25%, #fff 25%, #fff 75%, #00d 75%, #00d),
linear-gradient(45deg, #00d 25%, #fff 25%, #fff 75%, #00d 75%, #00d);
@ -32,4 +33,30 @@
left: -100vw;
right: -100vw;
height: 1px;
}
.tooltip {
position: absolute;
left: 0;
bottom: 100%;
padding: 15px;
box-shadow: 2px 2px 1px rgba(40, 40, 100, .3);
z-index: 999;
border-radius: 3px;
background-color: #202124;
min-width: 400px;
font-size: 20px !important;
& div:first-child {
max-width: 600px;
height: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& div:last-child {
font-size: 18px;
margin-top: 10px;
color: $tealx;
}
}

2
frontend/app/player/MessageDistributor/StatedScreen/Screen/screen.css
View file

@ -16,5 +16,5 @@
left: 0;
right: 0;
bottom: 0;
z-index: 10;
z-index: 10;
}