frank-cucumber 0.9.4 → 0.9.5.pre1

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

@@ -1,7 +1,6 @@
 /*jslint browser: true, white: false, devel: true */
 /*global window: true, Raphael: true, $: true, _: true */
 
-
 var symbiote = {};
 
 symbiote.baseUrlFor = function(path){ return window.location.protocol + "//" + window.location.host + "/" + path; };
@@ -10,6 +9,7 @@ symbiote.UiLocator = function(){
   var allViews = [],
       paper = new Raphael( 'ui-locator-view'),
       viewIndicator = { remove: _.identity },
+      viewIndicators = [],
       screenshotUrl = symbiote.baseUrlFor( "screenshot" ),
       backdrop = null,
       erstaz = null;
@@ -110,27 +110,33 @@ symbiote.UiLocator = function(){
 
   }
 
-  function showViewLocation( view ) {
-    var screenOffset = erstaz.screenOffset();
-
-    viewIndicator.remove();
+  function removeHighlights() {
+    _.each( viewIndicators, function(v){ v.remove(); } );
+  }
 
-    viewIndicator = paper.rect( 
-      view.accessibilityFrame.origin.x, 
-      view.accessibilityFrame.origin.y, 
-      view.accessibilityFrame.size.width, 
-      view.accessibilityFrame.size.height
-    )
-      .attr({
-        fill: '#aaff00',
-        opacity: 0.8,
-        stroke: 'black',
-      })
-      .translate( screenOffset.x, screenOffset.y );
+  function highlightAccessibilityFrames( frames ) {
+    var screenOffset = erstaz.screenOffset();
+   
+    removeHighlights();
+
+    viewIndicators = _.map( frames, function(frame){
+      return paper.rect( 
+        frame.origin.x, 
+        frame.origin.y, 
+        frame.size.width, 
+        frame.size.height
+      )
+        .attr({
+          fill: '#aaff00',
+          opacity: 0.8,
+          stroke: 'black',
+        })
+        .translate( screenOffset.x, screenOffset.y );
+    });
   }
 
-  function hideViewLocation() {
-    viewIndicator.remove();
+  function highlightAccessibilityFrame( frame ) {
+    highlightAccessibilityFrames( [frame] );
   }
 
   function addBackdropImage(){
@@ -163,17 +169,24 @@ symbiote.UiLocator = function(){
     }
   }
 
+  function updateOrientation(orientation){
+    // $(paper.canvas).parent().removeClass('landscape').removeClass('portrait').addClass(orientation);
+    $('#ui-locator-view, .the-columns').removeClass('landscape').removeClass('portrait').addClass(orientation);
+  }
+
   function updateViews(views){
     allViews = views;
   }
 
 
   return {
-    showViewLocation: showViewLocation,
-    hideViewLocation: hideViewLocation,
+    highlightAccessibilityFrame: highlightAccessibilityFrame,
+    highlightAccessibilityFrames: highlightAccessibilityFrames,
+    removeHighlights: removeHighlights,
     updateBackdrop: updateBackdrop,
     updateViews: updateViews,
-    updateDeviceFamily: updateDeviceFamily
+    updateDeviceFamily: updateDeviceFamily,
+    updateOrientation: updateOrientation
   };
 };
 
@@ -209,7 +222,7 @@ $(document).ready(function() {
   var $domDetails = $('#dom_detail'),
       $domList = $('div#dom_dump > ul'),
       $domAccessibleDump = $('div#accessible-views'),
-      $loading = $('#loading'),
+      $loading = $(''),
       INTERESTING_PROPERTIES = ['class', 'accessibilityLabel', 'tag', 'alpha', 'isHidden'],
       uiLocator = symbiote.UiLocator(),
       liveView;
@@ -248,31 +261,31 @@ $(document).ready(function() {
   }
 
   function showLoadingUI() {
-    $loading.show();
+    $('body').addClass('working');
   }
 
   function hideLoadingUI() {
-    $loading.hide();
+    $('body').removeClass('working');
   }
 
 
   function displayDetailsFor( view ) {
     console.debug( 'displaying details for:', view );
 
-    var $table = $('<table/>');
+    var $ul = $('<ul/>');
 
-    function tableRow( propertyName, propertyValue, cssClass ){
+    function createListItem( propertyName, propertyValue, cssClass ){
       if( propertyValue === null ){
         propertyValue = 'null';
       }else if( typeof propertyValue === 'object' ){ 
         propertyValue = JSON.stringify(propertyValue);
       } 
 
-      return $('<tr/>').addClass(cssClass)
+      return $('<li/>').addClass(cssClass)
         .append( 
-          $('<td/>').text(propertyName),
-          $('<td/>').text(propertyValue) )
-        .appendTo( $table );
+          $('<div/>').addClass('key').text(propertyName),
+          $('<div/>').addClass('value').text(propertyValue) )
+        .appendTo( $ul );
     }
 
     
@@ -280,7 +293,7 @@ $(document).ready(function() {
       if( !view.hasOwnProperty(propertyName) ){ return; }
 
       var propertyValue = view[propertyName];
-      $table.append( tableRow( propertyName, propertyValue, 'interesting' ) );
+      $ul.append( createListItem( propertyName, propertyValue, 'interesting' ) );
     });
 
 
@@ -289,11 +302,11 @@ $(document).ready(function() {
       if( _.contains( INTERESTING_PROPERTIES, propertyName ) ){ return; } // don't want to include the interesting properties twice
 
       var propertyValue = view[propertyName];
-      $table.append( tableRow( propertyName, propertyValue ) );
+      $ul.append( createListItem( propertyName, propertyValue ) );
     });
 
-    $domDetails.children().remove();
-    $table.appendTo( $domDetails );
+    $domDetails.empty();
+    $ul.appendTo( $domDetails );
   }
 
   function treeElementSelected(){
@@ -308,11 +321,11 @@ $(document).ready(function() {
 
   function treeElementEntered(){
     var view = $(this).data('rawView');
-    uiLocator.showViewLocation( view );
+    uiLocator.highlightAccessibilityFrame( view.accessibilityFrame );
   }
 
   function treeElementLeft(){
-    uiLocator.hideViewLocation();
+    uiLocator.removeHighlights();
   }
 
   function listItemTitleFor( rawView ) {
@@ -379,18 +392,19 @@ $(document).ready(function() {
   }
 
 
-
-  function sendFlashCommand( selector, engine ) {
-    var command = {
-	query: selector,
-	selector_engine: engine ? engine : 'uiquery' ,
-      operation: {
-        method_name: 'flash',
-        arguments: []
-      }
-    };
+  function sendMapRequest( selector, engine, method_name, method_args ) {
+    var deferable = new $.Deferred(),
+        command = {
+          query: selector,
+          selector_engine: engine ? engine : 'uiquery' ,
+          operation: {
+            method_name: method_name, 
+            arguments: method_args || []
+          }
+        };
 
     showLoadingUI();
+
     $.ajax({
       type: "POST",
       dataType: "json",
@@ -399,20 +413,46 @@ $(document).ready(function() {
       success: function(data) {
         if( isErrorResponse( data ) ) {
           displayErrorResponse( data );
+          deferable.reject(data);
         }
+        deferable.resolve(data);
       },
       error: function(xhr,status,error) {
         alert( "Error while talking to Frank: " + status );
+        deferable.reject(error);
       },
       complete: function(xhr,status) {
         hideLoadingUI();
       }
     });
 
-    return false;
+    return deferable.promise();
+  }
+
+  function highlightViewLocations( selector, engine ){
+    sendMapRequest( selector, engine, 'accessibilityFrame' ).done( function(data){
+      locations = data.results;
+      if( locations.length < 1 ){
+        alert( 'no views found for that selector' );
+        return;
+      }
+
+      uiLocator.highlightAccessibilityFrames( locations );
+      window.setTimeout( function(){
+        uiLocator.removeHighlights();
+      }, 1000 );
+    });
+  }
+
+  function sendFlashCommand( selector, engine ) {
+    sendMapRequest(selector,engine,'FEX_flash');
+  }
+
+  function sendTouchCommand( selector, engine ) {
+    sendMapRequest(selector,engine,'touch');
   }
 
-    function updateAccessibleViews( views ) {
+  function updateAccessibleViews( views ) {
     var accessibleViews = filterAccessibleViews( views ),
         divTemplate = _.template( '<div><a href="#" title="<%=selector%>"><span class="viewClass"><%=viewClass%></span> with label "<span class="viewLabel"><%=viewLabel%></span>"</a></div>' );
 
@@ -424,7 +464,9 @@ $(document).ready(function() {
 
       $(divHtml)
         .click( function(){
+          $('#query').val( selector );
           sendFlashCommand( selector );
+          highlightViewLocations( selector );
           return false;
         })
         .appendTo( $domAccessibleDump );
@@ -432,6 +474,9 @@ $(document).ready(function() {
   }
 
   function guessAtDeviceFamilyBasedOnViewDump(data){
+    var firstChildViewFrame = data.subviews[0].accessibilityFrame;
+
+    console.log( JSON.stringify( firstChildViewFrame ) ) ;
     switch( data.accessibilityFrame.size.height ){
       case 1024:
         return 'ipad';
@@ -443,10 +488,30 @@ $(document).ready(function() {
     }
   }
 
+  function refreshOrientation(){
+    $.ajax({
+      type: 'GET',
+      dataType: 'json',
+      url: symbiote.baseUrlFor("/orientation"),
+      success: function(data) {
+        var orientation = data.orientation;
+        
+        console.debug( 'device orientation is '+orientation );
+        uiLocator.updateOrientation(orientation);
+      },
+      error: function(xhr,status,error) {
+        alert( "Error while talking to Frank: " + status );
+      }
+    });
+  }
+
+
 
   function refreshViewHeirarchy(){
     showLoadingUI();
 
+    refreshOrientation();
+
     $.ajax({
       type: "POST",
       dataType: "json",
@@ -475,15 +540,22 @@ $(document).ready(function() {
   }
 
 
-
 	$('#dump_button').click( function(){
     refreshViewHeirarchy();
     uiLocator.updateBackdrop();
   });
 
-  $('#flash_button').click( function(){
+  $('button#flash').click( function(){
       sendFlashCommand( $("input#query").val(), $("input#selector_engine").val() );
   });
+
+  $('button#touch').click( function(){
+      sendTouchCommand( $("input#query").val(), $("input#selector_engine").val() );
+  });
+
+  $('button#highlight').click( function(){
+      highlightViewLocations( $("input#query").val(), $("input#selector_engine").val() );
+  });
   
   liveView = symbiote.LiveView( uiLocator.updateBackdrop, refreshViewHeirarchy );
 
@@ -491,17 +563,18 @@ $(document).ready(function() {
     $(this).toggleClass('down');
     if( $(this).hasClass('down') ){
       liveView.start();
-      $(this).text('stop Live View');
     }else{
       liveView.stop();
-      $(this).text('start Live View');
     }
   });
 
+  $('#ui-locator-rotator').click( function(){
+    $('#ui-locator-view, .the-columns').toggleClass('landscape');
+  });
 
   //initial UI setup
 
-	$('#loading').hide();
+	// $('#loading').hide();
   
   // do initial DOM dump straight after page has finished loading
   $('#dump_button').click();

data/frank-skeleton/frank_static_resources.bundle/symbiote_ui.coffee

@@ -0,0 +1,39 @@
+setupDropdowns = ->
+  $extraActionsList = $('.action-buttons .extra-actions')
+  $se_option_list = $('ul#selector_engine_options')
+  $se_option_input = $('input#selector_engine')
+
+  $('button#selector_engine_dropdown').on 'click', (e)->
+    e.stopPropagation()
+    $se_option_list.toggleClass('shown')
+
+  $('li', $se_option_list).on 'click', (e)->
+    $se_option_input.val( $(e.target).text() )
+
+  $('.action-buttons .drop-indicator').on 'click', (e)->
+    e.stopPropagation()
+    $extraActionsList.toggleClass('shown')
+
+  $('button',$extraActionsList).on 'click', ->
+    $selectedButton = $(this)
+    $currentTopButton = $('.action-buttons > button')
+
+    return if $selectedButton[0] == $currentTopButton[0]
+
+    # shove the button that was just selected into the 'top'
+    # action button area
+    $currentTopButton.after($selectedButton)
+    # push the current top button to the top of the 'extra'
+    # action button area. This will also remove it from the 'top' area
+    $extraActionsList.prepend($currentTopButton)
+    
+
+    # remove button from top and but to top of extra buttons
+    # move tapped butotn
+
+  $('body').on 'click', ->
+    $extraActionsList.removeClass('shown')
+    $se_option_list.removeClass('shown')
+
+$ -> 
+  setupDropdowns()

data/lib/frank-cucumber/cli.rb

@@ -30,7 +30,11 @@ module Frank
       directory( 'frank_static_resources.bundle', 'Frank/frank_static_resources.bundle', :force => true )
     end
 
+    XCODEBUILD_OPTIONS = %w{workspace scheme target}
     desc "build", "builds a Frankified version of your native app"
+    XCODEBUILD_OPTIONS.each do |option|
+      method_option option
+    end
     def build
 
       in_root do
@@ -49,7 +53,9 @@ module Frank
 
       remove_dir build_output_dir
 
-      run "xcodebuild -xcconfig Frank/frankify.xcconfig install -configuration Debug -sdk iphonesimulator DSTROOT=#{build_output_dir} WRAPPER_NAME=#{app_bundle_name}"
+      extra_opts = XCODEBUILD_OPTIONS.map{ |o| "-#{o} #{options[o]}" if options[o] }.compact.join(' ')
+
+      run "xcodebuild -xcconfig Frank/frankify.xcconfig install #{extra_opts} -configuration Debug -sdk iphonesimulator DSTROOT=#{build_output_dir} PRODUCT_NAME=#{product_name}"
 
       in_root do
         FileUtils.cp_r( 
@@ -114,8 +120,12 @@ module Frank
 
     private
 
+    def product_name
+      "Frankified"
+    end
+
     def app_bundle_name
-      "Frankified.app"
+      "#{product_name}.app"
     end
 
     def build_output_dir

data/lib/frank-cucumber/core_frank_steps.rb

@@ -60,7 +60,7 @@ Then /I should not see the following:/ do |table|
 end
 
 Then /^I should see an alert view titled "([^\"]*)"$/ do |expected_mark|
-  values = frankly_map( 'alertView', 'message')
+  values = frankly_map( 'alertView', 'title')
   values.should include(expected_mark)
 end
 
@@ -176,6 +176,7 @@ Then /^I rotate to the "([^\"]*)"$/ do |direction|
 end
 
 # -- touch -- #
+# generic views
 When /^I touch "([^\"]*)"$/ do |mark|
   selector = "view marked:'#{mark}' first"
   if element_exists(selector)
@@ -195,6 +196,7 @@ When /^I touch "([^\"]*)" if exists$/ do |mark|
   end
 end
 
+# table cells
 When /^I touch the first table cell$/ do
     touch("tableViewCell first")
 end
@@ -216,10 +218,12 @@ Then /I touch the following:/ do |table|
   end
 end
 
+# buttons
 When /^I touch the button marked "([^\"]*)"$/ do |mark|
   touch( "button marked:'#{mark}'" )
 end
 
+# action sheets
 When /^I touch the "([^\"]*)" action sheet button$/ do |mark|
   touch( "actionSheet threePartButton marked:'#{mark}'" )
 end
@@ -229,6 +233,11 @@ When /^I touch the (\d*)(?:st|nd|rd|th)? action sheet button$/ do |ordinal|
   touch( "actionSheet threePartButton tag:#{ordinal}" )
 end
 
+# alert views
+When /^I touch the "([^\"]*)" alert view button$/ do |mark|
+  touch( "alertView threePartButton marked:'#{mark}'" )
+end
+                                                                     
 When /^I touch the (\d*)(?:st|nd|rd|th)? alert view button$/ do |ordinal|
   ordinal = ordinal.to_i
   touch( "alertView threePartButton tag:#{ordinal}" )
@@ -268,6 +277,7 @@ end
 
 Then /^I navigate back$/ do
   touch( "navigationItemButtonView" )
+  wait_for_nothing_to_be_animating
 end
 
 When /^I dump the DOM$/ do