sc-frank-cucumber 1.2.1.00af28c → 1.2.1.b7791c5.debug

data/frank-skeleton/frank_static_resources.bundle/bundle/bundle/stylesheets/sass/_reset.scss

@@ -0,0 +1,32 @@
+/* css reset based on the work by eric meyer */
+html,body {position:relative;margin:0;padding:0;min-height:100%;width:100%;height:100%;}
+div,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td, keygen, select, button, button::-moz-focus-inner, isindex, hr {margin:0;padding:0;}
+table {border-collapse:collapse;border-spacing:0;}
+fieldset,img {border:0;}
+input, textarea{border:none;outline:none;padding:none;background-color:#fff;}
+address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}
+ol,ul {list-style:none;}
+li {list-style-type: none;}
+caption,th {text-align:left;}
+em, strong {font-style: normal; font-weight: normal;}
+h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
+q:before,q:after {content:'';}
+abbr,acronym {border:0;}
+a, a:hover, a:visited, a:active, a:link {text-decoration:none;}
+form {display: block;}
+textarea:focus, input:focus, select:focus {outline: none;}
+input, textarea, keygen, select, button, isindex { font: inherit; color: inherit; letter-spacing: inherit; word-spacing: inherit; line-height: inherit; text-transform: none; text-indent: 0; text-shadow: inherit; display: inline-block; text-align: inherit; border: none; }
+/* html5 block elements for IE. Stop using IE. */
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, address {display: block;}
+.clear, .clearfloat {clear:both;}
+h1,h2,h3,h4,h5,h6 {font-size: 1.0em; }
+
+/* save your sanity */
+* {
+  -webkit-box-sizing: border-box;
+   -khtml-box-sizing: border-box;
+    -icab-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+       -o-box-sizing: border-box;
+          box-sizing: border-box;
+}

data/frank-skeleton/frank_static_resources.bundle/bundle/bundle/stylesheets/sass/_selector_test_toolbar.scss

@@ -0,0 +1,81 @@
+//----------------------------------------------
+// horizontal layout
+$wrap-middle-width: 60%;
+$wrap-outter-width: (100% - $wrap-middle-width)/2;
+//----------------------------------------------
+
+#selector-test {
+  position: relative;
+  text-align: center;
+  padding: $selector-test-toolbar-vt-padding 0;
+  .wrap {
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    padding: 0 .5em;
+    &.middle { width: $wrap-middle-width; }
+    &.outter { width: $wrap-outter-width; }
+  }//.wrap
+
+  #query { width: 100%; }
+
+  label {
+    display: block;
+    text-align: left;
+    text-transform: capitalize;
+    &:after {
+      content: "#{$arrow-right-down}";
+      font-size: .8em;
+      font-weight: bold;
+      padding-left: .3em;
+    }
+  }//label
+}//#selector-test
+
+$drop-indicator-width: 2em;
+
+.dropdown {
+  position: relative;
+  display: block;
+  width: 100%;
+
+  * { z-index: $dropdown-child-z; }
+
+  button {
+    position: relative;
+    width: 100%;
+    padding-left: .8em;
+    padding-right: $drop-indicator-width;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }//button
+
+  ul {
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    float: left;
+    opacity: 0;
+    visibility: hidden;
+    @include transition-two( visibility 0s linear 0.2s,opacity 0.2s linear );
+    &.shown {
+      opacity: 1;
+      visibility:visible;
+      @include transition-delay( 0s );
+    }//&.shown
+  }//ul
+
+  .drop-indicator {
+    color: #eee;
+    position: absolute;
+    width: $drop-indicator-width;
+    right: 0;
+    top: 6px;
+    bottom: 6px;
+    border-left: 1px solid white;
+    text-align: center;
+    cursor: pointer;
+    @include user-select( none );
+  }//.drop-indicator
+}//.dropdown

data/frank-skeleton/frank_static_resources.bundle/bundle/bundle/stylesheets/sass/_solarized.scss

@@ -0,0 +1,16 @@
+$base03:          #002b36 !default; //darkest blue
+$base02:          #073642 !default; //dark blue
+$base01:          #586e75 !default; //darkest gray
+$base00:          #657b83 !default; //dark gray
+$base0:           #839496 !default; //medium gray
+$base1:           #93a1a1 !default; //medium light gray
+$base2:           #eee8d5 !default; //cream
+$base3:           #fdf6e3 !default; //white
+$solar-yellow:    #b58900 !default;
+$solar-orange:    #cb4b16 !default;
+$solar-red:       #dc322f !default;
+$solar-magenta:   #d33682 !default;
+$solar-violet:    #6c71c4 !default;
+$solar-blue:      #268bd2 !default;
+$solar-cyan:      #2aa198 !default;
+$solar-green:     #859900 !default;

data/frank-skeleton/frank_static_resources.bundle/bundle/bundle/stylesheets/sass/_typography.scss

@@ -0,0 +1,11 @@
+$sans: "Helvetica Neue", "HelveticaNeue", Arial;
+
+$base-font-size: 16px;
+$base-line-height: 24px;
+$label-line-height: $base-line-height;
+
+
+@mixin light-text {
+  color: #fff;
+  text-shadow: 0 -1px rgba(0,0,0, .3);
+}

data/frank-skeleton/frank_static_resources.bundle/bundle/bundle/stylesheets/sass/_unicode.scss

@@ -0,0 +1,3 @@
+$arrow-right-down: "\21b4";
+$arrow-down-right: "\21b3";
+$arrow-right: "\2192";

data/frank-skeleton/frank_static_resources.bundle/bundle/bundle/stylesheets/sass/_z_index.scss

@@ -0,0 +1,2 @@
+$ui-locator-view-z: -1;
+$dropdown-child-z: 1;

data/frank-skeleton/frank_static_resources.bundle/bundle/bundle/stylesheets/sass/symbiote.scss

@@ -0,0 +1,26 @@
+//-------------------------------
+// primary application file
+// all partials should be loaded here.
+//-------------------------------
+// base
+@import "_unicode.scss";
+@import "_mixins.sass";
+@import "_solarized.scss";
+@import "_typography.scss";
+@import "_z_index.scss";
+//----------------------------------
+@import "_reset.scss";
+@import "_elements.scss";
+//----------------------------------
+// global layout affords control
+// over container heights.
+@import "_layout.scss";
+//----------------------------------
+// partials
+@import "_header.scss";
+@import "_selector_test_toolbar.scss";
+@import "_inspect_tabs_list_tabs.scss";
+//-------------------------------
+// vender
+@import "_jquery.treeview.scss";
+@import "_jqui.scss";

data/frank-skeleton/frank_static_resources.bundle/bundle/index.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8' />
+    <title>Symbiote</title>
+    <script src='js/lib/jquery.min.js'></script>
+    <script src='js/lib/jquery-ui.min.js'></script>
+    <script src='js/lib/jquery.treeview.js'></script>
+    <script src='js/lib/coffee-script.js'></script>
+    <script src='js/lib/raphael.js'></script>
+    <script src='js/lib/underscore.js'></script>
+    <script src='js/lib/backbone.js'></script>
+    <script src='js/lib/json2.js'></script>
+    <script data-main='/js/main' src='js/lib/require.js'></script>
+    <link href='/stylesheets/css/symbiote.css' rel='stylesheet' />
+    <link href='pictos/pictos.css' rel='stylesheet' />
+  </head>
+  <body>
+    <header id='header'>
+      <h1>symbiote</h1>
+      <div class='toast'></div>
+      <div id='refresh'>
+        <button id='dump_button'>
+          <span></span>
+        </button>
+      </div>
+    </header>
+    <section class='symbiote_shell'>
+      <article id='selector-test'><div class='wrap outter'><label class='selector-engine-label'>use</label>
+        <div class='selector-engine dropdown'></div></div><div class='wrap middle'><label class='query'>to select views matching</label><input id='query' placeholder="Selector label marked:'Search'" /></div><div class='wrap outter'>
+          <label>and then</label>
+          <div class='action-buttons dropdown'></div>
+        </div></article>
+    </section>
+    <section class='the-columns'>
+      <div id='list-tabs'>
+        <ul>
+          <li>
+            <a href='#dom-dump'>View Hierarchy</a>
+          </li>
+          <li>
+            <a href='#accessible-views-tab'>Accessible Elements</a>
+          </li>
+        </ul>
+        <div id='dom-dump'>
+          <ul></ul>
+        </div>
+        <div id='accessible-views-tab'>
+          <div class='hints'>
+            <p>Here is a list of all elements with accessibility labels.</p>
+            <p>Clicking on a row will flash that view element in the simulator. Hover over a row to see the selector used to flash that view element.</p>
+          </div>
+          <div id='accessible-views'></div>
+        </div>
+      </div>
+      <div id='inspect-tabs'>
+        <ul>
+          <li>
+            <a href='#dom-detail'>View Properties</a>
+          </li>
+          <li>
+            <a href='#ui-locator'>View Locator</a>
+          </li>
+        </ul>
+        <div id='ui-locator'>
+          <div id='live-view'>
+            <button>
+              Live
+              <span>Y</span>
+            </button>
+          </div>
+          <div id='asploder'>
+            <button>
+              Asplode
+            </button>
+          </div>
+          <button id='ui-locator-rotator'>1</button>
+          <div id='ui-locator-view'></div>
+        </div>
+        <div id='dom-detail'>
+          <p>Click an element in the view hierarchy on the right to see details of that element here.</p>
+        </div>
+      </div>
+    </section>
+  </body>
+</html>

data/frank-skeleton/frank_static_resources.bundle/bundle/index.html.haml

@@ -0,0 +1,76 @@
+!!! 5
+%html
+  %head
+    %meta(charset="utf-8")
+    %title Symbiote
+
+    %script(src="js/lib/jquery.min.js")
+    %script(src="js/lib/jquery-ui.min.js")
+    %script(src="js/lib/jquery.treeview.js")
+    %script(src="js/lib/coffee-script.js")
+    %script(src="js/lib/raphael.js")
+    %script(src="js/lib/underscore.js")
+    %script(src="js/lib/backbone.js")
+    %script(src="js/lib/json2.js")
+
+    %script(data-main="/js/main" src="js/lib/require.js")
+
+    %link(href="/stylesheets/css/symbiote.css" rel="stylesheet")
+    %link(href="pictos/pictos.css" rel="stylesheet")
+
+  %body
+    %header#header
+      %h1 symbiote
+      .toast
+      #refresh
+        %button#dump_button
+          %span
+
+    %section.symbiote_shell
+      %article#selector-test
+        .wrap.outter<>
+          %label.selector-engine-label use
+          .selector-engine.dropdown
+
+        .wrap.middle<>
+          %label.query<> to select views matching
+          %input#query(placeholder="Selector label marked:'Search'")<>
+
+        .wrap.outter>
+          %label and then
+          .action-buttons.dropdown
+
+    %section.the-columns
+      #list-tabs
+        %ul
+          %li
+            %a(href="#dom-dump") View Hierarchy
+          %li
+            %a(href="#accessible-views-tab") Accessible Elements
+        #dom-dump
+          %ul
+        #accessible-views-tab
+          %div.hints
+            %p Here is a list of all elements with accessibility labels.
+            %p Clicking on a row will flash that view element in the simulator. Hover over a row to see the selector used to flash that view element.
+          #accessible-views
+
+      #inspect-tabs
+        %ul
+          %li
+            %a(href="#dom-detail") View Properties
+          %li
+            %a(href="#ui-locator") View Locator
+        #ui-locator
+          #live-view
+            %button
+              Live
+              %span Y
+          #asploder
+            %button
+              Asplode
+          %button#ui-locator-rotator 1
+          #ui-locator-view
+
+        #dom-detail
+          %p Click an element in the view hierarchy on the right to see details of that element here.

data/frank-skeleton/frank_static_resources.bundle/bundle/js/accessible_views_view.coffee

@@ -0,0 +1,41 @@
+define ->
+  AccessibleViewItemView = Backbone.View.extend
+    tagName: 'div'
+
+    events: 
+      "click": "clicked"
+      "mouseover":"mousedover"
+      "mouseout":"mousedout"
+
+    render: ->
+      @$el.empty().append( """
+        <a href="#" title="#{@model.getShelleySelector()}">
+          <span class="viewClass">#{@model.get('class')}</span>
+          with label
+          "<span class="viewLabel">#{@model.get('accessibilityLabel')}</span>"
+        </a>
+      """)
+      @
+      
+    mousedover: -> @model.setActive()
+    mousedout: -> @model.unsetActive()
+
+    clicked: ->
+      @model.trigger( 'accessible-selected', @model )
+  
+  
+  AccessibleViewsView = Backbone.View.extend
+    el: $('#accessible-views')
+
+    initialize: ->
+      @collection = new Backbone.Collection
+      @collection.on 'reset', _.bind(@render,@)
+        
+
+    render: ->
+      @$el.empty()
+      @collection.each (viewModel) =>
+        @$el.append( new AccessibleViewItemView(model:viewModel).render().el )
+      @
+
+   AccessibleViewsView

data/frank-skeleton/frank_static_resources.bundle/bundle/js/accessible_views_view.js

@@ -0,0 +1,46 @@
+(function() {
+
+  define(function() {
+    var AccessibleViewItemView, AccessibleViewsView;
+    AccessibleViewItemView = Backbone.View.extend({
+      tagName: 'div',
+      events: {
+        "click": "clicked",
+        "mouseover": "mousedover",
+        "mouseout": "mousedout"
+      },
+      render: function() {
+        this.$el.empty().append("<a href=\"#\" title=\"" + (this.model.getShelleySelector()) + "\">\n  <span class=\"viewClass\">" + (this.model.get('class')) + "</span>\n  with label\n  \"<span class=\"viewLabel\">" + (this.model.get('accessibilityLabel')) + "</span>\"\n</a>");
+        return this;
+      },
+      mousedover: function() {
+        return this.model.setActive();
+      },
+      mousedout: function() {
+        return this.model.unsetActive();
+      },
+      clicked: function() {
+        return this.model.trigger('accessible-selected', this.model);
+      }
+    });
+    AccessibleViewsView = Backbone.View.extend({
+      el: $('#accessible-views'),
+      initialize: function() {
+        this.collection = new Backbone.Collection;
+        return this.collection.on('reset', _.bind(this.render, this));
+      },
+      render: function() {
+        var _this = this;
+        this.$el.empty();
+        this.collection.each(function(viewModel) {
+          return _this.$el.append(new AccessibleViewItemView({
+            model: viewModel
+          }).render().el);
+        });
+        return this;
+      }
+    });
+    return AccessibleViewsView;
+  });
+
+}).call(this);

data/frank-skeleton/frank_static_resources.bundle/bundle/js/controller.coffee

@@ -0,0 +1,134 @@
+RELOAD_INTERVAL = 500
+
+guessAtDeviceFamilyBasedOnViewDump = (viewHier)->
+    switch viewHier.accessibilityFrame.size.height
+      when 1024 then 'ipad'
+      when 480, 568 then 'iphone'
+      else
+        console.warn( "couldn't recognize device family based on screen height of " + viewHeir.accessibilityFrame.size.height + "px" )
+        'unknown'
+
+define ['frank'],(frank)->
+
+  createController = ({
+    tabsController,
+    toastController,
+    treeView,
+    ersatzView,
+    detailsView,
+    accessibleViewsView,
+    experimentBarModel,
+    $asplodeButton,
+    $reloadButton,
+    $liveButton})->
+
+    treeView.model.on 'active-view-changed', (viewModel)->
+
+    treeView.model.on 'selected-view-changed', (viewModel)->
+      detailsView.updateModel(viewModel)
+      tabsController.selectViewDetailsTab()
+
+    treeView.model.on 'accessible-view-selected', (viewModel)->
+      viewModel.setActive()
+      experimentBarModel.set( selector: viewModel.getShelleySelector() )
+
+
+    reportActionOutcome = (action,numViews)->
+      message = switch numViews
+        when 0 then "Sorry, no views matched that selector so none were #{action}"
+        when 1 then "1 view was #{action}"
+        else "#{numViews} views were #{action}"
+      toastController.showToastMessage(message)
+
+    validateViewSelector = (selector)->
+      if selector.length == 0
+        toastController.showToastMessage("You haven't provided a view selector. Please enter one below.")
+        false
+      else
+        true
+
+
+    experimentBarModel.on 'flash-clicked', (model)->
+      [selector, selectorEngine] = [model.get('selector'), model.get('selectorEngine')]
+      return unless validateViewSelector(selector)
+      frank.sendFlashCommand( 
+        selector,
+        selectorEngine
+      ).done (data)->
+        reportActionOutcome( "flashed", data.length )
+
+    experimentBarModel.on 'touch-clicked', (model)->
+      [selector, selectorEngine] = [model.get('selector'), model.get('selectorEngine')]
+      return unless validateViewSelector(selector)
+
+      views = frank.sendTouchCommand( 
+        selector,
+        selectorEngine
+      ).done (data)->
+        reportActionOutcome( "touched", data.length )
+
+    experimentBarModel.on 'highlight-clicked', (model)->
+      [selector, selectorEngine] = [model.get('selector'), model.get('selectorEngine')]
+      return unless validateViewSelector(selector)
+
+      views = frank.getAccessibilityFramesForViewsMatchingSelector( 
+        selector,
+        selectorEngine
+      ).done (data)->
+        ersatzView.model.highlightSomeFramesForABit( data )
+        reportActionOutcome( "highlighted", data.length )
+
+    $asplodeButton.on 'click', ->
+      isAsploded = ersatzView.model.toggleAsploded()
+      $asplodeButton.toggleClass( 'down', isAsploded )
+
+    $reloadButton.on 'click', ->
+      reload().done ->
+        toastController.showToastMessage('views reloaded')
+
+    liveTimeout = undefined
+    reloadLoop = ->
+      reload()
+      liveTimeout = window.setTimeout( reloadLoop, RELOAD_INTERVAL )
+
+    $liveButton.on 'click', ->
+      window.clearTimeout(liveTimeout) if liveTimeout?
+
+      if $liveButton.hasClass('down')
+        toastController.showToastMessage('leaving live mode')
+        $liveButton.removeClass('down')
+      else
+        reloadLoop()
+        toastController.showToastMessage('entering live mode')
+        $liveButton.addClass('down')
+        
+    reload = ->
+      deferable = $.Deferred()
+      $.when( frank.fetchViewHierarchy(), frank.fetchOrientation() ).done( ([rawHier,],orientation)->
+        deviceFamily = guessAtDeviceFamilyBasedOnViewDump(rawHier)
+
+        treeView.model.resetViewHier(rawHier)
+        ersatzView.model.resetViews(treeView.model.get('allViews'),deviceFamily,orientation)
+
+        accessibleViews = treeView.model.getAccessibleViews()
+        accessibleViewsView.collection.reset( accessibleViews )
+
+        ersatzView.render()
+        deferable.resolve()
+      ).fail( (args...)->
+        toastController.showToastMessage('encountered an error while talking to Frank')
+        window.alert( "Ruh roh. Encountered an error while talking to Frank.\nSee the javascript console for all the details" )
+        console.log( "Failed while talking to Frank.", args ) 
+      )
+
+      deferable.promise()
+
+    boot = ->
+      tabsController.selectLocatorTab()
+      reload()
+
+    {
+      boot: boot
+    }
+
+  createController