8 | {props.spinner && (
9 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/desktop-app/app/containers/DrawerContainer/index.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React from 'react';
3 | import {connect} from 'react-redux';
4 | import {bindActionCreators} from 'redux';
5 |
6 | import Drawer from '../../components/Drawer';
7 | import * as BrowserActions from '../../actions/browser';
8 |
9 | function mapStateToProps(state) {
10 | return {
11 | drawer: state.browser.drawer,
12 | };
13 | }
14 |
15 | function mapDispatchToProps(dispatch) {
16 | return bindActionCreators(BrowserActions, dispatch);
17 | }
18 |
19 | export default connect(mapStateToProps, mapDispatchToProps)(Drawer);
20 |
--------------------------------------------------------------------------------
/desktop-app/scripts/notarize.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config();
2 | const {notarize} = require('electron-notarize');
3 |
4 | exports.default = async function notarizing(context) {
5 | const {electronPlatformName, appOutDir} = context;
6 | if (electronPlatformName !== 'darwin') {
7 | return;
8 | }
9 |
10 | const appName = context.packager.appInfo.productFilename;
11 |
12 | return notarize({
13 | appBundleId: 'app.responsively',
14 | appPath: `${appOutDir}/${appName}.app`,
15 | appleId: process.env.APPLEID,
16 | appleIdPassword: process.env.APPLEIDPASS,
17 | });
18 | };
19 |
--------------------------------------------------------------------------------
/dev.code-workspace:
--------------------------------------------------------------------------------
1 | {
2 | "folders": [
3 | {
4 | "path": "desktop-app"
5 | },
6 | {
7 | "path": "browser-extension"
8 | }
9 | ],
10 | "settings": {
11 | "files.associations": {
12 | ".babelrc": "jsonc",
13 | ".eslintrc": "jsonc",
14 | ".prettierrc": "jsonc",
15 | ".stylelintrc": "json",
16 | ".dockerignore": "ignore",
17 | ".eslintignore": "ignore",
18 | ".flowconfig": "ignore"
19 | },
20 | "javascript.validate.enable": false,
21 | "javascript.format.enable": false,
22 | "typescript.validate.enable": false,
23 | "typescript.format.enable": false
24 | }
25 | }
--------------------------------------------------------------------------------
/desktop-app/app/reducers/statusBar.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import {TOGGLE_STATUS_BAR_VISIBILITY} from '../actions/statusBar';
3 | import {statusBarSettings} from '../settings/statusBarSettings';
4 |
5 | export type StatusBarStateType = {visible: boolean};
6 |
7 | export default function app(
8 | state: StatusBarStateType = {visible: statusBarSettings.getVisibility()},
9 | action: Action
10 | ) {
11 | switch (action.type) {
12 | case TOGGLE_STATUS_BAR_VISIBILITY:
13 | return {
14 | ...state,
15 | visible: action.visible,
16 | };
17 | default:
18 | return state;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/desktop-app/resources/dock-bottom.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/desktop-app/app/containers/AddDeviceContainer/index.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React from 'react';
3 | import {connect} from 'react-redux';
4 | import {bindActionCreators} from 'redux';
5 |
6 | import AddDevice from '../../components/DeviceManager/AddDevice';
7 | import * as BrowserActions from '../../actions/browser';
8 |
9 | function mapStateToProps(state) {
10 | return {
11 | browser: state.browser,
12 | };
13 | }
14 |
15 | function mapDispatchToProps(dispatch) {
16 | return bindActionCreators(BrowserActions, dispatch);
17 | }
18 |
19 | export default connect(mapStateToProps, mapDispatchToProps)(AddDevice);
20 |
--------------------------------------------------------------------------------
/desktop-app/app/containers/DeviceDrawerContainer/index.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React from 'react';
3 | import {connect} from 'react-redux';
4 | import {bindActionCreators} from 'redux';
5 |
6 | import DeviceDrawer from '../../components/DeviceDrawer';
7 | import * as BrowserActions from '../../actions/browser';
8 |
9 | function mapStateToProps(state) {
10 | return {
11 | browser: state.browser,
12 | };
13 | }
14 |
15 | function mapDispatchToProps(dispatch) {
16 | return bindActionCreators(BrowserActions, dispatch);
17 | }
18 |
19 | export default connect(mapStateToProps, mapDispatchToProps)(DeviceDrawer);
20 |
--------------------------------------------------------------------------------
/desktop-app/app/containers/DeviceManagerContainer/index.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React from 'react';
3 | import {connect} from 'react-redux';
4 | import {bindActionCreators} from 'redux';
5 |
6 | import DeviceManager from '../../components/DeviceManager';
7 | import * as BrowserActions from '../../actions/browser';
8 |
9 | function mapStateToProps(state) {
10 | return {
11 | browser: state.browser,
12 | };
13 | }
14 |
15 | function mapDispatchToProps(dispatch) {
16 | return bindActionCreators(BrowserActions, dispatch);
17 | }
18 |
19 | export default connect(mapStateToProps, mapDispatchToProps)(DeviceManager);
20 |
--------------------------------------------------------------------------------
/desktop-app/app/containers/DevicePreviewerContainer/index.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React from 'react';
3 | import {bindActionCreators} from 'redux';
4 | import {connect} from 'react-redux';
5 | import DevicesPreviewer from '../../components/DevicesPreviewer';
6 | import * as BrowserActions from '../../actions/browser';
7 |
8 | function mapStateToProps(state) {
9 | return {
10 | browser: state.browser,
11 | };
12 | }
13 |
14 | function mapDispatchToProps(dispatch) {
15 | return bindActionCreators(BrowserActions, dispatch);
16 | }
17 |
18 | export default connect(mapStateToProps, mapDispatchToProps)(DevicesPreviewer);
19 |
--------------------------------------------------------------------------------
/desktop-app/app/containers/ScrollControlsContainer/index.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React from 'react';
3 | import {connect} from 'react-redux';
4 | import {bindActionCreators} from 'redux';
5 |
6 | import ScrollControls from '../../components/ScrollControls';
7 | import * as BrowserActions from '../../actions/browser';
8 |
9 | function mapStateToProps(state) {
10 | return {
11 | browser: state.browser,
12 | };
13 | }
14 |
15 | function mapDispatchToProps(dispatch) {
16 | return bindActionCreators(BrowserActions, dispatch);
17 | }
18 |
19 | export default connect(mapStateToProps, mapDispatchToProps)(ScrollControls);
20 |
--------------------------------------------------------------------------------
/desktop-app/app/reducers/types.js:
--------------------------------------------------------------------------------
1 | import type {Dispatch as ReduxDispatch, Store as ReduxStore} from 'redux';
2 | import type {BrowserStateType as _BrowserStateType} from './browser';
3 |
4 | export type BrowserStateType = _BrowserStateType;
5 |
6 | export type counterStateType = {
7 | +counter: number,
8 | };
9 |
10 | export type RootStateType = {
11 | browser: BrowserStateType,
12 | };
13 |
14 | export type Action = {
15 | +type: string,
16 | };
17 |
18 | export type GetState = () => RootStateType;
19 |
20 | export type Dispatch = ReduxDispatch
10 |
12 | )}
13 | {props.tick && (
14 |
15 |
17 | )}
18 | {props.message}
19 |
19 | setPreviewLayout(val.value)}
23 | />
24 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/desktop-app/app/containers/DevToolResizerContainer/index.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React, {useEffect} from 'react';
3 | import {connect} from 'react-redux';
4 | import {bindActionCreators} from 'redux';
5 |
6 | import DevToolsResizer from '../../components/DevToolsResizer';
7 | import * as BrowserActions from '../../actions/browser';
8 | import {useMediaQuery} from '@material-ui/core';
9 | import {DARK_THEME} from '../../constants/theme';
10 |
11 | const Component = props => {
12 | const isDarkTheme = useMediaQuery(`(prefers-color-scheme: ${DARK_THEME})`);
13 | return
30 |
31 |
36 |
37 |
12 |
27 | );
28 | }
29 |
30 | export default ClearNetworkCache;
31 |
--------------------------------------------------------------------------------
/desktop-app/.flowconfig:
--------------------------------------------------------------------------------
1 | [ignore]
2 |
13 |
15 |
16 |
25 |
26 | shell.openExternal(data.link)}
30 | >
31 |
32 | {data.text}
33 |
34 |
35 | );
36 | };
37 |
38 | export default Announcement;
39 |
--------------------------------------------------------------------------------
/desktop-app/app/components/icons/Layout.js:
--------------------------------------------------------------------------------
1 | import React, {Fragment} from 'react';
2 |
3 | export default ({width, height, color, padding, margin}) => (
4 |
20 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/desktop-app/app/components/PrefersColorSchemeSwitch/index.js:
--------------------------------------------------------------------------------
1 | import React, {useState, useEffect} from 'react';
2 | import {ipcRenderer} from 'electron';
3 | import Tooltip from '@material-ui/core/Tooltip';
4 | import LightColorSchemeIcon from '../icons/LightColorScheme';
5 | import DarkColorSchemeIcon from '../icons/DarkColorScheme';
6 |
7 | export default function PrefersColorSchemeSwitch({iconProps}) {
8 | const [colorScheme, setColorScheme] = useState(
9 | window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
10 | );
11 |
12 | const handleSwitch = () => {
13 | setColorScheme(colorScheme === 'dark' ? 'light' : 'dark');
14 | };
15 |
16 | useEffect(() => {
17 | ipcRenderer.send('prefers-color-scheme-select', colorScheme);
18 | }, [colorScheme]);
19 |
20 | return (
21 |
23 | {colorScheme === 'dark' ? (
24 |
29 |
27 |
44 | );
45 | }
46 |
--------------------------------------------------------------------------------
/desktop-app/app/components/DevicesPreviewer/useStyles.js:
--------------------------------------------------------------------------------
1 | import {makeStyles} from '@material-ui/core/styles';
2 |
3 | const useStyles = makeStyles(theme => ({
4 | container: {
5 | display: 'flex',
6 | flex: '1',
7 | height: '100%',
8 | width: '100%',
9 | overflow: 'auto',
10 | flexDirection: 'column',
11 | },
12 | flexigrid: {
13 | flexWrap: 'wrap',
14 | },
15 | horizontal: {
16 | flexWrap: 'nowrap',
17 | },
18 | devicesContainer: {
19 | display: 'flex',
20 | paddingBottom: '100px',
21 | },
22 | tab: {
23 | display: 'none',
24 | margin: 'auto',
25 | },
26 | activeTab: {
27 | display: 'block',
28 | },
29 | reactTabs: {
30 | position: 'sticky',
31 | left: 0,
32 | top: 0,
33 | marginBottom: '10px',
34 | zIndex: '4',
35 | backgroundColor: theme.palette.background.l0,
36 | },
37 | reactTabs__tab: {
38 | display: 'flex',
39 | alignItems: 'center',
40 | flexShrink: 0,
41 | bottom: 'unset',
42 | border: '1px solid #aaa',
43 | borderRadius: '5px 5px 0 0',
44 | },
45 | reactTabs__tabList: {
46 | display: 'flex',
47 | marginBottom: 0,
48 | overflow: 'auto',
49 | },
50 | }));
51 |
52 | export default useStyles;
53 |
--------------------------------------------------------------------------------
/desktop-app/resources/cross-thin.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
45 |
--------------------------------------------------------------------------------
/desktop-app/scripts/chocolatey/responsively/tools/chocolateyuninstall.ps1:
--------------------------------------------------------------------------------
1 | $ErrorActionPreference = 'Stop';
2 | $packageArgs = @{
3 | packageName = $env:ChocolateyPackageName
4 | softwareName = 'responsively*'
5 | fileType = 'EXE'
6 | silentArgs = "/S"
7 | validExitCodes= @(0, 3010, 1605, 1614, 1641)
8 | }
9 |
10 | $uninstalled = $false
11 | [array]$key = Get-UninstallRegistryKey -SoftwareName $packageArgs['softwareName']
12 |
13 | if ($key.Count -eq 1) {
14 | $key | % {
15 | $packageArgs['file'] = "$($_.UninstallString)"
16 |
17 | if ($packageArgs['fileType'] -eq 'MSI') {
18 | $packageArgs['silentArgs'] = "$($_.PSChildName) $($packageArgs['silentArgs'])"
19 | $packageArgs['file'] = ''
20 | } else {
21 |
22 | }
23 |
24 | Uninstall-ChocolateyPackage @packageArgs
25 | }
26 | } elseif ($key.Count -eq 0) {
27 | Write-Warning "$packageName has already been uninstalled by other means."
28 | } elseif ($key.Count -gt 1) {
29 | Write-Warning "$($key.Count) matches found!"
30 | Write-Warning "To prevent accidental data loss, no programs will be uninstalled."
31 | Write-Warning "Please alert package maintainer the following keys were matched:"
32 | $key | % {Write-Warning "- $($_.DisplayName)"}
33 | }
34 |
--------------------------------------------------------------------------------
/desktop-app/app/components/DevicesOverview/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cx from 'classnames';
3 | import {useTheme} from '@material-ui/core/styles';
4 | import DeviceManagerContainer from '../../containers/DeviceManagerContainer';
5 | import DevicesIcon from '../icons/Devices';
6 | import useCommonStyles from '../useCommonStyles';
7 |
8 | function DevicesOverview(props) {
9 | const theme = useTheme();
10 | const commonClasses = useCommonStyles();
11 |
12 | return (
13 |
14 |
31 | );
32 | }
33 |
34 | export default DevicesOverview;
35 |
--------------------------------------------------------------------------------
/desktop-app/app/components/icons/Twitter.js:
--------------------------------------------------------------------------------
1 | import React, {Fragment} from 'react';
2 |
3 | export default function Twitter({
4 | width,
5 | height,
6 | color,
7 | padding,
8 | margin,
9 | className,
10 | }) {
11 | return (
12 |
15 |
18 |
19 |
30 |
25 | {props.browser.devices.length} active device
26 | {props.browser.devices.length !== 1 && 's'}
27 |
29 |
22 |
34 | );
35 | }
36 |
37 | const options = [
38 | {value: HORIZONTAL_LAYOUT, label: 'Horizontal'},
39 | {value: FLEXIGRID_LAYOUT, label: 'FlexiGrid'},
40 | {value: INDIVIDUAL_LAYOUT, label: 'Individual'},
41 | ];
42 |
43 | export default PreviewerLayoutSelector;
44 |
--------------------------------------------------------------------------------
/desktop-app/app/components/icons/Screenshot.js:
--------------------------------------------------------------------------------
1 | import React, {Fragment} from 'react';
2 |
3 | const Screenshot = ({width, height, color, padding, margin}) => (
4 |
24 | );
25 |
26 | Screenshot.defaultProps = {
27 | color: 'currentColor',
28 | };
29 |
30 | export default Screenshot;
31 |
--------------------------------------------------------------------------------
/desktop-app/app/utils/generalUtils.js:
--------------------------------------------------------------------------------
1 | import {app} from 'electron';
2 | import path from 'path';
3 | import fs from 'fs';
4 | import os from 'os';
5 | import {SSL_ERROR_CODES} from '../constants/values';
6 |
7 | export const getPackageJson = () => {
8 | let appPath;
9 | if (process.env.NODE_ENV === 'production') appPath = app.getAppPath();
10 | else appPath = process.cwd();
11 |
12 | const pkgPath = path.join(appPath, 'package.json');
13 | if (fs.existsSync(pkgPath)) {
14 | const pkgContent = fs.readFileSync(pkgPath, 'utf-8');
15 | return JSON.parse(pkgContent);
16 | }
17 | console.error(`cant find package.json in: '${appPath}'`);
18 | return {};
19 | };
20 |
21 | export const getEnvironmentInfo = () => {
22 | const pkg = getPackageJson();
23 | const appVersion = pkg.version || 'Unknown';
24 | const electronVersion = process.versions.electron || 'Unknown';
25 | const chromeVersion = process.versions.chrome || 'Unknown';
26 | const nodeVersion = process.versions.node || 'Unknown';
27 | const v8Version = process.versions.v8 || 'Unknown';
28 | const osInfo =
29 | `${os.type()} ${os.arch()} ${os.release()}`.trim() || 'Unknown';
30 |
31 | return {
32 | appVersion,
33 | electronVersion,
34 | chromeVersion,
35 | nodeVersion,
36 | v8Version,
37 | osInfo,
38 | };
39 | };
40 |
41 | export function isSslValidationFailed(errorCode) {
42 | return (
43 | errorCode <= SSL_ERROR_CODES.FIRST && errorCode >= SSL_ERROR_CODES.LAST
44 | );
45 | }
46 |
--------------------------------------------------------------------------------
/desktop-app/app/components/icons/DoubleLeftArrow.js:
--------------------------------------------------------------------------------
1 | import React, {Fragment} from 'react';
2 |
3 | export default ({width, height, color, padding, margin}) => (
4 |
23 |
26 |
27 |
32 |
33 |
29 |
41 |
49 |
30 | {(props.text || '').split('\\n ').map((line, idx) => {
31 | if (idx === 0) return line;
32 | return (
33 | <>
34 |
35 | {line}
36 |
37 | );
38 | })}
39 |
40 |
18 |
19 |
23 |
24 | );
25 | };
26 |
27 | const useStyles = makeStyles(theme => ({
28 | container: {
29 | alignItems: 'center',
30 | borderRadius: '0 0 8px 8px',
31 | display: 'flex',
32 | height: '20px',
33 | justifyContent: 'center',
34 | textAlign: 'center',
35 | width: '80px',
36 | cursor: 'pointer',
37 | boxShadow: '0 5px 5px rgba(0, 0, 0, 0.35)',
38 | },
39 | icon: {
40 | marginTop: '-5px',
41 | '&.invert': {
42 | transform: 'rotateX(180deg) translateY(-5px)',
43 | },
44 | },
45 | }));
46 |
47 | export default ZenButton;
48 |
--------------------------------------------------------------------------------
/desktop-app/app/reducers/bookmarks.js:
--------------------------------------------------------------------------------
1 | import settings from 'electron-settings';
2 | import {TOGGLE_BOOKMARK, EDIT_BOOKMARK} from '../actions/bookmarks';
3 | import {BOOKMARKS} from '../constants/settingKeys';
4 | import {getWebsiteName} from '../components/WebView/screenshotUtil';
5 |
6 | type BookmarksType = {
7 | title: string,
8 | url: string,
9 | };
10 |
11 | function fetchBookmarks(): BookmarksType {
12 | return settings.get(BOOKMARKS) || [];
13 | }
14 |
15 | function persistBookmarks(bookmarks) {
16 | settings.set(BOOKMARKS, bookmarks);
17 | }
18 |
19 | export default function browser(
20 | state: BrowserStateType = {
21 | bookmarks: fetchBookmarks(),
22 | },
23 | action: Action
24 | ) {
25 | switch (action.type) {
26 | case TOGGLE_BOOKMARK:
27 | let {bookmarks} = state;
28 | const bookmark = {
29 | title: action.title || getWebsiteName(action.url),
30 | url: action.url,
31 | };
32 | if (bookmarks.find(b => b.url === action.url)) {
33 | bookmarks = bookmarks.filter(b => b.url !== action.url);
34 | } else {
35 | bookmarks = [...bookmarks, bookmark];
36 | }
37 | persistBookmarks(bookmarks);
38 | return {...state, bookmarks};
39 | case EDIT_BOOKMARK:
40 | const updatedBookmarks = state.bookmarks.map(b =>
41 | b === action.bookmark ? {...b, title: action.title, url: action.url} : b
42 | );
43 | persistBookmarks(updatedBookmarks);
44 | return {...state, bookmarks: updatedBookmarks};
45 | default:
46 | return state;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/desktop-app/app/containers/AddressBar/index.js:
--------------------------------------------------------------------------------
1 | import React, {useEffect} from 'react';
2 | import {ipcRenderer} from 'electron';
3 | import {connect} from 'react-redux';
4 | import {bindActionCreators} from 'redux';
5 |
6 | import AddressInput from '../../components/AddressInput';
7 | import * as BrowserActions from '../../actions/browser';
8 | import {toggleBookmarkUrl} from '../../actions/bookmarks';
9 |
10 | const AddressBar = props => {
11 | const handler = (_, url) => {
12 | props.onAddressChange(url);
13 | };
14 | useEffect(() => {
15 | ipcRenderer.on('address-change', handler);
16 | return () => ipcRenderer.removeListener('address-change', handler);
17 | }, []);
18 | return (
19 |
20 |
22 |
63 | 
64 |
65 |
66 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/desktop-app/app/components/icons/InspectElement.js:
--------------------------------------------------------------------------------
1 | import React, {Fragment} from 'react';
2 |
3 | export default ({width, height, color, padding, margin, style}) => (
4 |
64 |
38 |
40 | );
41 | }
42 |
43 | const useStyles = makeStyles(theme => ({
44 | container: {
45 | position: 'relative',
46 | height: '50px',
47 | alignItems: 'center',
48 | justifyContent: 'center',
49 | display: 'flex',
50 | '&:hover': {
51 | background: theme.palette.primary.main,
52 | opacity: 1,
53 | },
54 | },
55 | }));
56 |
57 | export default Headway;
58 |
--------------------------------------------------------------------------------
/desktop-app/app/components/icons/DeviceRotate.js:
--------------------------------------------------------------------------------
1 | import React, {Fragment} from 'react';
2 |
3 | const DeviceRotate = ({width, height, color, padding, margin}) => (
4 |