rufus 0.1

data/RufusApp/Frank/frank_static_resources.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/RufusApp/Frank/frank_static_resources.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/RufusApp/Frank/frank_static_resources.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/RufusApp/Frank/frank_static_resources.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/RufusApp/Frank/frank_static_resources.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

data/RufusApp/Frank/frank_static_resources.bundle/js/details_view.js

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

data/RufusApp/Frank/frank_static_resources.bundle/js/dropdown_control.coffee

@@ -0,0 +1,64 @@
+define ->
+
+  DropdownModel = Backbone.Model.extend
+    select: ->
+      @collection.each (model) =>
+        model.set( 'selected', model == @ )
+      @trigger('option-clicked',@)
+
+  DropdownCollection = Backbone.Collection.extend
+    model: DropdownModel
+
+  DropdownView = Backbone.View.extend
+    tagName: 'div'
+    className: 'dropdown'
+
+    events:
+      "click .drop-indicator": 'clickedDrop'
+      "click .button": 'clickedItem'
+
+    initialize: ->
+      @collection = new DropdownCollection()
+      @collection.on 'all', _.bind(@render,@)
+      
+      # hackery :(
+      $('body').on 'click', _.bind(@clickedOutsideDropdown,@)
+
+    selectedModel: ->
+      selected = @collection.find (m)-> m.get('selected')
+      selected || @collection.at(0)
+    unselectedModels: ->
+      _(@collection.reject (m)-> m.get('selected'))
+
+    createButtonFor: (model)->
+      $("""<button>#{model.get('text')}</button>""")
+        .on 'click', => @clickedItem(model)
+
+    render: ->
+      @$el
+        .empty()
+        .append( @createButtonFor(@selectedModel()) )
+        .append( $ul = $("<ul>") )
+
+      @unselectedModels().each (model)=>
+        $ul.append( @createButtonFor(model) )
+
+      @$el.append( """<div class="drop-indicator">v</div>""" )
+
+    clickedDrop: (e)->
+      e.stopPropagation() #prevent clickedOutsideDropdown from firing
+      @$('ul').toggleClass('shown')
+
+    clickedOutsideDropdown: ->
+      @$('ul').removeClass('shown')
+
+    clickedItem: (model)->
+      model.select()
+
+
+
+
+  {
+    DropdownModel : DropdownModel
+    DropdownView  : DropdownView
+  }

data/RufusApp/Frank/frank_static_resources.bundle/js/dropdown_control.js

@@ -0,0 +1,73 @@
+(function() {
+
+  define(function() {
+    var DropdownCollection, DropdownModel, DropdownView;
+    DropdownModel = Backbone.Model.extend({
+      select: function() {
+        var _this = this;
+        this.collection.each(function(model) {
+          return model.set('selected', model === _this);
+        });
+        return this.trigger('option-clicked', this);
+      }
+    });
+    DropdownCollection = Backbone.Collection.extend({
+      model: DropdownModel
+    });
+    DropdownView = Backbone.View.extend({
+      tagName: 'div',
+      className: 'dropdown',
+      events: {
+        "click .drop-indicator": 'clickedDrop',
+        "click .button": 'clickedItem'
+      },
+      initialize: function() {
+        this.collection = new DropdownCollection();
+        this.collection.on('all', _.bind(this.render, this));
+        return $('body').on('click', _.bind(this.clickedOutsideDropdown, this));
+      },
+      selectedModel: function() {
+        var selected;
+        selected = this.collection.find(function(m) {
+          return m.get('selected');
+        });
+        return selected || this.collection.at(0);
+      },
+      unselectedModels: function() {
+        return _(this.collection.reject(function(m) {
+          return m.get('selected');
+        }));
+      },
+      createButtonFor: function(model) {
+        var _this = this;
+        return $("<button>" + (model.get('text')) + "</button>").on('click', function() {
+          return _this.clickedItem(model);
+        });
+      },
+      render: function() {
+        var $ul,
+          _this = this;
+        this.$el.empty().append(this.createButtonFor(this.selectedModel())).append($ul = $("<ul>"));
+        this.unselectedModels().each(function(model) {
+          return $ul.append(_this.createButtonFor(model));
+        });
+        return this.$el.append("<div class=\"drop-indicator\">v</div>");
+      },
+      clickedDrop: function(e) {
+        e.stopPropagation();
+        return this.$('ul').toggleClass('shown');
+      },
+      clickedOutsideDropdown: function() {
+        return this.$('ul').removeClass('shown');
+      },
+      clickedItem: function(model) {
+        return model.select();
+      }
+    });
+    return {
+      DropdownModel: DropdownModel,
+      DropdownView: DropdownView
+    };
+  });
+
+}).call(this);

data/RufusApp/Frank/frank_static_resources.bundle/js/ersatz_model.coffee

@@ -0,0 +1,46 @@
+define ["frank"], (frank)->
+
+  ErsatzModel = Backbone.Model.extend
+    default: 
+      highlightFrames = []
+
+    initialize: ->
+      @refreshBaseScreenshot()
+
+    highlightSomeFramesForABit: (frames)->
+      @set('highlightFrames',frames)
+      @temporaryHighlightTimeout = window.setTimeout( =>
+        @set('highlightFrames',[])
+        @temporaryHighlightTimeout = undefined
+      , 1500 )
+
+    resetViews: (views,deviceFamily,orientation)->
+      @set('allViews',views)
+      @set('deviceFamily',deviceFamily)
+      @set('orientation',orientation)
+      @set('highlightFrames',[])
+      @configureAllViews(views)
+
+    refreshBaseScreenshot: ->
+      @set('baseScreenshotUrl',frank.baseScreenshotUrl())
+
+    toggleAsploded: ->
+      isAsploded = !(@get('isAsploded'))
+      @set('isAsploded',isAsploded)
+      if isAsploded
+        @updateAsplodedViews()
+
+      isAsploded
+
+    updateAsplodedViews: ()->
+      frank.requestSnapshotRefresh().done =>
+        @trigger('snapshots-refreshed',@)
+    
+    configureAllViews: (allViews)->
+      allViews.on 'change:active', (subject,isActive)=>
+        window.clearTimeout(@temporaryHighlightTimeout) if @temporaryHighlightTimeout?
+
+        if isActive && !@get('isAsploded')
+          @set('highlightFrames',[subject.get('accessibilityFrame')])
+        else
+          @set('highlightFrames',[])