frank-cucumber 0.9.6 → 0.9.7

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

@@ -0,0 +1,198 @@
+(function() {
+  var ISO_MAJOR_OFFSET, ISO_MINOR_OFFSET, ISO_SKEW, SCREEN_BOUNDS,
+    __slice = [].slice;
+
+  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
+    }
+  };
+
+  define(['transform_stack', 'ersatz_model'], function(transformStack, ErsatzModel) {
+    var ErsatzView, ErsatzViewSnapshotView, drawStaticBackdropAndReturnTransformer, transformFromBaseForViewModel;
+    drawStaticBackdropAndReturnTransformer = function(paper, deviceFamily, orientation, isoSkew) {
+      var isiPhone, rotation, rotationPoint, transformer;
+      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 = (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) {
+        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) {
+        transformer.push().translate(180, 655);
+        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 {
+        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('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() {
+        return SCREEN_BOUNDS[this.model.get('deviceFamily')];
+      },
+      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/js/experiment_bar_model.coffee

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

data/frank-skeleton/frank_static_resources.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'],
+        selectorEngine: 'shelley_compat',
+        selector: ''
+      },
+      actionClicked: function(actionName) {
+        return this.trigger("" + actionName + "-clicked", this);
+      }
+    });
+  });
+
+}).call(this);

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

@@ -0,0 +1,43 @@
+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'}
+      ])
+      @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/js/experiment_bar_view.js

@@ -0,0 +1,60 @@
+(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'
+          }
+        ]);
+        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/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}""")
+
+fetchViewHeirarchy = ->
+  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 ->
+  fetchViewHeirarchy: fetchViewHeirarchy
+  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'
+    )
+

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

@@ -0,0 +1,118 @@
+(function() {
+  var baseUrlFor, cacheBust, displayErrorResponse, fetchOrientation, fetchViewHeirarchy, isErrorResponse, requestSnapshotRefresh, sendMapRequest;
+
+  cacheBust = function(url) {
+    return "" + url + "?" + ((new Date()).getTime());
+  };
+
+  baseUrlFor = function(path) {
+    return window.location.protocol + "//" + window.location.host + "/" + path;
+  };
+
+  isErrorResponse = function(response) {
+    return 'SUCCESS' !== response.outcome;
+  };
+
+  displayErrorResponse = function(response) {
+    return alert("Frank isn't happy: " + response.reason + "\ndetails: " + response.details);
+  };
+
+  fetchViewHeirarchy = function() {
+    var request;
+    return request = $.ajax({
+      type: "POST",
+      dataType: "json",
+      url: baseUrlFor("/dump")
+    });
+  };
+
+  fetchOrientation = function() {
+    var deferable, request;
+    deferable = new $.Deferred();
+    request = $.ajax({
+      type: "GET",
+      dataType: "json",
+      url: baseUrlFor("/orientation")
+    }).done(function(response) {
+      return deferable.resolve(response && response.detailed_orientation || 'unknown');
+    }).fail(deferable.reject);
+    return deferable.promise();
+  };
+
+  requestSnapshotRefresh = function() {
+    return $.ajax({
+      type: 'GET',
+      url: baseUrlFor("/screenshot/snapshot-all-views")
+    });
+  };
+
+  sendMapRequest = function(_arg) {
+    var command, deferable, engine, methodArgs, methodName, selector;
+    selector = _arg.selector, engine = _arg.engine, methodName = _arg.methodName, methodArgs = _arg.methodArgs;
+    selector || (selector = 'uiquery');
+    methodArgs || (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: function(data) {
+        if (isErrorResponse(data)) {
+          displayErrorResponse(data);
+          deferable.reject(data);
+        }
+        return deferable.resolve(data.results);
+      },
+      error: function(xhr, status, error) {
+        alert("Error while talking to Frank: " + status);
+        return deferable.reject(error);
+      }
+    });
+    return deferable.promise();
+  };
+
+  define(function() {
+    return {
+      fetchViewHeirarchy: fetchViewHeirarchy,
+      fetchOrientation: fetchOrientation,
+      requestSnapshotRefresh: requestSnapshotRefresh,
+      baseScreenshotUrl: function() {
+        return cacheBust(baseUrlFor('/screenshot'));
+      },
+      snapshotUrlForViewWithUid: function(uid) {
+        return cacheBust(baseUrlFor("/screenshot/view-snapshot/" + uid));
+      },
+      sendFlashCommand: function(selector, engine) {
+        return sendMapRequest({
+          selector: selector,
+          engine: engine,
+          methodName: 'FEX_flash'
+        });
+      },
+      sendTouchCommand: function(selector, engine) {
+        return sendMapRequest({
+          selector: selector,
+          engine: engine,
+          methodName: 'touch'
+        });
+      },
+      getAccessibilityFramesForViewsMatchingSelector: function(selector, engine) {
+        return sendMapRequest({
+          selector: selector,
+          engine: engine,
+          methodName: 'accessibilityFrame'
+        });
+      }
+    };
+  });
+
+}).call(this);