HSTS: add net-internals UI.

chrome/browser/resources/net_internals/hstsview.js

+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+function HSTSView(mainBoxId, queryInputId, formId, queryOutputDivId,

[eroman, 2011/02/16 20:12:45]

Please add a high level comment explaining what this is. Please also explain
what the acronym HSTS means -- it wasn't obvious to me that it was for HTTP
strict transport security.

[agl, 2011/02/16 22:46:22]

Done.

+                  addInputId, addFormId, addCheckId,
+                  deleteInputId, deleteFormId) {
+  DivView.call(this, mainBoxId);
+
+  this.queryInput_ = document.getElementById(queryInputId);
+  this.addCheck_ = document.getElementById(addCheckId);
+  this.addInput_ = document.getElementById(addInputId);
+  this.deleteInput_ = document.getElementById(deleteInputId);
+  this.queryOutputDiv_ = document.getElementById(queryOutputDivId);
+
+  var form = document.getElementById(formId);
+  form.addEventListener('submit', this.onSubmitQuery_.bind(this), false);
+  form = document.getElementById(addFormId);
+  form.addEventListener('submit', this.onSubmitAdd_.bind(this), false);
+  form = document.getElementById(deleteFormId);
+  form.addEventListener('submit', this.onSubmitDelete_.bind(this), false);
+
+  g_browser.hstsQueryCallback = this.onQueryCallback_.bind(this);
+}
+
+inherits(HSTSView, DivView);
+
+HSTSView.prototype.onSubmitQuery_ = function(event) {
+  g_browser.sendHSTSQuery(this.queryInput_.value);
+  event.preventDefault();
+};
+
+HSTSView.prototype.onSubmitAdd_ = function(event) {
+  g_browser.sendHSTSAdd(this.addInput_.value, this.addCheck_.checked);
+  g_browser.sendHSTSQuery(this.addInput_.value);
+  this.queryInput_.value = this.addInput_.value;
+  this.addCheck_.checked = false;
+  this.addInput_.value = '';
+  event.preventDefault();
+};
+
+HSTSView.prototype.onSubmitDelete_ = function(event) {
+  g_browser.sendHSTSDelete(this.deleteInput_.value);
+  this.deleteInput_.value = '';
+  event.preventDefault();
+};
+
+function hstsModeToString(m) {
+  if (m == 0) {
+    return 'STRICT';
+  } else if (m == 1) {
+    return 'OPPORTUNISTIC';
+  } else if (m == 2) {
+    return 'SPDY';
+  } else {
+    return 'UNKNOWN';
+  }
+}
+
+function yellowFade(element) {
+  element.style.webkitTransitionProperty = 'background-color';
+  element.style.webkitTransitionDuration = '0';
+  element.style.backgroundColor = '#fffccf';
+  setTimeout(function() {
+    element.style.webkitTransitionDuration = '1000ms';
+    element.style.backgroundColor = '#fff';
+  }, 0);
+}
+
+HSTSView.prototype.onQueryCallback_ = function(result) {
+  if (result.result == false) {
+    this.queryOutputDiv_.innerHTML = '<b>Not found</b>';
+  } else {
+    while (this.queryOutputDiv_.firstChild != null)

[eroman, 2011/02/16 20:12:45]

Is the intent here to delete all children inside queryOutputDiv?

In that case, you can do:

this.queryOutputDiv_.innerHTML = '';

(very common way to empty a container).

+      this.queryOutputDiv_.removeChild(this.queryOutputDiv_.firstChild);
+
+    s = document.createElement('span')

[eroman, 2011/02/16 20:12:45]

There is also a convenience function to help with this pattern:

s = addNode(this.queryOutput_div_, 'span');
s.innerHTML = '<b>Found</b>';

(condenses the createElement + appendChild lines).
I guess if we added some opt_text parameter to addNode we could fold the
innerText into it as well.

[mmenke, 2011/02/16 20:22:49]

nit:  A number of these lines are missing semi-colons.

[agl, 2011/02/16 22:46:22]

Done.

[agl, 2011/02/16 22:46:22]

Done.

+    s.innerHTML = '<b>Found</b>: mode: '
+    this.queryOutputDiv_.appendChild(s)
+
+    t = document.createElement('tt')
+    t.innerText = hstsModeToString(result.mode);
+    this.queryOutputDiv_.appendChild(t)
+
+    t = document.createTextNode(' include_subdomains: ')

[eroman, 2011/02/16 20:12:45]

We have a convenience method for this:

addTextNode(this.queryOutputDiv_, ' include_subdomains:');

[agl, 2011/02/16 22:46:22]

Done.

+    this.queryOutputDiv_.appendChild(t)
+
+    t = document.createElement('tt')
+    t.innerText = result.subdomains;
+    this.queryOutputDiv_.appendChild(t)
+
+    t = document.createTextNode(' domain: ')
+    this.queryOutputDiv_.appendChild(t)
+
+    t = document.createElement('tt')
+    t.innerText = result.domain;
+    this.queryOutputDiv_.appendChild(t)
+
+    t = document.createTextNode(' is_preloaded: ')
+    this.queryOutputDiv_.appendChild(t)
+
+    t = document.createElement('tt')
+    t.innerText = result.preloaded;
+    this.queryOutputDiv_.appendChild(t)
+  }
+  yellowFade(this.queryOutputDiv_);
+}