Add DartPad to the front page (dart-lang#1805)

* add DartPad to the bottom of the front page

* add use select element to select the example

* move copyright headers

* add pi computation sample

* Hide DartPad on front page if there is no mobile browser

* Change try dart link, update copy on front page

* move period outside of <a> tag

* remove no-automatic-external

* remove site url check for try dart nav item

* add border to iframe

* update front page samples

* compile new front page samples

* fix triple-quoted strings

src/_assets/css/_dash.scss

@@ -7,6 +7,7 @@ $dash-highlight: #1967d2;
 $dash-off-black: #12202f;
 $dark-darker-black: #0d1520;
 $dash-header-bg: #17212f;
+$dash-dartpad-border: #293542;
 
 .dash-header-callout {
   font-family: "Google Sans", "Roboto", sans-serif;
@@ -192,6 +193,49 @@ $dash-header-bg: #17212f;
   }
 }
 
+.dash-dartpad {
+  flex: 1;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 32px;
+
+  background-color: $dash-callout;
+
+  h2 {
+    font-size: 43px;
+    margin: 0.5em 0 0.5em 0;
+    line-height: 1.2;
+    color: $dash-off-white;
+  }
+
+  h3 {
+    color: $dash-off-white
+  }
+
+  select {
+    margin: 8px 0 8px 0;
+  }
+
+  a {
+    color: $site-color-card-link;
+  }
+
+  #dartpad-host {
+    height: 512px;
+    width: 100%;
+    max-width: 896px;
+    display: flex;
+
+    iframe {
+      flex: 1;
+      border: 1px solid $dash-dartpad-border;
+    }
+  }
+}
+
 .banner {
   background-color: $dash_callout;
 

src/_includes/navigation-main.html

@@ -22,8 +22,7 @@
         {%- if page_url_path contains '/*/community/' %} active {%- endif -%}">Community</a>
     </li>
     <li>
-      <a href="https://dartpad.dev" target="_blank" class="nav-link no-automatic-external 
-        {%- if page_url_path contains '/*/#dartpad' %} active {%- endif -%}">Try Dart</a>
+      <a href="/#try-dart" class="nav-link">Try Dart</a>
     </li>
     <li>
       <a href="/get-dart" class="nav-link

src/_packages/dartpad_picker/.gitignore

@@ -0,0 +1,11 @@
+# Files and directories created by pub
+.dart_tool/
+.packages
+# Remove the following pattern if you wish to check in your lock file
+pubspec.lock
+
+# Conventional directory for build outputs
+build/
+
+# Directory created by dartdoc
+doc/api/

src/_packages/dartpad_picker/README.md

@@ -0,0 +1,4 @@
+If you modify the Dart code, don't forget to regenerate the JavaScript:
+
+    cd src/_packages/dartpad_picker
+    ./compile.sh

src/_packages/dartpad_picker/analysis_options.yaml

@@ -0,0 +1,14 @@
+# Defines a default set of lint rules enforced for
+# projects at Google. For details and rationale,
+# see https://github.com/dart-lang/pedantic#enabled-lints.
+include: package:pedantic/analysis_options.yaml
+
+# For lint rules and documentation, see http://dart-lang.github.io/linter/lints.
+# Uncomment to specify additional rules.
+# linter:
+#   rules:
+#     - camel_case_types
+
+analyzer:
+#   exclude:
+#     - path/to/excluded/files/**

src/_packages/dartpad_picker/compile.sh

@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+
+pub get
+pub run build_runner build --release --output out
+cp out/web/dartpad_picker_main.dart.js ../../assets/dash/js
+rm -rf out/

src/_packages/dartpad_picker/lib/dartpad_picker.dart

@@ -0,0 +1,67 @@
+// Copyright 2019 the Dart project authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license
+// that can be found in the LICENSE file.
+
+import 'dart:html';
+
+class Snippet {
+  final String name;
+  final String sourceCode;
+
+  Snippet(this.name, this.sourceCode);
+}
+
+class DartPadPicker {
+  final String dartPadUrl;
+  final Element iFrameHost;
+  final SelectElement selectElement;
+  final List<Snippet> snippets;
+  IFrameElement _iFrameElement;
+  int _selected = 0;
+
+  DartPadPicker(this.iFrameHost, this.selectElement, this.snippets,
+      {this.dartPadUrl = 'https://dartpad.dev/experimental/'}) {
+    _initSelectElement();
+    _initDartPad();
+  }
+
+  Snippet get _selectedSnippet => snippets[_selected];
+
+  Map<String, dynamic> get _sourceCodeMessage => {
+        'sourceCode': {
+          'main.dart': _selectedSnippet.sourceCode,
+        },
+        'type': 'sourceCode'
+      };
+
+  void _initSelectElement() {
+    for (var i = 0; i < snippets.length; i++) {
+      var snippet = snippets[i];
+      var option = OptionElement(value: '$i')..text = snippet.name;
+      selectElement.children.add(option);
+    }
+    selectElement.onChange.listen((Event e) {
+      _selected = selectElement.selectedIndex;
+      _sendSourceCode();
+    });
+  }
+
+  void _initDartPad() {
+    _iFrameElement = IFrameElement()
+      ..src = iFrameSrc(theme: 'dark', mode: 'dart');
+    iFrameHost.children.add(_iFrameElement);
+    window.addEventListener('message', (dynamic e) {
+      if (e.data['type'] == 'ready') {
+        _sendSourceCode();
+      }
+    });
+  }
+
+  void _sendSourceCode() {
+    _iFrameElement.contentWindow.postMessage(_sourceCodeMessage, '*');
+  }
+
+  String iFrameSrc({String theme, String mode}) {
+    return '${dartPadUrl}embed-new-$mode.html?theme=$theme';
+  }
+}

src/_packages/dartpad_picker/pubspec.yaml

@@ -0,0 +1,8 @@
+name: dartpad_picker
+environment:
+  sdk: '>=2.4.0 <3.0.0'
+
+dev_dependencies:
+  build_runner: ^1.5.0
+  build_web_compilers: ^2.1.0
+  pedantic: ^1.7.0