Merge pull request #299 from integer32llc/poppin-prepare-for-merge

Redesign the playground's header

Author: shepmaster

tests/spec/features/compilation_modes_spec.rb

@@ -11,7 +11,7 @@
   end
 
   scenario "compiling in debug mode" do
-    choose_styled("Debug")
+    in_mode_menu { click_on("Debug") }
     click_on("Run")
 
     within('.output-stdout') do
@@ -21,7 +21,7 @@
   end
 
   scenario "compiling in release mode" do
-    choose_styled("Release")
+    in_mode_menu { click_on("Release") }
     click_on("Run")
 
     within('.output-stdout') do

tests/spec/features/compilation_targets_spec.rb

@@ -12,13 +12,11 @@
 
   context "when AT&T syntax is selected" do
     before do
-      click_on("Config")
-      select("AT&T")
-      click_on("Done")
+      in_config_menu { choose("AT&T") }
     end
 
     scenario "compiling to assembly" do
-      within('.header') { click_on("ASM") }
+      in_build_menu { click_on("assembly") }
 
       within('.output-code') do
         # We demangle the symbols
@@ -31,13 +29,11 @@
 
   context "when Intel syntax is selected" do
     before do
-      click_on("Config")
-      select("Intel")
-      click_on("Done")
+      in_config_menu { choose("Intel") }
     end
 
     scenario "compiling to assembly" do
-      within('.header') { click_on("ASM") }
+      in_build_menu { click_on("assembly") }
 
       within('.output-code') do
         # We demangle the symbols
@@ -49,7 +45,7 @@
   end
 
   scenario "compiling to LLVM IR" do
-    within('.header') { click_on("LLVM IR") }
+    in_build_menu { click_on("LLVM IR") }
 
     within('.output-code') do
       expect(page).to have_content 'ModuleID'
@@ -59,7 +55,7 @@
   end
 
   scenario "compiling to MIR" do
-    within('.header') { click_on("MIR") }
+    in_build_menu { click_on("MIR") }
 
     within('.output-code') do
       expect(page).to have_content 'StorageLive'
@@ -68,10 +64,7 @@
   end
 
   scenario "compiling to WebAssembly" do
-    within('.header') do
-      choose_styled("Nightly")
-      click_on("WASM")
-    end
+    in_build_menu { click_on("WASM") }
 
     within('.output-code') do
       expect(page).to have_content '(module'
@@ -83,7 +76,7 @@
     before { editor.set("fn main() {") }
 
     scenario "it shows the compilation error" do
-      within('.header') { click_on("MIR") }
+      in_build_menu { click_on("MIR") }
 
       within('.output-stderr') do
         expect(page).to have_content 'an un-closed delimiter'

tests/spec/features/editor_types_spec.rb

@@ -1,12 +1,13 @@
 require 'spec_helper'
+require 'support/playground_actions'
 
 RSpec.feature "Editing in different editors", type: :feature, js: true do
+  include PlaygroundActions
+
   before { visit '/' }
 
   scenario "using the simple editor" do
-    click_on("Config")
-    select("Simple")
-    click_on("Done")
+    in_config_menu { choose("simple") }
 
     fill_in('editor-simple', with: simple_editor_code)
 

tests/spec/features/multiple_channels_spec.rb

@@ -11,7 +11,7 @@
   end
 
   scenario "using stable Rust" do
-    choose_styled("Stable")
+    in_channel_menu { click_on("Stable") }
     click_on("Run")
 
     within('.output-stdout') do
@@ -22,7 +22,7 @@
   end
 
   scenario "using beta Rust" do
-    choose_styled("Beta")
+    in_channel_menu { click_on("Beta") }
     click_on("Run")
 
     within('.output-stdout') do
@@ -33,7 +33,7 @@
   end
 
   scenario "using nightly Rust" do
-    choose_styled("Nightly")
+    in_channel_menu { click_on("Nightly") }
     click_on("Run")
 
     within('.output-stdout') do

tests/spec/features/navigation_spec.rb

@@ -25,19 +25,19 @@
 
   scenario "Mode and channel buttons update the URL" do
     visit '/'
-    expect(page).to have_content('Run')
+    expect(page).to have_content('RUN')
 
     editor.set("dummy")
     expect(page).to be_at_url('/')
 
-    choose_styled('Release')
+    in_mode_menu { click_on('Release') }
     expect(page).to be_at_url('/', version: 'stable', mode: 'release')
 
     go_back
     expect(page).to be_at_url('/')
 
-    choose_styled('Release')
-    choose_styled('Beta')
+    in_mode_menu { click_on('Release') }
+    in_channel_menu { click_on('Beta') }
     expect(page).to be_at_url('/', version: 'beta', mode: 'release')
 
     go_back
@@ -47,23 +47,23 @@
 
   scenario "Navigating to help changes the URL" do
     visit '/'
-    expect(page).to have_content('Run')
+    expect(page).to have_content('RUN')
 
-    click_on '?'
+    click_on 'View help'
     expect(page).to be_at_url('/help')
     expect(page).to have_content('The Rust Playground')
 
     go_back
     expect(page).to be_at_url('/')
-    expect(page).to have_content('Run')
+    expect(page).to have_content('RUN')
 
     go_forward
     expect(page).to be_at_url('/help')
     expect(page).to have_content('The Rust Playground')
 
     click_on "Return to the playground"
     expect(page).to be_at_url('/')
-    expect(page).to have_content('Run')
+    expect(page).to have_content('RUN')
   end
 
   scenario "Navigating from help changes the URL" do
@@ -72,7 +72,7 @@
 
     click_on "Return to the playground"
     expect(page).to be_at_url('/')
-    expect(page).to have_content('Run')
+    expect(page).to have_content('RUN')
   end
 
   def editor

tests/spec/features/tools_spec.rb

@@ -2,13 +2,16 @@
 
 require 'spec_helper'
 require 'support/editor'
+require 'support/playground_actions'
 
 RSpec.feature "Using third-party Rust tools", type: :feature, js: true do
+  include PlaygroundActions
+
   before { visit '/' }
 
   scenario "formatting code" do
     editor.set 'fn main() { [1,2,3,4]; }'
-    within('.header') { click_on("Format") }
+    in_tools_menu { click_on("Rustfmt") }
 
     within('#editor') do
       expect(editor).to have_line '[1, 2, 3, 4];'
@@ -17,7 +20,7 @@
 
   scenario "linting code with Clippy" do
     editor.set code_with_lint_warnings
-    within('.header') { click_on("Clippy") }
+    in_tools_menu { click_on("Clippy") }
 
     within(".output-stderr") do
       expect(page).to have_content 'deny(eq_op)'

tests/spec/features/url_parameters_spec.rb

@@ -1,12 +1,22 @@
+# coding: utf-8
+
 require 'spec_helper'
 require 'support/editor'
 
 RSpec.feature "Configuration by URL parameters", type: :feature, js: true do
-  # Our headers hide the radio button proper, so we need to enable
-  # looking for invisible elements.
-  RSpec::Matchers.define :have_checked_header do |expected|
+  RSpec::Matchers.define :have_mode do |expected|
+    match do |actual|
+      within actual.find_button("Mode — Choose the optimization level") do |page|
+        expect(page).to have_text(expected)
+      end
+    end
+  end
+
+  RSpec::Matchers.define :have_channel do |expected|
     match do |actual|
-      expect(actual).to have_checked_field(expected, visible: false)
+      within actual.find_button("Channel — Choose the Rust version") do |page|
+        expect(page).to have_text(expected)
+      end
     end
   end
 
@@ -26,7 +36,7 @@
   scenario "loading from a Gist with a channel preserves the channel" do
     visit '/?gist=20fb1e0475f890d0fdb7864e3ad0820c&version=beta'
 
-    expect(page).to have_checked_header('Beta')
+    expect(page).to have_channel('Beta')
   end
 
   scenario "loading code directly from a parameter" do
@@ -38,13 +48,13 @@
   scenario "loading with a channel" do
     visit '/?version=nightly'
 
-    expect(page).to have_checked_header('Nightly')
+    expect(page).to have_channel('Nightly')
   end
 
   scenario "loading with a mode" do
     visit '/?mode=release'
 
-    expect(page).to have_checked_header('Release')
+    expect(page).to have_mode('Release')
   end
 
   def editor

tests/spec/spec_helper.rb

@@ -43,6 +43,7 @@
 Capybara.app_host = "http://#{ADDRESS}:#{PORT}"
 Capybara.run_server = false
 Capybara.default_max_wait_time = 5
+Capybara.automatic_label_click = true
 
 RSpec.configure do |config|
   config.before do

tests/spec/support/playground_actions.rb

@@ -1,5 +1,32 @@
+# coding: utf-8
+
 module PlaygroundActions
-  def choose_styled(label)
-    find('label', text: label).click
+  def in_build_menu(&block)
+    in_menu("Select what to build", &block)
+  end
+
+  def in_mode_menu(&block)
+    in_menu("Mode — Choose the optimization level", &block)
+  end
+
+  def in_channel_menu(&block)
+    in_menu("Channel — Choose the Rust version", &block)
+  end
+
+  def in_tools_menu(&block)
+    in_menu("Tools", &block)
+  end
+
+  def in_config_menu(&block)
+    in_menu("Config", close: true, &block)
+  end
+
+  private
+
+  def in_menu(button_locator, close: false)
+    click_on(button_locator)
+    yield
+  ensure
+    click_on(button_locator) if close
   end
 end

ui/frontend/BuildMenu.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import {
+  changeChannel,
+  performCompileToAssembly,
+  performCompileToLLVM,
+  performCompileToMir,
+  performCompileToNightlyWasm,
+  performExecute,
+} from './actions';
+
+import { Channel } from './types';
+
+import ButtonMenuItem from './ButtonMenuItem';
+import MenuGroup from './MenuGroup';
+
+interface BuildMenuProps {
+  compileToAssembly: () => any;
+  compileToLLVM: () => any;
+  compileToMir: () => any;
+  compileToWasm: () => any;
+  execute: () => any;
+  close: () => void;
+}
+
+const BuildMenu: React.SFC<BuildMenuProps> = props => (
+  <MenuGroup title="What do you want to do?">
+    <ButtonMenuItem name="Build" onClick={() => { props.execute(); props.close(); }}>
+      No bells and whistles, regular build coming right&nbsp;up&nbsp;:D
+    </ButtonMenuItem>
+    <ButtonMenuItem name="ASM" onClick={() => { props.compileToAssembly(); props.close(); }}>
+      Build and show the resulting assembly code.
+    </ButtonMenuItem>
+    <ButtonMenuItem name="LLVM IR" onClick={() => { props.compileToLLVM(); props.close(); }}>
+      Build and show the resulting LLVM IR, LLVM's intermediate representation.
+    </ButtonMenuItem>
+    <ButtonMenuItem name="MIR" onClick={() => { props.compileToMir(); props.close(); }}>
+      Build and show the resulting MIR, Rust's intermediate representation.
+    </ButtonMenuItem>
+    <ButtonMenuItem name="WASM" onClick={() => { props.compileToWasm(); props.close(); }}>
+      Build a WebAssembly module for web browsers, in the .WAT textual representation.
+      <p className="build-menu__aside">
+        Note: WASM currently requires using the Nightly channel, selecting this
+        option will switch to Nightly.
+      </p>
+    </ButtonMenuItem>
+  </MenuGroup >
+);
+
+const mapDispatchToProps = ({
+  compileToAssembly: performCompileToAssembly,
+  compileToLLVM: performCompileToLLVM,
+  compileToMir: performCompileToMir,
+  compileToWasm: performCompileToNightlyWasm,
+  execute: performExecute,
+});
+
+export default connect(undefined, mapDispatchToProps)(BuildMenu);

ui/frontend/ButtonMenuItem.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import MenuItem from './MenuItem';
+
+interface ButtonMenuItemProps extends React.HTMLProps<HTMLButtonElement> {
+  name: string;
+}
+
+const ButtonMenuItem: React.SFC<ButtonMenuItemProps> = ({ name, children, ...props }) => (
+  <MenuItem>
+    <button className="button-menu-item" {...props}>
+      <div className="button-menu-item__name">{name}</div>
+      <div className="button-menu-item__description">{children}</div>
+    </button>
+  </MenuItem>
+);
+
+export default ButtonMenuItem;