diff options
Diffstat (limited to 'chrome/browser')
6 files changed, 158 insertions, 23 deletions
diff --git a/chrome/browser/resources/bookmark_manager/css/bmm.css b/chrome/browser/resources/bookmark_manager/css/bmm.css index 7b5a2ab..29592f9 100644 --- a/chrome/browser/resources/bookmark_manager/css/bmm.css +++ b/chrome/browser/resources/bookmark_manager/css/bmm.css @@ -18,9 +18,16 @@ list { } list > * { - text-decoration: none; - padding: 0 3px; color: hsl(0, 0%, 70%); + padding: 0 3px; + padding-right: 20px; + text-decoration: none; + white-space: nowrap; +} + +html[dir=rtl] list > * { + padding-right: 3px; + padding-left: 20px; } list > * > * { @@ -45,8 +52,6 @@ list > :hover > .label { } list > * > .url { - padding: 3px; - -webkit-padding-start: 15px; display: none; } @@ -74,6 +79,40 @@ list > .folder > .url:empty:after { content: ""; } +list > * > button { + -webkit-transition: opacity .15s; + background: #fff -webkit-canvas(drop-down-arrow) no-repeat center center; + border: 1px solid hsl(214, 91%, 85%); + border-radius: 3px; + bottom: 1px; + display: none; + overflow: hidden; + padding: 0; + position: absolute; + right: 3px; + top: 1px; + width: 15px; +} + +list > [selected]:hover > button, +list > * > button[menu-shown] { + border-color: hsl(214, 91%, 65%); +} + +list > :hover > button { + display: block; +} + +list > * > button:hover, +list > * > button[menu-shown] { + display: block; +} + +html[dir=rtl] list > * > button { + right: auto; + left: 3px; +} + /* /* Edit mode */ @@ -85,6 +124,7 @@ list .url input { font-size: inherit; font-weight: inherit; margin: -2px 4px -2px -4px; + max-width: 40%; padding: 1px 3px 1px 1px; outline: none; text-decoration: none; @@ -193,16 +233,6 @@ html[os=mac] .splitter { float: left; } -html[dir=rtl] #tree-container { - left: auto; - right: 0; -} - -html[dir=rtl] #list { - left: 0; - right: 200px; -} - .header form { float: left; margin: 14px 2px; diff --git a/chrome/browser/resources/bookmark_manager/js/bmm/bookmark_list.js b/chrome/browser/resources/bookmark_manager/js/bmm/bookmark_list.js index 12f6936..410f3a8 100644 --- a/chrome/browser/resources/bookmark_manager/js/bmm/bookmark_list.js +++ b/chrome/browser/resources/bookmark_manager/js/bmm/bookmark_list.js @@ -6,12 +6,10 @@ // that handles the loading and the events from the bookmark backend. cr.define('bmm', function() { - // require cr.ui.define - // require cr.ui.limitInputWidth. - // require cr.ui.contextMenuHandler const List = cr.ui.List; const ListItem = cr.ui.ListItem; const ArrayDataModel = cr.ui.ArrayDataModel; + const ContextMenuButton = cr.ui.ContextMenuButton; /** * Basic array data model for use with bookmarks. @@ -75,6 +73,10 @@ cr.define('bmm', function() { // HACK(arv): http://crbug.com/40902 window.addEventListener('resize', cr.bind(this.redraw, this)); + + // We could add the ContextMenuButton in the BookmarkListItem but it slows + // down redraws a lot so we do this on mouseovers instead. + this.addEventListener('mouseover', cr.bind(this.handleMouseOver_, this)); }, createItem: function(bookmarkNode) { @@ -170,6 +172,24 @@ cr.define('bmm', function() { }, /** + * Handles mouseover on the list so that we can add the context menu button + * lazily. + * @private + * @param {!Event} e The mouseover event object. + */ + handleMouseOver_: function(e) { + var el = e.target; + while (el && el.parentNode != this) { + el = el.parentNode; + } + + if (el && el.parentNode == this && + !(el.lastChild instanceof ContextMenuButton)) { + el.appendChild(new ContextMenuButton); + } + }, + + /** * Handles the clicks on the list so that we can check if the user clicked * on a link or a folder. * @private @@ -381,6 +401,9 @@ cr.define('bmm', function() { this.appendChild(labelEl); this.appendChild(urlEl); + + // Initially the ContextMenuButton was added here but it slowed down + // rendering a lot so it is now added using mouseover. }, /** @@ -408,7 +431,7 @@ cr.define('bmm', function() { var isFolder = bmm.isFolder(this.bookmarkNode); var listItem = this; var labelEl = this.firstChild; - var urlEl = this.lastChild; + var urlEl = labelEl.nextSibling; var labelInput, urlInput; // Handles enter and escape which trigger reset and commit respectively. diff --git a/chrome/browser/resources/bookmark_manager/main.html b/chrome/browser/resources/bookmark_manager/main.html index 5018300..7c7f613 100644 --- a/chrome/browser/resources/bookmark_manager/main.html +++ b/chrome/browser/resources/bookmark_manager/main.html @@ -24,17 +24,18 @@ found in the LICENSE file. <script src="chrome://resources/js/cr/promise.js"></script> <script src="chrome://resources/js/cr/ui.js"></script> <script src="chrome://resources/js/cr/ui/array_data_model.js"></script> -<script src="chrome://resources/js/cr/ui/list_selection_model.js"></script> -<script src="chrome://resources/js/cr/ui/list_item.js"></script> -<script src="chrome://resources/js/cr/ui/list.js"></script> -<script src="chrome://resources/js/cr/ui/tree.js"></script> -<script src="chrome://resources/js/cr/ui/splitter.js"></script> <script src="chrome://resources/js/cr/ui/command.js"></script> <script src="chrome://resources/js/cr/ui/menu_item.js"></script> <script src="chrome://resources/js/cr/ui/menu.js"></script> <script src="chrome://resources/js/cr/ui/position_util.js"></script> <script src="chrome://resources/js/cr/ui/menu_button.js"></script> +<script src="chrome://resources/js/cr/ui/context_menu_button.js"></script> <script src="chrome://resources/js/cr/ui/context_menu_handler.js"></script> +<script src="chrome://resources/js/cr/ui/list_selection_model.js"></script> +<script src="chrome://resources/js/cr/ui/list_item.js"></script> +<script src="chrome://resources/js/cr/ui/list.js"></script> +<script src="chrome://resources/js/cr/ui/tree.js"></script> +<script src="chrome://resources/js/cr/ui/splitter.js"></script> <script src="chrome://resources/js/util.js"></script> <script src="chrome://resources/js/local_strings.js"></script> diff --git a/chrome/browser/resources/shared/js/cr/ui/context_menu_button.js b/chrome/browser/resources/shared/js/cr/ui/context_menu_button.js new file mode 100644 index 0000000..b9a7132 --- /dev/null +++ b/chrome/browser/resources/shared/js/cr/ui/context_menu_button.js @@ -0,0 +1,77 @@ +// Copyright (c) 2010 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. + +/** + * @fileoverview This implements a special button that is useful for showing a + * context menu. + */ + +cr.define('cr.ui', function() { + const MenuButton = cr.ui.MenuButton; + + /** + * Helper function for ContextMenuButton to find the first ancestor of the + * button that has a context menu. + * @param {!MenuButton} el The button to start the search from. + * @return {HTMLElement} The found element or null if not found. + */ + function getContextMenuTarget(el) { + do { + el = el.parentNode; + } while (el && !('contextMenu' in el)); + return el; + } + + /** + * Creates a new menu button which is used to show the context menu for an + * ancestor that has a {@code contextMenu} property. + * @param {Object=} opt_propertyBag Optional properties. + * @constructor + * @extends {MenuButton} + */ + var ContextMenuButton = cr.ui.define('button'); + + ContextMenuButton.prototype = { + __proto__: MenuButton.prototype, + + /** + * Override to return the contextMenu for the ancestor. + * @override + * @type {cr.ui.Menu} + */ + get menu() { + var target = getContextMenuTarget(this); + return target && target.contextMenu; + }, + + /** @inheritDoc */ + decorate: function() { + this.tabIndex = -1; + this.addEventListener('mouseup', this); + MenuButton.prototype.decorate.call(this); + }, + + /** @inheritDoc */ + handleEvent: function(e) { + switch (e.type) { + case 'mousedown': + // Menu buttons prevent focus changes. + var target = getContextMenuTarget(this); + if (target) + target.focus(); + break; + case 'mouseup': + // Stop mouseup to prevent selection changes. + e.stopPropagation(); + break; + } + MenuButton.prototype.handleEvent.call(this, e); + } + }; + + // Export + return { + ContextMenuButton: ContextMenuButton + }; +}); diff --git a/chrome/browser/resources/shared/js/cr/ui/menu_button.js b/chrome/browser/resources/shared/js/cr/ui/menu_button.js index b44ed6c..def7309 100644 --- a/chrome/browser/resources/shared/js/cr/ui/menu_button.js +++ b/chrome/browser/resources/shared/js/cr/ui/menu_button.js @@ -98,6 +98,7 @@ cr.define('cr.ui', function() { */ showMenu: function() { this.menu.style.display = 'block'; + this.setAttribute('menu-shown', ''); // when the menu is shown we steal all keyboard events. var doc = this.ownerDocument; @@ -114,6 +115,7 @@ cr.define('cr.ui', function() { * Hides the menu. */ hideMenu: function() { + this.removeAttribute('menu-shown'); this.menu.style.display = 'none'; var doc = this.ownerDocument; var win = doc.defaultView; diff --git a/chrome/browser/resources/shared_resources.grd b/chrome/browser/resources/shared_resources.grd index 371aad0..322b1c2 100644 --- a/chrome/browser/resources/shared_resources.grd +++ b/chrome/browser/resources/shared_resources.grd @@ -53,6 +53,8 @@ without changes to the corresponding grd file. paaaae --> file="shared/js/cr/ui/array_data_model.js" type="BINDATA" /> <include name="IDR_SHARED_JS_CR_UI_COMMAND" file="shared/js/cr/ui/command.js" type="BINDATA" /> + <include name="IDR_SHARED_JS_CR_UI_CONTEXT_MENU_BUTTON" + file="shared/js/cr/ui/context_menu_button.js" type="BINDATA" /> <include name="IDR_SHARED_JS_CR_UI_CONTEXT_MENU_HANDLER" file="shared/js/cr/ui/context_menu_handler.js" type="BINDATA" /> <include name="IDR_SHARED_JS_CR_UI_LIST_ITEM" |