frank-cucumber 1.1.1 → 1.1.2

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 (32) hide show
  1. data/frank-cucumber.gemspec +1 -1
  2. data/frank-skeleton/frank_static_resources.bundle/index.html +6 -16
  3. data/frank-skeleton/frank_static_resources.bundle/index.html.haml +12 -14
  4. data/frank-skeleton/frank_static_resources.bundle/js/controller.coffee +6 -1
  5. data/frank-skeleton/frank_static_resources.bundle/js/controller.js +8 -1
  6. data/frank-skeleton/frank_static_resources.bundle/stylesheets/css/symbiote.css +1 -0
  7. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_elements.scss +28 -0
  8. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_header.scss +61 -0
  9. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_inspect_tabs_list_tabs.scss +194 -0
  10. data/frank-skeleton/frank_static_resources.bundle/{jquery.treeview.css → stylesheets/sass/_jquery.treeview.scss} +18 -20
  11. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_jqui.scss +2 -0
  12. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_layout.scss +13 -0
  13. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_mixins.sass +137 -0
  14. data/frank-skeleton/frank_static_resources.bundle/{reset.css → stylesheets/sass/_reset.scss} +2 -2
  15. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_selector_test_toolbar.scss +81 -0
  16. data/frank-skeleton/frank_static_resources.bundle/{_solarized_colors.scss → stylesheets/sass/_solarized.scss} +0 -0
  17. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_typography.scss +11 -0
  18. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_unicode.scss +3 -0
  19. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/_z_index.scss +2 -0
  20. data/frank-skeleton/frank_static_resources.bundle/stylesheets/sass/symbiote.scss +26 -0
  21. data/frank-skeleton/libCocoaHTTPServer.a +0 -0
  22. data/frank-skeleton/libFrank.a +0 -0
  23. data/frank-skeleton/libShelley.a +0 -0
  24. data/lib/frank-cucumber.rb +1 -0
  25. data/lib/frank-cucumber/cli.rb +14 -3
  26. data/lib/frank-cucumber/core_frank_steps.rb +53 -28
  27. data/lib/frank-cucumber/frank_helper.rb +32 -4
  28. data/lib/frank-cucumber/rect.rb +24 -0
  29. data/lib/frank-cucumber/version.rb +1 -1
  30. data/test/rect_test.rb +25 -0
  31. metadata +114 -35
  32. data/frank-skeleton/frank_static_resources.bundle/symbiote.css +0 -505
@@ -28,7 +28,7 @@ Gem::Specification.new do |s|
28
28
  s.add_dependency( "json" ) # TODO: figure out how to be more permissive as to which JSON gems we allow
29
29
  s.add_dependency( "dnssd" )
30
30
  s.add_dependency( "thor" )
31
- s.add_dependency( "xcodeproj" )
31
+ s.add_dependency( "xcodeproj", ["~>0.3.5"] )
32
32
 
33
33
  s.add_development_dependency( "rr" )
34
34
  s.add_development_dependency( "yard" )
@@ -12,10 +12,8 @@
12
12
  <script src='js/lib/backbone.js'></script>
13
13
  <script src='js/lib/json2.js'></script>
14
14
  <script data-main='/js/main' src='js/lib/require.js'></script>
15
- <link href='reset.css' rel='stylesheet' />
15
+ <link href='/stylesheets/css/symbiote.css' rel='stylesheet' />
16
16
  <link href='pictos/pictos.css' rel='stylesheet' />
17
- <link href='jquery.treeview.css' rel='stylesheet' />
18
- <link href='symbiote.css' rel='stylesheet' />
19
17
  </head>
20
18
  <body>
21
19
  <header id='header'>
@@ -28,19 +26,11 @@
28
26
  </div>
29
27
  </header>
30
28
  <section class='symbiote_shell'>
31
- <article id='selector-test'>
32
- <label class='selector-engine-label'>
33
- use &rarr;
34
- </label>
35
- <div class='selector-engine dropdown'></div>
36
- <label></label>
37
- to select views that match &rarr;
38
- <input id='query' placeholder="Selector label marked:'Search'" />
39
- <label>
40
- and then &rarr;
41
- </label>
42
- <div class='action-buttons dropdown'></div>
43
- </article>
29
+ <article id='selector-test'><div class='wrap outter'><label class='selector-engine-label'>use</label>
30
+ <div class='selector-engine dropdown'></div></div><div class='wrap middle'><label class='query'>to select views matching</label><input id='query' placeholder="Selector label marked:'Search'" /></div><div class='wrap outter'>
31
+ <label>and then</label>
32
+ <div class='action-buttons dropdown'></div>
33
+ </div></article>
44
34
  </section>
45
35
  <section class='the-columns'>
46
36
  <div id='list-tabs'>
@@ -15,10 +15,8 @@
15
15
 
16
16
  %script(data-main="/js/main" src="js/lib/require.js")
17
17
 
18
- %link(href="reset.css" rel="stylesheet")
18
+ %link(href="/stylesheets/css/symbiote.css" rel="stylesheet")
19
19
  %link(href="pictos/pictos.css" rel="stylesheet")
20
- %link(href="jquery.treeview.css" rel="stylesheet")
21
- %link(href="symbiote.css" rel="stylesheet")
22
20
 
23
21
  %body
24
22
  %header#header
@@ -30,17 +28,17 @@
30
28
 
31
29
  %section.symbiote_shell
32
30
  %article#selector-test
33
- %label.selector-engine-label
34
- use &rarr;
35
- .selector-engine.dropdown
31
+ .wrap.outter<>
32
+ %label.selector-engine-label use
33
+ .selector-engine.dropdown
36
34
 
37
- %label
38
- to select views that match &rarr;
39
- %input#query(placeholder="Selector label marked:'Search'")
35
+ .wrap.middle<>
36
+ %label.query<> to select views matching
37
+ %input#query(placeholder="Selector label marked:'Search'")<>
40
38
 
41
- %label
42
- and then &rarr;
43
- .action-buttons.dropdown
39
+ .wrap.outter>
40
+ %label and then
41
+ .action-buttons.dropdown
44
42
 
45
43
  %section.the-columns
46
44
  #list-tabs
@@ -63,9 +61,9 @@
63
61
  %a(href="#dom-detail") View Properties
64
62
  %li
65
63
  %a(href="#ui-locator") View Locator
66
- #ui-locator
64
+ #ui-locator
67
65
  #live-view
68
- %button
66
+ %button
69
67
  Live
70
68
  %span Y
71
69
  #asploder
@@ -104,7 +104,7 @@ define ['frank'],(frank)->
104
104
 
105
105
  reload = ->
106
106
  deferable = $.Deferred()
107
- $.when( frank.fetchViewHeirarchy(), frank.fetchOrientation() ).done ([rawHeir,],orientation)->
107
+ $.when( frank.fetchViewHeirarchy(), frank.fetchOrientation() ).done( ([rawHeir,],orientation)->
108
108
  deviceFamily = guessAtDeviceFamilyBasedOnViewDump(rawHeir)
109
109
 
110
110
  treeView.model.resetViewHeir(rawHeir)
@@ -115,6 +115,11 @@ define ['frank'],(frank)->
115
115
 
116
116
  ersatzView.render()
117
117
  deferable.resolve()
118
+ ).fail( (args...)->
119
+ toastController.showToastMessage('encountered an error while talking to Frank')
120
+ window.alert( "Ruh roh. Encountered an error while talking to Frank.\nSee the javascript console for all the details" )
121
+ console.log( "Failed while talking to Frank.", args )
122
+ )
118
123
 
119
124
  deferable.promise()
120
125
 
@@ -1,5 +1,6 @@
1
1
  (function() {
2
- var RELOAD_INTERVAL, guessAtDeviceFamilyBasedOnViewDump;
2
+ var RELOAD_INTERVAL, guessAtDeviceFamilyBasedOnViewDump,
3
+ __slice = [].slice;
3
4
 
4
5
  RELOAD_INTERVAL = 500;
5
6
 
@@ -125,6 +126,12 @@
125
126
  accessibleViewsView.collection.reset(accessibleViews);
126
127
  ersatzView.render();
127
128
  return deferable.resolve();
129
+ }).fail(function() {
130
+ var args;
131
+ args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
132
+ toastController.showToastMessage('encountered an error while talking to Frank');
133
+ window.alert("Ruh roh. Encountered an error while talking to Frank.\nSee the javascript console for all the details");
134
+ return console.log("Failed while talking to Frank.", args);
128
135
  });
129
136
  return deferable.promise();
130
137
  };
@@ -0,0 +1 @@
1
+ html,body{position:relative;margin:0;padding:0;min-height:100%;width:100%;height:100%}div,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,keygen,select,button,button::-moz-focus-inner,isindex,hr{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}input,textarea{border:none;outline:none;padding:none;background-color:#fff}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}li{list-style-type:none}caption,th{text-align:left}em,strong{font-style:normal;font-weight:normal}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0}a,a:hover,a:visited,a:active,a:link{text-decoration:none}form{display:block}textarea:focus,input:focus,select:focus{outline:none}input,textarea,keygen,select,button,isindex{font:inherit;color:inherit;letter-spacing:inherit;word-spacing:inherit;line-height:inherit;text-transform:none;text-indent:0;text-shadow:inherit;display:inline-block;text-align:inherit;border:none}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,address{display:block}.clear,.clearfloat{clear:both}h1,h2,h3,h4,h5,h6{font-size:1.0em}*{-webkit-box-sizing:border-box;-khtml-box-sizing:border-box;-icab-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}html{background-color:#efefef;font-family:"Helvetica Neue","HelveticaNeue",Arial;font-size:16px;line-height:24px}input,button{padding:8px 2em 8px 0.5em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}input{text-align:left;-webkit-box-shadow:0 2px 3px 0 rgba(255,255,255,0.4),inset 0 1px 3px 0px rgba(0,0,0,0.7);-moz-box-shadow:0 2px 3px 0 rgba(255,255,255,0.4),inset 0 1px 3px 0px rgba(0,0,0,0.7);box-shadow:0 2px 3px 0 rgba(255,255,255,0.4),inset 0 1px 3px 0px rgba(0,0,0,0.7)}button{color:#fff;text-shadow:0 -1px rgba(0,0,0,0.3);background-image:-webkit-linear-gradient(top, #ddd, #999);background-image:-moz-linear-gradient(top, #ddd, #999);background-image:-ms-linear-gradient(top, #ddd, #999);background-image:linear-gradient(top, #ddd, #999);-webkit-box-shadow:inset 0 1px 3px 0px rgba(0,0,0,0.7);-moz-box-shadow:inset 0 1px 3px 0px rgba(0,0,0,0.7);box-shadow:inset 0 1px 3px 0px rgba(0,0,0,0.7)}button:hover{background-image:-webkit-linear-gradient(top, #ccc, #999);background-image:-moz-linear-gradient(top, #ccc, #999);background-image:-ms-linear-gradient(top, #ccc, #999);background-image:linear-gradient(top, #ccc, #999)}button:active{background:#999}#header{position:relative;height:40px;padding-left:10px;overflow:hidden;color:#fff;text-shadow:0 -1px rgba(0,0,0,0.4);background-image:-webkit-linear-gradient(top, #666, #333);background-image:-moz-linear-gradient(top, #666, #333);background-image:-ms-linear-gradient(top, #666, #333);background-image:linear-gradient(top, #666, #333)}#header a{color:#aaff00;font-size:20px;font-weight:bold}#header h1{font-size:2em;float:left}.toast{padding-top:40px;padding-left:40px;float:left;height:40px;color:hotpink;font-size:1.1em;font-style:italic;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;transition:all 0.2s linear}.toast.show{padding-top:8px}#refresh{float:right}#refresh button,#refresh span{height:40px;width:40px;display:block;text-align:center;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px}#refresh button{position:relative}#refresh span{position:absolute;top:0;right:0;background:url("/images/loader.png") center center no-repeat;background-size:80% auto;-webkit-transition:background 1s;-moz-transition:background 1s;transition:background 1s}.working #refresh span{background-image:url("/images/loader.gif");background-size:80% auto}#selector-test{position:relative;text-align:center;padding:8px 0}#selector-test .wrap{display:inline-block;position:relative;vertical-align:middle;padding:0 .5em}#selector-test .wrap.middle{width:60%}#selector-test .wrap.outter{width:20%}#selector-test #query{width:100%}#selector-test label{display:block;text-align:left;text-transform:capitalize}#selector-test label:after{content:"\21b4";font-size:.8em;font-weight:bold;padding-left:.3em}.dropdown{position:relative;display:block;width:100%}.dropdown *{z-index:1}.dropdown button{position:relative;width:100%;padding-left:.8em;padding-right:2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown ul{position:absolute;top:100%;width:100%;float:left;opacity:0;visibility:hidden;-webkit-transition:visibility 0s linear 0.2s,opacity 0.2s linear;-moz-transition:visibility 0s linear 0.2s,opacity 0.2s linear;transition:visibility 0s linear 0.2s,opacity 0.2s linear}.dropdown ul.shown{opacity:1;visibility:visible;-webkit-transition-delay:0s;-moz-transition-delay:0s;transition-delay:0s}.dropdown .drop-indicator{color:#eee;position:absolute;width:2em;right:0;top:6px;bottom:6px;border-left:1px solid white;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.the-columns{position:absolute;top:120px;right:0;bottom:0;left:0}#inspect-tabs,#list-tabs{position:absolute;top:0;bottom:0}#inspect-tabs{right:0;left:60%;overflow:hidden;border-left:1px solid rgba(255,255,255,0.1);-webkit-transition:left 0.3s;-moz-transition:left 0.3s;transition:left 0.3s;-webkit-box-shadow:inset 3px 0 3px 0 rgba(0,0,0,0.4);-moz-box-shadow:inset 3px 0 3px 0 rgba(0,0,0,0.4);box-shadow:inset 3px 0 3px 0 rgba(0,0,0,0.4);-webkit-border-radius:3px 0 0 0;-moz-border-radius:3px 0 0 0;border-radius:3px 0 0 0}.landscape #inspect-tabs{left:50%}#list-tabs{right:40%;left:0;-webkit-transition:right 0.3s;-moz-transition:right 0.3s;transition:right 0.3s;-webkit-border-radius:0 3px 0 0;-moz-border-radius:0 3px 0 0;border-radius:0 3px 0 0;-webkit-box-shadow:inset -3px 0 3px 0 rgba(0,0,0,0.4);-moz-box-shadow:inset -3px 0 3px 0 rgba(0,0,0,0.4);box-shadow:inset -3px 0 3px 0 rgba(0,0,0,0.4)}.landscape #list-tabs{right:50%}#list-tabs>div,#dom-detail{position:absolute;top:40px;right:0;bottom:0;left:0;overflow-y:scroll}#inspect-tabs>ul,#list-tabs>ul{overflow:hidden;-webkit-box-shadow:inset 0 1px 3px 0px rgba(0,0,0,0.7);-moz-box-shadow:inset 0 1px 3px 0px rgba(0,0,0,0.7);box-shadow:inset 0 1px 3px 0px rgba(0,0,0,0.7)}#inspect-tabs>ul>li,#list-tabs>ul>li{float:left;position:relative;width:50%;display:inline-block;font-size:12px;margin:0;padding:0;text-align:center;border:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}#inspect-tabs>ul>li>a,#list-tabs>ul>li>a{float:none;padding:inherit;line-height:40px;cursor:pointer;display:block;color:#fff;font-size:16px;font-weight:bold;text-shadow:0 -1px rgba(0,0,0,0.3);background-image:-webkit-linear-gradient(top, rgba(221,221,221,0.6), rgba(153,153,153,0.6));background-image:-moz-linear-gradient(top, rgba(221,221,221,0.6), rgba(153,153,153,0.6));background-image:-ms-linear-gradient(top, rgba(221,221,221,0.6), rgba(153,153,153,0.6));background-image:linear-gradient(top, rgba(221,221,221,0.6), rgba(153,153,153,0.6));-webkit-box-shadow:inset 0 0 2px 0px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 0 2px 0px rgba(0,0,0,0.4);box-shadow:inset 0 0 2px 0px rgba(0,0,0,0.4)}#inspect-tabs>ul>li>a:hover,#list-tabs>ul>li>a:hover{background-image:-webkit-linear-gradient(top, rgba(204,204,204,0.6), rgba(153,153,153,0.6));background-image:-moz-linear-gradient(top, rgba(204,204,204,0.6), rgba(153,153,153,0.6));background-image:-ms-linear-gradient(top, rgba(204,204,204,0.6), rgba(153,153,153,0.6));background-image:linear-gradient(top, rgba(204,204,204,0.6), rgba(153,153,153,0.6))}#inspect-tabs>ul>li>a:active,#list-tabs>ul>li>a:active{background:rgba(153,153,153,0.6);-webkit-box-shadow:inset 0 0 3px 0px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 0 3px 0px rgba(0,0,0,0.4);box-shadow:inset 0 0 3px 0px rgba(0,0,0,0.4)}#inspect-tabs>ul>li.ui-tabs-selected>a,#inspect-tabs>ul>li.ui-tabs-selected>a:hover,#list-tabs>ul>li.ui-tabs-selected>a,#list-tabs>ul>li.ui-tabs-selected>a:hover{background-image:-webkit-linear-gradient(top, #2380cc, #154e7c);background-image:-moz-linear-gradient(top, #2380cc, #154e7c);background-image:-ms-linear-gradient(top, #2380cc, #154e7c);background-image:linear-gradient(top, #2380cc, #154e7c)}a#dump_button{vertical-align:middle}#dom-dump{padding:0 10px 10px 10px}#dom-dump .treeview .hovered-in-locator{color:#2aa198}#dom-detail,#accessible-views-tab{padding:10px}#dom-detail{font-size:0.8em;word-break:break-word}#dom-detail li{padding:6px 0;border-top:2px solid rgba(255,255,255,0.7);border-bottom:1px solid rgba(0,0,0,0.2);-webkit-transition:background-color 0.1s;-moz-transition:background-color 0.1s;transition:background-color 0.1s}#dom-detail li:first-child{border-top:none}#dom-detail li:last-child{border-bottom:none}#dom-detail li:hover{background-color:rgba(255,255,255,0.4)}#dom-detail .key{font-size:1.5em}#dom-detail .value:before{content:"\21b3";padding-left:2px;color:#999}#dom-detail .interesting{font-weight:bold}#accessible-views-tab div.hints{font-size:0.8em;border:1px dashed #d33682;padding:10px;margin-bottom:20px}#accessible-views a{display:block;margin:10px 0;color:#d33682;font-style:italic;-webkit-transition:color 0.15s;-moz-transition:color 0.15s;transition:color 0.15s}#accessible-views a:hover{color:#268bd2}#accessible-views span{font-style:normal;font-weight:bold}#ui-locator{padding:0}#live-view,#asploder,#ui-live-view-rotator{text-align:center;display:inline-block;float:right}#live-view button{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}#live-view button span{font-family:Pictos;font-size:20px}#live-view button.down,#asploder button.down{background-image:-webkit-linear-gradient(top, #2380cc, #154e7c);background-image:-moz-linear-gradient(top, #2380cc, #154e7c);background-image:-ms-linear-gradient(top, #2380cc, #154e7c);background-image:linear-gradient(top, #2380cc, #154e7c)}#ui-locator-view{position:absolute;z-index:-1;top:40px;right:0;bottom:0;left:0;text-align:center;-webkit-transition:transform 0.3s;-moz-transition:transform 0.3s;transition:transform 0.3s}#ui-locator-view.landscape{position:absolute;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}button#ui-locator-rotator{float:right;font-family:Pictos;-webkit-border-radius:0 0 0 3px;-moz-border-radius:0 0 0 3px;border-radius:0 0 0 3px;display:none}.treeview{padding:5px}.treeview ul{margin-top:4px}.treeview .hitarea{background:url("/images/treeview-default.gif") -64px -25px no-repeat;height:16px;width:16px;margin-left:-16px;float:left;cursor:pointer}* html .hitarea{display:inline;float:none}.treeview li{margin:0;padding:3px 0pt 3px 16px}.treeview a{padding:5px 10px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.treeview a:hover,.treeview .hover{color:#d33682;cursor:pointer}.treeview a.selected{color:#fdf6e3;font-weight:bold;text-shadow:0 -1px rgba(7,54,66,0.3);background-color:#2aa198}#treecontrol{margin:1em 0;display:none}.treeview li{background:url("/images/treeview-default-line.gif") 0 0 no-repeat}.treeview li.collapsable,.treeview li.expandable{background-position:0 -176px}.treeview .expandable-hitarea{background-position:-80px -3px}.treeview li.last{background-position:0 -1766px}.treeview li.lastCollapsable,.treeview li.lastExpandable{background-image:url("/images/treeview-default.gif")}.treeview li.lastCollapsable{background-position:0 -111px}.treeview li.lastExpandable{background-position:-32px -67px}.treeview div.lastCollapsable-hitarea,.treeview div.lastExpandable-hitarea{background-position:0}.treeview-red li{background-image:url("/images/treeview-red-line.gif")}.treeview-red .hitarea,.treeview-red li.lastCollapsable,.treeview-red li.lastExpandable{background-image:url("/images/treeview-red.gif")}.treeview-black li{background-image:url("/images/treeview-black-line.gif")}.treeview-black .hitarea,.treeview-black li.lastCollapsable,.treeview-black li.lastExpandable{background-image:url("/images/treeview-black.gif")}.treeview-gray li{background-image:url("/images/treeview-gray-line.gif")}.treeview-gray .hitarea,.treeview-gray li.lastCollapsable,.treeview-gray li.lastExpandable{background-image:url("/images/treeview-gray.gif")}.treeview-famfamfam li{background-image:url("/images/treeview-famfamfam-line.gif")}.treeview-famfamfam .hitarea,.treeview-famfamfam li.lastCollapsable,.treeview-famfamfam li.lastExpandable{background-image:url("/images/treeview-famfamfam.gif")}.filetree li{padding:3px 0 2px 16px}.filetree span.folder,.filetree span.file{padding:1px 0 1px 16px;display:block}.filetree span.folder{background:url("/images/folder.gif") 0 0 no-repeat}.filetree li.expandable span.folder{background:url("/images/folder-closed.gif") 0 0 no-repeat}.filetree span.file{background:url("/images/file.gif") 0 0 no-repeat}.ui-state-disabled{cursor:default !important}.ui-tabs .ui-tabs-hide{display:none !important}
@@ -0,0 +1,28 @@
1
+ html {
2
+ background-color: #efefef;
3
+ font-family: $sans;
4
+ font-size: $base-font-size;
5
+ line-height: $base-line-height;
6
+ }
7
+
8
+ $btn-input-inner-shadow: inset 0 1px 3px 0px rgba(0,0,0, .7);
9
+ $btn-input-vertical-padding: 8px;
10
+ $btn-input-height: $base-line-height + ($btn-input-vertical-padding*2);
11
+
12
+ input, button {
13
+ padding: $btn-input-vertical-padding 2em $btn-input-vertical-padding 0.5em;
14
+ @include border-radius( 3px );
15
+ }
16
+
17
+ input {
18
+ text-align: left;
19
+ @include box-shadow-two( 0 2px 3px 0 rgba(255,255,255,.4), $btn-input-inner-shadow );
20
+ }
21
+
22
+ button {
23
+ @include light-text;
24
+ @include linear-gradient(top, #ddd, #999);
25
+ @include box-shadow( $btn-input-inner-shadow );
26
+ &:hover { @include linear-gradient(top, #ccc, #999); }
27
+ &:active { background: #999; }
28
+ }//button
@@ -0,0 +1,61 @@
1
+ #header {
2
+ position: relative;
3
+ height: $header-height;
4
+ padding-left: 10px;
5
+ overflow: hidden;
6
+ color: #fff;
7
+ text-shadow: 0 -1px rgba(0,0,0, .4);
8
+ @include linear-gradient(top, rgba(102,102,102, 1), rgba(51,51,51, 1) );
9
+
10
+ a {
11
+ color: #aaff00;
12
+ font-size: 20px;
13
+ font-weight: bold;
14
+ }//a
15
+
16
+ h1 {
17
+ font-size: 2em;
18
+ float: left;
19
+ }//h1
20
+ }//#header
21
+
22
+
23
+ .toast {
24
+ padding-top: $toast-height;
25
+ padding-left: $toast-height;
26
+ float: left;
27
+ height: $toast-height;
28
+ color: hotpink; // love the hotpink
29
+ font-size: 1.1em;
30
+ font-style: italic;
31
+ @include transition( all 0.2s linear );
32
+ &.show { padding-top: 8px; } //TODO $toast-line-height - $toast-height
33
+ }//.toast
34
+
35
+
36
+ #refresh {
37
+ float: right;
38
+
39
+ button, span {
40
+ height: $refresh-size;
41
+ width: $refresh-size;
42
+ display: block;
43
+ text-align: center;
44
+ @include border-radius( 3px 0 0 3px );
45
+ }//button,span
46
+
47
+ button { position: relative; }
48
+
49
+ span {
50
+ position: absolute;
51
+ top: 0;
52
+ right: 0;
53
+ background: url('/images/loader.png') center center no-repeat;
54
+ background-size: 80% auto;
55
+ @include transition( background 1s );
56
+ .working & {
57
+ background-image:url('/images/loader.gif');
58
+ background-size: 80% auto;
59
+ }//.working&
60
+ }//span
61
+ }//#refresh
@@ -0,0 +1,194 @@
1
+ .the-columns {
2
+ position: absolute;
3
+ top: $columns-top;
4
+ right: 0;
5
+ bottom: 0;
6
+ left: 0;
7
+ }
8
+
9
+ $inspect-tabs-width: 60%;
10
+ $list-tabs-width: 100% - $inspect-tabs-width;
11
+ $landscape-inspect-tabs-width: 50%;
12
+ $landscape-list-tabs-width: 100% - $landscape-inspect-tabs-width;
13
+ #inspect-tabs, #list-tabs {
14
+ position: absolute;
15
+ top: 0;
16
+ bottom: 0;
17
+ }
18
+
19
+ #inspect-tabs {
20
+ right: 0;
21
+ left: $inspect-tabs-width;
22
+ overflow: hidden;
23
+ border-left: 1px solid rgba(255,255,255, .1);
24
+ @include transition( left .3s );
25
+ @include box-shadow( inset 3px 0 3px 0 rgba(0,0,0, .4));
26
+ @include border-radius( 3px 0 0 0 );
27
+ .landscape & { left: $landscape-inspect-tabs-width; }// respond to landscape view.
28
+ }
29
+
30
+ #list-tabs {
31
+ right: $list-tabs-width;
32
+ left: 0;
33
+ @include transition( right .3s );
34
+ @include border-radius( 0 3px 0 0 );
35
+ @include box-shadow( inset -3px 0 3px 0 rgba(0,0,0, .4));
36
+ .landscape & { right: $landscape-list-tabs-width; }// respond to landscape view.
37
+ }
38
+
39
+
40
+ #list-tabs > div, #dom-detail {
41
+ position: absolute;
42
+ top: 40px;
43
+ right: 0;
44
+ bottom: 0;
45
+ left: 0;
46
+ overflow-y: scroll;
47
+ }
48
+
49
+ #inspect-tabs, #list-tabs {
50
+ > ul {
51
+ overflow: hidden;
52
+ @include box-shadow( inset 0 1px 3px 0px rgba(0,0,0, .7));
53
+ > li {
54
+ float: left;
55
+ position: relative;
56
+ width: 50%;
57
+ display: inline-block;
58
+ font-size: 12px;
59
+ margin: 0;
60
+ padding: 0;
61
+ text-align: center;
62
+ border: none;
63
+ @include border-radius( 0 );
64
+ > a {
65
+ float: none;
66
+ padding: inherit;
67
+ line-height: 40px;
68
+ cursor: pointer;
69
+ display: block;
70
+ color: #fff;
71
+ font-size: 16px;
72
+ font-weight: bold;
73
+ text-shadow: 0 -1px rgba(0,0,0, .3);
74
+ @include linear-gradient(top, rgba(221,221,221, .6), rgba(153,153,153, .6) );
75
+ @include box-shadow( inset 0 0 2px 0px rgba(0,0,0, .4));
76
+ &:hover { @include linear-gradient(top, rgba(204,204,204, .6), rgba(153,153,153, .6) ); }
77
+ &:active {
78
+ background: rgba(153,153,153, .6);
79
+ @include box-shadow( inset 0 0 3px 0px rgba(0,0,0, .4));
80
+ }//&:active
81
+ }//>a
82
+ &.ui-tabs-selected > a {
83
+ // regarding: &, &:hover
84
+ // this hits botht the 'a' and 'a:hover'
85
+ &, &:hover { @include linear-gradient(top, #2380CC, #154E7C); }
86
+ }//&.ui-tabs-selected > a
87
+ }//>li
88
+ }//>ul
89
+ }//#inspect-tabs, #list-tabs
90
+
91
+ a#dump_button { vertical-align: middle; }
92
+
93
+ #dom-dump {
94
+ padding: 0 10px 10px 10px;
95
+ .treeview .hovered-in-locator { color: #2aa198; }
96
+ }//#dom-dump
97
+
98
+ #dom-detail, #accessible-views-tab { padding: 10px; }
99
+
100
+ #dom-detail {
101
+ font-size: 0.8em;
102
+ word-break: break-word;
103
+
104
+ li {
105
+ padding: 6px 0;
106
+ border-top: 2px solid rgba(255,255,255, .7);
107
+ border-bottom: 1px solid rgba(0, 0, 0, .2);
108
+ @include transition( background-color .1s );
109
+ &:first-child { border-top: none; }
110
+ &:last-child { border-bottom: none; }
111
+ &:hover { background-color: rgba(255,255,255, .4); }
112
+ }//li
113
+
114
+ .key { font-size: 1.5em; }
115
+
116
+ .value:before {
117
+ content: "#{$arrow-down-right}";
118
+ padding-left: 2px;
119
+ color: #999;
120
+ }//.value:before
121
+
122
+ .interesting { font-weight: bold; }
123
+ }//#dom-detail
124
+
125
+
126
+ #accessible-views-tab div.hints{
127
+ font-size: 0.8em;
128
+ border: 1px dashed #d33682;
129
+ padding: 10px;
130
+ margin-bottom: 20px;
131
+ }
132
+
133
+ #accessible-views {
134
+ a {
135
+ display: block;
136
+ margin: 10px 0;
137
+ color: #d33682;
138
+ font-style: italic;
139
+ @include transition( color .15s );
140
+ &:hover { color: #268bd2; }
141
+ }//a
142
+
143
+ span {
144
+ font-style: normal;
145
+ font-weight: bold;
146
+ }//span
147
+ }//#accessible-views
148
+
149
+ #ui-locator { padding: 0; }
150
+
151
+ #live-view, #asploder, #ui-live-view-rotator {
152
+ text-align: center;
153
+ display: inline-block;
154
+ float: right;
155
+ }
156
+
157
+ #live-view button {
158
+ @include border-radius( 0 );
159
+
160
+ span {
161
+ font-family: Pictos;
162
+ font-size: 20px;
163
+ }//span
164
+ }//#live-view button
165
+
166
+ #live-view button.down, #asploder button.down { @include linear-gradient(top, #2380CC, #154E7C); }
167
+
168
+ #ui-locator-view {
169
+ position: absolute;
170
+ z-index: $ui-locator-view-z;
171
+ top: 40px;
172
+ right: 0;
173
+ bottom: 0;
174
+ left: 0;
175
+ text-align: center;
176
+ @include transition( transform .3s );
177
+
178
+ &.landscape {
179
+ position: absolute;
180
+ @include transform( rotate(90deg) );
181
+ }//&.landscape
182
+ }//#ui-locator-view
183
+
184
+
185
+ button#ui-locator-rotator {
186
+ float: right;
187
+ font-family: Pictos;
188
+ @include border-radius( 0 0 0 3px );
189
+ //-------------------------------------------------------------
190
+ // This should only be enabled for testing rotation when you're
191
+ // not actually running Symbiote in a device
192
+ display: none;
193
+ //-------------------------------------------------------------
194
+ }//#ui-locator-rotator
@@ -2,7 +2,7 @@
2
2
  .treeview ul { margin-top: 4px; }
3
3
 
4
4
  .treeview .hitarea {
5
- background: url(images/treeview-default.gif) -64px -25px no-repeat;
5
+ background: url("/images/treeview-default.gif") -64px -25px no-repeat;
6
6
  height: 16px;
7
7
  width: 16px;
8
8
  margin-left: -16px;
@@ -15,18 +15,16 @@
15
15
  float:none;
16
16
  }
17
17
 
18
- .treeview li {
18
+ .treeview li {
19
19
  margin: 0;
20
20
  padding: 3px 0pt 3px 16px;
21
21
  }
22
22
 
23
- .treeview a {
23
+ .treeview a {
24
24
  padding: 5px 10px;
25
- -webkit-border-radius: 3px;
26
- -moz-border-radius: 3px;
27
- border-radius: 3px;
25
+ @include border-radius( 3px );
28
26
  }
29
- .treeview a:hover, .treeview .hover {
27
+ .treeview a:hover, .treeview .hover {
30
28
  color: #d33682; cursor: pointer;
31
29
  }
32
30
  .treeview a.selected {
@@ -38,33 +36,33 @@
38
36
 
39
37
  #treecontrol { margin: 1em 0; display: none; }
40
38
 
41
- .treeview li { background: url(images/treeview-default-line.gif) 0 0 no-repeat; }
39
+ .treeview li { background: url("/images/treeview-default-line.gif") 0 0 no-repeat; }
42
40
  .treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }
43
41
 
44
42
  .treeview .expandable-hitarea { background-position: -80px -3px; }
45
43
 
46
44
  .treeview li.last { background-position: 0 -1766px }
47
- .treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(images/treeview-default.gif); }
45
+ .treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url("/images/treeview-default.gif"); }
48
46
  .treeview li.lastCollapsable { background-position: 0 -111px }
49
47
  .treeview li.lastExpandable { background-position: -32px -67px }
50
48
 
51
49
  .treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }
52
50
 
53
- .treeview-red li { background-image: url(images/treeview-red-line.gif); }
54
- .treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(images/treeview-red.gif); }
51
+ .treeview-red li { background-image: url("/images/treeview-red-line.gif"); }
52
+ .treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url("/images/treeview-red.gif"); }
55
53
 
56
- .treeview-black li { background-image: url(images/treeview-black-line.gif); }
57
- .treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(images/treeview-black.gif); }
54
+ .treeview-black li { background-image: url("/images/treeview-black-line.gif"); }
55
+ .treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url("/images/treeview-black.gif"); }
58
56
 
59
- .treeview-gray li { background-image: url(images/treeview-gray-line.gif); }
60
- .treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(images/treeview-gray.gif); }
57
+ .treeview-gray li { background-image: url("/images/treeview-gray-line.gif"); }
58
+ .treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url("/images/treeview-gray.gif"); }
61
59
 
62
- .treeview-famfamfam li { background-image: url(images/treeview-famfamfam-line.gif); }
63
- .treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(images/treeview-famfamfam.gif); }
60
+ .treeview-famfamfam li { background-image: url("/images/treeview-famfamfam-line.gif"); }
61
+ .treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url("/images/treeview-famfamfam.gif"); }
64
62
 
65
63
 
66
64
  .filetree li { padding: 3px 0 2px 16px; }
67
65
  .filetree span.folder, .filetree span.file { padding: 1px 0 1px 16px; display: block; }
68
- .filetree span.folder { background: url(images/folder.gif) 0 0 no-repeat; }
69
- .filetree li.expandable span.folder { background: url(images/folder-closed.gif) 0 0 no-repeat; }
70
- .filetree span.file { background: url(images/file.gif) 0 0 no-repeat; }
66
+ .filetree span.folder { background: url("/images/folder.gif") 0 0 no-repeat; }
67
+ .filetree li.expandable span.folder { background: url("/images/folder-closed.gif") 0 0 no-repeat; }
68
+ .filetree span.file { background: url("/images/file.gif") 0 0 no-repeat; }