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

frank-cucumber 0.9.6 → 0.9.7

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);