resources/net_internals/cros_log_marker.js

// Copyright 2013 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.
/**
 * This class stores the filter queries as history and highlight the log text
 * to increase the readability of the log
 *
 *   - Enable / Disable highlights
 *   - Highlights text with multiple colors
 *   - Resolve hghlight conficts (A text highlighted by multiple colors) so that
 *     the latest added highlight always has highest priority to display.
 *
 */
var CrosLogMarker = (function() {
  'use strict';

  // Special classes (defined in log_analyzer_view.css)
  var LOG_MARKER_HIGHLIGHT_CLASS = 'cros-log-analyzer-marker-highlight';
  var LOG_MARKER_CONTAINER_ID = 'cros-log-analyzer-marker-container';
  var LOG_MARKER_HISTORY_ENTRY_CLASS = 'cros-log-analyzer-marker-history-entry';
  var LOG_MARKER_HISTORY_COLOR_TAG_CLASS =
          'cros-log-analyzer-marker-history-color-tag';

  /**
   * Colors used for highlighting. (Current we support 6 colors)
   * TODO(shinfan): Add more supoorted colors.
   */
  var COLOR_USAGE_SET = {
    'Crimson': false,
    'DeepSkyBlue': false,
    'DarkSeaGreen': false,
    'GoldenRod': false,
    'IndianRed': false,
    'Orange': false
  };
  var COLOR_NUMBER = Object.keys(COLOR_USAGE_SET).length;


  /**
   * CrosHighlightTag represents a single highlight tag in text.
   */
  var CrosHighlightTag = (function() {
    /**
     * @constructor
     */
    function CrosHighlightTag(color, field, range, priority) {
      this.color = color;
      this.field = field;
      this.range = range;
      this.priority = priority;
      this.enabled = true;
    }

    return CrosHighlightTag;
  })();

  /**
   * @constructor
   * @param {CrosLogAnalyzerView} logAnalyzerView A reference to
   *     CrosLogAnalyzerView.
   */
  function CrosLogMarker(logAnalyzerView) {
    this.container = $(LOG_MARKER_CONTAINER_ID);
    // Stores highlight objects for each entry.
    this.entryHighlights = [];
    // Stores all the filter queries.
    this.markHistory = {};
    // Object references from CrosLogAnalyzerView.
    this.logEntries = logAnalyzerView.logEntries;
    this.logAnalyzerView = logAnalyzerView;
    // Counts how many highlights are created.
    this.markCount = 0;
    for (var i = 0; i < this.logEntries.length; i++) {
      this.entryHighlights.push([]);
    }
  }

  CrosLogMarker.prototype = {
    /**
     * Saves the query to the mark history and highlights the text
     * based on the query.
     */
    addMarkHistory: function(query) {
      // Increases the counter
      this.markCount += 1;

      // Find an avaiable color.
      var color = this.pickColor();
      if (!color) {
        // If all colors are occupied.
        alert('You can only add at most ' + COLOR_NUMBER + 'markers.');
        return;
      }

      // Updates HTML elements.
      var historyEntry = addNode(this.container, 'div');
      historyEntry.className = LOG_MARKER_HISTORY_ENTRY_CLASS;

      // A color tag that indicats the color used.
      var colorTag = addNode(historyEntry, 'div');
      colorTag.className = LOG_MARKER_HISTORY_COLOR_TAG_CLASS;
      colorTag.style.background = color;

      // Displays the query text.
      var queryText = addNodeWithText(historyEntry, 'p', query);
      queryText.style.color = color;

      // Adds a button to remove the marker.
      var removeBtn = addNodeWithText(historyEntry, 'a', 'Remove');
      removeBtn.addEventListener(
          'click', this.onRemoveBtnClicked_.bind(this, historyEntry, color));

      // A checkbox that lets user enable and disable the marker.
      var enableCheckbox = addNode(historyEntry, 'input');
      enableCheckbox.type = 'checkbox';
      enableCheckbox.checked = true;
      enableCheckbox.color = color;
      enableCheckbox.addEventListener('change',
          this.onEnableCheckboxChange_.bind(this, enableCheckbox), false);

      // Searches log text for matched patterns and highlights them.
      this.patternMatch(query, color);
    },

    /**
     * Search the text for matched strings
     */
    patternMatch: function(query, color) {
      var pattern = new RegExp(query, 'i');
      for (var i = 0; i < this.logEntries.length; i++) {
        var entry = this.logEntries[i];
        // Search description of each log entry
        // TODO(shinfan): Add more search fields
        var positions = this.findPositions(
            pattern, entry.description);
        for (var j = 0; j < positions.length; j++) {
            var pos = positions[j];
            this.mark(entry, pos, 'description', color);
        }
        this.sortHighlightsByStartPosition_(this.entryHighlights[i]);
      }
    },

    /**
     * Highlights the text.
     * @param {CrosLogEntry} entry The log entry to be highlighted
     * @param {int|Array} position [start, end]
     * @param {string} field The field of entry to be highlighted
     * @param {string} color color used for highlighting
     */
    mark: function(entry, position, field, color) {
      // Creates the highlight object
      var tag = new CrosHighlightTag(color, field, position, this.markCount);
      // Add the highlight into entryHighlights
      this.entryHighlights[entry.rowNum].push(tag);
    },

    /**
     * Find the highlight objects that covers the given position
     * @param {CrosHighlightTag|Array} highlights highlights of a log entry
     * @param {int} position The target index
     * @param {string} field The target field
     * @return {CrosHighlightTag|Array} Highlights that cover the position
     */
    getHighlight: function(highlights, index, field) {
      var res = [];
      for (var j = 0; j < highlights.length; j++) {
        var highlight = highlights[j];
        if (highlight.range[0] <= index &&
            highlight.range[1] > index &&
            highlight.field == field &&
            highlight.enabled) {
          res.push(highlight);
        }
      }
      /**
       * Sorts the result by priority so that the highlight with
       * highest priority comes first.
       */
      this.sortHighlightsByPriority_(res);
      return res;
    },

    /**
     * This function highlights the entry by going through the text from left
     * to right and searching for "key" positions.
     * A "key" position is a position that one (or more) highlight
     * starts or ends. We only care about "key" positions because this is where
     * the text highlight status changes.
     * At each key position, the function decides if the text between this
     * position and previous position need to be highlighted and resolves
     * highlight conflicts.
     *
     * @param {CrosLogEntry} entry The entry going to be highlighted.
     * @param {string} field The specified field of the entry.
     * @param {DOMElement} parent Parent node.
     */
    getHighlightedEntry: function(entry, field, parent) {
      var rowNum = entry.rowNum;
      // Get the original text content of the entry (without any highlights).
      var content = this.logEntries[rowNum][field];
      var index = 0;
      while (index < content.length) {
        var nextIndex = this.getNextIndex(
            this.entryHighlights[rowNum], index, field, content);
        // Searches for highlights that have the position in range.
        var highlights = this.getHighlight(
            this.entryHighlights[rowNum], index, field);
        var text = content.substr(index, nextIndex - index);
        if (highlights.length > 0) {
          // Always picks the highlight with highest priority.
          this.addSpan(text, highlights[0].color, parent);
        } else {
          addNodeWithText(parent, 'span', text);
        }
        index = nextIndex;
      }
    },

    /**
     * A helper function that is used by this.getHightlightedEntry
     * It returns the first index where a highlight begins or ends from
     * the given index.
     * @param {CrosHighlightTag|Array} highlights An array of highlights
     *     of a log entry.
     * @param {int} index The start position.
     * @param {string} field The specified field of entry.
     *     Other fields are ignored.
     * @param {string} content The text content of the log entry.
     * @return {int} The first index where a highlight begins or ends.
     */
    getNextIndex: function(highlights, index, field, content) {
      var minGap = Infinity;
      var res = -1;
      for (var i = 0; i < highlights.length; i++) {
        if (highlights[i].field != field || !highlights[i].enabled)
          continue;
        // Distance between current index and the start index of highlight.
        var gap1 = highlights[i].range[0] - index;
        // Distance between current index and the end index of highlight.
        var gap2 = highlights[i].range[1] - index;
        if (gap1 > 0 && gap1 < minGap) {
          minGap = gap1;
          res = highlights[i].range[0];
        }
        if (gap2 > 0 && gap2 < minGap) {
          minGap = gap2;
          res = highlights[i].range[1];
        }
      }
      // Returns |res| if found. Otherwise returns the end position of the text.
      return res > 0 ? res : content.length;
    },

    /**
     * A helper function that is used by this.getHightlightedEntry.
     * It adds the HTML label to the text.
     */
    addSpan: function(text, color, parent) {
      var span = addNodeWithText(parent, 'span', text);
      span.style.color = color;
      span.className = LOG_MARKER_HIGHLIGHT_CLASS;
    },

    /**
     * A helper function that is used by this.getHightlightedEntry.
     * It adds the HTML label to the text.
     */
    pickColor: function() {
      for (var color in COLOR_USAGE_SET) {
        if (!COLOR_USAGE_SET[color]) {
          COLOR_USAGE_SET[color] = true;
          return color;
        }
      }
      return false;
    },

    /**
     * A event handler that enables and disables the corresponding marker.
     * @private
     */
    onEnableCheckboxChange_: function(checkbox) {
      for (var i = 0; i < this.entryHighlights.length; i++) {
        for (var j = 0; j < this.entryHighlights[i].length; j++) {
          if (this.entryHighlights[i][j].color == checkbox.color) {
            this.entryHighlights[i][j].enabled = checkbox.checked;
           }
        }
      }
      this.refreshLogTable();
    },

    /**
     * A event handlier that removes the marker from history.
     * @private
     */
    onRemoveBtnClicked_: function(entry, color) {
      entry.parentNode.removeChild(entry);
      COLOR_USAGE_SET[color] = false;
      for (var i = 0; i < this.entryHighlights.length; i++) {
        var highlights = this.entryHighlights[i];
        while (true) {
          var index = this.findHighlightByColor_(highlights, color);
          if (index == -1)
            break;
          highlights.splice(index, 1);
        }
      }
      this.refreshLogTable();
    },

    /**
     * A helper function that returns the index of first highlight that
     * has the target color. Otherwise returns -1.
     * @private
     */
    findHighlightByColor_: function(highlights, color) {
      for (var i = 0; i < highlights.length; i++) {
        if (highlights[i].color == color)
          return i;
      }
      return -1;
    },

    /**
     * Refresh the log table in the CrosLogAnalyzerView.
     */
    refreshLogTable: function() {
      this.logAnalyzerView.populateTable();
      this.logAnalyzerView.filterLog();
    },

    /**
     * A pattern can appear multiple times in a string.
     * Returns positions of all the appearance.
     */
    findPositions: function(pattern, str) {
      var res = [];
      str = str.toLowerCase();
      var match = str.match(pattern);
      if (!match)
        return res;
      for (var i = 0; i < match.length; i++) {
        var index = 0;
        while (true) {
          var start = str.indexOf(match[i].toLowerCase(), index);
          if (start == -1)
            break;
          var end = start + match[i].length;
          res.push([start, end]);
          index = end + 1;
        }
      }
      return res;
    },

    /**
     * A helper function used in sorting highlights by start position.
     * @param {HighlightTag} h1, h2 Two highlight tags in the array.
     * @private
     */
    compareStartPosition_: function(h1, h2) {
      return h1.range[0] - h2.range[0];
    },

    /**
     * A helper function used in sorting highlights by priority.
     * @param {HighlightTag} h1, h2 Two highlight tags in the array.
     * @private
     */
    comparePriority_: function(h1, h2) {
      return h2.priority - h1.priority;
    },

    /**
     * A helper function that sorts the highlights array by start position.
     * @private
     */
    sortHighlightsByStartPosition_: function(highlights) {
      highlights.sort(this.compareStartPosition_);
    },

    /**
     * A helper function that sorts the highlights array by priority.
     * @private
     */
    sortHighlightsByPriority_: function(highlights) {
      highlights.sort(this.comparePriority_);
    }
  };

  return CrosLogMarker;
})();