{ similarSessionWithoutCurrent.map(site => (
diff --git a/frontend/app/components/Session_/Player/Controls/Controls.js b/frontend/app/components/Session_/Player/Controls/Controls.js
index 880a05402..2be999282 100644
--- a/frontend/app/components/Session_/Player/Controls/Controls.js
+++ b/frontend/app/components/Session_/Player/Controls/Controls.js
@@ -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 (
@@ -419,9 +422,9 @@ export default class Controls extends React.Component {
}
toggleBottomBlock(INSPECTOR) }
+ onClick={ toggleInspectorMode }
icon={ inspectorMode ? 'close' : 'inspect' }
label="Inspect"
/>
diff --git a/frontend/app/components/ui/SideMenuitem/SideMenuitem.js b/frontend/app/components/ui/SideMenuitem/SideMenuitem.js
index 24720e785..f1649934b 100644
--- a/frontend/app/components/ui/SideMenuitem/SideMenuitem.js
+++ b/frontend/app/components/ui/SideMenuitem/SideMenuitem.js
@@ -30,7 +30,7 @@ function SideMenuitem({ iconBg = false, iconColor = "gray-dark", iconSize = 18,
}
disabled={ !disabled }
- content={ 'No Sessions' }
+ content={ 'No recordings' }
size="tiny"
inverted
position="left center"
diff --git a/frontend/app/player/MessageDistributor/StatedScreen/Screen/BaseScreen.ts b/frontend/app/player/MessageDistributor/StatedScreen/Screen/BaseScreen.ts
index 6801e0c42..e7392c252 100644
--- a/frontend/app/player/MessageDistributor/StatedScreen/Screen/BaseScreen.ts
+++ b/frontend/app/player/MessageDistributor/StatedScreen/Screen/BaseScreen.ts
@@ -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) {
diff --git a/frontend/app/player/MessageDistributor/StatedScreen/Screen/Inspector.js b/frontend/app/player/MessageDistributor/StatedScreen/Screen/Inspector.js
index e6014853f..98ba5ec0f 100644
--- a/frontend/app/player/MessageDistributor/StatedScreen/Screen/Inspector.js
+++ b/frontend/app/player/MessageDistributor/StatedScreen/Screen/Inspector.js
@@ -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 = () => {
diff --git a/frontend/app/player/MessageDistributor/StatedScreen/Screen/Marker.js b/frontend/app/player/MessageDistributor/StatedScreen/Screen/Marker.js
index 3670021ed..68e0489a8 100644
--- a/frontend/app/player/MessageDistributor/StatedScreen/Screen/Marker.js
+++ b/frontend/app/player/MessageDistributor/StatedScreen/Screen/Marker.js
@@ -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 = "
Right-click \> Inspect 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 = `
${tag.tagName.toLowerCase()}`
+
+ for (let i = 0; i < attrs.length; i++) {
+ let k = attrs[i]
+ const attribute = k.name
+ if (attribute === 'class') {
+ str += `
${'.' + k.value.split(' ').join('.')}`
+ }
+
+ if (attribute === 'id') {
+ str += `
${'#' + k.value.split(' ').join('#')}`
+ }
+ }
+
+ 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);
}
}
\ No newline at end of file
diff --git a/frontend/app/player/MessageDistributor/StatedScreen/Screen/Screen.ts b/frontend/app/player/MessageDistributor/StatedScreen/Screen/Screen.ts
index 91b789ac1..730abce16 100644
--- a/frontend/app/player/MessageDistributor/StatedScreen/Screen/Screen.ts
+++ b/frontend/app/player/MessageDistributor/StatedScreen/Screen/Screen.ts
@@ -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;
diff --git a/frontend/app/player/MessageDistributor/StatedScreen/Screen/marker.css b/frontend/app/player/MessageDistributor/StatedScreen/Screen/marker.css
index 31843c212..fe88efc9e 100644
--- a/frontend/app/player/MessageDistributor/StatedScreen/Screen/marker.css
+++ b/frontend/app/player/MessageDistributor/StatedScreen/Screen/marker.css
@@ -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;
+ }
}
\ No newline at end of file
diff --git a/frontend/app/player/MessageDistributor/StatedScreen/Screen/screen.css b/frontend/app/player/MessageDistributor/StatedScreen/Screen/screen.css
index c4ff803b7..5c6385dd1 100644
--- a/frontend/app/player/MessageDistributor/StatedScreen/Screen/screen.css
+++ b/frontend/app/player/MessageDistributor/StatedScreen/Screen/screen.css
@@ -16,5 +16,5 @@
left: 0;
right: 0;
bottom: 0;
- z-index: 10;
+ z-index: 10;
}
\ No newline at end of file