Tweak IndexedDB observer sample (#475)

* Added observers demo

* Added clear button and more names

* added a little more documentation

* Fixed for values support

* Fixed for values support

* Completed README

* Fixed flag

* Tweaks

indexeddb-observers/.eslintrc

@@ -0,0 +1,12 @@
+{
+  "globals": {
+    "IDBObserver": true
+  },
+  "rules": {
+    "radix": 0,
+    "max-len": 0,
+    "max-nested-callbacks": 0,
+    "no-unused-vars": 0,
+    "no-undef": 0
+  }
+}

indexeddb-observers/README.md

@@ -0,0 +1,5 @@
+IndexedDB observer Sample
+===
+See https://googlechrome.github.io/samples/indexeddb-observers/index.html for a live demo.
+
+Learn more at https://www.chromestatus.com/feature/5669292892749824

indexeddb-observers/demo.js

@@ -0,0 +1,84 @@
+var dataNumber = 0;
+var db = null;
+
+var observer = new IDBObserver(changes => {
+  var tabName = changes.records.get('name')[0].value;
+  if (changes.records.get('data')[0].type === 'clear') {
+    ChromeSamples.log(`Tab "${tabName}" reset data number to 0.`);
+    setDataNumber(0);
+  } else {
+    var newDataValue = changes.records.get('data')[0].value;
+    ChromeSamples.log(`Tab "${tabName}" set data number to ${newDataValue}.`);
+    setDataNumber(newDataValue);
+  }
+});
+
+function setDataNumber(number) {
+  dataNumber = number;
+  document.querySelector('#data').textContent = dataNumber;
+}
+
+function onIncrementButtonClick() {
+  if (!db) {
+    ChromeSamples.log('Database connection still opening.');
+    return;
+  }
+  var name = document.querySelector('#name').textContent;
+  var transaction = db.transaction(['data', 'name'], 'readwrite');
+  // We wait for the first success to signify we've been scheduled.
+  var request = transaction.objectStore('name').put(name, 'key');
+  request.onsuccess = function() {
+    var newDataNumber = dataNumber + 1;
+    transaction.objectStore('data').put(newDataNumber, 'key');
+    transaction.oncomplete = function() {
+      setDataNumber(newDataNumber);
+    };
+  };
+}
+
+function onResetButtonClick() {
+  if (!db) {
+    ChromeSamples.log('Database connection still opening.');
+    return;
+  }
+  var name = document.querySelector('#name').textContent;
+  var transaction = db.transaction(['data', 'name'], 'readwrite');
+  transaction.objectStore('name').put(name, 'key');
+  transaction.objectStore('data').clear();
+  transaction.oncomplete = function() {
+    setDataNumber(0);
+  };
+}
+
+var openRequest = indexedDB.open('demoDB');
+
+openRequest.onupgradeneeded = function() {
+  db.createObjectStore('data');
+  db.createObjectStore('name');
+};
+
+openRequest.onsuccess = function(event) {
+  db = event.target.result;
+
+  var transaction = db.transaction(['data', 'name'], 'readonly');
+  // Observe starting after this transaction!
+  // Note: Including values can be a performance hit if they are large.
+  observer.observe(db, transaction, {
+    operationTypes: ['put', 'clear'], values: true});
+
+  var getRequest = transaction.objectStore('data').get('key');
+  getRequest.onsuccess = function(event) {
+    var result = event.target.result;
+    if (result) {
+      setDataNumber(result);
+      ChromeSamples.log('Database has starting value of ' + result + '.');
+    } else {
+      setDataNumber(0);
+      ChromeSamples.log('Database is empty, starting at 0.');
+    }
+  };
+};
+
+openRequest.onerror = function(event) {
+  ChromeSamples.log('Error opening database: ', event.target.result.error);
+};

indexeddb-observers/index.html

@@ -0,0 +1,55 @@
+---
+feature_name: IndexedDB Observers
+chrome_version: 57
+feature_id: 5669292892749824
+---
+
+<style>
+  #data, #name {
+    background-color: #C8E6C9;
+    font-size: 2em;
+    padding: 0 .5em;
+  }
+</style>
+
+<h3>Background</h3>
+<p>IndexedDB Observers allow one to observe changes to indexeddb in an
+efficient and data-consistant way.  Open this page in multiple tabs or windows,
+and observe how the data consistantly updates.  See <a href="https://github.com/WICG/indexed-db-observers/blob/gh-pages/EXPLAINER.md">this
+explainer</a> for more info and the proposed specification changes.</a></p>
+<p>Note that you must be using Chrome 57+ with the <code>#enable-experimental-web-platform-features</code> flag enabled.</p>
+
+<h4>
+  Tab Name: <span id="name"></span>
+  Data number: <span id="data"></span>
+</h4>
+
+<button id="incrementButton">Increment Data Number</button>
+<button id="resetButton">Reset Data Number</button>
+
+{% capture initial_output_content %}
+<pre>Database changes appear here:</pre>
+{% endcapture %}
+{% include output_helper.html initial_output_content=initial_output_content%}
+
+{% include js_snippet.html filename='demo.js' %}
+
+<script>
+(function() {
+  var names = ['Toby', 'Fred', 'George', 'Bob', 'Bill', 'Buster',
+               'Jenn', 'Zoe', 'Carla', 'Stacy', 'Alyssa', 'Catherine',
+               'Sally', 'Austin', 'Jackson', 'Grace',
+               'Tasha', 'Arthur', 'Michael', 'Echo', 'Topher', 'Sierra',
+               'Whisky', 'DeWitt'];
+  document.querySelector('#name').textContent = names[Math.floor(
+      Math.random() * names.length)];
+})();
+
+document.querySelector('#incrementButton').addEventListener('click', function() {
+  onIncrementButtonClick();
+});
+
+document.querySelector('#resetButton').addEventListener('click', function() {
+  onResetButtonClick();
+});
+</script>