Revert "Merge pull request #2204 from weaveworks/contrast-as-component"

This reverts commit 68e8cbf, reversing
changes made to 00408b8.

Reverts bug where contrast mode is showing by default

client/app/scripts/actions/app-actions.js

@@ -643,17 +643,6 @@ export function receiveNotFound(nodeId) {
   };
 }
 
-export function toggleContrastMode(enabled) {
-  return (dispatch, getState) => {
-    dispatch({
-      type: ActionTypes.TOGGLE_CONTRAST_MODE,
-      enabled,
-    });
-
-    updateRoute(getState);
-  };
-}
-
 export function route(urlState) {
   return (dispatch, getState) => {
     dispatch({
@@ -675,10 +664,6 @@ export function route(urlState) {
       state.get('nodeDetails'),
       dispatch
     );
-
-    if (urlState.contrastMode) {
-      dispatch(toggleContrastMode(true));
-    }
   };
 }
 

client/app/scripts/charts/edge.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import classNames from 'classnames';
 
 import { enterEdge, leaveEdge } from '../actions/app-actions';
+import { isContrastMode } from '../utils/contrast-utils';
 import { NODE_BASE_SIZE } from '../constants/styles';
 
 class Edge extends React.Component {
@@ -14,9 +15,9 @@ class Edge extends React.Component {
   }
 
   render() {
-    const { id, path, highlighted, blurred, focused, scale, contrastMode } = this.props;
+    const { id, path, highlighted, blurred, focused, scale } = this.props;
     const className = classNames('edge', { highlighted, blurred, focused });
-    const thickness = scale * (contrastMode ? 0.02 : 0.01) * NODE_BASE_SIZE;
+    const thickness = scale * (isContrastMode() ? 0.02 : 0.01) * NODE_BASE_SIZE;
 
     // Draws the edge so that its thickness reflects the zoom scale.
     // Edge shadow is always made 10x thicker than the edge itself.
@@ -40,13 +41,7 @@ class Edge extends React.Component {
   }
 }
 
-function mapStateToProps(state) {
-  return {
-    contrastMode: state.get('contrastMode')
-  };
-}
-
 export default connect(
-  mapStateToProps,
+  null,
   { enterEdge, leaveEdge }
 )(Edge);

client/app/scripts/charts/node-networks-overlay.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { scaleBand } from 'd3-scale';
 import { List as makeList } from 'immutable';
-import { connect } from 'react-redux';
-
 import { getNetworkColor } from '../utils/color-utils';
+import { isContrastMode } from '../utils/contrast-utils';
 import { NODE_BASE_SIZE } from '../constants/styles';
 
 // Min size is about a quarter of the width, feels about right.
@@ -14,7 +13,7 @@ const borderRadius = 0.01;
 const offset = 0.67;
 const x = scaleBand();
 
-function NodeNetworksOverlay({ stack, networks = makeList(), contrastMode }) {
+function NodeNetworksOverlay({ stack, networks = makeList() }) {
   const barWidth = Math.max(1, minBarWidth * networks.size);
   const yPosition = offset - (barHeight * 0.5);
 
@@ -38,18 +37,12 @@ function NodeNetworksOverlay({ stack, networks = makeList(), contrastMode }) {
     />
   ));
 
-  const translateY = stack && contrastMode ? 0.15 : 0;
+  const translateY = stack && isContrastMode() ? 0.15 : 0;
   return (
     <g transform={`translate(0, ${translateY}) scale(${NODE_BASE_SIZE})`}>
       {bars.toJS()}
     </g>
   );
 }
 
-function mapStateToProps(state) {
-  return {
-    contrastMode: state.get('contrastMode')
-  };
-}
-
-export default connect(mapStateToProps)(NodeNetworksOverlay);
+export default NodeNetworksOverlay;

client/app/scripts/charts/node-shape-stack.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { connect } from 'react-redux';
 
 import { NODE_BASE_SIZE } from '../constants/styles';
+import { isContrastMode } from '../utils/contrast-utils';
 
-function NodeShapeStack(props) {
-  const shift = props.contrastMode ? 0.15 : 0.1;
+export default function NodeShapeStack(props) {
+  const shift = isContrastMode() ? 0.15 : 0.1;
   const highlightScale = [1, 1 + shift];
   const dy = NODE_BASE_SIZE * shift;
 
@@ -26,11 +26,3 @@ function NodeShapeStack(props) {
     </g>
   );
 }
-
-function mapStateToProps(state) {
-  return {
-    contrastMode: state.get('contrastMode')
-  };
-}
-
-export default connect(mapStateToProps)(NodeShapeStack);

client/app/scripts/components/app.js

@@ -13,7 +13,7 @@ import Topologies from './topologies';
 import TopologyOptions from './topology-options';
 import { getApiDetails, getTopologies } from '../utils/web-api-utils';
 import { focusSearch, pinNextMetric, hitBackspace, hitEnter, hitEsc, unpinMetric,
-  selectMetric, toggleHelp, toggleGridMode, toggleContrastMode } from '../actions/app-actions';
+  selectMetric, toggleHelp, toggleGridMode } from '../actions/app-actions';
 import Details from './details';
 import Nodes from './nodes';
 import GridModeSelector from './grid-mode-selector';
@@ -153,12 +153,11 @@ function mapStateToProps(state) {
     showingMetricsSelector: state.get('availableCanvasMetrics').count() > 0,
     showingNetworkSelector: state.get('availableNetworks').count() > 0,
     showingTerminal: state.get('controlPipes').size > 0,
-    urlState: getUrlState(state),
-    contrastMode: state.get('contrastMode')
+    urlState: getUrlState(state)
   };
 }
 
+
 export default connect(
-  mapStateToProps,
-  dispatch => ({ dispatch, toggleContrastMode })
+  mapStateToProps
 )(App);

client/app/scripts/components/footer.js

@@ -4,22 +4,19 @@ import moment from 'moment';
 
 import Plugins from './plugins';
 import { getUpdateBufferSize } from '../utils/update-buffer-utils';
+import { contrastModeUrl, isContrastMode } from '../utils/contrast-utils';
 import { clickDownloadGraph, clickForceRelayout, clickPauseUpdate,
-  clickResumeUpdate, toggleHelp, toggleTroubleshootingMenu, toggleContrastMode } from '../actions/app-actions';
+  clickResumeUpdate, toggleHelp, toggleTroubleshootingMenu } from '../actions/app-actions';
+import { basePathSlash } from '../utils/web-api-utils';
 
 class Footer extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.handleContrastClick = this.handleContrastClick.bind(this);
-  }
-  handleContrastClick(e) {
-    e.preventDefault();
-    this.props.toggleContrastMode(!this.props.contrastMode);
-  }
   render() {
-    const { hostname, updatePausedAt, version, versionUpdate, contrastMode } = this.props;
+    const { hostname, updatePausedAt, version, versionUpdate } = this.props;
+    const contrastMode = isContrastMode();
 
+    // link url to switch contrast with current UI state
+    const otherContrastModeUrl = contrastMode
+      ? basePathSlash(window.location.pathname) : contrastModeUrl;
     const otherContrastModeTitle = contrastMode
       ? 'Switch to normal contrast' : 'Switch to high contrast';
     const forceRelayoutTitle = 'Force re-layout (might reduce edge crossings, '
@@ -79,7 +76,7 @@ class Footer extends React.Component {
             title={forceRelayoutTitle}>
             <span className="fa fa-refresh" />
           </a>
-          <a onClick={this.handleContrastClick} className="footer-icon" title={otherContrastModeTitle}>
+          <a className="footer-icon" href={otherContrastModeUrl} title={otherContrastModeTitle}>
             <span className="fa fa-adjust" />
           </a>
           <a
@@ -104,8 +101,7 @@ function mapStateToProps(state) {
     hostname: state.get('hostname'),
     updatePausedAt: state.get('updatePausedAt'),
     version: state.get('version'),
-    versionUpdate: state.get('versionUpdate'),
-    contrastMode: state.get('contrastMode')
+    versionUpdate: state.get('versionUpdate')
   };
 }
 
@@ -117,7 +113,6 @@ export default connect(
     clickPauseUpdate,
     clickResumeUpdate,
     toggleHelp,
-    toggleTroubleshootingMenu,
-    toggleContrastMode
+    toggleTroubleshootingMenu
   }
 )(Footer);

client/app/scripts/constants/action-types.js

@@ -58,7 +58,6 @@ const ACTION_TYPES = [
   'SET_RECEIVED_NODES_DELTA',
   'SORT_ORDER_CHANGED',
   'SET_GRID_MODE',
-  'TOGGLE_CONTRAST_MODE'
 ];
 
 export default zipObject(ACTION_TYPES, ACTION_TYPES);

client/app/scripts/contrast-main.js

@@ -0,0 +1,24 @@
+import 'babel-polyfill';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+
+import '../styles/contrast.scss';
+import '../images/favicon.ico';
+import configureStore from './stores/configureStore';
+
+const store = configureStore();
+
+function renderApp() {
+  const App = require('./components/app').default;
+  ReactDOM.render((
+    <Provider store={store}>
+      <App />
+    </Provider>
+  ), document.getElementById('app'));
+}
+
+renderApp();
+if (module.hot) {
+  module.hot.accept('./components/app', renderApp);
+}

client/app/scripts/reducers/root.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-webpack-loader-syntax, import/no-unresolved */
 import debug from 'debug';
 import { size, each, includes } from 'lodash';
 import { fromJS, is as isDeepEqual, List as makeList, Map as makeMap,
@@ -31,7 +30,6 @@ const topologySorter = topology => topology.get('rank');
 export const initialState = makeMap({
   availableCanvasMetrics: makeList(),
   availableNetworks: makeList(),
-  contrastMode: false,
   controlPipes: makeOrderedMap(), // pipeId -> controlPipe
   controlStatus: makeMap(),
   currentTopology: null,
@@ -723,33 +721,6 @@ export function rootReducer(state = initialState, action) {
       return state.set('showingTroubleshootingMenu', !state.get('showingTroubleshootingMenu'));
     }
 
-    case ActionTypes.TOGGLE_CONTRAST_MODE: {
-      const modules = [
-        require.resolve('../../styles/main.scss'),
-        require.resolve('../../styles/contrast.scss')
-      ];
-      // Bust the webpack require cache to for a re-download of the stylesheets
-      modules.forEach((i) => {
-        const children = require.cache[i] ? require.cache[i].children : [];
-        children.forEach((c) => {
-          delete require.cache[c];
-        });
-        delete require.cache[i];
-      });
-
-      if (action.enabled) {
-        require.ensure([], () => {
-          require('../../styles/contrast.scss');
-        });
-      } else {
-        require.ensure([], () => {
-          require('../../styles/main.scss');
-        });
-      }
-
-      return state.set('contrastMode', action.enabled);
-    }
-
     default: {
       return state;
     }

client/app/scripts/utils/contrast-utils.js

@@ -0,0 +1,7 @@
+export const contrastModeUrl = 'contrast.html';
+
+const contrastMode = window.location.pathname.indexOf(contrastModeUrl) > -1;
+
+export function isContrastMode() {
+  return contrastMode;
+}

client/app/scripts/utils/router-utils.js

@@ -19,18 +19,11 @@ function encodeURL(url) {
     .replace(new RegExp(SLASH, 'g'), SLASH_REPLACEMENT);
 }
 
-export function decodeURL(url) {
+function decodeURL(url) {
   return decodeURIComponent(url.replace(new RegExp(SLASH_REPLACEMENT, 'g'), SLASH))
     .replace(new RegExp(PERCENT_REPLACEMENT, 'g'), PERCENT);
 }
 
-export function parseHashState(hash = window.location.hash) {
-  const urlStateString = hash
-    .replace('#!/state/', '')
-    .replace('#!/', '') || '{}';
-  return JSON.parse(decodeURL(urlStateString));
-}
-
 function shouldReplaceState(prevState, nextState) {
   // Opening a new terminal while an existing one is open.
   const terminalToTerminal = (prevState.controlPipe && nextState.controlPipe);
@@ -57,8 +50,7 @@ export function getUrlState(state) {
     gridSortedBy: state.get('gridSortedBy'),
     gridSortedDesc: state.get('gridSortedDesc'),
     topologyId: state.get('currentTopologyId'),
-    topologyOptions: state.get('topologyOptions').toJS(), // all options,
-    contrastMode: state.get('contrastMode')
+    topologyOptions: state.get('topologyOptions').toJS() // all options
   };
 
   if (state.get('showingNetworks')) {
@@ -75,7 +67,10 @@ export function updateRoute(getState) {
   const state = getUrlState(getState());
   const stateUrl = encodeURL(JSON.stringify(state));
   const dispatch = false;
-  const prevState = parseHashState();
+  const urlStateString = window.location.hash
+    .replace('#!/state/', '')
+    .replace('#!/', '') || '{}';
+  const prevState = JSON.parse(decodeURL(urlStateString));
 
   // back up state in storage as well
   storageSet(STORAGE_STATE_KEY, stateUrl);

client/webpack.local.config.js

@@ -2,6 +2,7 @@ const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+
 /**
  * This is the Webpack configuration file for local development.
  * It contains local-specific configuration which includes:
@@ -27,6 +28,10 @@ module.exports = {
       './app/scripts/main.dev',
       'webpack-hot-middleware/client'
     ],
+    'contrast-app': [
+      './app/scripts/contrast-main',
+      'webpack-hot-middleware/client'
+    ],
     'terminal-app': [
       './app/scripts/terminal-main',
       'webpack-hot-middleware/client'
@@ -40,7 +45,7 @@ module.exports = {
   // Used by Webpack Dev Middleware
   output: {
     publicPath: '',
-    path: path.join(__dirname, 'build'),
+    path: '/',
     filename: '[name].js'
   },
 
@@ -51,6 +56,11 @@ module.exports = {
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin(),
     new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
+    new HtmlWebpackPlugin({
+      chunks: ['vendors', 'contrast-app'],
+      template: 'app/html/index.html',
+      filename: 'contrast.html'
+    }),
     new HtmlWebpackPlugin({
       chunks: ['vendors', 'terminal-app'],
       template: 'app/html/index.html',