RubyGems - frank-cucumber - Versions diffs - 0.9.6 → 0.9.7 - Mend

frank-cucumber 0.9.6 → 0.9.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

data/frank-skeleton/frank_static_resources.bundle/index.html CHANGED Viewed

@@ -3,15 +3,15 @@
   <head>
     <meta charset='utf-8' />
     <title>Symbiote</title>
-    <script src='jquery.min.js'></script>
-    <script src='jquery-ui.min.js'></script>
-    <script src='coffee-script.js'></script>
-    <script src='raphael-min.js'></script>
-    <script src='jquery.treeview.js'></script>
-    <script src='json2.js'></script>
-    <script src='underscore.js'></script>
-    <script src='symbiote.js'></script>
-    <script src='symbiote_ui.coffee' type='text/coffeescript'></script>
+    <script src='js/lib/jquery.min.js'></script>
+    <script src='js/lib/jquery-ui.min.js'></script>
+    <script src='js/lib/jquery.treeview.js'></script>
+    <script src='js/lib/coffee-script.js'></script>
+    <script src='js/lib/raphael.js'></script>
+    <script src='js/lib/underscore.js'></script>
+    <script src='js/lib/backbone.js'></script>
+    <script src='js/lib/json2.js'></script>
+    <script data-main='/js/main' src='js/lib/require.js'></script>
     <link href='reset.css' rel='stylesheet' />
     <link href='pictos/pictos.css' rel='stylesheet' />
     <link href='jquery.treeview.css' rel='stylesheet' />
@@ -20,7 +20,7 @@
   <body>
     <header id='header'>
       <h1>symbiote</h1>
-      <i>From here you can inspect the current state of the app's UI, and test which UI elements a selector will select</i>
+      <div class='toast'></div>
       <div id='refresh'>
         <button id='dump_button'>
           <span></span>
@@ -29,40 +29,30 @@
     </header>
     <section class='symbiote_shell'>
       <article id='selector-test'>
+        <label class='selector-engine-label'>
+          use &rarr;
+        </label>
+        <div class='selector-engine dropdown'></div>
+        <label></label>
+        to select views that match &rarr;
         <input id='query' placeholder="Selector label marked:'Search'" />
-        <div class='action-buttons'>
-          <button id='highlight'>Highlight</button>
-          <ul class='extra-actions'>
-            <li>
-              <button id='touch'>Touch In App</button>
-            </li>
-            <li>
-              <button id='flash'>Flash In App</button>
-            </li>
-          </ul>
-          <div class='drop-indicator'>v</div>
-        </div>
-        <div class='selector_engine'>
-          <input id='selector_engine' value='shelley_compat' />
-          <button id='selector_engine_dropdown'>&#x25BC;</button>
-          <ul id='selector_engine_options'>
-            <li>shelley_compat</li>
-            <li>uiquery</li>
-          </ul>
-        </div>
+        <label>
+          and then &rarr;
+        </label>
+        <div class='action-buttons dropdown'></div>
       </article>
     </section>
     <section class='the-columns'>
       <div id='list-tabs'>
         <ul>
           <li>
-            <a href='#dom_dump'>View Heirarchy</a>
+            <a href='#dom-dump'>View Heirarchy</a>
           </li>
           <li>
             <a href='#accessible-views-tab'>Accessible Elements</a>
           </li>
         </ul>
-        <div id='dom_dump'>
+        <div id='dom-dump'>
           <ul></ul>
         </div>
         <div id='accessible-views-tab'>
@@ -76,7 +66,7 @@
       <div id='inspect-tabs'>
         <ul>
           <li>
-            <a href='#dom_detail'>View Properties</a>
+            <a href='#dom-detail'>View Properties</a>
           </li>
           <li>
             <a href='#ui-locator'>View Locator</a>
@@ -89,10 +79,15 @@
               <span>Y</span>
             </button>
           </div>
+          <div id='asploder'>
+            <button>
+              Asplode
+            </button>
+          </div>
           <button id='ui-locator-rotator'>1</button>
           <div id='ui-locator-view'></div>
         </div>
-        <div id='dom_detail'>
+        <div id='dom-detail'>
           <p>Click an element in the view heirarchy on the right to see details of that element here.</p>
         </div>
       </div>

data/frank-skeleton/frank_static_resources.bundle/{index.haml → index.html.haml} RENAMED Viewed

@@ -4,15 +4,17 @@
     %meta(charset="utf-8")
     %title Symbiote
-    %script(src="jquery.min.js")
-    %script(src="jquery-ui.min.js")
-    %script(src="coffee-script.js")
-    %script(src="raphael-min.js")
-    %script(src="jquery.treeview.js")
-    %script(src="json2.js")
-    %script(src="underscore.js")
-    %script(src="symbiote.js")
-    %script(src="symbiote_ui.coffee" type="text/coffeescript")
+    %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="reset.css" rel="stylesheet")
     %link(href="pictos/pictos.css" rel="stylesheet")
     %link(href="jquery.treeview.css" rel="stylesheet")
@@ -21,39 +23,33 @@
   %body
     %header#header
       %h1 symbiote
-      %i From here you can inspect the current state of the app's UI, and test which UI elements a selector will select
+      .toast
       #refresh
         %button#dump_button
           %span
     %section.symbiote_shell
       %article#selector-test
-        %input#query(placeholder="Selector label marked:'Search'")
-        .action-buttons
-          %button#highlight Highlight
-          %ul.extra-actions
-            %li
-              %button#touch Touch In App
-            %li
-              %button#flash Flash In App
-          %div.drop-indicator v
-        .selector_engine
-          %input#selector_engine(value="shelley_compat")
-          %button#selector_engine_dropdown &#x25BC;
-          %ul#selector_engine_options
-            %li shelley_compat
-            %li uiquery
+        %label.selector-engine-label
+          use &rarr;
+        .selector-engine.dropdown
+        %label
+        to select views that match &rarr;
+        %input#query(placeholder="Selector label marked:'Search'")
+        %label
+          and then &rarr;
+        .action-buttons.dropdown
     %section.the-columns
       #list-tabs
         %ul
           %li
-            %a(href="#dom_dump") View Heirarchy
+            %a(href="#dom-dump") View Heirarchy
           %li
             %a(href="#accessible-views-tab") Accessible Elements
-        #dom_dump
+        #dom-dump
           %ul
         #accessible-views-tab
           %div.hints
@@ -64,7 +60,7 @@
       #inspect-tabs
         %ul
           %li
-            %a(href="#dom_detail") View Properties
+            %a(href="#dom-detail") View Properties
           %li
             %a(href="#ui-locator") View Locator
         #ui-locator
@@ -72,8 +68,11 @@
             %button
               Live
               %span Y
+          #asploder
+            %button
+              Asplode
           %button#ui-locator-rotator 1
           #ui-locator-view
-        #dom_detail
+        #dom-detail
           %p Click an element in the view heirarchy on the right to see details of that element here.

data/frank-skeleton/frank_static_resources.bundle/js/accessible_views_view.coffee ADDED Viewed

@@ -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/js/accessible_views_view.js ADDED Viewed

@@ -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/js/controller.coffee ADDED Viewed

@@ -0,0 +1,129 @@
+RELOAD_INTERVAL = 500
+guessAtDeviceFamilyBasedOnViewDump = (viewHeir)->
+    switch viewHeir.accessibilityFrame.size.height
+      when 1024 then 'ipad'
+      when 480 then 'iphone'
+      else
+        console.warn( "couldn't recognize device family based on screen height of " + data.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.fetchViewHeirarchy(), frank.fetchOrientation() ).done ([rawHeir,],orientation)->
+        deviceFamily = guessAtDeviceFamilyBasedOnViewDump(rawHeir)
+        treeView.model.resetViewHeir(rawHeir)
+        ersatzView.model.resetViews(treeView.model.get('allViews'),deviceFamily,orientation)
+        accessibleViews = treeView.model.getAccessibleViews()
+        accessibleViewsView.collection.reset( accessibleViews )
+        ersatzView.render()
+        deferable.resolve()
+      deferable.promise()
+    boot = ->
+      tabsController.selectLocatorTab()
+      reload()
+    {
+      boot: boot
+    }
+  createController

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

@@ -0,0 +1,142 @@
+(function() {
+  var RELOAD_INTERVAL, guessAtDeviceFamilyBasedOnViewDump;
+  RELOAD_INTERVAL = 500;
+  guessAtDeviceFamilyBasedOnViewDump = function(viewHeir) {
+    switch (viewHeir.accessibilityFrame.size.height) {
+      case 1024:
+        return 'ipad';
+      case 480:
+        return 'iphone';
+      default:
+        console.warn("couldn't recognize device family based on screen height of " + data.accessibilityFrame.size.height + "px");
+        return 'unknown';
+    }
+  };
+  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.fetchViewHeirarchy(), frank.fetchOrientation()).done(function(_arg1, orientation) {
+          var accessibleViews, deviceFamily, rawHeir;
+          rawHeir = _arg1[0];
+          deviceFamily = guessAtDeviceFamilyBasedOnViewDump(rawHeir);
+          treeView.model.resetViewHeir(rawHeir);
+          ersatzView.model.resetViews(treeView.model.get('allViews'), deviceFamily, orientation);
+          accessibleViews = treeView.model.getAccessibleViews();
+          accessibleViewsView.collection.reset(accessibleViews);
+          ersatzView.render();
+          return deferable.resolve();
+        });
+        return deferable.promise();
+      };
+      boot = function() {
+        tabsController.selectLocatorTab();
+        return reload();
+      };
+      return {
+        boot: boot
+      };
+    };
+    return createController;
+  });
+}).call(this);