From b5d6322e03ae5e6928cae8b24876718a6516eef8 Mon Sep 17 00:00:00 2001 From: John Bender Date: Wed, 2 Nov 2011 16:49:36 -0700 Subject: [PATCH 01/32] simple performance recording for page loads --- .gitignore | 1 + tests/speed/{lists-ul.html => lists-ul.php} | 21 ++++--- tests/speed/stats/index.php | 34 ++++++++++ tests/speed/stats/perf.js | 70 +++++++++++++++++++++ tests/speed/stats/rev.php | 1 + 5 files changed, 117 insertions(+), 10 deletions(-) rename tests/speed/{lists-ul.html => lists-ul.php} (98%) mode change 100755 => 100644 create mode 100644 tests/speed/stats/index.php create mode 100644 tests/speed/stats/perf.js create mode 100644 tests/speed/stats/rev.php diff --git a/.gitignore b/.gitignore index a73ae101..ad8d0959 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ gitstatus.log refreshCDN *.swp .gitignore +tests/speed/stats/stats.db diff --git a/tests/speed/lists-ul.html b/tests/speed/lists-ul.php old mode 100755 new mode 100644 similarity index 98% rename from tests/speed/lists-ul.html rename to tests/speed/lists-ul.php index d0614ea7..708a0526 --- a/tests/speed/lists-ul.html +++ b/tests/speed/lists-ul.php @@ -1,23 +1,24 @@ - - + + - - jQuery Mobile Docs - Lists - - + + jQuery Mobile Docs - Lists + + + - - + + -
+

400 item list

- +
  • Acura
  • Audi
    • diff --git a/tests/speed/stats/index.php b/tests/speed/stats/index.php new file mode 100644 index 00000000..2cff5c12 --- /dev/null +++ b/tests/speed/stats/index.php @@ -0,0 +1,34 @@ +query('CREATE TABLE stats (id INTEGER, agent TEXT, point TEXT, value REAL, PRIMARY KEY (id))'); + + // making a sad attempt here to provide a clean REST-respecting url scheme. + // stats with a GET returns - wait for it - the stats, and a post with the + // the right params will create a new entry + if ( $_SERVER['REQUEST_METHOD'] == "GET" ) { + $json = Array(); + $results = $db->query( 'SELECT point, value FROM stats' ); + + // TODO not sure if there's a better way to convert db results into + // a json encodable data structure + while($row = $results->fetch(SQLITE3_ASSOC)){ + array_push($json, $row); + } + + header("Content-Type: application/json"); + echo json_encode($json); + } elseif ( $_POST['datapoint'] && $_POST['value'] && $_POST['agent'] ){ + // TODO it is not clear from the docs if there's an easier way to do the + // escaped query interpolation here. Suggestions welcome :( + $data_point = sqlite_escape_string( $_POST['datapoint'] ); + $value = sqlite_escape_string( $_POST['value'] ); + $agent = sqlite_escape_string( $_POST['agent'] ); + $db->query('INSERT INTO stats (agent, point, value) VALUES ("' . $agent . '", "' . $data_point . '",' . $value . ')'); + + echo "success"; + } +?> \ No newline at end of file diff --git a/tests/speed/stats/perf.js b/tests/speed/stats/perf.js new file mode 100644 index 00000000..66abec23 --- /dev/null +++ b/tests/speed/stats/perf.js @@ -0,0 +1,70 @@ +window.Perf = (function($, Perf) { + $.extend(Perf, { + reportUrl: 'stats/', + revUrl: 'stats/rev.php', + + // should be defined before report or poll are run + currentRev: undefined, + + report: function( data, after ) { + var self = this; + + $.post( self.reportUrl, data, after ); + }, + + poll: function() { + var self = this; + + setInterval(function() { + $.get( self.revUrl, function( data ) { + + // if there's a new revision refresh or currentRev isn't being set + if( self.currentRev && self.currentRev !== data ){ + location.href = location.href; + } + }); + }, 60000); + }, + + setCurrentRev: function() { + var self = this; + + $.get( self.revUrl, function( data ) { + self.currentRev = data; + }); + } + }); + + var $listPage = $( "#list-page" ); + + Perf.setCurrentRev(); + Perf.pageLoadStart = Date.now(); + + $listPage.live( "pagebeforecreate", function() { + Perf.pageCreateStart = Date.now(); + }); + + $listPage.live( "pageinit", function(){ + Perf.pageLoadEnd = Date.now(); + + // report the time taken for a full app boot + Perf.report({ + agent: window.navigator.userAgent, + datapoint: "fullboot", + value: Perf.pageLoadEnd - Perf.pageLoadStart + }); + + // record the time taken to load and enhance the page + // start polling for a new revision + Perf.report({ + agent: window.navigator.userAgent, + datapoint: "pageload", + value: Perf.pageCreateStart - Perf.pageLoadStart, + after: function() { + Perf.poll(); + } + }); + }); + + return Perf; +})(jQuery, window.Perf || {}); diff --git a/tests/speed/stats/rev.php b/tests/speed/stats/rev.php new file mode 100644 index 00000000..bc6faccb --- /dev/null +++ b/tests/speed/stats/rev.php @@ -0,0 +1 @@ + \ No newline at end of file From 73ee4c995e95c951c796feb9edded5a41fcc8dd4 Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Thu, 3 Nov 2011 22:56:54 -0400 Subject: [PATCH 02/32] Added a data tribute reference page, linked it up --- docs/api/data-attributes.html | 406 ++++++++++++++++++++++++++++++++++ docs/api/events.html | 1 + docs/api/globalconfig.html | 1 + docs/api/index.html | 1 + docs/api/mediahelpers.html | 1 + docs/api/methods.html | 1 + docs/api/themes.html | 3 +- docs/lists/lists-themes.html | 2 +- index.html | 1 + 9 files changed, 415 insertions(+), 2 deletions(-) create mode 100644 docs/api/data-attributes.html diff --git a/docs/api/data-attributes.html b/docs/api/data-attributes.html new file mode 100644 index 00000000..7ce57da4 --- /dev/null +++ b/docs/api/data-attributes.html @@ -0,0 +1,406 @@ + + + + + + jQuery Mobile Docs - Data Attribute Reference + + + + + + + + + +
    + +
    +

    Data Attribute

    + Home +
    + +
    + +
    + + + +

    Button

    +

    Links with data-role="button" or input-based buttons, or button elements

    + + + + + + + + + + + + + + + + + + + + + + +
    data-cornerstrue | false +
    data-iconhome | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search +
    data-iconposleft | right | top | bottom | notext +
    data-iconshadowtrue | false +
    data-inlinetrue | false +
    data-shadowtrue | false +
    data-themeswatch letter (a-z) +
    +

    Multiple buttons can be wrapped in a container with a data-role="controlgroup" attribute for a vertically grouped set. Add the data-type="horizontal" attribute for the buttons to sit side-by-side.

    + + +

    Checkbox

    +

    Pairs of labels and inputs with type="checkbox"

    + + + + + + + +
    data-rolenone (prevents auto-enhancement to use native control) +
    data-themeswatch letter (a-z) - Added to the form element +
    + +

    Collapsible

    +

    Wrap a heading and content in a container with the data-role="collapsible"

    + + + + + + + + + + +
    data-collapsedtrue | false +
    data-content-themeswatch letter (a-z) +
    data-themeswatch letter (a-z) +
    + +

    Collapsible set

    +

    Wrap a number of collapsibles in a container with the data-role="collapsible-set"

    + + + + + + + +
    data-content-themeswatch letter (a-z) - Sets all collapsibles in set +
    data-themeswatch letter (a-z) - Sets all collapsibles in set +
    + + +

    Content

    +

    Container with data-role="content"

    + + + + +
    data-themeswatch letter (a-z) +
    + + +

    Footer

    +

    Container with data-role="footer"

    + + + + + + + + + + +
    data-idstring (unique id, useful in persistent footers) +
    data-positionfixed +
    data-themeswatch letter (a-z) +
    + +

    Fieldcontainer

    +

    Container around label/form element with data-role="fieldcontain"

    + +

    Flip Switch

    +

    Select with data-role="slider", two options only

    + + + + + + + +
    data-rolenone (prevents auto-enhancement to use native control) +
    data-themeswatch letter (a-z) - Added to the form element +
    + + +

    Header

    +

    Container with data-role="header"

    + + + + + + + + + + + + + + + + + + + +
    data-add-back-btntrue | false (auto add back button, header only) +
    data-back-btn-textstring +
    data-back-btn-themeswatch letter (a-z) +
    data-positionfixed +
    data-themeswatch letter (a-z) +
    data-titlestring (title used when page is shown) +
    + +

    Link

    +

    Links, including those with a data-role="button", and form submit buttons share these attributes.

    + + + + + + + + + + + + + + + + + + + +
    data-ajaxtrue | false +
    data-directionreverse (reverse page transition animation) +
    data-dom-cachetrue | false +
    data-prefetchtrue | false +
    data-relback (to move one step back in history)
    + dialog (to open link styled as dialog, not tracked in history)
    + external (for linking to another domain)    		 +
    data-transitionslide | slideup | slidedown | pop | fade | flip +
    + +

    Listview

    +

    OL or UL with data-role="listview"

    + + + + + + + + + + + + + + + + + + + + + + + + + +
    data-count-themeswatch letter (a-z) +
    data-dividerthemeswatch letter (a-z) +
    data-filtertrue | false +
    data-filter-placeholderstring +
    data-filter-themeswatch letter (a-z) +
    data-insettrue | false +
    data-split-iconhome | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search +
    data-themeswatch letter (a-z) +
    + +

    Listview item

    +

    LI within a listview

    + + + + + + + + + + +
    data-iconhome | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search +
    data-rolelist-divider +
    data-themeswatch letter (a-z) - can also be set on individual LIs +
    + +

    Page

    +

    Container with data-role="page" or "dialog"

    + + + + + + + + + + + + + + + + + + + +
    data-close-btn-textstring (text for the close button, dialog only) +
    data-dom-cachetrue | false +
    data-idstring (unique id for the page) +
    data-fullscreentrue | false (used in conjunction with fixed toolbars) +
    data-themeswatch letter (a-z) +
    data-titlestring (title used when page is shown) +
    + +

    Radio button

    +

    Pairs of labels and inputs with type="radio"

    + + + + + + + +
    data-rolenone (prevents auto-enhancement to use native control) +
    data-themeswatch letter (a-z) - Added to the form element +
    + +

    Select

    +

    A select form element

    + + + + + + + + + + + + + + + + + + + + + + +
    data-iconhome | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search +
    data-iconposleft | right | top | bottom | notext +
    data-inlinetrue | false +
    data-native-menutrue | false +
    data-placeholdertrue | false - Add to the Option +
    data-rolenone (prevents auto-enhancement to use native control) +
    data-themeswatch letter (a-z) - Added to the form element +
    +

    Multiple selects can be wrapped in a fieldset with a data-role="controlgroup" attribute for a vertically grouped set. Add the data-type="horizontal" attribute for the selects to sit side-by-side.

    + +

    Slider

    +

    Input type="range"

    + + + + + + + + + + +
    data-rolenone (prevents auto-enhancement to use native control) +
    data-themeswatch letter (a-z) - Added to the form element +
    data-track-themeswatch letter (a-z) - Added to the form element +
    + +

    Text input & Textarea

    +

    Input type="text|number|search|etc." or a textarea

    + + + + + + + +
    data-rolenone (prevents auto-enhancement to use native control) +
    data-themeswatch letter (a-z) - Added to the form element +
    + +
    + +
    + + +
    + +
    + +
    +

    © 2011 The jQuery Project

    +
    + +
    + + + \ No newline at end of file diff --git a/docs/api/events.html b/docs/api/events.html index bd7e68aa..359ebb1a 100755 --- a/docs/api/events.html +++ b/docs/api/events.html @@ -493,6 +493,7 @@ $( '#foo' ).hide().trigger( 'updatelayout' );
  • Configuring defaults
  • Events
  • Methods & Utilities
    • +
  • Data attribute reference
  • Theme framework
diff --git a/docs/api/globalconfig.html b/docs/api/globalconfig.html index b8ee7bdb..55745e83 100755 --- a/docs/api/globalconfig.html +++ b/docs/api/globalconfig.html @@ -145,6 +145,7 @@ $(document).bind("mobileinit", function(){
  • Configuring defaults
  • Events
  • Methods & Utilities
    • +
  • Data attribute reference
  • Theme framework
    • diff --git a/docs/api/index.html b/docs/api/index.html index 181ba309..1ef55565 100644 --- a/docs/api/index.html +++ b/docs/api/index.html @@ -27,6 +27,7 @@
  • Configuring defaults
  • Events
  • Methods & Utilities
    • +
  • Data attribute reference
  • Theme framework
    • diff --git a/docs/api/mediahelpers.html b/docs/api/mediahelpers.html index d5eff4fb..f0e97819 100755 --- a/docs/api/mediahelpers.html +++ b/docs/api/mediahelpers.html @@ -113,6 +113,7 @@ $.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");
  • Events
  • Methods & Utilities
  • Responsive Layout
    • +
  • Data attribute reference
  • Theme framework
    • diff --git a/docs/api/methods.html b/docs/api/methods.html index e81b4ee0..ebd2f78b 100755 --- a/docs/api/methods.html +++ b/docs/api/methods.html @@ -548,6 +548,7 @@ $.mobile.silentScroll(100);
  • Configuring defaults
  • Events
  • Methods & Utilities
    • +
  • Data attribute reference
  • Theme framework
    • diff --git a/docs/api/themes.html b/docs/api/themes.html index cc4bd26a..5dedc2b3 100755 --- a/docs/api/themes.html +++ b/docs/api/themes.html @@ -267,9 +267,10 @@
  • Configuring defaults
  • Events
  • Methods & Utilities
    • +
  • Data attribute reference
  • Theme framework
    • - + diff --git a/docs/lists/lists-themes.html b/docs/lists/lists-themes.html index 0880fee6..7ea1184e 100755 --- a/docs/lists/lists-themes.html +++ b/docs/lists/lists-themes.html @@ -28,7 +28,7 @@ <ul data-role="listview" data-inset="true"> -