Apply content-security-policy to the HTML options page. This is a

chrome/browser/resources/options/search_page.js

Index: chrome/browser/resources/options/search_page.js
===================================================================
--- chrome/browser/resources/options/search_page.js	(revision 84868)
+++ chrome/browser/resources/options/search_page.js	(working copy)
@@ -1,558 +0,0 @@
-// 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.
-
-cr.define('options', function() {
-  const OptionsPage = options.OptionsPage;
-
-  /**
-   * Encapsulated handling of a search bubble.
-   * @constructor
-   */
-  function SearchBubble(text) {
-    var el = cr.doc.createElement('div');
-    SearchBubble.decorate(el);
-    el.textContent = text;
-    return el;
-  }
-
-  SearchBubble.decorate = function(el) {
-    el.__proto__ = SearchBubble.prototype;
-    el.decorate();
-  };
-
-  SearchBubble.prototype = {
-    __proto__: HTMLDivElement.prototype,
-
-    decorate: function() {
-      this.className = 'search-bubble';
-
-      // We create a timer to periodically update the position of the bubbles.
-      // While this isn't all that desirable, it's the only sure-fire way of
-      // making sure the bubbles stay in the correct location as sections
-      // may dynamically change size at any time.
-      var self = this;
-      this.intervalId = setInterval(this.updatePosition.bind(this), 250);
-    },
-
-  /**
-   * Attach the bubble to the element.
-   */
-    attachTo: function(element) {
-      var parent = element.parentElement;
-      if (!parent)
-        return;
-      if (parent.tagName == 'TD') {
-        // To make absolute positioning work inside a table cell we need
-        // to wrap the bubble div into another div with position:relative.
-        // This only works properly if the element is the first child of the
-        // table cell which is true for all options pages.
-        this.wrapper = cr.doc.createElement('div');
-        this.wrapper.className = 'search-bubble-wrapper';
-        this.wrapper.appendChild(this);
-        parent.insertBefore(this.wrapper, element);
-      } else {
-        parent.insertBefore(this, element);
-      }
-    },
-
-    /**
-     * Clear the interval timer and remove the element from the page.
-     */
-    dispose: function() {
-      clearInterval(this.intervalId);
-
-      var child = this.wrapper || this;
-      var parent = child.parentNode;
-      if (parent)
-        parent.removeChild(child);
-    },
-
-    /**
-     * Update the position of the bubble.  Called at creation time and then
-     * periodically while the bubble remains visible.
-     */
-    updatePosition: function() {
-      // This bubble is 'owned' by the next sibling.
-      var owner = (this.wrapper || this).nextSibling;
-
-      // If there isn't an offset parent, we have nothing to do.
-      if (!owner.offsetParent)
-        return;
-
-      // Position the bubble below the location of the owner.
-      var left = owner.offsetLeft + owner.offsetWidth / 2 -
-          this.offsetWidth / 2;
-      var top = owner.offsetTop + owner.offsetHeight;
-
-      // Update the position in the CSS.  Cache the last values for
-      // best performance.
-      if (left != this.lastLeft) {
-        this.style.left = left + 'px';
-        this.lastLeft = left;
-      }
-      if (top != this.lastTop) {
-        this.style.top = top + 'px';
-        this.lastTop = top;
-      }
-    }
-  }
-
-  /**
-   * Encapsulated handling of the search page.
-   * @constructor
-   */
-  function SearchPage() {
-    OptionsPage.call(this, 'search', templateData.searchPageTabTitle,
-        'searchPage');
-    this.searchActive = false;
-  }
-
-  cr.addSingletonGetter(SearchPage);
-
-  SearchPage.prototype = {
-    // Inherit SearchPage from OptionsPage.
-    __proto__: OptionsPage.prototype,
-
-    /**
-     * Initialize the page.
-     */
-    initializePage: function() {
-      // Call base class implementation to start preference initialization.
-      OptionsPage.prototype.initializePage.call(this);
-
-      var self = this;
-
-      // Create a search field element.
-      var searchField = document.createElement('input');
-      searchField.id = 'search-field';
-      searchField.type = 'search';
-      searchField.incremental = true;
-      searchField.placeholder = localStrings.getString('searchPlaceholder');
-      this.searchField = searchField;
-
-      // Replace the contents of the navigation tab with the search field.
-      self.tab.textContent = '';
-      self.tab.appendChild(searchField);
-      self.tab.onclick = self.tab.onkeypress = undefined;
-
-      // Handle search events. (No need to throttle, WebKit's search field
-      // will do that automatically.)
-      searchField.onsearch = function(e) {
-        self.setSearchText_(SearchPage.canonicalizeQuery(this.value));
-      };
-
-      // We update the history stack every time the search field blurs. This way
-      // we get a history entry for each search, roughly, but not each letter
-      // typed.
-      searchField.onblur = function(e) {
-        var query = SearchPage.canonicalizeQuery(searchField.value);
-        if (!query)
-          return;
-
-        // Don't push the same page onto the history stack more than once (if
-        // the user clicks in the search field and away several times).
-        var currentHash = location.hash;
-        var newHash = '#' + escape(query);
-        if (currentHash == newHash)
-          return;
-
-        // If there is no hash on the current URL, the history entry has no
-        // search query. Replace the history entry with no search with an entry
-        // that does have a search. Otherwise, add it onto the history stack.
-        var historyFunction = currentHash ? window.history.pushState :
-                                            window.history.replaceState;
-        historyFunction.call(
-            window.history,
-            {pageName: self.name},
-            self.title,
-            '/' + self.name + newHash);
-      };
-
-      // Install handler for key presses.
-      document.addEventListener('keydown',
-                                this.keyDownEventHandler_.bind(this));
-
-      // Focus the search field by default.
-      searchField.focus();
-    },
-
-    /**
-     * @inheritDoc
-     */
-    get sticky() {
-      return true;
-    },
-
-    /**
-     * Called after this page has shown.
-     */
-    didShowPage: function() {
-      // This method is called by the Options page after all pages have
-      // had their visibilty attribute set.  At this point we can perform the
-      // search specific DOM manipulation.
-      this.setSearchActive_(true);
-    },
-
-    /**
-     * Called before this page will be hidden.
-     */
-    willHidePage: function() {
-      // This method is called by the Options page before all pages have
-      // their visibilty attribute set.  Before that happens, we need to
-      // undo the search specific DOM manipulation that was performed in
-      // didShowPage.
-      this.setSearchActive_(false);
-    },
-
-    /**
-     * Update the UI to reflect whether we are in a search state.
-     * @param {boolean} active True if we are on the search page.
-     * @private
-     */
-    setSearchActive_: function(active) {
-      // It's fine to exit if search wasn't active and we're not going to
-      // activate it now.
-      if (!this.searchActive_ && !active)
-        return;
-
-      this.searchActive_ = active;
-
-      if (active) {
-        var hash = location.hash;
-        if (hash)
-          this.searchField.value = unescape(hash.slice(1));
-      } else {
-          // Just wipe out any active search text since it's no longer relevant.
-        this.searchField.value = '';
-      }
-
-      var pagesToSearch = this.getSearchablePages_();
-      for (var key in pagesToSearch) {
-        var page = pagesToSearch[key];
-
-        if (!active)
-          page.visible = false;
-
-        // Update the visible state of all top-level elements that are not
-        // sections (ie titles, button strips).  We do this before changing
-        // the page visibility to avoid excessive re-draw.
-        for (var i = 0, childDiv; childDiv = page.pageDiv.children[i]; i++) {
-          if (active) {
-            if (childDiv.tagName != 'SECTION')
-              childDiv.classList.add('search-hidden');
-          } else {
-            childDiv.classList.remove('search-hidden');
-          }
-        }
-
-        if (active) {
-          // When search is active, remove the 'hidden' tag.  This tag may have
-          // been added by the OptionsPage.
-          page.pageDiv.classList.remove('hidden');
-        }
-      }
-
-      if (active) {
-        this.setSearchText_(this.searchField.value);
-      } else {
-        // After hiding all page content, remove any search results.
-        this.unhighlightMatches_();
-        this.removeSearchBubbles_();
-      }
-    },
-
-    /**
-     * Set the current search criteria.
-     * @param {string} text Search text.
-     * @private
-     */
-    setSearchText_: function(text) {
-      // Toggle the search page if necessary.
-      if (text.length) {
-        if (!this.searchActive_)
-          OptionsPage.navigateToPage(this.name);
-      } else {
-        if (this.searchActive_)
-          OptionsPage.showDefaultPage();
-        return;
-      }
-
-      var foundMatches = false;
-      var bubbleControls = [];
-
-      // Remove any prior search results.
-      this.unhighlightMatches_();
-      this.removeSearchBubbles_();
-
-      // Generate search text by applying lowercase and escaping any characters
-      // that would be problematic for regular expressions.
-      var searchText =
-          text.toLowerCase().replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
-
-      // Generate a regular expression and replace string for hilighting
-      // search terms.
-      var regEx = new RegExp('(' + searchText + ')', 'ig');
-      var replaceString = '<span class="search-highlighted">$1</span>';
-
-      // Initialize all sections.  If the search string matches a title page,
-      // show sections for that page.
-      var page, pageMatch, childDiv, length;
-      var pagesToSearch = this.getSearchablePages_();
-      for (var key in pagesToSearch) {
-        page = pagesToSearch[key];
-        pageMatch = false;
-        if (searchText.length) {
-          pageMatch = this.performReplace_(regEx, replaceString, page.tab);
-        }
-        if (pageMatch)
-          foundMatches = true;
-        for (var i = 0, childDiv; childDiv = page.pageDiv.children[i]; i++) {
-          if (childDiv.tagName == 'SECTION') {
-            if (pageMatch) {
-              childDiv.classList.remove('search-hidden');
-            } else {
-              childDiv.classList.add('search-hidden');
-            }
-          }
-        }
-      }
-
-      if (searchText.length) {
-        // Search all top-level sections for anchored string matches.
-        for (var key in pagesToSearch) {
-          page = pagesToSearch[key];
-          for (var i = 0, childDiv; childDiv = page.pageDiv.children[i]; i++) {
-            if (childDiv.tagName == 'SECTION' &&
-                this.performReplace_(regEx, replaceString, childDiv)) {
-              childDiv.classList.remove('search-hidden');
-              foundMatches = true;
-            }
-          }
-        }
-
-        // Search all sub-pages, generating an array of top-level sections that
-        // we need to make visible.
-        var subPagesToSearch = this.getSearchableSubPages_();
-        var control, node;
-        for (var key in subPagesToSearch) {
-          page = subPagesToSearch[key];
-          if (this.performReplace_(regEx, replaceString, page.pageDiv)) {
-            // Reveal the section for this search result.
-            section = page.associatedSection;
-            if (section)
-              section.classList.remove('search-hidden');
-
-            // Identify any controls that should have bubbles.
-            var controls = page.associatedControls;
-            if (controls) {
-              length = controls.length;
-              for (var i = 0; i < length; i++)
-                bubbleControls.push(controls[i]);
-            }
-
-            foundMatches = true;
-          }
-        }
-      }
-
-      // Configure elements on the search results page based on search results.
-      if (foundMatches)
-        $('searchPageNoMatches').classList.add('search-hidden');
-      else
-        $('searchPageNoMatches').classList.remove('search-hidden');
-
-      // Create search balloons for sub-page results.
-      length = bubbleControls.length;
-      for (var i = 0; i < length; i++)
-        this.createSearchBubble_(bubbleControls[i], text);
-    },
-
-    /**
-     * Performs a string replacement based on a regex and replace string.
-     * @param {RegEx} regex A regular expression for finding search matches.
-     * @param {String} replace A string to apply the replace operation.
-     * @param {Element} element An HTML container element.
-     * @returns {Boolean} true if the element was changed.
-     * @private
-     */
-    performReplace_: function(regex, replace, element) {
-      var found = false;
-      var div, child, tmp;
-
-      // Walk the tree, searching each TEXT node.
-      var walker = document.createTreeWalker(element,
-                                             NodeFilter.SHOW_TEXT,
-                                             null,
-                                             false);
-      var node = walker.nextNode();
-      while (node) {
-        // Perform a search and replace on the text node value.
-        var newValue = node.nodeValue.replace(regex, replace);
-        if (newValue != node.nodeValue) {
-          // The text node has changed so that means we found at least one
-          // match.
-          found = true;
-
-          // Create a temporary div element and set the innerHTML to the new
-          // value.
-          div = document.createElement('div');
-          div.innerHTML = newValue;
-
-          // Insert all the child nodes of the temporary div element into the
-          // document, before the original node.
-          child = div.firstChild;
-          while (child = div.firstChild) {
-            node.parentNode.insertBefore(child, node);
-          };
-
-          // Delete the old text node and advance the walker to the next
-          // node.
-          tmp = node;
-          node = walker.nextNode();
-          tmp.parentNode.removeChild(tmp);
-        } else {
-          node = walker.nextNode();
-        }
-      }
-
-      return found;
-    },
-
-    /**
-     * Removes all search highlight tags from the document.
-     * @private
-     */
-    unhighlightMatches_: function() {
-      // Find all search highlight elements.
-      var elements = document.querySelectorAll('.search-highlighted');
-
-      // For each element, remove the highlighting.
-      var parent, i;
-      for (var i = 0, node; node = elements[i]; i++) {
-        parent = node.parentNode;
-
-        // Replace the highlight element with the first child (the text node).
-        parent.replaceChild(node.firstChild, node);
-
-        // Normalize the parent so that multiple text nodes will be combined.
-        parent.normalize();
-      }
-    },
-
-    /**
-     * Creates a search result bubble attached to an element.
-     * @param {Element} element An HTML element, usually a button.
-     * @param {string} text A string to show in the bubble.
-     * @private
-     */
-    createSearchBubble_: function(element, text) {
-      // avoid appending multiple bubbles to a button.
-      var sibling = element.previousElementSibling;
-      if (sibling && (sibling.classList.contains('search-bubble') ||
-                      sibling.classList.contains('search-bubble-wrapper')))
-        return;
-
-      var parent = element.parentElement;
-      if (parent) {
-        var bubble = new SearchBubble(text);
-        bubble.attachTo(element);
-        bubble.updatePosition();
-      }
-    },
-
-    /**
-     * Removes all search match bubbles.
-     * @private
-     */
-    removeSearchBubbles_: function() {
-      var elements = document.querySelectorAll('.search-bubble');
-      var length = elements.length;
-      for (var i = 0; i < length; i++)
-        elements[i].dispose();
-    },
-
-    /**
-     * Builds a list of top-level pages to search.  Omits the search page and
-     * all sub-pages.
-     * @returns {Array} An array of pages to search.
-     * @private
-     */
-    getSearchablePages_: function() {
-      var name, page, pages = [];
-      for (name in OptionsPage.registeredPages) {
-        if (name != this.name) {
-          page = OptionsPage.registeredPages[name];
-          if (!page.parentPage)
-            pages.push(page);
-        }
-      }
-      return pages;
-    },
-
-    /**
-     * Builds a list of sub-pages (and overlay pages) to search.  Ignore pages
-     * that have no associated controls.
-     * @returns {Array} An array of pages to search.
-     * @private
-     */
-    getSearchableSubPages_: function() {
-      var name, pageInfo, page, pages = [];
-      for (name in OptionsPage.registeredPages) {
-        page = OptionsPage.registeredPages[name];
-        if (page.parentPage && page.associatedSection)
-          pages.push(page);
-      }
-      for (name in OptionsPage.registeredOverlayPages) {
-        page = OptionsPage.registeredOverlayPages[name];
-        if (page.associatedSection && page.pageDiv != undefined)
-          pages.push(page);
-      }
-      return pages;
-    },
-
-    /**
-     * A function to handle key press events.
-     * @return {Event} a keydown event.
-     * @private
-     */
-    keyDownEventHandler_: function(event) {
-      const ESCAPE_KEY_CODE = 27;
-      const FORWARD_SLASH_KEY_CODE = 191;
-
-      switch(event.keyCode) {
-        case ESCAPE_KEY_CODE:
-          if (event.target == this.searchField) {
-            this.setSearchText_('');
-            this.searchField.blur();
-            event.stopPropagation();
-            event.preventDefault();
-          }
-          break;
-        case FORWARD_SLASH_KEY_CODE:
-          if (!/INPUT|SELECT|BUTTON|TEXTAREA/.test(event.target.tagName)) {
-            this.searchField.focus();
-            event.stopPropagation();
-            event.preventDefault();
-          }
-          break;
-      }
-    },
-  };
-
-  /**
-   * Standardizes a user-entered text query by removing extra whitespace.
-   * @param {string} The user-entered text.
-   * @return {string} The trimmed query.
-   */
-  SearchPage.canonicalizeQuery = function(text) {
-    // Trim beginning and ending whitespace.
-    return text.replace(/^\s+|\s+$/g, '');
-  };
-
-  // Export
-  return {
-    SearchPage: SearchPage
-  };
-
-});