Mirrors/responsively-app
2
0
Fork 0
mirror of https://github.com/responsively-org/responsively-app synced 2024-09-20 22:31:59 +00:00
Code Issues Projects Releases Packages Wiki Activity

Universal inspector added

Browse source
This commit is contained in:
Manoj Vivek 2019-08-27 22:28:05 +05:30
parent ec83e23019
commit 9965ee6ae2
8 changed files with 188 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
desktop-app/app/actions/browser.js
View file

@ -9,6 +9,7 @@ import {
NAVIGATION_RELOAD,
SCREENSHOT_ALL_DEVICES,
FLIP_ORIENTATION_ALL_DEVICES,
ENABLE_INSPECTOR_ALL_DEVICES,
} from '../constants/pubsubEvents';
export const NEW_ADDRESS = 'NEW_ADDRESS';
@ -213,6 +214,13 @@ export function flipOrientationAllDevices() {
};
}
export function enableInpector() {
return (dispatch: Dispatch, getState: RootStateType) => {
console.log('enableInpector');
pubsub.publish(ENABLE_INSPECTOR_ALL_DEVICES);
};
}
export function triggerScrollUp() {
return (dispatch: Dispatch, getState: RootStateType) => {
pubsub.publish(SCROLL_UP);

6
desktop-app/app/components/ScrollControls/index.js
View file

@ -6,6 +6,7 @@ import ScrollDownIcon from '../icons/ScrollDown';
import ScrollUpIcon from '../icons/ScrollUp';
import ScreenshotIcon from '../icons/Screenshot';
import DeviceRotateIcon from '../icons/DeviceRotate';
import InspectElementIcon from '../icons/InspectElement';
import styles from './styles.module.css';
import commonStyles from '../common.styles.css';
@ -42,6 +43,11 @@ class ScrollControls extends Component {
<DeviceRotateIcon {...iconProps} />
</div>
</Grid>
<Grid item className={cx(commonStyles.icons, commonStyles.enabled)}>
<div onClick={this.props.enableInpector}>
<InspectElementIcon {...iconProps} />
</div>
</Grid>
</Grid>
</div>
);

118
desktop-app/app/components/WebView/index.js
View file

@ -25,6 +25,8 @@ import {
NAVIGATION_RELOAD,
SCREENSHOT_ALL_DEVICES,
FLIP_ORIENTATION_ALL_DEVICES,
ENABLE_INSPECTOR_ALL_DEVICES,
DISABLE_INSPECTOR_ALL_DEVICES,
} from '../../constants/pubsubEvents';
const mergeImg = Promise.promisifyAll(_mergeImg);
@ -33,6 +35,8 @@ const BrowserWindow = remote.BrowserWindow;
const MESSAGE_TYPES = {
scroll: 'scroll',
click: 'click',
openDevToolsInspector: 'openDevToolsInspector',
disableInspector: 'disableInspector',
};
class WebView extends Component {
@ -62,6 +66,14 @@ class WebView extends Component {
FLIP_ORIENTATION_ALL_DEVICES,
this.processFlipOrientationEvent
);
pubsub.subscribe(
ENABLE_INSPECTOR_ALL_DEVICES,
this.processEnableInspectorEvent
);
pubsub.subscribe(
DISABLE_INSPECTOR_ALL_DEVICES,
this.processDisableInspectorEvent
);
this.webviewRef.current.addEventListener('dom-ready', () => {
this.initEventTriggers(this.webviewRef.current);
@ -104,11 +116,11 @@ class WebView extends Component {
});
this.webviewRef.current.addEventListener('devtools-opened', () => {
this.webviewRef.current
/*this.webviewRef.current
.getWebContents()
.devToolsWebContents.executeJavaScript(
'DevToolsAPI.enterInspectElementMode()'
);
);*/
});
}
@ -155,6 +167,33 @@ class WebView extends Component {
this._flipOrientation();
};
processOpenDevToolsInspectorEvent = message => {
console.log('inspectElement', message, this.props.browser.zoomLevel);
const {
x: webViewX,
y: webViewY,
} = this.webviewRef.current.getBoundingClientRect();
const {x: deviceX, y: deviceY} = message;
const zoomFactor = this.props.browser.zoomLevel;
this.webviewRef.current
.getWebContents()
.inspectElement(
Math.round(webViewX + deviceX * zoomFactor),
Math.round(webViewY + deviceY * zoomFactor)
);
};
processEnableInspectorEvent = () => {
this.webviewRef.current.send('enableInspectorMessage');
};
processDisableInspectorEvent = message => {
if (message.sourceDeviceId === this.props.device.id) {
return;
}
this.webviewRef.current.send('disableInspectorMessage');
};
messageHandler = ({channel: type, args: [message]}) => {
console.log('Message recieved', message);
switch (type) {
@ -164,49 +203,82 @@ class WebView extends Component {
case MESSAGE_TYPES.click:
pubsub.publish('click', [message]);
return;
case MESSAGE_TYPES.openDevToolsInspector:
this.processOpenDevToolsInspectorEvent(message);
return;
case MESSAGE_TYPES.disableInspector:
this.transmitDisableInspectorToAllDevices(message);
return;
}
};
transmitDisableInspectorToAllDevices = message => {
pubsub.publish(DISABLE_INSPECTOR_ALL_DEVICES, [message]);
};
initEventTriggers = webview => {
console.log('Initializing triggers');
webview.getWebContents().executeJavaScript(`
responsivelyApp.deviceId = ${this.props.device.id};
document.body.addEventListener('mouseleave', () => responsivelyApp.mouseOn = false)
document.body.addEventListener('mouseenter', () => responsivelyApp.mouseOn = true)
responsivelyApp.domInspector = new responsivelyApp.DomInspector();
document.body.addEventListener('mouseleave', () => {
window.responsivelyApp.mouseOn = false;
if (responsivelyApp.domInspectorEnabled) {
responsivelyApp.domInspector.disable();
}
});
document.body.addEventListener('mouseenter', () => {
responsivelyApp.mouseOn = true;
if (responsivelyApp.domInspectorEnabled) {
responsivelyApp.domInspector.enable();
}
});
window.addEventListener('scroll', (e) => {
if (!responsivelyApp.mouseOn) {
return;
}
window.responsivelyApp.sendMessageToHost(
'${MESSAGE_TYPES.scroll}',
'${MESSAGE_TYPES.scroll}',
{
sourceDeviceId: window.responsivelyApp.deviceId,
position: {x: window.scrollX, y: window.scrollY},
}
);
});
document.addEventListener(
'click',
(e) => {
if (e.target === window.responsivelyApp.lastClickElement || e.responsivelyAppProcessed) {
window.responsivelyApp.lastClickElement = null;
e.responsivelyAppProcessed = true;
return;
}
document.addEventListener(
'click',
(e) => {
if (e.target === window.responsivelyApp.lastClickElement || e.responsivelyAppProcessed) {
window.responsivelyApp.lastClickElement = null;
e.responsivelyAppProcessed = true;
console.log('clicked', e);
return;
}
if (window.responsivelyApp.domInspectorEnabled) {
e.preventDefault();
window.responsivelyApp.domInspector.disable();
window.responsivelyApp.domInspectorEnabled = false;
const targetRect = e.target.getBoundingClientRect();
window.responsivelyApp.sendMessageToHost(
'${MESSAGE_TYPES.click}',
{
sourceDeviceId: window.responsivelyApp.deviceId,
cssPath: window.responsivelyApp.cssPath(e.target),
}
'${MESSAGE_TYPES.disableInspector}'
);
},
true
);
window.responsivelyApp.sendMessageToHost(
'${MESSAGE_TYPES.openDevToolsInspector}',
{x: targetRect.left, y: targetRect.top}
);
return;
}
e.responsivelyAppProcessed = true;
console.log('clicked', e);
window.responsivelyApp.sendMessageToHost(
'${MESSAGE_TYPES.click}',
{
cssPath: window.responsivelyApp.cssPath(e.target),
}
);
},
true
);
`);
};

48
desktop-app/app/components/icons/InspectElement.js Normal file
View file

@ -0,0 +1,48 @@
import React, {Fragment} from 'react';
export default ({width, height, color, padding}) => (
<Fragment>
<svg
height={height}
width={width}
fill={color}
style={{padding}}
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="563.5 323.5 162.599 156.526"
>
<path
d=" M 595 340 L 665 340 C 673.279 340 680 346.721 680 355 L 680 425 C 680 433.279 673.279 440 665 440 L 595 440 C 586.721 440 580 433.279 580 425 L 580 355 C 580 346.721 586.721 340 595 340 Z "
vectorEffect="non-scaling-stroke"
strokeWidth="1"
stroke={color}
strokeLinejoin="miter"
strokeLinecap="square"
strokeMiterlimit="3"
fill="none"
/>
<g>
<path
d=" M 653.959 477.588 L 615.403 363.46 L 726.099 418.249 L 677.594 434.636 L 674.982 436.313 L 653.959 477.588 Z "
fill={'black'}
/>
<path
d=" M 720.556 460.652 L 698.492 480.026 L 638.218 412.176 L 660.996 392.561 L 720.556 460.652 Z "
fill={'black'}
/>
<rect
x="676.273"
y="411.114"
width="15.059"
height="60.236"
transform="matrix(0.75,-0.662,0.662,0.75,-120.833,563.023)"
fill={color}
/>
<path
d=" M 628.319 378.169 L 655.309 458.059 L 669.719 430.144 L 672.331 428.467 L 706.57 416.9 L 628.319 378.169 Z "
fill={color}
/>
</g>
</svg>
</Fragment>
);

2
desktop-app/app/constants/pubsubEvents.js
View file

@ -5,3 +5,5 @@ export const NAVIGATION_FORWARD = 'NAVIGATION_FORWARD';
export const NAVIGATION_RELOAD = 'NAVIGATION_RELOAD';
export const SCREENSHOT_ALL_DEVICES = 'SCREENSHOT_ALL_DEVICES';
export const FLIP_ORIENTATION_ALL_DEVICES = 'FLIP_ORIENTATION_ALL_DEVICES';
export const ENABLE_INSPECTOR_ALL_DEVICES = 'ENABLE_INSPECTOR_ALL_DEVICES';
export const DISABLE_INSPECTOR_ALL_DEVICES = 'DISABLE_INSPECTOR_ALL_DEVICES';

9
desktop-app/app/index.js
View file

@ -1,11 +1,14 @@
import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import {render} from 'react-dom';
import {AppContainer} from 'react-hot-loader';
import Root from './containers/Root';
import { configureStore, history } from './store/configureStore';
import {configureStore, history} from './store/configureStore';
import DomInspector from 'dom-inspector';
import './app.global.css';
const store = configureStore();
const domInspector = new DomInspector();
//domInspector.enable();
render(
<AppContainer>

24
desktop-app/app/preload.js
View file

@ -1,7 +1,14 @@
const {ipcRenderer} = require('electron');
console.log('Preloader');
const DomInspector = require('../lib/dom-inspector');
global.responsivelyApp = {
sendMessageToHost: (type, message) => ipcRenderer.sendToHost(type, message),
sendMessageToHost: (type, message) => {
if (!message) {
message = {};
}
message.sourceDeviceId = window.responsivelyApp.deviceId;
ipcRenderer.sendToHost(type, message);
},
cssPath: el => {
if (!(el instanceof Element)) return;
var path = [];
@ -30,6 +37,7 @@ global.responsivelyApp = {
el.dispatchEvent(evObj);
}
},
DomInspector: DomInspector,
};
ipcRenderer.on('scrollMessage', (event, args) => {
@ -72,3 +80,15 @@ ipcRenderer.on('scrollUpMessage', (event, args) => {
behavior: 'smooth',
});
});
ipcRenderer.on('enableInspectorMessage', (event, args) => {
console.log('Recieved enableInpector message from host', event, args);
window.responsivelyApp.domInspector.enable();
window.responsivelyApp.domInspectorEnabled = true;
});
ipcRenderer.on('disableInspectorMessage', (event, args) => {
console.log('Recieved disableInspector message from host', event, args);
window.responsivelyApp.domInspector.disable();
window.responsivelyApp.domInspectorEnabled = false;
});

1
desktop-app/resources/inspect-element.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="563.5 323.5 162.599 156.526" width="162.599pt" height="156.526pt"><path d=" M 595 340 L 665 340 C 673.279 340 680 346.721 680 355 L 680 425 C 680 433.279 673.279 440 665 440 L 595 440 C 586.721 440 580 433.279 580 425 L 580 355 C 580 346.721 586.721 340 595 340 Z " fill="none" vector-effect="non-scaling-stroke" stroke-width="11" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><g><path d=" M 653.959 477.588 L 615.403 363.46 L 726.099 418.249 L 677.594 434.636 L 674.982 436.313 L 653.959 477.588 Z " fill="rgb(255,255,255)"/><path d=" M 720.556 460.652 L 698.492 480.026 L 638.218 412.176 L 660.996 392.561 L 720.556 460.652 Z " fill="rgb(255,255,255)"/><rect x="676.273" y="411.114" width="15.059" height="60.236" transform="matrix(0.75,-0.662,0.662,0.75,-120.833,563.023)" fill="rgb(0,0,0)"/><path d=" M 628.319 378.169 L 655.309 458.059 L 669.719 430.144 L 672.331 428.467 L 706.57 416.9 L 628.319 378.169 Z " fill="rgb(0,0,0)"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB