diff options
Diffstat (limited to 'chrome/browser')
-rw-r--r-- | chrome/browser/resources/new_new_tab.css | 3 | ||||
-rw-r--r-- | chrome/browser/resources/new_new_tab.html | 2 | ||||
-rw-r--r-- | chrome/browser/resources/new_new_tab.js | 76 | ||||
-rw-r--r-- | chrome/browser/resources/new_tab_theme.css | 8 |
4 files changed, 46 insertions, 43 deletions
diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css index 6cfcc3f..dc4df87 100644 --- a/chrome/browser/resources/new_new_tab.css +++ b/chrome/browser/resources/new_new_tab.css @@ -449,7 +449,8 @@ html[dir='rtl'] .item { /* Made to look like a tooltip using vista/win7 look and feel. TODO(arv): Replace with -webkit-appearance once issue 17371 is fixed */ -#window-menu { +#window-tooltip { + color: #555; pointer-events: none; border: 1px solid rgb(118,118,118); -webkit-border-radius: 3px; diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html index d0752e0..a5a5645 100644 --- a/chrome/browser/resources/new_new_tab.html +++ b/chrome/browser/resources/new_new_tab.html @@ -275,7 +275,7 @@ logEvent('log start'); </div> <!-- main --> <div> - <div class="window-menu" id="window-menu"> + <div class="window-menu" id="window-tooltip"> <span class="item" jsselect="$this" jsvalues=".style.backgroundImage:'url("chrome://favicon/' + url + '")'; diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js index 034d862..a852077 100644 --- a/chrome/browser/resources/new_new_tab.js +++ b/chrome/browser/resources/new_new_tab.js @@ -880,7 +880,7 @@ function OptionMenu(button, menu) { OptionMenu.prototype = { show: function() { - windowMenu.hide(); + windowTooltip.hide(); this.menu.style.display = 'block'; this.button.focus(); @@ -1074,14 +1074,14 @@ function maybeReopenTab(e) { } } -function maybeShowWindowMenu(e) { +function maybeShowWindowTooltip(e) { var f = function(el) { return el.tabItems !== undefined; }; var el = findAncestor(e.target, f); var relatedEl = findAncestor(e.relatedTarget, f); if (el && el != relatedEl) { - windowMenu.show(e, el, el.tabItems); + windowTooltip.handleMouseOver(e, el, el.tabItems); } } @@ -1095,50 +1095,61 @@ recentActivitiesElement.addEventListener('click', maybeReopenTab); recentActivitiesElement.addEventListener('keydown', handleIfEnterKey(maybeReopenTab)); -recentActivitiesElement.addEventListener('mouseover', maybeShowWindowMenu); -recentActivitiesElement.addEventListener('focus', maybeShowWindowMenu, true); +recentActivitiesElement.addEventListener('mouseover', maybeShowWindowTooltip); +recentActivitiesElement.addEventListener('focus', maybeShowWindowTooltip, true); /** - * This object represents a window/tooltip representing a closed window. It is + * This object represents a tooltip representing a closed window. It is * shown when hovering over a closed window item or when the item is focused. It * gets hidden when blurred or when mousing out of the menu or the item. - * @param {Element} menuEl The element to use as the menu. + * @param {Element} tooltipEl The element to use as the tooltip. * @constructor */ -function WindowMenu(menuEl) { - // TODO(arv): Rename WindowTooltip and make it behave even more like a - // tooltip. - this.menuEl = menuEl; +function WindowTooltip(tooltipEl) { + this.tooltipEl = tooltipEl; this.boundHide_ = bind(this.hide, this); this.boundHandleMouseOut_ = bind(this.handleMouseOut, this); } -WindowMenu.prototype = { - timer: 0, - show: function(e, linkEl, tabs) { - optionMenu.hide(); +WindowTooltip.trackMouseMove_ = function(e) { + WindowTooltip.clientX = e.clientX; + WindowTooltip.clientY = e.clientY; +}; +WindowTooltip.prototype = { + timer: 0, + handleMouseOver: function(e, linkEl, tabs) { + document.addEventListener('mousemove', WindowTooltip.trackMouseMove_); + this.timer = window.setTimeout(bind(this.show, this, e.type, linkEl, tabs), + 300); + }, + show: function(type, linkEl, tabs) { + document.removeEventListener('mousemove', WindowTooltip.trackMouseMove_); clearTimeout(this.timer); - processData('#window-menu', tabs); + + processData('#window-tooltip', tabs); var rect = linkEl.getBoundingClientRect(); var bodyRect = document.body.getBoundingClientRect() var rtl = document.documentElement.dir == 'rtl'; - this.menuEl.style.display = 'block'; + this.tooltipEl.style.display = 'block'; + // When focused show below, like a drop down menu. - if (e.type == 'focus') { - this.menuEl.style.left = (rtl ? - rect.left + bodyRect.left + rect.width - this.menuEl.offsetWidth : + if (type == 'focus') { + this.tooltipEl.style.left = (rtl ? + rect.left + bodyRect.left + rect.width - this.tooltipEl.offsetWidth : rect.left + bodyRect.left) + 'px'; - this.menuEl.style.top = rect.top + bodyRect.top + rect.height + 'px'; + this.tooltipEl.style.top = rect.top + bodyRect.top + rect.height + 'px'; } else { - this.menuEl.style.left = bodyRect.left + (rtl ? - e.clientX - this.menuEl.offsetWidth : - e.clientX) + 'px'; - this.menuEl.style.top = e.clientY + bodyRect.top + 'px'; + this.tooltipEl.style.left = bodyRect.left + (rtl ? + WindowTooltip.clientX - this.tooltipEl.offsetWidth : + WindowTooltip.clientX) + 'px'; + // Offset like a tooltip + this.tooltipEl.style.top = 20 + WindowTooltip.clientY + bodyRect.top + + 'px'; } - if (e.type == 'focus') { + if (type == 'focus') { linkEl.onblur = this.boundHide_; } else { // mouseover linkEl.onmouseout = this.boundHandleMouseOut_; @@ -1155,16 +1166,14 @@ WindowMenu.prototype = { this.hide(); } }, - hide: function(e) { - // Delay before hiding. - var self = this; - this.timer = setTimeout(function() { - self.menuEl.style.display = 'none'; - }, 100); + hide: function() { + window.clearTimeout(this.timer); + document.removeEventListener('mousemove', WindowTooltip.trackMouseMove_); + this.tooltipEl.style.display = 'none'; } }; -var windowMenu = new WindowMenu($('window-menu')); +var windowTooltip = new WindowTooltip($('window-tooltip')); function getCheckboxHandler(section) { return function(e) { @@ -1200,7 +1209,6 @@ document.addEventListener('DOMContentLoaded', bind(logEvent, global, 'domcontentloaded fired')); function hideAllMenus() { - windowMenu.hide(); optionMenu.hide(); } diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css index 7d1ffb8..0ad11c9 100644 --- a/chrome/browser/resources/new_tab_theme.css +++ b/chrome/browser/resources/new_tab_theme.css @@ -16,12 +16,6 @@ body { #main { background: url(chrome://theme/product_logo?$1) no-repeat 0 8px; } -:visited, -.link { - cursor: pointer; - text-decoration: underline; - color: $8; -} .thumbnail-container, .list > .thumbnail-container > .title, .list .title > div, @@ -65,4 +59,4 @@ body { } .tips-title { color: $$1; -}
\ No newline at end of file +} |