Add demangling and directive hiding for assembly

Author: Chandlore

ui/Cargo.lock

@@ -17,6 +17,8 @@ log = "0.3.6"
 mktemp = "0.3.1"
 mount = "0.3.0"
 quick-error = "1.1.0"
+regex = "0.2.2"
+rustc-demangle = "0.1.5"
 serde = "1.0"
 serde_derive = "1.0"
 serde_json = "1.0"

ui/Cargo.toml

@@ -5,14 +5,16 @@ import { connect } from 'react-redux';
 
 import {
   changeAssemblyFlavor,
+  changeDemangleAssembly,
   changeEditor,
+  changeHideAssemblerDirectives,
   changeKeybinding,
   changeOrientation,
   changeTheme,
   toggleConfiguration,
 } from './actions';
 import State from './state';
-import { AssemblyFlavor, Editor, Orientation } from './types';
+import { AssemblyFlavor, DemangleAssembly, Editor, HideAssemblerDirectives, Orientation } from './types';
 
 const keybindingOptions = ACE_KEYBINDINGS.map(t => <option value={t} key={t}>{t}</option>);
 const themeOptions = ACE_THEMES.map(t => <option value={t} key={t}>{t}</option>);
@@ -49,6 +51,8 @@ class Configuration extends React.PureComponent<ConfigurationProps> {
   private onChangeTheme = e => this.props.changeTheme(e.target.value);
   private onChangeOrientation = e => this.props.changeOrientation(e.target.value);
   private onChangeAssemblyFlavor = e => this.props.changeAssemblyFlavor(e.target.value);
+  private onChangeDemangleAssembly = e => this.props.changeDemangleAssembly(e.target.value);
+  private onChangeHideAssemblerDirectives = e => this.props.changeHideAssemblerDirectives(e.target.value);
   private onKeyup = e => {
     if (e.keyCode === ESCAPE_KEYCODE && !e.defaultPrevented) {
       e.preventDefault();
@@ -65,7 +69,15 @@ class Configuration extends React.PureComponent<ConfigurationProps> {
   }
 
   public render() {
-    const { editor, keybinding, theme, orientation, assemblyFlavor, toggleConfiguration } = this.props;
+    const { editor,
+      keybinding,
+      theme,
+      orientation,
+      assemblyFlavor,
+      demangleAssembly,
+      hideAssemblerDirectives,
+      toggleConfiguration,
+    } = this.props;
 
     const advancedEditor = editor === Editor.Advanced;
 
@@ -118,6 +130,22 @@ class Configuration extends React.PureComponent<ConfigurationProps> {
           <option value={AssemblyFlavor.Intel}>Intel</option>
         </ConfigurationSelect>
 
+        <ConfigurationSelect what="demangleAssembly"
+                             label="Demangle Symbols"
+                             defaultValue={demangleAssembly}
+                             onChange={this.onChangeDemangleAssembly}>
+          <option value={DemangleAssembly.Demangle}>Demangled</option>
+          <option value={DemangleAssembly.Mangle}>Mangled</option>
+        </ConfigurationSelect>
+
+        <ConfigurationSelect what="hideAssemblerDirectives"
+                             label="Assembler Directives"
+                             defaultValue={hideAssemblerDirectives}
+                             onChange={this.onChangeHideAssemblerDirectives}>
+          <option value={HideAssemblerDirectives.Hide}>Remove</option>
+          <option value={HideAssemblerDirectives.Show}>Display</option>
+        </ConfigurationSelect>
+
         <div className="configuration-actions">
           <button onClick={toggleConfiguration}>Done</button>
         </div>
@@ -132,16 +160,36 @@ interface ConfigurationProps {
   changeTheme: (_: string) => any;
   changeOrientation: (Orientation) => any;
   changeAssemblyFlavor: (AssemblyFlavor) => any;
+  changeDemangleAssembly: (DemangleAssembly) => any;
+  changeHideAssemblerDirectives: (HideAssemblerDirectives) => any;
   editor: Editor;
   keybinding: string;
   theme: string;
   orientation: Orientation;
   assemblyFlavor: AssemblyFlavor;
+  demangleAssembly: DemangleAssembly;
+  hideAssemblerDirectives: HideAssemblerDirectives;
   toggleConfiguration: () => any;
 }
 
-const mapStateToProps = ({ configuration: { editor, keybinding, theme, orientation, assemblyFlavor } }: State) => (
-  { editor, keybinding, theme, orientation, assemblyFlavor }
+const mapStateToProps = ({ configuration: {
+  editor,
+  keybinding,
+  theme,
+  orientation,
+  assemblyFlavor,
+  demangleAssembly,
+  hideAssemblerDirectives},
+}: State) => (
+  {
+    editor,
+    keybinding,
+    theme,
+    orientation,
+    assemblyFlavor,
+    demangleAssembly,
+    hideAssemblerDirectives,
+  }
 );
 
 const mapDispatchToProps = ({
@@ -150,6 +198,8 @@ const mapDispatchToProps = ({
   changeTheme,
   changeOrientation,
   changeAssemblyFlavor,
+  changeDemangleAssembly,
+  changeHideAssemblerDirectives,
   toggleConfiguration,
 });
 

ui/frontend/Configuration.tsx

@@ -5,7 +5,16 @@ import url from 'url';
 import { load as loadGist, save as saveGist } from './gist';
 import { getCrateType, runAsTest } from './selectors';
 import State from './state';
-import { AssemblyFlavor, Channel, Editor, Mode, Orientation, Page } from './types';
+import {
+  AssemblyFlavor,
+  Channel,
+  DemangleAssembly,
+  Editor,
+  HideAssemblerDirectives,
+  Mode,
+  Orientation,
+  Page,
+} from './types';
 
 const routes = {
   compile: { pathname: '/compile' },
@@ -45,6 +54,8 @@ export enum ActionType {
   ChangeOrientation = 'CHANGE_ORIENTATION',
   ChangeAssemblyFlavor = 'CHANGE_ASSEMBLY_FLAVOR',
   ChangeChannel = 'CHANGE_CHANNEL',
+  ChangeDemangleAssembly = 'CHANGE_DEMANGLE_ASSEMBLY',
+  ChangeHideAssemblerDirectives = 'CHANGE_HIDE_ASSEMBLER_DIRECTIVES',
   ChangeMode = 'CHANGE_MODE',
   ChangeFocus = 'CHANGE_FOCUS',
   ExecuteRequest = 'EXECUTE_REQUEST',
@@ -68,8 +79,10 @@ export type Action =
   | SetPageAction
   | ChangeAssemblyFlavorAction
   | ChangeChannelAction
+  | ChangeDemangleAssemblyAction
   | ChangeEditorAction
   | ChangeFocusAction
+  | ChangeHideAssemblerDirectivesAction
   | ChangeKeybindingAction
   | ChangeModeAction
   | ChangeOrientationAction
@@ -124,6 +137,16 @@ export interface ChangeAssemblyFlavorAction {
   assemblyFlavor: AssemblyFlavor;
 }
 
+export interface ChangeDemangleAssemblyAction {
+  type: ActionType.ChangeDemangleAssembly;
+  demangleAssembly: DemangleAssembly;
+}
+
+export interface ChangeHideAssemblerDirectivesAction {
+  type: ActionType.ChangeHideAssemblerDirectives;
+  hideAssemblerDirectives: HideAssemblerDirectives;
+}
+
 export interface ChangeChannelAction {
   type: ActionType.ChangeChannel;
   channel: Channel;
@@ -163,6 +186,14 @@ export function changeAssemblyFlavor(assemblyFlavor): ChangeAssemblyFlavorAction
   return { type: ActionType.ChangeAssemblyFlavor, assemblyFlavor };
 }
 
+export function changeDemangleAssembly(demangleAssembly): ChangeDemangleAssemblyAction {
+  return { type: ActionType.ChangeDemangleAssembly, demangleAssembly };
+}
+
+export function changeHideAssemblerDirectives(hideAssemblerDirectives): ChangeHideAssemblerDirectivesAction {
+  return { type: ActionType.ChangeHideAssemblerDirectives, hideAssemblerDirectives };
+}
+
 export function changeChannel(channel: Channel): ChangeChannelAction {
   return { type: ActionType.ChangeChannel, channel };
 }
@@ -260,10 +291,26 @@ function performCompile(target, { request, success, failure }): ThunkAction {
     dispatch(request());
 
     const state = getState();
-    const { code, configuration: { channel, mode, assemblyFlavor } } = state;
+    const { code, configuration: {
+      channel,
+      mode,
+      assemblyFlavor,
+      demangleAssembly,
+      hideAssemblerDirectives,
+    } } = state;
     const crateType = getCrateType(state);
     const tests = runAsTest(state);
-    const body = { channel, mode, crateType, tests, code, target, assemblyFlavor };
+    const body = {
+      channel,
+      mode,
+      crateType,
+      tests,
+      code,
+      target,
+      assemblyFlavor,
+      demangleAssembly,
+      hideAssemblerDirectives,
+    };
 
     return jsonPost(routes.compile, body)
       .then(json => dispatch(success(json)))

ui/frontend/actions.ts

@@ -427,7 +427,7 @@ $PHI: 2.61803398875;
         margin-top: 10em;
 
         width: 600px;
-        height: 600px / $PHI;
+        height: 950px / $PHI;
     }
 }
 

ui/frontend/index.scss

@@ -10,6 +10,8 @@ export function serialize(state) {
       theme: state.configuration.theme,
       orientation: state.configuration.orientation,
       assemblyFlavor: state.configuration.assemblyFlavor,
+      demangleAssembly: state.configuration.demangleAssembly,
+      hideAssemblerDirectives: state.configuration.hideAssemblerDirectives,
     },
     code: state.code,
   });
@@ -28,6 +30,9 @@ export function deserialize(savedState) {
       theme: parsedState.configuration.theme || defaultConfiguration.theme,
       orientation: parsedState.configuration.orientation || defaultConfiguration.orientation,
       assemblyFlavor: parsedState.configuration.assemblyFlavor || defaultConfiguration.assemblyFlavor,
+      demangleAssembly: parsedState.configuration.demangleAssembly || defaultConfiguration.demangleAssembly,
+      hideAssemblerDirectives:
+        parsedState.configuration.hideAssemblerDirectives || defaultConfiguration.hideAssemblerDirectives,
     },
     code: parsedState.code,
   };

ui/frontend/local_storage.ts

@@ -1,5 +1,13 @@
 import { Action, ActionType } from '../actions';
-import { AssemblyFlavor, Channel, Editor, Mode, Orientation } from '../types';
+import {
+  AssemblyFlavor,
+  Channel,
+  DemangleAssembly,
+  Editor,
+  HideAssemblerDirectives,
+  Mode,
+  Orientation,
+} from '../types';
 
 export interface State {
   shown: boolean;
@@ -8,6 +16,8 @@ export interface State {
   theme: string;
   orientation: Orientation;
   assemblyFlavor: AssemblyFlavor;
+  demangleAssembly: DemangleAssembly;
+  hideAssemblerDirectives: HideAssemblerDirectives;
   channel: Channel;
   mode: Mode;
 }
@@ -19,6 +29,8 @@ export const DEFAULT: State = {
   theme: 'github',
   orientation: Orientation.Automatic,
   assemblyFlavor: AssemblyFlavor.Att,
+  demangleAssembly: DemangleAssembly.Demangle,
+  hideAssemblerDirectives: HideAssemblerDirectives.Hide,
   channel: Channel.Stable,
   mode: Mode.Debug,
 };
@@ -37,6 +49,10 @@ export default function configuration(state = DEFAULT, action: Action): State {
     return { ...state, orientation: action.orientation };
   case ActionType.ChangeAssemblyFlavor:
     return { ...state, assemblyFlavor: action.assemblyFlavor };
+  case ActionType.ChangeDemangleAssembly:
+    return { ...state, demangleAssembly: action.demangleAssembly };
+  case ActionType.ChangeHideAssemblerDirectives:
+    return { ...state, hideAssemblerDirectives: action.hideAssemblerDirectives };
   case ActionType.ChangeChannel:
     return { ...state, channel: action.channel };
   case ActionType.ChangeMode:

ui/frontend/reducers/configuration.ts

@@ -41,6 +41,16 @@ export enum AssemblyFlavor {
   Intel = 'intel',
 }
 
+export enum DemangleAssembly {
+  Demangle = 'demangle',
+  Mangle = 'mangle',
+}
+
+export enum HideAssemblerDirectives {
+  Hide = 'hide',
+  Show = 'show',
+}
+
 export enum Channel {
   Stable = 'stable',
   Beta = 'beta',