<commit_before><!DOCTYPE html>

<!-- Copyright (c) 2013, Google Inc. Please see the AUTHORS file for details.
     All rights reserved. Use of this source code is governed by a BSD-style
     license that can be found in the LICENSE file. -->

<link rel="import" href="packages/spark_widgets/spark_button/spark_button.html">
<link rel="import" href="packages/spark_widgets/spark_menu_button/spark_menu_button.html">
<link rel="import" href="packages/spark_widgets/spark_menu_item/spark_menu_item.html">
<link rel="import" href="packages/spark_widgets/spark_menu_separator/spark_menu_separator.html">
<link rel="import" href="packages/spark_widgets/spark_modal/spark_modal.html">
<link rel="import" href="packages/spark_widgets/spark_split_view/spark_split_view.html">
<link rel="import" href="packages/spark_widgets/spark_status/spark_status.html">
<link rel="import" href="packages/spark_widgets/spark_suggest_box/spark_suggest_box.html">
<link rel="import" href="packages/spark_widgets/spark_toolbar/spark_toolbar.html">
<link rel="import" href="lib/ui/polymer/commit_message_view/commit_message_view.html">

<polymer-element name="spark-polymer-ui">
  <template>

    <!-- BUG: https://code.google.com/p/dart/issues/detail?id=14382 -->
    <link rel="stylesheet" href="spark_polymer_ui.css">

    <spark-toolbar id="toolbar" lightdom>
      <spark-button id="runButton" small primary>
        <span class="glyphicon glyphicon-play"></span> Run
      </spark-button>
      <spark-button id="pushButton" small>
        <span class="glyphicon glyphicon-phone"></span> Deploy
      </spark-button>
      <spark-button id="newProject" small>New Project...</spark-button>
      <spark-button id="gitClone" small>Git Clone...</spark-button>

      <spark-status id="sparkStatus"></spark-status>

      <div id="toolbarRight">
        <spark-suggest-box id="searchBox" oracle="{{searchOracle}}"
            placeholder="Search">
        </spark-suggest-box>

        <spark-menu-button
            id="mainMenu"
            src="images/menu.png"
            valueAttr="action-id"
            valign="right"
            on-activate={{onMenuSelected}}>
          <spark-menu-item action-id="file-open" label="Open File...">
          </spark-menu-item>
          <spark-menu-item action-id="folder-open" label="Open Folder...">
          </spark-menu-item>
          <spark-menu-separator></spark-menu-separator>
          <spark-menu-item action-id="project-new" label="New Project...">
          </spark-menu-item>
          <spark-menu-item action-id="git-clone" label="Git Clone...">
          </spark-menu-item>
          <spark-menu-item action-id="webstore-publish" label="Publish to Chrome Web Store...">
          </spark-menu-item>
          <template if="{{developerMode}}">
            <spark-menu-separator></spark-menu-separator>
            <spark-menu-item action-id="run-tests" label="Run Tests">
            </spark-menu-item>
          </template>
          <spark-menu-separator></spark-menu-separator>
          <spark-menu-item action-id="settings" label="Settings...">
          </spark-menu-item>
          <spark-menu-item action-id="help-about" label="About Spark">
          </spark-menu-item>
        </spark-menu-button>
      </div>
    </spark-toolbar>

    <spark-split-view
        id="splitView"
        direction="left" splitterSize="4" splitterHandle="false"
        on-update="{{onSplitterUpdate}}">
      <content></content>
    </spark-split-view>

    <!-- Error dialog -->
    <spark-modal id="errorDialog" class="dialog" animation="scale-slideup">
      <div class="modal-body">
        <div class="form-group">
          <label id="errorTitle"></label>
          <div id="errorMessage" class="help-block"></div>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button id="errorClose" overlay-toggle primary focused data-dismiss="modal">
          Close
        </spark-button>
      </div>
    </spark-modal>

    <!-- OK / Cancel dialog -->
    <spark-modal id="okCancelDialog" class="dialog" animation="scale-slideup">
      <div class="modal-body">
        <p id="okCancelMessage"></p>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button id="okText" overlay-toggle primary focused data-dismiss="modal">
          OK
        </spark-button>
      </div>
    </spark-modal>

    <!-- Rename File dialog -->
    <spark-modal id="renameDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Rename</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="renameFileName">New name</label>
          <input id="renameFileName" type="text" class="form-control"
              spellcheck="false" focused>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Rename
        </spark-button>
      </div>
    </spark-modal>

    <!-- New File dialog -->
    <spark-modal id="fileNewDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">New File</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="fileName">New file name</label>
          <input id="fileName" type="text" class="form-control"
              spellcheck="false" focused>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Create
        </spark-button>
      </div>
    </spark-modal>

    <!-- New Folder dialog -->
    <spark-modal id="folderNewDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">New Folder</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="folderName">New folder name</label>
          <input id="folderName" type="text" class="form-control"
              spellcheck="false" focused>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Create
        </spark-button>
      </div>
    </spark-modal>

    <!-- New Project dialog -->
    <spark-modal id="newProjectDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">New Project</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-label">
            <label for="name">Project name</label>
            <input id="name" type="text" class="form-control"
                pattern="\S+" spellcheck="false" autosave focused>
          </div>
          <br/>
          <div class="form-group">
            <div>
              <input id="emptyProject" type="radio" name="type" value="empty" checked>
              <label for="emptyProject" checked>Blank project</label>
            </div>
            <div>
              <input id="dartWebApp" type="radio" name="type" value="web-dart">
              <label for="dartWebApp">Dart web app</label>
            </div>
            <div>
              <input id="jsChromeApp" type="radio" name="type" value="app-js">
              <label for="jsChromeApp">JavaScript Chrome app</label>
            </div>
          </div>
          <hr/>
          <h5>
            Bower/GitHub dependencies
          </h5>
          <br/>
          <table id="jsOptions">
            <tr>
              <td>
                <label>
                  Polymer:
                </label>
                <div>
                  <input id="jsPolymerCore" type="checkbox" name="jsDeps"
                      value='"polymer": "Polymer/polymer#master"'>
                  <label for="jsPolymerCore">Core</label>
                </div>
                <div>
                  <input id="jsPolymerElements" type="checkbox" name="jsDeps"
                      value='"polymer-elements": "PolymerLabs/polymer-elements#master"'>
                  <label for="jsPolymerElements">UI-less elements</label>
                </div>
                <div>
                  <input id="jsPolymerUIElements" type="checkbox" name="jsDeps"
                      value='"polymer-ui-elements": "PolymerLabs/polymer-ui-elements#master"'>
                  <label for="jsPolymerUIElements">UI elements</label>
                </div>
              </td>
              <td>
                <label>
                  Custom (format as bower.json):
                </label>
                <textarea id="jsCustomDeps" type="text" class="form-control"
                    name="jsDeps"
                    placeholder='"package": "GitHubProj/package#master"'
                    rows="3" spellcheck="false" autosave></textarea>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Create
        </spark-button>
      </div>
    </spark-modal>

    <!-- Harness Push dialog -->
    <spark-modal id="pushDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Deploy to Mobile</h4>
      </div>
      <div class="modal-body">
        <h4>Deploy a Chrome App to an Android Device</h4>
        <p>
          You need to have the
          <a href="https://github.com/MobileChromeApps/harness/releases/"
              on-click="{{handleAnchorClick}}">
            ChromeAPT.apk
          </a>
          installed on your Android phone or tablet.
        </p>
        <div class="form-group">
          <form>
            <div>
              <input id="adb" type="radio" name="type" value="push-adb" checked />
              <label for="adb">Deploy via USB</label>
            </div>
            <div>
              <input id="ip" type="radio" name="type" value="push-ip" autosave />
              <label for="ip">Deploy to a network host</label>
              <input id="pushUrl" type="text" class="form-control"
                  placeholder="e.g. 192.168.1.101"
                  pattern="(\d{1,3}\.){3}\d{1,3}" spellcheck="false" autosave/>
            </div>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary focused data-dismiss="modal">
          Deploy
        </spark-button>
      </div>
    </spark-modal>

    <!-- Git Clone dialog -->
    <spark-modal id="gitCloneDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Clone Git Project</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="gitRepoUrl">Repository URL</label>
          <input id="gitRepoUrl" type="url" class="form-control"
              placeholder="https://github.com/dart-lang/spark.git"
              spellcheck="false" autosave focused>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Clone
        </spark-button>
      </div>
    </spark-modal>

    <!-- Git Commit dialog -->
    <spark-modal id="gitCommitDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Git Commit</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div id="gitUserInfo">
            <div class="input-label">
              <label for="gitName">Your Name</label>
              <input id="gitName" type="text" class="form-control"
                  placeholder="<NAME>" spellcheck="false" autosave focused>
            </div>
            <div class="input-label">
              <label for="gitEmail">Email</label>
              <input id="gitEmail" type="email" class="form-control"
                  placeholder="<EMAIL>" spellcheck="false" autosave>
            </div>
          </div>
        </div>
          <div class="input-label">
            <label id="changeLabel">Changes</label>
            <div id="gitStatusDiv">
               <span id="gitStatus"></span>
               <a href="#" id="gitStatusDetail">Details...</a>
            </div>
          </div>
          <div id="gitChangeList"></div>
        <div class="form-group">
          <label for="commitMessage">Commit Message</label>
          <textarea id="commitMessage" type="text" class="form-control"
              rows="3" wrap="soft" spellcheck autosave></textarea>
          <span class="help-block">Enter a brief description of the changes.</span>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Commit
        </spark-button>
      </div>
    </spark-modal>

    <!-- Git Branch dialog -->
    <spark-modal id="gitBranchDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Create Branch</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="gitBranchName">New branch name</label>
          <input id="gitBranchName" type="text" class="form-control"
              pattern="[^~:?*\^\[\s]+" spellcheck="false" autosave focused>
          <span class="help-block">Create a new git branch.</span>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Create Branch
        </spark-button>
      </div>
    </spark-modal>

    <!-- Git Checkout dialog -->
    <spark-modal id="gitCheckoutDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Git Checkout</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="currentBranchName">Current branch</label>
          <input id="currentBranchName" type="text" class="form-control"
              spellcheck="false" disabled>
        </div>
        <div class="form-group">
          <label for="gitCheckout">Switch to branch</label>
          <select id="gitCheckout" class="form-control"></select>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Checkout
        </spark-button>
      </div>
    </spark-modal>

    <!-- Git Push dialog -->
    <spark-modal id="gitPushDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Git Push</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
           <div id="gitCommitList"></div>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Push
        </spark-button>
      </div>
    </spark-modal>

    <!-- About dialog -->
    <spark-modal id="aboutDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Spark</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <span class="help-block">
            A Chrome Apps based development environment (v<span id="aboutVersion"></span>)
          </span>
        </div>
        <div class="form-group">
          <div class="checkbox">
            <input id="analyticsCheck" type="checkbox">
            <label for="analyticsCheck">
              Allow Spark to collect anonymous usage statistics
            </label>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle primary focused data-dismiss="modal">
          Close
        </spark-button>
      </div>
    </spark-modal>

    <!-- Setting dialog -->
    <spark-modal id="settingsDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Settings</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div id="changeTheme">
            <label class="settings-title">Editor theme</label>
            <div>
              <span class="settings-label"></span>
              <span class="plus-minus-container">
                <a href="#" id="themeMinus" class="plus-minus-button"
                    on-click="{{onThemeMinus}}">
                  <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a href="#" id="themePlus" class="plus-minus-button"
                    on-click="{{onThemePlus}}">
                  <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
              </span>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div id="changeKeys">
            <label class="settings-title">Key bindings</label>
            <div>
              <span class="settings-label"></span>
              <span class="plus-minus-container">
                <a href="#" id="keysMinus" class="plus-minus-button"
                    on-click="{{onKeysMinus}}">
                  <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a href="#" id="keysPlus" class="plus-minus-button"
                    on-click="{{onKeysPlus}}">
                  <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
              </span>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="settings-title">Git</label>
          <div>
            <spark-button on-click="{{onResetGit}}">
              Clear Git Credentials
            </spark-button>
            <span id="gitResetSettingsDone">Done</span>
          </div>
        </div>
        <template if="{{!chromeOS}}">
          <div class="form-group">
            <label class="settings-title">Root directory</label>
            <div>
              <span id="directory-label" class="settings-label"></span>
            </div>
          </div>
        </template>
        <template if="{{developerMode}}">
          <div class="form-group">
            <label class="settings-title">Preferences</label>
            <div>
              <spark-button on-click="{{onResetPreference}}">
                Reset Preferences
              </spark-button>
              <span id="preferenceResetResult"></span>
            </div>
          </div>
        </template>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle primary focused data-dismiss="modal">
          Close
        </spark-button>
      </div>
    </spark-modal>

    <!-- Git authentication dialog -->
    <spark-modal id="gitAuthenticationDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Git Authentication</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div id="gitUserInfo">
            <div class="input-label">
              <label for="gitUsername">User name</label>
              <input id="gitUsername" type="text" class="form-control"
                  placeholder="johndoe" pattern="\S+" spellcheck="false"
                  autosave focused>
            </div>
            <div class="input-label">
              <label for="gitPassword">Password</label>
              <input id="gitPassword" type="password" class="form-control"
                  placeholder="Required">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal" class="cancel-button">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Login
        </spark-button>
      </div>
    </spark-modal>

    <!-- Publish on webstore -->
    <spark-modal id="webStorePublishDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Publish to Chrome Web Store</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <form>
            <div>
              <input type="radio" name="type" value="new" id="new-app-radio" checked>
              <label for="new-app-radio">Create a new application</label>
            </div>
            <div>
              <input type="radio" name="type" value="existing" id="existing-app-radio">
              <label for="existing-app-radio">Upload to an existing application</label>
            </div>
          </form>
        </div>
        <div class="form-group">
          <label for="appID">Enter the ID of the existing application</label>
          <input id="appID" type="text" class="form-control"
              placeholder="abcdefghijklmnopqrstuvwxyzabcdef" pattern="[a-z]{32}"
              spellcheck="false" autosave>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary focused data-dismiss="modal">
          Publish
        </spark-button>
      </div>
    </spark-modal>

    <!-- Properties dialog -->
    <spark-modal id="propertiesDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Properties</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle primary focused data-dismiss="modal">
          Close
        </spark-button>
      </div>
    </spark-modal>

    <!-- Chrome WebStore published dialog -->
    <spark-modal id="webStorePublishedDialog" class="dialog" animation="scale-slideup">
      <div class="modal-body">
        <div class="form-group">
          <label>Your application has been published</label>
          <div class="help-block">
            An updated version of your application has been uploaded and
            published. You can now see it on the Chrome Web Store.
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button id="webStorePublishedAction" overlay-toggle data-dismiss="modal">
          Open in the WebStore
        </spark-button>
        <spark-button overlay-toggle primary focused data-dismiss="modal">
          Close
        </spark-button>
      </div>
    </spark-modal>

    <!-- Chrome WebStore first upload dialog -->
    <spark-modal id="webStoreUploadedDialog" class="dialog" animation="scale-slideup">
      <div class="modal-body">
        <div class="form-group">
          <label>Your application has been uploaded</label>
          <div class="help-block">
            Your application has been uploaded on the Chrome Web Store.
            You still need to fill out some additional information in the
            Developer Dashboard before publishing it.
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button id="webStoreUploadedAction" overlay-toggle data-dismiss="modal">
          Open in the Developer Dashboard
        </spark-button>
        <spark-button overlay-toggle primary focused data-dismiss="modal">
          Close
        </spark-button>
      </div>
    </spark-modal>

    <!-- Dialog shown while pushing an application to ADB. -->
    <spark-modal id="pushADBProgressDialog" class="dialog" animation="scale-slideup">
      <div class="modal-body">
        <div class="form-group">
          <label>Push to the mobile device in progress</label>
          <div class="help-block">
            Please unlock the phone and check whether it's asking for a
            connection authorization.
          </div>
        </div>
      </div>
    </spark-modal>
  </template>

  <script type="application/dart;component=1" src="spark_polymer_ui.dart"></script>
</polymer-element>
<commit_msg>Remove the deprecated and unnecessary 'lightdom'<commit_after><!DOCTYPE html>

<!-- Copyright (c) 2013, Google Inc. Please see the AUTHORS file for details.
     All rights reserved. Use of this source code is governed by a BSD-style
     license that can be found in the LICENSE file. -->

<link rel="import" href="packages/spark_widgets/spark_button/spark_button.html">
<link rel="import" href="packages/spark_widgets/spark_menu_button/spark_menu_button.html">
<link rel="import" href="packages/spark_widgets/spark_menu_item/spark_menu_item.html">
<link rel="import" href="packages/spark_widgets/spark_menu_separator/spark_menu_separator.html">
<link rel="import" href="packages/spark_widgets/spark_modal/spark_modal.html">
<link rel="import" href="packages/spark_widgets/spark_split_view/spark_split_view.html">
<link rel="import" href="packages/spark_widgets/spark_status/spark_status.html">
<link rel="import" href="packages/spark_widgets/spark_suggest_box/spark_suggest_box.html">
<link rel="import" href="packages/spark_widgets/spark_toolbar/spark_toolbar.html">
<link rel="import" href="lib/ui/polymer/commit_message_view/commit_message_view.html">

<polymer-element name="spark-polymer-ui">
  <template>

    <!-- BUG: https://code.google.com/p/dart/issues/detail?id=14382 -->
    <link rel="stylesheet" href="spark_polymer_ui.css">

    <spark-toolbar id="toolbar">
      <spark-button id="runButton" small primary>
        <span class="glyphicon glyphicon-play"></span> Run
      </spark-button>
      <spark-button id="pushButton" small>
        <span class="glyphicon glyphicon-phone"></span> Deploy
      </spark-button>
      <spark-button id="newProject" small>New Project...</spark-button>
      <spark-button id="gitClone" small>Git Clone...</spark-button>

      <spark-status id="sparkStatus"></spark-status>

      <div id="toolbarRight">
        <spark-suggest-box id="searchBox" oracle="{{searchOracle}}"
            placeholder="Search">
        </spark-suggest-box>

        <spark-menu-button
            id="mainMenu"
            src="images/menu.png"
            valueAttr="action-id"
            valign="right"
            on-activate={{onMenuSelected}}>
          <spark-menu-item action-id="file-open" label="Open File...">
          </spark-menu-item>
          <spark-menu-item action-id="folder-open" label="Open Folder...">
          </spark-menu-item>
          <spark-menu-separator></spark-menu-separator>
          <spark-menu-item action-id="project-new" label="New Project...">
          </spark-menu-item>
          <spark-menu-item action-id="git-clone" label="Git Clone...">
          </spark-menu-item>
          <spark-menu-item action-id="webstore-publish" label="Publish to Chrome Web Store...">
          </spark-menu-item>
          <template if="{{developerMode}}">
            <spark-menu-separator></spark-menu-separator>
            <spark-menu-item action-id="run-tests" label="Run Tests">
            </spark-menu-item>
          </template>
          <spark-menu-separator></spark-menu-separator>
          <spark-menu-item action-id="settings" label="Settings...">
          </spark-menu-item>
          <spark-menu-item action-id="help-about" label="About Spark">
          </spark-menu-item>
        </spark-menu-button>
      </div>
    </spark-toolbar>

    <spark-split-view
        id="splitView"
        direction="left" splitterSize="4" splitterHandle="false"
        on-update="{{onSplitterUpdate}}">
      <content></content>
    </spark-split-view>

    <!-- Error dialog -->
    <spark-modal id="errorDialog" class="dialog" animation="scale-slideup">
      <div class="modal-body">
        <div class="form-group">
          <label id="errorTitle"></label>
          <div id="errorMessage" class="help-block"></div>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button id="errorClose" overlay-toggle primary focused data-dismiss="modal">
          Close
        </spark-button>
      </div>
    </spark-modal>

    <!-- OK / Cancel dialog -->
    <spark-modal id="okCancelDialog" class="dialog" animation="scale-slideup">
      <div class="modal-body">
        <p id="okCancelMessage"></p>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button id="okText" overlay-toggle primary focused data-dismiss="modal">
          OK
        </spark-button>
      </div>
    </spark-modal>

    <!-- Rename File dialog -->
    <spark-modal id="renameDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Rename</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="renameFileName">New name</label>
          <input id="renameFileName" type="text" class="form-control"
              spellcheck="false" focused>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Rename
        </spark-button>
      </div>
    </spark-modal>

    <!-- New File dialog -->
    <spark-modal id="fileNewDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">New File</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="fileName">New file name</label>
          <input id="fileName" type="text" class="form-control"
              spellcheck="false" focused>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Create
        </spark-button>
      </div>
    </spark-modal>

    <!-- New Folder dialog -->
    <spark-modal id="folderNewDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">New Folder</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="folderName">New folder name</label>
          <input id="folderName" type="text" class="form-control"
              spellcheck="false" focused>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Create
        </spark-button>
      </div>
    </spark-modal>

    <!-- New Project dialog -->
    <spark-modal id="newProjectDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">New Project</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-label">
            <label for="name">Project name</label>
            <input id="name" type="text" class="form-control"
                pattern="\S+" spellcheck="false" autosave focused>
          </div>
          <br/>
          <div class="form-group">
            <div>
              <input id="emptyProject" type="radio" name="type" value="empty" checked>
              <label for="emptyProject" checked>Blank project</label>
            </div>
            <div>
              <input id="dartWebApp" type="radio" name="type" value="web-dart">
              <label for="dartWebApp">Dart web app</label>
            </div>
            <div>
              <input id="jsChromeApp" type="radio" name="type" value="app-js">
              <label for="jsChromeApp">JavaScript Chrome app</label>
            </div>
          </div>
          <hr/>
          <h5>
            Bower/GitHub dependencies
          </h5>
          <br/>
          <table id="jsOptions">
            <tr>
              <td>
                <label>
                  Polymer:
                </label>
                <div>
                  <input id="jsPolymerCore" type="checkbox" name="jsDeps"
                      value='"polymer": "Polymer/polymer#master"'>
                  <label for="jsPolymerCore">Core</label>
                </div>
                <div>
                  <input id="jsPolymerElements" type="checkbox" name="jsDeps"
                      value='"polymer-elements": "PolymerLabs/polymer-elements#master"'>
                  <label for="jsPolymerElements">UI-less elements</label>
                </div>
                <div>
                  <input id="jsPolymerUIElements" type="checkbox" name="jsDeps"
                      value='"polymer-ui-elements": "PolymerLabs/polymer-ui-elements#master"'>
                  <label for="jsPolymerUIElements">UI elements</label>
                </div>
              </td>
              <td>
                <label>
                  Custom (format as bower.json):
                </label>
                <textarea id="jsCustomDeps" type="text" class="form-control"
                    name="jsDeps"
                    placeholder='"package": "GitHubProj/package#master"'
                    rows="3" spellcheck="false" autosave></textarea>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Create
        </spark-button>
      </div>
    </spark-modal>

    <!-- Harness Push dialog -->
    <spark-modal id="pushDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Deploy to Mobile</h4>
      </div>
      <div class="modal-body">
        <h4>Deploy a Chrome App to an Android Device</h4>
        <p>
          You need to have the
          <a href="https://github.com/MobileChromeApps/harness/releases/"
              on-click="{{handleAnchorClick}}">
            ChromeAPT.apk
          </a>
          installed on your Android phone or tablet.
        </p>
        <div class="form-group">
          <form>
            <div>
              <input id="adb" type="radio" name="type" value="push-adb" checked />
              <label for="adb">Deploy via USB</label>
            </div>
            <div>
              <input id="ip" type="radio" name="type" value="push-ip" autosave />
              <label for="ip">Deploy to a network host</label>
              <input id="pushUrl" type="text" class="form-control"
                  placeholder="e.g. 192.168.1.101"
                  pattern="(\d{1,3}\.){3}\d{1,3}" spellcheck="false" autosave/>
            </div>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary focused data-dismiss="modal">
          Deploy
        </spark-button>
      </div>
    </spark-modal>

    <!-- Git Clone dialog -->
    <spark-modal id="gitCloneDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Clone Git Project</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="gitRepoUrl">Repository URL</label>
          <input id="gitRepoUrl" type="url" class="form-control"
              placeholder="https://github.com/dart-lang/spark.git"
              spellcheck="false" autosave focused>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Clone
        </spark-button>
      </div>
    </spark-modal>

    <!-- Git Commit dialog -->
    <spark-modal id="gitCommitDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Git Commit</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div id="gitUserInfo">
            <div class="input-label">
              <label for="gitName">Your Name</label>
              <input id="gitName" type="text" class="form-control"
                  placeholder="<NAME>" spellcheck="false" autosave focused>
            </div>
            <div class="input-label">
              <label for="gitEmail">Email</label>
              <input id="gitEmail" type="email" class="form-control"
                  placeholder="<EMAIL>" spellcheck="false" autosave>
            </div>
          </div>
        </div>
          <div class="input-label">
            <label id="changeLabel">Changes</label>
            <div id="gitStatusDiv">
               <span id="gitStatus"></span>
               <a href="#" id="gitStatusDetail">Details...</a>
            </div>
          </div>
          <div id="gitChangeList"></div>
        <div class="form-group">
          <label for="commitMessage">Commit Message</label>
          <textarea id="commitMessage" type="text" class="form-control"
              rows="3" wrap="soft" spellcheck autosave></textarea>
          <span class="help-block">Enter a brief description of the changes.</span>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Commit
        </spark-button>
      </div>
    </spark-modal>

    <!-- Git Branch dialog -->
    <spark-modal id="gitBranchDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Create Branch</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="gitBranchName">New branch name</label>
          <input id="gitBranchName" type="text" class="form-control"
              pattern="[^~:?*\^\[\s]+" spellcheck="false" autosave focused>
          <span class="help-block">Create a new git branch.</span>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Create Branch
        </spark-button>
      </div>
    </spark-modal>

    <!-- Git Checkout dialog -->
    <spark-modal id="gitCheckoutDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Git Checkout</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="currentBranchName">Current branch</label>
          <input id="currentBranchName" type="text" class="form-control"
              spellcheck="false" disabled>
        </div>
        <div class="form-group">
          <label for="gitCheckout">Switch to branch</label>
          <select id="gitCheckout" class="form-control"></select>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Checkout
        </spark-button>
      </div>
    </spark-modal>

    <!-- Git Push dialog -->
    <spark-modal id="gitPushDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Git Push</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
           <div id="gitCommitList"></div>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Push
        </spark-button>
      </div>
    </spark-modal>

    <!-- About dialog -->
    <spark-modal id="aboutDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Spark</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <span class="help-block">
            A Chrome Apps based development environment (v<span id="aboutVersion"></span>)
          </span>
        </div>
        <div class="form-group">
          <div class="checkbox">
            <input id="analyticsCheck" type="checkbox">
            <label for="analyticsCheck">
              Allow Spark to collect anonymous usage statistics
            </label>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle primary focused data-dismiss="modal">
          Close
        </spark-button>
      </div>
    </spark-modal>

    <!-- Setting dialog -->
    <spark-modal id="settingsDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Settings</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div id="changeTheme">
            <label class="settings-title">Editor theme</label>
            <div>
              <span class="settings-label"></span>
              <span class="plus-minus-container">
                <a href="#" id="themeMinus" class="plus-minus-button"
                    on-click="{{onThemeMinus}}">
                  <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a href="#" id="themePlus" class="plus-minus-button"
                    on-click="{{onThemePlus}}">
                  <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
              </span>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div id="changeKeys">
            <label class="settings-title">Key bindings</label>
            <div>
              <span class="settings-label"></span>
              <span class="plus-minus-container">
                <a href="#" id="keysMinus" class="plus-minus-button"
                    on-click="{{onKeysMinus}}">
                  <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a href="#" id="keysPlus" class="plus-minus-button"
                    on-click="{{onKeysPlus}}">
                  <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
              </span>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="settings-title">Git</label>
          <div>
            <spark-button on-click="{{onResetGit}}">
              Clear Git Credentials
            </spark-button>
            <span id="gitResetSettingsDone">Done</span>
          </div>
        </div>
        <template if="{{!chromeOS}}">
          <div class="form-group">
            <label class="settings-title">Root directory</label>
            <div>
              <span id="directory-label" class="settings-label"></span>
            </div>
          </div>
        </template>
        <template if="{{developerMode}}">
          <div class="form-group">
            <label class="settings-title">Preferences</label>
            <div>
              <spark-button on-click="{{onResetPreference}}">
                Reset Preferences
              </spark-button>
              <span id="preferenceResetResult"></span>
            </div>
          </div>
        </template>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle primary focused data-dismiss="modal">
          Close
        </spark-button>
      </div>
    </spark-modal>

    <!-- Git authentication dialog -->
    <spark-modal id="gitAuthenticationDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Git Authentication</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div id="gitUserInfo">
            <div class="input-label">
              <label for="gitUsername">User name</label>
              <input id="gitUsername" type="text" class="form-control"
                  placeholder="johndoe" pattern="\S+" spellcheck="false"
                  autosave focused>
            </div>
            <div class="input-label">
              <label for="gitPassword">Password</label>
              <input id="gitPassword" type="password" class="form-control"
                  placeholder="Required">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal" class="cancel-button">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary data-dismiss="modal">
          Login
        </spark-button>
      </div>
    </spark-modal>

    <!-- Publish on webstore -->
    <spark-modal id="webStorePublishDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Publish to Chrome Web Store</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <form>
            <div>
              <input type="radio" name="type" value="new" id="new-app-radio" checked>
              <label for="new-app-radio">Create a new application</label>
            </div>
            <div>
              <input type="radio" name="type" value="existing" id="existing-app-radio">
              <label for="existing-app-radio">Upload to an existing application</label>
            </div>
          </form>
        </div>
        <div class="form-group">
          <label for="appID">Enter the ID of the existing application</label>
          <input id="appID" type="text" class="form-control"
              placeholder="abcdefghijklmnopqrstuvwxyzabcdef" pattern="[a-z]{32}"
              spellcheck="false" autosave>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle data-dismiss="modal">
          Cancel
        </spark-button>
        <spark-button overlay-toggle primary focused data-dismiss="modal">
          Publish
        </spark-button>
      </div>
    </spark-modal>

    <!-- Properties dialog -->
    <spark-modal id="propertiesDialog" class="dialog" animation="scale-slideup">
      <div class="modal-header">
        <a href="#" class="close" overlay-toggle>&times;</a>
        <h4 class="modal-title">Properties</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <spark-button overlay-toggle primary focused data-dismiss="modal">
          Close
        </spark-button>
      </div>
    </spark-modal>

    <!-- Chrome WebStore published dialog -->
    <spark-modal id="webStorePublishedDialog" class="dialog" animation="scale-slideup">
      <div class="modal-body">
        <div class="form-group">
          <label>Your application has been published</label>
          <div class="help-block">
            An updated version of your application has been uploaded and
            published. You can now see it on the Chrome Web Store.
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button id="webStorePublishedAction" overlay-toggle data-dismiss="modal">
          Open in the WebStore
        </spark-button>
        <spark-button overlay-toggle primary focused data-dismiss="modal">
          Close
        </spark-button>
      </div>
    </spark-modal>

    <!-- Chrome WebStore first upload dialog -->
    <spark-modal id="webStoreUploadedDialog" class="dialog" animation="scale-slideup">
      <div class="modal-body">
        <div class="form-group">
          <label>Your application has been uploaded</label>
          <div class="help-block">
            Your application has been uploaded on the Chrome Web Store.
            You still need to fill out some additional information in the
            Developer Dashboard before publishing it.
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <spark-button id="webStoreUploadedAction" overlay-toggle data-dismiss="modal">
          Open in the Developer Dashboard
        </spark-button>
        <spark-button overlay-toggle primary focused data-dismiss="modal">
          Close
        </spark-button>
      </div>
    </spark-modal>

    <!-- Dialog shown while pushing an application to ADB. -->
    <spark-modal id="pushADBProgressDialog" class="dialog" animation="scale-slideup">
      <div class="modal-body">
        <div class="form-group">
          <label>Push to the mobile device in progress</label>
          <div class="help-block">
            Please unlock the phone and check whether it's asking for a
            connection authorization.
          </div>
        </div>
      </div>
    </spark-modal>
  </template>

  <script type="application/dart;component=1" src="spark_polymer_ui.dart"></script>
</polymer-element>

{'fraction_non_alphanumeric': 0.1555768861585717, 'fraction_numerical': 0.0024572854674601652, 'mean_word_length': 2.0432318747444063, 'pattern_counts': {'":': 8, '<': 1337, '<?xml version=': 0, '>': 1337, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 2, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '335245', 'n_tokens_mistral': 15431, 'n_tokens_neox': 14561, 'n_words': 3032}