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

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

@@ -0,0 +1,167 @@
+ISO_SKEW = 15
+ISO_MAJOR_OFFSET = 50
+ISO_MINOR_OFFSET = 5
+SCREEN_BOUNDS = {
+  iphone: { x: 0, y: 0, width: 320, height: 480 }
+  ipad: { x: 0, y: 0, width: 768, height: 1024 }
+}
+#SCREENSHOT_URL = symbiote.baseUrlFor( "screenshot" )
+
+define ['transform_stack','ersatz_model'], (transformStack,ErsatzModel)->
+
+  drawStaticBackdropAndReturnTransformer = (paper,deviceFamily,orientation,isoSkew) ->
+    paper.clear()
+    paper.canvas.setAttribute "width", "100%"
+    paper.canvas.setAttribute "height", "100%"
+
+    isiPhone = ('iphone' == deviceFamily)
+
+    if isiPhone
+      paper.canvas.setAttribute "viewBox", "0 0 380 720"
+      rotationPoint = [190,360]
+    else
+      paper.canvas.setAttribute "viewBox", "0 0 875 1200"
+      rotationPoint = [437,600]
+
+    transformer = transformStack()
+
+    transformer.skew(0, isoSkew).translate( 6, 6 )
+
+
+    rotation = switch orientation
+      when 'landscape_right' then 90
+      when 'portrait_upside_down' then 180
+      when 'landscape_left' then 270
+      else false
+
+    if rotation
+      transformer.rotateAroundPoint(rotation,rotationPoint...)
+
+    # main outline of device
+    if isiPhone
+      paper.rect(0, 0, 360, 708, 40).attr(
+        fill: "black"
+        stroke: "gray"
+        "stroke-width": 4
+      ).transform transformer.desc()
+    else
+      paper.rect( 10, 10, 855, 1110, 20 ).attr(
+        'fill': 'black',
+        'stroke': 'gray',
+        'stroke-width': 6
+      ).transform transformer.desc()
+
+
+    if isiPhone
+      # home button
+      transformer.push().translate( 180, 655 )
+      paper.circle(0, 0, 34).transform(transformer.desc()).attr( "fill", "90-#303030-#101010" )
+   
+      # square inside home button
+      paper.rect(0, 0, 22, 22, 5).attr(
+        stroke: "gray"
+        "stroke-width": 2
+      ).transform transformer.push().translate(-11, -11).descAndPop()
+
+      transformer.translate(20, 120)
+
+    else
+      transformer.translate(50,50)
+
+    if( isoSkew > 0 )
+      transformer.translate(-ISO_MAJOR_OFFSET, 0)
+    transformer
+
+
+  transformFromBaseForViewModel = (baseTransformer,viewModel,withSkew=false)->
+    {origin:{x,y}} = viewModel.get('accessibilityFrame')
+    baseTransformer.push().translate(x,y)
+    if( withSkew )
+      baseTransformer.translate(viewModel.get('depth')*-ISO_MINOR_OFFSET, 0)
+    baseTransformer.descAndPop()
+
+  ErsatzViewSnapshotView = Backbone.View.extend
+    initialize:->
+      @model.on('change:active',_.bind(@updateOpacity,@))
+      @render()
+
+    render: ->
+      frame = @model.get('accessibilityFrame')
+      @el
+        .attr
+          transform: transformFromBaseForViewModel( @options.baseTransformer, @model,true )
+          src: @model.getSnapshotUrl()
+          x: 0
+          y: 0
+          width: frame.size.width
+          height: frame.size.height
+      @updateOpacity()
+      @el
+
+     updateOpacity: ->
+       opacity = ( if @model.get('active') then 1.0 else 0.05 )
+       @el.attr('opacity',opacity)
+
+
+  ErsatzView = Backbone.View.extend
+    el: $('#ui-locator-view')
+
+    initialize: ->
+      _.bindAll( @, 'render' )
+      @model = new ErsatzModel()
+      @highlights = []
+      @paper = new Raphael(@.el)
+      @model.on 'change:baseScreenshotUrl', _.bind(@refreshBaseScreenshot,@)
+      @model.on 'change:isAsploded', _.bind(@render,@)
+      @model.on 'snapshots-refreshed', _.bind(@refreshSnapshots,@)
+      @model.on 'change:highlightFrames', _.bind(@refreshHighlightFrames,@)
+
+    render: ->
+      @highlights = []
+
+      isoSkew = (if @model.get('isAsploded') then ISO_SKEW else 0)
+      @backdropTransformer = drawStaticBackdropAndReturnTransformer(@paper,@model.get('deviceFamily'),@model.get('orientation'),isoSkew)
+      @backdrop = @paper.image()
+      @refreshBaseScreenshot()
+      if @model.get('isAsploded')
+        @backdrop.attr('opacity',0.5)
+        @refreshSnapshots()
+
+      @el
+
+    screenBounds: -> SCREEN_BOUNDS[@model.get('deviceFamily')]
+
+
+    refreshBaseScreenshot: ->
+      newScreenshotUrl = @model.get('baseScreenshotUrl')
+      return unless newScreenshotUrl?
+
+      @backdrop
+        .transform(@backdropTransformer.desc())
+        .attr( @screenBounds() )
+        .attr( 'src', newScreenshotUrl )
+        .toFront()
+
+    refreshSnapshots: ->
+      @model.get('allViews').each (viewModel) =>
+        snapshotView = new ErsatzViewSnapshotView(
+          model: viewModel
+          baseTransformer: @backdropTransformer
+          el: @paper.image()
+        )
+
+    refreshHighlightFrames: ->
+      h.remove() for h in @highlights
+      @highlights = []
+
+      @highlights = _.map @model.get('highlightFrames'), ({origin,size})=>
+        @paper.rect().attr(
+          fill: "#aaff00"
+          opacity: 0.8
+          stroke: "black"
+          transform: @backdropTransformer.push().translate(origin.x,origin.y).descAndPop()
+          x: 0
+          y: 0
+          width: size.width
+          height: size.height
+        )

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

@@ -0,0 +1,205 @@
+(function() {
+  var ISO_MAJOR_OFFSET, ISO_MINOR_OFFSET, ISO_SKEW,
+    __slice = [].slice;
+
+  ISO_SKEW = 15;
+
+  ISO_MAJOR_OFFSET = 50;
+
+  ISO_MINOR_OFFSET = 5;
+
+  define(['transform_stack', 'ersatz_model'], function(transformStack, ErsatzModel) {
+    var ErsatzView, ErsatzViewSnapshotView, drawStaticBackdropAndReturnTransformer, transformFromBaseForViewModel;
+    drawStaticBackdropAndReturnTransformer = function(paper, resolution, deviceFamily, orientation, isoSkew) {
+      var isiPhone, isiPad, rotation, rotationPoint, transformer;
+      paper.clear();
+      paper.canvas.setAttribute("width", "100%");
+      paper.canvas.setAttribute("height", "100%");
+      isiPhone = 'iphone' === deviceFamily;
+      isiPad = 'ipad' == deviceFamily;
+      if (isiPhone) {
+        width = resolution.width + 60;
+        height = resolution.height + 240;
+        paper.canvas.setAttribute("viewBox", "0 0 " + width + " " + height);
+        rotationPoint = [width / 2, height / 2];
+      } else if (isiPad) {
+        width = resolution.width + 108;
+        height = resolution.height + 176;
+        paper.canvas.setAttribute("viewBox", "0 0 " + width + " " + height);
+        rotationPoint = [width / 2, height / 2];
+      }
+      else
+      {
+        paper.canvas.setAttribute("viewBox", "0 0 " + resolution.width + " " +  resolution.height);
+      }
+      transformer = transformStack();
+      transformer.skew(0, isoSkew).translate(6, 6);
+      rotation = (function() {
+        switch (orientation) {
+          case 'landscape_right':
+            return 90;
+          case 'portrait_upside_down':
+            return 180;
+          case 'landscape_left':
+            return 270;
+          default:
+            return false;
+        }
+      })();
+      if (rotation) {
+        transformer.rotateAroundPoint.apply(transformer, [rotation].concat(__slice.call(rotationPoint)));
+      }
+      if (isiPhone) {
+        width = resolution.width + 40;
+        height = resolution.height + 228;
+        paper.rect(0, 0, width, height, 40).attr({
+          fill: "black",
+          stroke: "gray",
+          "stroke-width": 4
+        }).transform(transformer.desc());
+      } else if (isiPad) {
+        width = resolution.width + 108;
+        height = resolution.height + 86;
+        paper.rect(10, 10, width, height, 20).attr({
+          'fill': 'black',
+          'stroke': 'gray',
+          'stroke-width': 6
+        }).transform(transformer.desc());
+      }
+      if (isiPhone) {
+        x = resolution.width / 2 + 20;
+        y = resolution.height + 175;
+        transformer.push().translate(x, y);
+        paper.circle(0, 0, 34).transform(transformer.desc()).attr("fill", "90-#303030-#101010");
+        paper.rect(0, 0, 22, 22, 5).attr({
+          stroke: "gray",
+          "stroke-width": 2
+        }).transform(transformer.push().translate(-11, -11).descAndPop());
+        transformer.translate(20, 120);
+      } else if (isiPad) {
+        transformer.translate(50, 50);
+      }
+
+      if (isoSkew > 0) {
+        transformer.translate(-ISO_MAJOR_OFFSET, 0);
+      }
+      return transformer;
+    };
+    transformFromBaseForViewModel = function(baseTransformer, viewModel, withSkew) {
+      var x, y, _ref;
+      if (withSkew == null) {
+        withSkew = false;
+      }
+      _ref = viewModel.get('accessibilityFrame').origin, x = _ref.x, y = _ref.y;
+      baseTransformer.push().translate(x, y);
+      if (withSkew) {
+        baseTransformer.translate(viewModel.get('depth') * -ISO_MINOR_OFFSET, 0);
+      }
+      return baseTransformer.descAndPop();
+    };
+    ErsatzViewSnapshotView = Backbone.View.extend({
+      initialize: function() {
+        this.model.on('change:active', _.bind(this.updateOpacity, this));
+        return this.render();
+      },
+      render: function() {
+        var frame;
+        frame = this.model.get('accessibilityFrame');
+        this.el.attr({
+          transform: transformFromBaseForViewModel(this.options.baseTransformer, this.model, true),
+          src: this.model.getSnapshotUrl(),
+          x: 0,
+          y: 0,
+          width: frame.size.width,
+          height: frame.size.height
+        });
+        this.updateOpacity();
+        return this.el;
+      },
+      updateOpacity: function() {
+        var opacity;
+        opacity = (this.model.get('active') ? 1.0 : 0.05);
+        return this.el.attr('opacity', opacity);
+      }
+    });
+    return ErsatzView = Backbone.View.extend({
+      el: $('#ui-locator-view'),
+      initialize: function() {
+        _.bindAll(this, 'render');
+        this.model = new ErsatzModel();
+        this.highlights = [];
+        this.paper = new Raphael(this.el);
+        this.model.on('change:baseScreenshotUrl', _.bind(this.refreshBaseScreenshot, this));
+        this.model.on('change:isAsploded', _.bind(this.render, this));
+        this.model.on('snapshots-refreshed', _.bind(this.refreshSnapshots, this));
+        return this.model.on('change:highlightFrames', _.bind(this.refreshHighlightFrames, this));
+      },
+      render: function() {
+        var isoSkew;
+        this.highlights = [];
+        isoSkew = (this.model.get('isAsploded') ? ISO_SKEW : 0);
+        this.backdropTransformer = drawStaticBackdropAndReturnTransformer(this.paper, this.model.get('resolution'), this.model.get('deviceFamily'), this.model.get('orientation'), isoSkew);
+        this.backdrop = this.paper.image();
+        this.refreshBaseScreenshot();
+        if (this.model.get('isAsploded')) {
+          this.backdrop.attr('opacity', 0.5);
+          this.refreshSnapshots();
+        }
+        return this.el;
+      },
+      screenBounds: function() {
+        resolution = this.model.get('resolution');
+        return {
+          x: 0,
+          y: 0,
+          width: resolution.width,
+          height: resolution.height
+        };
+      },
+      refreshBaseScreenshot: function() {
+        var newScreenshotUrl;
+        newScreenshotUrl = this.model.get('baseScreenshotUrl');
+        if (newScreenshotUrl == null) {
+          return;
+        }
+        return this.backdrop.transform(this.backdropTransformer.desc()).attr(this.screenBounds()).attr('src', newScreenshotUrl).toFront();
+      },
+      refreshSnapshots: function() {
+        var _this = this;
+        return this.model.get('allViews').each(function(viewModel) {
+          var snapshotView;
+          return snapshotView = new ErsatzViewSnapshotView({
+            model: viewModel,
+            baseTransformer: _this.backdropTransformer,
+            el: _this.paper.image()
+          });
+        });
+      },
+      refreshHighlightFrames: function() {
+        var h, _i, _len, _ref,
+          _this = this;
+        _ref = this.highlights;
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          h = _ref[_i];
+          h.remove();
+        }
+        this.highlights = [];
+        return this.highlights = _.map(this.model.get('highlightFrames'), function(_arg) {
+          var origin, size;
+          origin = _arg.origin, size = _arg.size;
+          return _this.paper.rect().attr({
+            fill: "#aaff00",
+            opacity: 0.8,
+            stroke: "black",
+            transform: _this.backdropTransformer.push().translate(origin.x, origin.y).descAndPop(),
+            x: 0,
+            y: 0,
+            width: size.width,
+            height: size.height
+          });
+        });
+      }
+    });
+  });
+
+}).call(this);

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

@@ -0,0 +1,10 @@
+define ->
+  ExperimentBarModel = Backbone.Model.extend
+    defaults:
+      engines: ['shelley_compat','uiquery','calabash_uispec']
+      selectorEngine: 'shelley_compat'
+      selector: ''
+
+    actionClicked: (actionName)->
+      @trigger("#{actionName}-clicked",@)
+

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

@@ -0,0 +1,17 @@
+(function() {
+
+  define(function() {
+    var ExperimentBarModel;
+    return ExperimentBarModel = Backbone.Model.extend({
+      defaults: {
+        engines: ['shelley_compat', 'uiquery', 'calabash_uispec'],
+        selectorEngine: 'shelley_compat',
+        selector: ''
+      },
+      actionClicked: function(actionName) {
+        return this.trigger("" + actionName + "-clicked", this);
+      }
+    });
+  });
+
+}).call(this);

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

@@ -0,0 +1,44 @@
+define ['experiment_bar_model','dropdown_control'], (ExperimentBarModel,DropdownControl)->
+
+  ExperimentBarView = Backbone.View.extend
+    el: $("#selector-test")
+
+    initialize: ->
+      @actionDropdownView = new DropdownControl.DropdownView()
+      @actionDropdownView.setElement(@$('.action-buttons'))
+      @actionDropdownView.collection.reset([
+        {name: 'highlight', text:'Highlight'},
+        {name: 'touch', text:'Touch In App'},
+        {name: 'flash', text:'Flash In App'}
+      ])
+      @actionDropdownView.collection.at(0).select()
+      @actionDropdownView.collection.on 'option-clicked', (option)=> @actionClicked(option.get('name'))
+
+      @engineDropdownView = new DropdownControl.DropdownView()
+      @engineDropdownView.setElement(@$('.selector-engine'))
+      @engineDropdownView.collection.reset([
+        {name: 'shelley_compat', text:'Shelley'},
+        {name: 'uiquery', text:'UIQuery'},
+        {name: 'calabash_uispec', text:'Calabash'}
+      ])
+      @engineDropdownView.collection.at(0).select()
+      @engineDropdownView.collection.on 'option-clicked', (option)=> 
+        @model.set( 'selectorEngine', (option.get('name')) )
+
+      @$selectorInput = @$('input#query')
+     
+      
+      @model = new ExperimentBarModel()
+      @model.on 'change', _.bind(@update,@)
+      @update()
+
+    update: ->
+      @$selectorInput.val( @model.get('selector') )
+
+    actionClicked: (actionName)->
+      @updateModelFromSelectorInput() 
+      @model.actionClicked(actionName)
+
+
+    updateModelFromSelectorInput: ->
+      @model.set( 'selector', @$selectorInput.val() )

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

@@ -0,0 +1,63 @@
+(function() {
+
+  define(['experiment_bar_model', 'dropdown_control'], function(ExperimentBarModel, DropdownControl) {
+    var ExperimentBarView;
+    return ExperimentBarView = Backbone.View.extend({
+      el: $("#selector-test"),
+      initialize: function() {
+        var _this = this;
+        this.actionDropdownView = new DropdownControl.DropdownView();
+        this.actionDropdownView.setElement(this.$('.action-buttons'));
+        this.actionDropdownView.collection.reset([
+          {
+            name: 'highlight',
+            text: 'Highlight'
+          }, {
+            name: 'touch',
+            text: 'Touch In App'
+          }, {
+            name: 'flash',
+            text: 'Flash In App'
+          }
+        ]);
+        this.actionDropdownView.collection.at(0).select();
+        this.actionDropdownView.collection.on('option-clicked', function(option) {
+          return _this.actionClicked(option.get('name'));
+        });
+        this.engineDropdownView = new DropdownControl.DropdownView();
+        this.engineDropdownView.setElement(this.$('.selector-engine'));
+        this.engineDropdownView.collection.reset([
+          {
+            name: 'shelley_compat',
+            text: 'Shelley'
+          }, {
+            name: 'uiquery',
+            text: 'UIQuery'
+          }, {
+            name: 'calabash_uispec',
+            text: 'Calabash'
+          }
+        ]);
+        this.engineDropdownView.collection.at(0).select();
+        this.engineDropdownView.collection.on('option-clicked', function(option) {
+          return _this.model.set('selectorEngine', option.get('name'));
+        });
+        this.$selectorInput = this.$('input#query');
+        this.model = new ExperimentBarModel();
+        this.model.on('change', _.bind(this.update, this));
+        return this.update();
+      },
+      update: function() {
+        return this.$selectorInput.val(this.model.get('selector'));
+      },
+      actionClicked: function(actionName) {
+        this.updateModelFromSelectorInput();
+        return this.model.actionClicked(actionName);
+      },
+      updateModelFromSelectorInput: function() {
+        return this.model.set('selector', this.$selectorInput.val());
+      }
+    });
+  });
+
+}).call(this);

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

@@ -0,0 +1,96 @@
+cacheBust = (url)-> "#{url}?#{(new Date()).getTime()}"
+
+baseUrlFor = (path)->
+  window.location.protocol + "//" + window.location.host + "/" + path
+
+isErrorResponse = (response)-> 'SUCCESS' != response.outcome
+
+displayErrorResponse = (response)->
+  alert(
+    """Frank isn't happy: #{response.reason}
+    details: #{response.details}""")
+
+fetchViewHierarchy = ->
+  request = $.ajax
+    type: "POST",
+    dataType: "json",
+    url: baseUrlFor( "/dump" )
+
+fetchOrientation = ->
+  deferable = new $.Deferred()
+
+  request = $.ajax(
+    type: "GET",
+    dataType: "json",
+    url: baseUrlFor( "/orientation" )
+  ).done (response)->
+    deferable.resolve( response && response.detailed_orientation || 'unknown' )
+  .fail( deferable.reject )
+
+  deferable.promise()
+
+requestSnapshotRefresh = ->
+  $.ajax
+    type: 'GET'
+    url: baseUrlFor( "/screenshot/snapshot-all-views" )
+
+
+sendMapRequest = ({selector, engine, methodName, methodArgs} )->
+  selector ||= 'uiquery'
+  methodArgs ||= []
+
+  deferable = new $.Deferred()
+  command = {
+    query: selector
+    selector_engine: engine
+    operation: {
+      method_name: methodName, 
+      arguments: methodArgs
+    }
+  }
+
+  $.ajax({
+    type: "POST"
+    dataType: "json"
+    data: JSON.stringify( command )
+    url: baseUrlFor( '/map' )
+    success: (data)->
+      if isErrorResponse( data )
+        displayErrorResponse( data )
+        deferable.reject(data)
+      deferable.resolve(data.results)
+    error: (xhr,status,error)->
+      alert( "Error while talking to Frank: #{status}" )
+      deferable.reject(error)
+  })
+  deferable.promise()
+
+
+
+define ->
+  fetchViewHierarchy: fetchViewHierarchy
+  fetchOrientation: fetchOrientation
+  requestSnapshotRefresh: requestSnapshotRefresh
+  baseScreenshotUrl: -> 
+    cacheBust( baseUrlFor('/screenshot') )
+  snapshotUrlForViewWithUid: (uid)-> 
+    cacheBust( baseUrlFor( "/screenshot/view-snapshot/#{uid}" ) )
+  sendFlashCommand: (selector,engine)-> 
+    sendMapRequest( 
+      selector:selector, 
+      engine: engine, 
+      methodName: 'FEX_flash'
+    )
+  sendTouchCommand: (selector,engine)-> 
+    sendMapRequest( 
+      selector:selector, 
+      engine: engine, 
+      methodName: 'touch'
+    )
+  getAccessibilityFramesForViewsMatchingSelector: (selector,engine)->
+    sendMapRequest( 
+      selector:selector, 
+      engine: engine, 
+      methodName: 'accessibilityFrame'
+    )
+