From 38c4e0b26346f00cd9bd452b177902bee01b8658 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Fri, 2 Jul 2021 18:34:10 +0530 Subject: [PATCH] Feature (Dom Inspector) (#55) * feat(ui) - inspector element tooltip * fix(ui) - inspector element selection * fix(ui) - tooltip colors * fix(ui) - close inspector --- .../BugFinder/SessionList/SessionList.js | 2 +- .../FunnelSessionList/FunnelSessionList.js | 2 +- .../EventsBlock/Metadata/SessionList.js | 2 +- .../Session_/Player/Controls/Controls.js | 11 ++++--- .../ui/SideMenuitem/SideMenuitem.js | 2 +- .../StatedScreen/Screen/BaseScreen.ts | 12 ++++++- .../StatedScreen/Screen/Inspector.js | 5 +-- .../StatedScreen/Screen/Marker.js | 33 +++++++++++++++++++ .../StatedScreen/Screen/Screen.ts | 6 ++-- .../StatedScreen/Screen/marker.css | 29 +++++++++++++++- .../StatedScreen/Screen/screen.css | 2 +- 11 files changed, 90 insertions(+), 16 deletions(-) diff --git a/frontend/app/components/BugFinder/SessionList/SessionList.js b/frontend/app/components/BugFinder/SessionList/SessionList.js index 13ddf9baa..d048c75ae 100644 --- a/frontend/app/components/BugFinder/SessionList/SessionList.js +++ b/frontend/app/components/BugFinder/SessionList/SessionList.js @@ -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; diff --git a/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js b/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js index 191c7821b..3aef18003 100644 --- a/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js +++ b/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js @@ -20,7 +20,7 @@ function FunnelSessionList(props) {
{ 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