frank-cucumber 1.1.1 → 1.1.2

Sign up to get free protection for your applications and to get access to all the features.
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; }