chrome源码之历史记录页面学习

// Document Functions:
/**
 * Window onload handler, sets up the page.
 */
function load() {
  uber.onContentFrameLoaded();
  FocusOutlineManager.forDocument(document);

  var searchField = $(‘search-field‘);

  historyModel = new HistoryModel();
  historyView = new HistoryView(historyModel);
  pageState = new PageState(historyModel, historyView);

  // Create default view.
  var hashData = pageState.getHashData();
  var page = parseInt(hashData.page, 10) || historyView.getPage();
  var range = /** @type {HistoryModel.Range} */(parseInt(hashData.range, 10)) ||
      historyView.getRangeInDays();
  var offset = parseInt(hashData.offset, 10) || historyView.getOffset();
  historyView.setPageState(hashData.q, page, range, offset);

  if ($(‘overlay‘)) {
    cr.ui.overlay.setupOverlay($(‘overlay‘));
    cr.ui.overlay.globalInitialization();
  }
  HistoryFocusManager.getInstance().initialize();

  var doSearch = function(e) {
    recordUmaAction(‘HistoryPage_Search‘);
    historyView.setSearch(searchField.value);

    if (isMobileVersion())
      searchField.blur();  // Dismiss the keyboard.
  };
  //yana add 161011
  var searchAllHistory = function(e){
        historyView.setPageState(‘‘, 0, HistoryModel.Range.ALL_TIME, 0);
  }
  var removeMenu = getRequiredElement(‘remove-visit‘);
  // Decorate remove-visit before disabling/hiding because the values are
  // overwritten when decorating a MenuItem that has a Command.
  cr.ui.decorate(removeMenu, MenuItem);
  removeMenu.disabled = !loadTimeData.getBoolean(‘allowDeletingHistory‘);
  removeMenu.hidden = loadTimeData.getBoolean(‘hideDeleteVisitUI‘);

  document.addEventListener(‘command‘, handleCommand);
  $(‘all-history‘).addEventListener(‘click‘, searchAllHistory);//yana add 161011
  //console.log("$(‘all-history‘)="+$(‘all-history‘));
  searchField.addEventListener(‘search‘, doSearch);
  $(‘search-button‘).addEventListener(‘click‘, doSearch);

  $(‘more-from-site‘).addEventListener(‘activate‘, function(e) {
    activeVisit.showMoreFromSite_();
    activeVisit = null;
  });

  // Only show the controls if the command line switch is activated or the user
  // is supervised.
  if (loadTimeData.getBoolean(‘groupByDomain‘)) {
    $(‘history-page‘).classList.add(‘big-topbar-page‘);
    $(‘filter-controls‘).hidden = false;
  }
  // Hide the top container which has the "Clear browsing data" and "Remove
  // selected entries" buttons if deleting history is not allowed.
  if (!loadTimeData.getBoolean(‘allowDeletingHistory‘))
    $(‘top-container‘).hidden = true;

  uber.setTitle(loadTimeData.getString(‘title‘));

  // Adjust the position of the notification bar when the window size changes.
  window.addEventListener(‘resize‘,
      historyView.positionNotificationBar.bind(historyView));

  if (isMobileVersion()) {
    // Move the search box out of the header.
    var resultsDisplay = $(‘results-display‘);
    resultsDisplay.parentNode.insertBefore($(‘search-field‘), resultsDisplay);

    window.addEventListener(
        ‘resize‘, historyView.updateClearBrowsingDataButton_);

<if expr="is_ios">
    // Trigger window resize event when search field is focused to force update
    // of the clear browsing button, which should disappear when search field
    // is active. The window is not resized when the virtual keyboard is shown
    // on iOS.
    searchField.addEventListener(‘focus‘, function() {
      cr.dispatchSimpleEvent(window, ‘resize‘);
    });
</if>  /* is_ios */

    // When the search field loses focus, add a delay before updating the
    // visibility, otherwise the button will flash on the screen before the
    // keyboard animates away.
    searchField.addEventListener(‘blur‘, function() {
      setTimeout(historyView.updateClearBrowsingDataButton_, 250);
    });

    // Move the button to the bottom of the page.
    $(‘history-page‘).appendChild($(‘clear-browsing-data‘));
  } else {
    window.addEventListener(‘message‘, function(e) {
      e = /** @type {!MessageEvent<!{method: string}>} */(e);
      if (e.data.method == ‘frameSelected‘)
        searchField.focus();
    });
    searchField.focus();
  }
    historyModel.queryDateList_();//yana add 160909

<if expr="is_ios">
  function checkKeyboardVisibility() {
    // Figure out the real height based on the orientation, becauase
    // screen.width and screen.height don‘t update after rotation.
    var screenHeight = window.orientation % 180 ? screen.width : screen.height;

    // Assume that the keyboard is visible if more than 30% of the screen is
    // taken up by window chrome.
    var isKeyboardVisible = (window.innerHeight / screenHeight) < 0.7;

    document.body.classList.toggle(‘ios-keyboard-visible‘, isKeyboardVisible);
  }
  window.addEventListener(‘orientationchange‘, checkKeyboardVisibility);
  window.addEventListener(‘resize‘, checkKeyboardVisibility);
</if> /* is_ios */
}

/**
 * Sets all the parameters for the history page and then reloads the view to
 * update the results.
 * @param {string} searchText The search string to set.
 * @param {number} page The page to be viewed.
 * @param {HistoryModel.Range} range The range to view or search over.
 * @param {number} offset Set the begining of the query to the specific offset.
 */
HistoryView.prototype.setPageState = function(searchText, page, range, offset) {
  this.clear_();
  this.model_.searchText_ = searchText;
  this.pageIndex_ = page;
  this.model_.requestedPage_ = page;
  this.model_.rangeInDays_ = range;
  this.model_.groupByDomain_ = false;
  if (range != HistoryModel.Range.ALL_TIME&&range != HistoryModel.Range.DAY)//yana add 160908
    this.model_.groupByDomain_ = true;
  this.model_.offset_ = offset;
  this.reload();
  pageState.setUIState(this.model_.getSearchText(),
                       this.pageIndex_,
                       this.getRangeInDays(),
                       this.getOffset());
};

/**
 * Reload our model with the current parameters.
 */
HistoryModel.prototype.reload = function() {
  // Save user-visible state, clear the model, and restore the state.
  var search = this.searchText_;
  var page = this.requestedPage_;
  var range = this.rangeInDays_;
  var offset = this.offset_;
  var groupByDomain = this.groupByDomain_;

  this.clearModel_();
  this.searchText_ = search;
  this.requestedPage_ = page;
  this.rangeInDays_ = range;
  this.offset_ = offset;
  this.groupByDomain_ = groupByDomain;
  this.queryHistory_();
};

/**
 * Query for history, either for a search or time-based browsing.
 * @private
 */
HistoryModel.prototype.queryHistory_ = function() {
  var maxResults =
      (this.rangeInDays_ == HistoryModel.Range.ALL_TIME) ? RESULTS_PER_PAGE : 0;

  // If there are already some visits, pick up the previous query where it
  // left off.
  var lastVisit = this.visits_.slice(-1)[0];
  var endTime = lastVisit ? lastVisit.date.getTime() : 0;

  $(‘loading-spinner‘).hidden = false;
  this.inFlight_ = true;

  //yana add 20161128
    if (typeof this.timer_ != ‘undefined‘ && this.timer_) {
    clearInterval(this.timer_);
    }

  // TODO(glen): Replace this with a bound method so we don‘t need
  //     public model and view.
  this.timer_ = window.setInterval(function() {
        if($(‘loading-spinner‘).hidden==false){
          chrome.send(‘queryHistory‘,
              [this.searchText_, this.offset_, this.rangeInDays_, endTime, maxResults]);
        }
  }.bind(this), 50);
};

void BrowsingHistoryHandler::RegisterMessages() {
……
……

  web_ui()->RegisterMessageCallback("queryHistory",
      base::Bind(&BrowsingHistoryHandler::HandleQueryHistory,
                 base::Unretained(this)));

……
}

void BrowsingHistoryHandler::WebHistoryQueryComplete(
    const base::string16& search_text,
    const history::QueryOptions& options,
    base::TimeTicks start_time,
    history::WebHistoryService::Request* request,
    const base::DictionaryValue* results_value) {
  base::TimeDelta delta = base::TimeTicks::Now() - start_time;
  UMA_HISTOGRAM_TIMES("WebHistory.ResponseTime", delta);

  // If the response came in too late, do nothing.
  // TODO(dubroy): Maybe show a banner, and prompt the user to reload?
  if (!web_history_timer_.IsRunning())
    return;
  web_history_timer_.Stop();

  UMA_HISTOGRAM_ENUMERATION(
      "WebHistory.QueryCompletion",
      results_value ? WEB_HISTORY_QUERY_SUCCEEDED : WEB_HISTORY_QUERY_FAILED,
      NUM_WEB_HISTORY_QUERY_BUCKETS);

  DCHECK_EQ(0U, web_history_query_results_.size());
  const base::ListValue* events = NULL;
  if (results_value && results_value->GetList("event", &events)) {
    web_history_query_results_.reserve(events->GetSize());
    for (unsigned int i = 0; i < events->GetSize(); ++i) {
      const base::DictionaryValue* event = NULL;
      const base::DictionaryValue* result = NULL;
      const base::ListValue* results = NULL;
      const base::ListValue* ids = NULL;
      base::string16 url;
      base::string16 title;
      base::Time visit_time;

      if (!(events->GetDictionary(i, &event) &&
          event->GetList("result", &results) &&
          results->GetDictionary(0, &result) &&
          result->GetString("url", &url) &&
          result->GetList("id", &ids) &&
          ids->GetSize() > 0)) {
        LOG(WARNING) << "Improperly formed JSON response from history server.";
        continue;
      }

      // Ignore any URLs that should not be shown in the history page.
      GURL gurl(url);
      if (!CanAddURLToHistory(gurl))
        continue;

      // Title is optional, so the return value is ignored here.
      result->GetString("title", &title);

      // Extract the timestamps of all the visits to this URL.
      // They are referred to as "IDs" by the server.
      for (int j = 0; j < static_cast<int>(ids->GetSize()); ++j) {
        const base::DictionaryValue* id = NULL;
        std::string timestamp_string;
        int64_t timestamp_usec = 0;

        if (!ids->GetDictionary(j, &id) ||
            !id->GetString("timestamp_usec", &timestamp_string) ||
            !base::StringToInt64(timestamp_string, &timestamp_usec)) {
          NOTREACHED() << "Unable to extract timestamp.";
          continue;
        }
        // The timestamp on the server is a Unix time.
        base::Time time = base::Time::UnixEpoch() +
            base::TimeDelta::FromMicroseconds(timestamp_usec);

        // Get the ID of the client that this visit came from.
        std::string client_id;
        id->GetString("client_id", &client_id);

        web_history_query_results_.push_back(
            HistoryEntry(
                HistoryEntry::REMOTE_ENTRY,
                gurl,
                title,
                time,
                client_id,
                !search_text.empty(),
                base::string16(),
                /* blocked_visit */ false));
      }
    }
  }
  has_synced_results_ = results_value != nullptr;
  results_info_value_.SetBoolean("hasSyncedResults", has_synced_results_);
  if (!query_task_tracker_.HasTrackedTasks())
    ReturnResultsToFrontEnd();
}

void BrowsingHistoryHandler::ReturnResultsToFrontEnd() {
  Profile* profile = Profile::FromWebUI(web_ui());
  BookmarkModel* bookmark_model =
      BookmarkModelFactory::GetForBrowserContext(profile);
  SupervisedUserService* supervised_user_service = NULL;
#if defined(ENABLE_SUPERVISED_USERS)
  if (profile->IsSupervised())
    supervised_user_service =
        SupervisedUserServiceFactory::GetForProfile(profile);
#endif
  browser_sync::ProfileSyncService* sync_service =
      ProfileSyncServiceFactory::GetInstance()->GetForProfile(profile);

  // Combine the local and remote results into |query_results_|, and remove
  // any duplicates.
  if (!web_history_query_results_.empty()) {
    int local_result_count = query_results_.size();
    query_results_.insert(query_results_.end(),
                          web_history_query_results_.begin(),
                          web_history_query_results_.end());
    MergeDuplicateResults(&query_results_);

    if (local_result_count) {
      // In the best case, we expect that all local results are duplicated on
      // the server. Keep track of how many are missing.
      int missing_count = std::count_if(
          query_results_.begin(), query_results_.end(), IsLocalOnlyResult);
      UMA_HISTOGRAM_PERCENTAGE("WebHistory.LocalResultMissingOnServer",
                               missing_count * 100.0 / local_result_count);
    }
  }

  bool is_md = false;
#if !defined(OS_ANDROID)
  is_md = MdHistoryUI::IsEnabled(profile);
#endif

  // Convert the result vector into a ListValue.
  base::ListValue results_value;
  for (std::vector<BrowsingHistoryHandler::HistoryEntry>::iterator it =
           query_results_.begin(); it != query_results_.end(); ++it) {
    std::unique_ptr<base::Value> value(it->ToValue(
        bookmark_model, supervised_user_service, sync_service, is_md));
    results_value.Append(std::move(value));
  }

  web_ui()->CallJavascriptFunctionUnsafe("historyResult", results_info_value_, results_value);// here is the two parameters to send to front end.
  web_ui()->CallJavascriptFunctionUnsafe(
      "showNotification", base::FundamentalValue(has_synced_results_),
      base::FundamentalValue(has_other_forms_of_browsing_history_));
  results_info_value_.Clear();
  query_results_.clear();
  web_history_query_results_.clear();
}

  // The info value that is returned to the front end with the query results.
  base::DictionaryValue results_info_value_;

  // The list of query results received from the history service.
  std::vector<HistoryEntry> query_results_;

  // The list of query results received from the history server.
  std::vector<HistoryEntry> web_history_query_results_;

class BASE_EXPORT Value {
 public:
  enum Type {
    TYPE_NULL = 0,
    TYPE_BOOLEAN,
    TYPE_INTEGER,
    TYPE_DOUBLE,
    TYPE_STRING,
    TYPE_BINARY,
    TYPE_DICTIONARY,
    TYPE_LIST
    // Note: Do not add more types. See the file-level comment above for why.
  };
　……
}

/**
 * Our history system calls this function with results from searches.
 * @param {HistoryQuery} info An object containing information about the query.
 * @param {Array<HistoryEntry>} results A list of results.
 */
function historyResult(info, results) {
  historyModel.addResults(info, results);
}

// Visit:
/**
 * Class to hold all the information about an entry in our model.
 * @param {HistoryEntry} result An object containing the visit‘s data.
 * @param {boolean} continued Whether this visit is on the same day as the
 *     visit before it.
 * @param {HistoryModel} model The model object this entry belongs to.
 * @constructor
 */
function Visit(result, continued, model) {
  this.model_ = model;
  this.title_ = result.title;
  this.url_ = result.url;
  this.domain_ = result.domain;
  this.starred_ = result.starred;
  this.fallbackFaviconText_ = result.fallbackFaviconText;

  // These identify the name and type of the device on which this visit
  // occurred. They will be empty if the visit occurred on the current device.
  this.deviceName = result.deviceName;
  this.deviceType = result.deviceType;

  // The ID will be set according to when the visit was displayed, not
  // received. Set to -1 to show that it has not been set yet.
  this.id_ = -1;

  this.isRendered = false;  // Has the visit already been rendered on the page?

  // All the date information is public so that owners can compare properties of
  // two items easily.

  this.date = new Date(result.time);

  // See comment in BrowsingHistoryHandler::QueryComplete - we won‘t always
  // get all of these.
  this.dateRelativeDay = result.dateRelativeDay;
  this.dateShort = result.dateShort;
  //this.dateTimeOfDay = result.dateTimeOfDay;
  //yana modify 160925
  var dayFlag = result.dateTimeOfDay.substr(0,2);
  if(dayFlag == "上午"){
    var h= result.dateTimeOfDay.substr(2).split(":")[0];
    if(h==12)    h = parseInt(h)-12;
    this.dateTimeOfDay = h+ ":" +result.dateTimeOfDay.substr(2).split(":")[1];
  }else{
    var h= result.dateTimeOfDay.substr(2).split(":")[0];
    if(h!=12)    h = parseInt(h)+12;
    this.dateTimeOfDay = h+ ":" +result.dateTimeOfDay.substr(2).split(":")[1];
  }
  // Shows the filtering behavior for that host (only used for supervised
  // users).
  // A value of |SupervisedUserFilteringBehavior.ALLOW| is not displayed so it
  // is used as the default value.
  this.hostFilteringBehavior = SupervisedUserFilteringBehavior.ALLOW;
  if (result.hostFilteringBehavior)
    this.hostFilteringBehavior = result.hostFilteringBehavior;

  this.blockedVisit = result.blockedVisit;

  // Whether this is the continuation of a previous day.
  this.continued = continued;

  this.allTimestamps = result.allTimestamps;
}

// HistoryModel:

/**
 * Global container for history data. Future optimizations might include
 * allowing the creation of a HistoryModel for each search string, allowing
 * quick flips back and forth between results.
 *
 * The history model is based around pages, and only fetching the data to
 * fill the currently requested page. This is somewhat dependent on the view,
 * and so future work may wish to change history model to operate on
 * timeframe (day or week) based containers.
 *
 * @constructor
 */
function HistoryModel() {
  this.clearModel_();
}

// HistoryView:
/**
 * Functions and state for populating the page with HTML. This should one-day
 * contain the view and use event handlers, rather than pushing HTML out and
 * getting called externally.
 * @param {HistoryModel} model The model backing this view.
 * @constructor
 */
function HistoryView(model) {
  this.editButtonTd_ = $(‘edit-button‘);
  this.editingControlsDiv_ = $(‘editing-controls‘);
  this.resultDiv_ = $(‘results-display‘);
  this.focusGrid_ = new cr.ui.FocusGrid();
  this.pageDiv_ = $(‘results-pagination‘);
  this.model_ = model;
  this.pageIndex_ = 0;
  this.lastDisplayed_ = [];
  this.hasRenderedResults_ = false;

  this.model_.setView(this);

  this.currentVisits_ = [];

  // If there is no search button, use the search button label as placeholder
  // text in the search field.
  if ($(‘search-button‘).offsetWidth == 0)
    $(‘search-field‘).placeholder = $(‘search-button‘).value;

  var self = this;

  $(‘clear-browsing-data‘).addEventListener(‘click‘, openClearBrowsingData);
  $(‘remove-selected‘).addEventListener(‘click‘, removeItems);

  // Add handlers for the page navigation buttons at the bottom.
  $(‘newest-button‘).addEventListener(‘click‘, function() {
    recordUmaAction(‘HistoryPage_NewestHistoryClick‘);
    self.setPage(0);
  });
  $(‘newer-button‘).addEventListener(‘click‘, function() {
    recordUmaAction(‘HistoryPage_NewerHistoryClick‘);
    self.setPage(self.pageIndex_ - 1);
  });
  $(‘older-button‘).addEventListener(‘click‘, function() {
    recordUmaAction(‘HistoryPage_OlderHistoryClick‘);
    self.setPage(self.pageIndex_ + 1);
  });

  $(‘timeframe-controls‘).onchange = function(e) {
    var value = parseInt(e.target.value, 10);
    self.setRangeInDays(/** @type {HistoryModel.Range<number>} */(value));
  };

  $(‘range-previous‘).addEventListener(‘click‘, function(e) {
    if (self.getRangeInDays() == HistoryModel.Range.ALL_TIME)
      self.setPage(self.pageIndex_ + 1);
    else
      self.setOffset(self.getOffset() + 1);
  });
  $(‘range-next‘).addEventListener(‘click‘, function(e) {
    if (self.getRangeInDays() == HistoryModel.Range.ALL_TIME)
      self.setPage(self.pageIndex_ - 1);
    else
      self.setOffset(self.getOffset() - 1);
  });
  $(‘range-today‘).addEventListener(‘click‘, function(e) {
    if (self.getRangeInDays() == HistoryModel.Range.ALL_TIME)
      self.setPage(0);
    else
      self.setOffset(0);
  });
}

/**
 * Adds the results for a certain day. This includes a title with the day of
 * the results and the results themselves, grouped or not.
 * @param {Array} visits Visits returned by the query.
 * @param {Node} parentNode Node to which to add the results to.
 * @private
 */
HistoryView.prototype.addDayResults_ = function(visits, parentNode) {
  if (visits.length == 0)
    return;

  var firstVisit = visits[0];
  var day = parentNode.appendChild(createElementWithClassName(‘h3‘, ‘day‘));
  day.appendChild(document.createTextNode(firstVisit.dateRelativeDay));
  if (firstVisit.continued) {
    day.appendChild(document.createTextNode(‘ ‘ +
                                            loadTimeData.getString(‘cont‘)));
  }
  var dayResults = /** @type {HTMLElement} */(parentNode.appendChild(
      createElementWithClassName(‘ol‘, ‘day-results‘)));

  // Don‘t add checkboxes if entries can not be edited.
  if (!this.model_.editingEntriesAllowed)
    dayResults.classList.add(‘no-checkboxes‘);

  if (this.model_.getGroupByDomain()) {
    this.groupVisitsByDomain_(visits, dayResults);
  } else {
    var lastTime;

    for (var i = 0, visit; visit = visits[i]; i++) {
      // If enough time has passed between visits, indicate a gap in browsing.
      var thisTime = visit.date.getTime();
      //delete the gap yana 160926
      /*if (lastTime && lastTime - thisTime > BROWSING_GAP_TIME)
        dayResults.appendChild(createElementWithClassName(‘li‘, ‘gap‘));*/

      // Insert the visit into the DOM.
      dayResults.appendChild(visit.getResultDOM({ addTitleFavicon: true }));
      this.setVisitRendered_(visit);

      lastTime = thisTime;
    }
  }
};

/**
 * Returns a dom structure for a browse page result or a search page result.
 * @param {Object} propertyBag A bag of configuration properties, false by
 * default:
 *  - isSearchResult: Whether or not the result is a search result.
 *  - addTitleFavicon: Whether or not the favicon should be added.
 *  - useMonthDate: Whether or not the full date should be inserted (used for
 * monthly view).
 * @return {Node} A DOM node to represent the history entry or search result.
 */
Visit.prototype.getResultDOM = function(propertyBag) {
  var isSearchResult = propertyBag.isSearchResult || false;
  var addTitleFavicon = propertyBag.addTitleFavicon || false;
  var useMonthDate = propertyBag.useMonthDate || false;
  var focusless = propertyBag.focusless || false;
  var node = createElementWithClassName(‘li‘, ‘entry‘);
  var time = createElementWithClassName(‘span‘, ‘time‘);
  var entryBox = createElementWithClassName(‘div‘, ‘entry-box‘);
  var domain = createElementWithClassName(‘div‘, ‘domain‘);

  this.id_ = this.model_.getNextVisitId();
  var self = this;

  // Only create the checkbox if it can be used to delete an entry.
  if (this.model_.editingEntriesAllowed) {
    var checkbox = document.createElement(‘input‘);
    checkbox.type = ‘checkbox‘;
    checkbox.id = ‘checkbox-‘ + this.id_;
    checkbox.time = this.date.getTime();
    checkbox.setAttribute(‘aria-label‘, loadTimeData.getStringF(
        ‘entrySummary‘,
        this.dateTimeOfDay,
        this.starred_ ? loadTimeData.getString(‘bookmarked‘) : ‘‘,
        this.title_,
        this.domain_));
    checkbox.addEventListener(‘click‘, checkboxClicked);
    entryBox.appendChild(checkbox);

    if (focusless)
      checkbox.tabIndex = -1;

    if (!isMobileVersion()) {
      // Clicking anywhere in the entryBox will check/uncheck the checkbox.
      entryBox.setAttribute(‘for‘, checkbox.id);
      entryBox.addEventListener(‘mousedown‘, this.handleMousedown_.bind(this));
      entryBox.addEventListener(‘click‘, entryBoxClick);
      entryBox.addEventListener(‘keydown‘, this.handleKeydown_.bind(this));
    }
  }

  // Keep track of the drop down that triggered the menu, so we know
  // which element to apply the command to.
  // TODO(dubroy): Ideally we‘d use ‘activate‘, but MenuButton swallows it.
  var setActiveVisit = function(e) {
    activeVisit = self;
    var menu = $(‘action-menu‘);
    menu.dataset.devicename = self.deviceName;
    menu.dataset.devicetype = self.deviceType;
  };
  domain.textContent = this.domain_;

  entryBox.appendChild(time);

  var bookmarkSection = createElementWithClassName(
      ‘button‘, ‘bookmark-section custom-appearance‘);
  
    /*yana add 161020*/
    if (this.starred_) {
        bookmarkSection.title = loadTimeData.getString(‘removeBookmark‘);
        bookmarkSection.classList.add(‘starred‘);
    }else{
        bookmarkSection.title = loadTimeData.getString(‘addBookmark‘);
    }
    bookmarkSection.addEventListener(‘click‘, function f(e) {
      recordUmaAction(‘HistoryPage_BookmarkStarClicked‘);
      var hasClassStarred = bookmarkSection.getAttribute("class").indexOf("starred");
      if(hasClassStarred>0){
          bookmarkSection.title = loadTimeData.getString(‘addBookmark‘);
          bookmarkSection.classList.remove(‘starred‘);
          chrome.send(‘removeBookmark‘, [self.url_]);
          //this.model_.getView().onBeforeUnstarred(this);
          //this.model_.getView().onAfterUnstarred(this);
          //bookmarkSection.removeEventListener(‘click‘, f);
      }else{
          bookmarkSection.title = loadTimeData.getString(‘removeBookmark‘);
          
          bookmarkSection.classList.add(‘starred‘);
          chrome.send(‘addBookmark‘, [self.url_, self.title_]);
      }
      e.preventDefault();
    }.bind(this));


  if (focusless)
    bookmarkSection.tabIndex = -1;

  entryBox.appendChild(bookmarkSection);

  if (addTitleFavicon || this.blockedVisit) {
    var faviconSection = createElementWithClassName(‘div‘, ‘favicon‘);
    if (this.blockedVisit)
      faviconSection.classList.add(‘blocked-icon‘);
    else
      this.loadFavicon_(faviconSection);
    entryBox.appendChild(faviconSection);
  }

  var visitEntryWrapper = /** @type {HTMLElement} */(
      entryBox.appendChild(document.createElement(‘div‘)));
  if (addTitleFavicon || this.blockedVisit)
    visitEntryWrapper.classList.add(‘visit-entry‘);
  if (this.blockedVisit) {
    visitEntryWrapper.classList.add(‘blocked-indicator‘);
    visitEntryWrapper.appendChild(this.getVisitAttemptDOM_());
  } else {
    var title = visitEntryWrapper.appendChild(
        this.getTitleDOM_(isSearchResult));

    if (focusless)
      title.querySelector(‘a‘).tabIndex = -1;

    visitEntryWrapper.appendChild(domain);
  }

  if (isMobileVersion()) {
    if (this.model_.editingEntriesAllowed) {
      var removeButton = createElementWithClassName(‘button‘, ‘remove-entry‘);
      removeButton.setAttribute(‘aria-label‘,
                                loadTimeData.getString(‘removeFromHistory‘));
      removeButton.classList.add(‘custom-appearance‘);
      removeButton.addEventListener(
          ‘click‘, this.removeEntryFromHistory_.bind(this));
      entryBox.appendChild(removeButton);

      // Support clicking anywhere inside the entry box.
      entryBox.addEventListener(‘click‘, function(e) {
        if (!e.defaultPrevented) {
          self.titleLink.focus();
          self.titleLink.click();
        }
      });
    }
  } else {
    /*yana mask 160824*/
      /*
    var dropDown = createElementWithClassName(‘button‘, ‘drop-down‘);
    dropDown.value = ‘Open action menu‘;
    dropDown.title = loadTimeData.getString(‘actionMenuDescription‘);
    dropDown.setAttribute(‘menu‘, ‘#action-menu‘);
    dropDown.setAttribute(‘aria-haspopup‘, ‘true‘);

    if (focusless)
      dropDown.tabIndex = -1;

    cr.ui.decorate(dropDown, cr.ui.MenuButton);
    dropDown.respondToArrowKeys = false;

    dropDown.addEventListener(‘mousedown‘, setActiveVisit);
    dropDown.addEventListener(‘focus‘, setActiveVisit);

    // Prevent clicks on the drop down from affecting the checkbox.  We need to
    // call blur() explicitly because preventDefault() cancels any focus
    // handling.
    dropDown.addEventListener(‘click‘, function(e) {
      e.preventDefault();
      document.activeElement.blur();
    });
    entryBox.appendChild(dropDown);*/
    
    /*yana add 160825 begin*/
    var removeVisit = createElementWithClassName(‘button‘, ‘remove-visit‘);
    removeVisit.value = ‘remove from history‘;
    //removeVisit.id = ‘remove-visit‘;
    removeVisit.title = loadTimeData.getString(‘removeFromVisit‘);
    if (focusless)
      removeVisit.tabIndex = -1;
    cr.ui.decorate(removeVisit, cr.ui.MenuButton);
    //removeVisit.respondToArrowKeys = false;
    removeVisit.addEventListener(‘mousedown‘, setActiveVisit);
    removeVisit.addEventListener(‘focus‘, setActiveVisit);

    // Prevent clicks on the drop down from affecting the checkbox.  We need to
    // call blur() explicitly because preventDefault() cancels any focus
    // handling.
    removeVisit.addEventListener(‘click‘, function(e) {
      assert(!$(‘remove-visit‘).disabled);
      activeVisit.removeEntryFromHistory_(e);
      e.preventDefault();
      document.activeElement.blur();
    });
    entryBox.appendChild(removeVisit);

    var moreFromSite = createElementWithClassName(‘button‘, ‘more-from-site‘);
    moreFromSite.value = ‘more from site‘;
    //moreFromSite.id = ‘more-from-site‘;
    moreFromSite.title = loadTimeData.getString(‘searchMoreAboutThisSite‘);
    if (focusless)
      moreFromSite.tabIndex = -1;
    cr.ui.decorate(moreFromSite, cr.ui.MenuButton);
    //removeVisit.respondToArrowKeys = false;
    moreFromSite.addEventListener(‘mousedown‘, setActiveVisit);
    moreFromSite.addEventListener(‘focus‘, setActiveVisit);

    // Prevent clicks on the drop down from affecting the checkbox.  We need to
    // call blur() explicitly because preventDefault() cancels any focus
    // handling.
    moreFromSite.addEventListener(‘click‘, function(e) {
      activeVisit.showMoreFromSite_();
      activeVisit = null;
      e.preventDefault();
      document.activeElement.blur();
    });
    entryBox.appendChild(moreFromSite);
    /*yana add 160825 end*/
  }

  // Let the entryBox be styled appropriately when it contains keyboard focus.
  entryBox.addEventListener(‘focus‘, function() {
    this.classList.add(‘contains-focus‘);
  }, true);
  entryBox.addEventListener(‘blur‘, function() {
    this.classList.remove(‘contains-focus‘);
  }, true);

  var entryBoxContainer =
      createElementWithClassName(‘div‘, ‘entry-box-container‘);
  node.appendChild(entryBoxContainer);
  entryBoxContainer.appendChild(entryBox);
  //yana add 161216
  /*entryBoxContainer.oncontextmenu = function(){
        return false;
  }*/
  entryBoxContainer.addEventListener(‘contextmenu‘, function(event) {

    var selectionText = window.getSelection().toString();  
      event.preventDefault();
      var e = event||window.event;
    recordUmaAction(‘HistoryPage_EntryLinkRightClick‘);
    chrome.send("addContextMenu",[self.url_, self.title_, e.clientX, e.clientY, selectionText]);
  });


  if (isSearchResult || useMonthDate) {
    // Show the day instead of the time.
    time.appendChild(document.createTextNode(this.dateShort));
  } else {
    time.appendChild(document.createTextNode(this.dateTimeOfDay));
  }
  this.domNode_ = node;
  node.visit = this;

  return node;
};