sc-frank-cucumber 1.2.1.1a856ca.debug → 1.2.1.1dcc760

data/frank-skeleton/frank_static_resources.bundle/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/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/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/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

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

@@ -0,0 +1,139 @@
+(function() {
+  var RELOAD_INTERVAL,
+    __slice = [].slice;
+
+  RELOAD_INTERVAL = 500;
+
+  define(['frank'], function(frank) {
+    var createController;
+    createController = function(_arg) {
+      var $asplodeButton, $liveButton, $reloadButton, accessibleViewsView, boot, detailsView, ersatzView, experimentBarModel, liveTimeout, reload, reloadLoop, reportActionOutcome, tabsController, toastController, treeView, validateViewSelector;
+      tabsController = _arg.tabsController, toastController = _arg.toastController, treeView = _arg.treeView, ersatzView = _arg.ersatzView, detailsView = _arg.detailsView, accessibleViewsView = _arg.accessibleViewsView, experimentBarModel = _arg.experimentBarModel, $asplodeButton = _arg.$asplodeButton, $reloadButton = _arg.$reloadButton, $liveButton = _arg.$liveButton;
+      treeView.model.on('active-view-changed', function(viewModel) {});
+      treeView.model.on('selected-view-changed', function(viewModel) {
+        detailsView.updateModel(viewModel);
+        return tabsController.selectViewDetailsTab();
+      });
+      treeView.model.on('accessible-view-selected', function(viewModel) {
+        viewModel.setActive();
+        return experimentBarModel.set({
+          selector: viewModel.getShelleySelector()
+        });
+      });
+      reportActionOutcome = function(action, numViews) {
+        var message;
+        message = (function() {
+          switch (numViews) {
+            case 0:
+              return "Sorry, no views matched that selector so none were " + action;
+            case 1:
+              return "1 view was " + action;
+            default:
+              return "" + numViews + " views were " + action;
+          }
+        })();
+        return toastController.showToastMessage(message);
+      };
+      validateViewSelector = function(selector) {
+        if (selector.length === 0) {
+          toastController.showToastMessage("You haven't provided a view selector. Please enter one below.");
+          return false;
+        } else {
+          return true;
+        }
+      };
+      experimentBarModel.on('flash-clicked', function(model) {
+        var selector, selectorEngine, _ref;
+        _ref = [model.get('selector'), model.get('selectorEngine')], selector = _ref[0], selectorEngine = _ref[1];
+        if (!validateViewSelector(selector)) {
+          return;
+        }
+        return frank.sendFlashCommand(selector, selectorEngine).done(function(data) {
+          return reportActionOutcome("flashed", data.length);
+        });
+      });
+      experimentBarModel.on('touch-clicked', function(model) {
+        var selector, selectorEngine, views, _ref;
+        _ref = [model.get('selector'), model.get('selectorEngine')], selector = _ref[0], selectorEngine = _ref[1];
+        if (!validateViewSelector(selector)) {
+          return;
+        }
+        return views = frank.sendTouchCommand(selector, selectorEngine).done(function(data) {
+          return reportActionOutcome("touched", data.length);
+        });
+      });
+      experimentBarModel.on('highlight-clicked', function(model) {
+        var selector, selectorEngine, views, _ref;
+        _ref = [model.get('selector'), model.get('selectorEngine')], selector = _ref[0], selectorEngine = _ref[1];
+        if (!validateViewSelector(selector)) {
+          return;
+        }
+        return views = frank.getAccessibilityFramesForViewsMatchingSelector(selector, selectorEngine).done(function(data) {
+          ersatzView.model.highlightSomeFramesForABit(data);
+          return reportActionOutcome("highlighted", data.length);
+        });
+      });
+      $asplodeButton.on('click', function() {
+        var isAsploded;
+        isAsploded = ersatzView.model.toggleAsploded();
+        return $asplodeButton.toggleClass('down', isAsploded);
+      });
+      $reloadButton.on('click', function() {
+        return reload().done(function() {
+          return toastController.showToastMessage('views reloaded');
+        });
+      });
+      liveTimeout = void 0;
+      reloadLoop = function() {
+        reload();
+        return liveTimeout = window.setTimeout(reloadLoop, RELOAD_INTERVAL);
+      };
+      $liveButton.on('click', function() {
+        if (liveTimeout != null) {
+          window.clearTimeout(liveTimeout);
+        }
+        if ($liveButton.hasClass('down')) {
+          toastController.showToastMessage('leaving live mode');
+          return $liveButton.removeClass('down');
+        } else {
+          reloadLoop();
+          toastController.showToastMessage('entering live mode');
+          return $liveButton.addClass('down');
+        }
+      });
+      reload = function() {
+        var deferable;
+        deferable = $.Deferred();
+        $.when(frank.fetchViewHierarchy(), frank.fetchResolution(), frank.fetchOrientation(), frank.fetchDevice()).done(function(_arg1, resolution, orientation, deviceFamily) {
+          var accessibleViews, rawHier;
+          rawHier = _arg1[0];
+          if (deviceFamily == 'mac') {
+            $liveButton.hide();
+          }
+          treeView.model.resetViewHier(rawHier);
+          ersatzView.model.resetViews(treeView.model.get('allViews'), resolution, deviceFamily, orientation);
+          accessibleViews = treeView.model.getAccessibleViews();
+          accessibleViewsView.collection.reset(accessibleViews);
+          ersatzView.render();
+          return deferable.resolve();
+        }).fail(function() {
+          var args;
+          args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
+          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");
+          return console.log("Failed while talking to Frank.", args);
+        });
+        return deferable.promise();
+      };
+      boot = function() {
+        tabsController.selectLocatorTab();
+        return reload();
+      };
+      return {
+        boot: boot
+      };
+    };
+    return createController;
+  });
+
+}).call(this);

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

@@ -0,0 +1,42 @@
+INTERESTING_PROPERTIES = ['class', 'accessibilityLabel', 'tag', 'alpha', 'isHidden']
+IRREGULAR_PROPERTIES = INTERESTING_PROPERTIES.concat( 'parent', 'subviews', 'children' )
+
+renderListItem = ( propertyName, propertyValue, cssClass )->
+  propertyValue ?= 'null'
+
+  if _.isObject( propertyValue )
+    propertyValue = JSON.stringify(propertyValue)
+
+  $("<li>").addClass(cssClass)
+    .append( 
+      $('<div/>').addClass('key').text(propertyName),
+      $('<div/>').addClass('value').text(propertyValue)
+    )
+
+define ->
+  DetailsView = Backbone.View.extend
+    el: $('#dom-detail')
+
+    updateModel: (model)->
+      @model = model
+      @refresh()
+
+    refresh: ->
+      $ul  = $('<ul>')
+
+      for prop in INTERESTING_PROPERTIES
+        if @model.has(prop)
+          val = @model.get(prop)
+          $ul.append( renderListItem( prop, val, 'interesting' ) )
+
+      for prop in _.keys(@model.attributes).sort()
+        continue if _.contains( IRREGULAR_PROPERTIES, prop )
+
+        val = @model.get(prop)
+        $ul.append( renderListItem( prop, val ) )
+
+      @$el.empty().append($ul)
+
+
+
+  DetailsView