From 761c5697aa3a33565a53f5a9656069054df39f12 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 19 Apr 2016 06:18:20 +0100 Subject: Place help dialog in darkend frame. This mimics the look of Google Inbox or Github. The background colour is from Google Inbox, Github uses a slightly lighter colour. --- content_scripts/vimium.css | 32 +++++++++++++------------------- 1 file changed, 13 insertions(+), 19 deletions(-) diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index f902363c..522b9b1c 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -138,25 +138,22 @@ div.vimiumHighlightedFrame { /* Help Dialog CSS */ iframe.vimiumHelpDialogFrame { - background-color: transparent; + background-color: rgba(10,10,10,0.6); padding: 0px; - overflow: hidden; - - display: block; - position: fixed; + top: 0px; + left: 0px; width: 100%; min-width: 400px; height: 100%; - top: 0px; - left: 0px; + display: block; + position: fixed; border: none; - - /* One less than hint markers. */ - z-index: 2147483645; + z-index: 2147483645; /* One less than hint markers. */ } div#vimiumHelpDialog { - border:3px solid red; + border:3px solid; + -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px; opacity:0.92; background-color:#eee; position:fixed; @@ -164,14 +161,11 @@ div#vimiumHelpDialog { border-radius:6px; padding:8px 12px; top:50px; - left:50%; - width:640px; - max-height: calc(100% - 100px - 16px); /* 100% - 2*top - 2*padding for top/bottom */ - /* This needs to be 1/2 width to horizontally center the help dialog */ - margin-left:-320px; - -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px; - overflow-x: auto; - overflow-y: auto; + left: 50%; + max-height: calc(100% - 100px - 12px); + width: calc(840px + 24px + 4px + 12px); + margin-left:calc(0px - 420px - 12px - 2px - 6px); /* Minus half of the width, above. */ + overflow: auto; } div#vimiumHelpDialog a { color:blue; } -- cgit v1.2.3 From cfad0ded611149b2757baa19fbac587a7d4f210d Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 19 Apr 2016 06:57:45 +0100 Subject: Help dialog: increase size and make white background. --- background_scripts/main.coffee | 2 +- content_scripts/vimium.css | 17 +++++++++++++---- pages/help_dialog.html | 3 ++- 3 files changed, 16 insertions(+), 6 deletions(-) diff --git a/background_scripts/main.coffee b/background_scripts/main.coffee index 3e1cc0a3..272146cb 100644 --- a/background_scripts/main.coffee +++ b/background_scripts/main.coffee @@ -123,7 +123,7 @@ helpDialogHtmlForCommand = (html, isAdvanced, bindings, description, showCommand html.push "" if description html.push "", Utils.escapeHtml(bindings), "" - html.push "#{if description and bindings then ':' else ''}", description + html.push "#{if description and bindings then ':' else ''}", description html.push("(#{command})") if showCommandNames else html.push "", Utils.escapeHtml(bindings) diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 522b9b1c..ac683798 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -154,8 +154,8 @@ iframe.vimiumHelpDialogFrame { div#vimiumHelpDialog { border:3px solid; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px; - opacity:0.92; - background-color:#eee; + opacity:1.0; + background-color:white; position:fixed; border:2px solid #b3b3b3; border-radius:6px; @@ -194,6 +194,9 @@ div.vimiumColumn table, div.vimiumColumn td, div.vimiumColumn tr { padding:0; ma div.vimiumColumn table { width:100%; table-layout:auto; } div.vimiumColumn td { vertical-align:top; padding:1px; } div#vimiumHelpDialog div.vimiumColumn tr > td:first-of-type { + /* This is the "key" column, e.g. "j", "gg". */ + font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; + font-size:14px; text-align:right; font-weight:bold; color:#2f508e; @@ -204,13 +207,19 @@ div#vimiumHelpDialog div.vimiumColumn tr > td:nth-of-type(3) { width:100%; } div#vimiumHelpDialog div.vimiumDivider { display: block; height:1px; - width:92%; + width:100%; margin:10px auto; background-color:#9a9a9a; } div#vimiumHelpDialog td.vimiumHelpSectionTitle { - font-weight:bold; padding-top:3px; + font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; + font-size:16px; + font-weight:bold; +} +div#vimiumHelpDialog td.vimiumHelpDescription { + font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; + font-size:14px; } div#vimiumHelpDialog div.commandName { font-family:"courier new"; } /* Advanced commands are hidden by default until you show them. */ diff --git a/pages/help_dialog.html b/pages/help_dialog.html index 3bfa3e5a..3141b1ee 100644 --- a/pages/help_dialog.html +++ b/pages/help_dialog.html @@ -15,11 +15,12 @@ -
+
Options Wiki ×
Vimium
+
-- cgit v1.2.3 From 3adae8c9a683955641fe1417c977a3a06356107b Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 19 Apr 2016 07:22:17 +0100 Subject: Help dialog: put keys in greyed-out box. --- background_scripts/main.coffee | 11 ++++++----- content_scripts/vimium.css | 32 ++++++++++++++++++++++++-------- pages/help_dialog.html | 22 +++++++++++----------- 3 files changed, 41 insertions(+), 24 deletions(-) diff --git a/background_scripts/main.coffee b/background_scripts/main.coffee index 272146cb..9689dd79 100644 --- a/background_scripts/main.coffee +++ b/background_scripts/main.coffee @@ -106,11 +106,12 @@ helpDialogHtmlForCommandGroup = (group, commandsToKey, availableCommands, showUnboundCommands, showCommandNames) -> html = [] for command in Commands.commandGroups[group] - bindings = (commandsToKey[command] || [""]).join(", ") + keys = commandsToKey[command] || [] + bindings = ("#{Utils.escapeHtml key}" for key in keys).join ", " if (showUnboundCommands || commandsToKey[command]) isAdvanced = Commands.advancedCommands.indexOf(command) >= 0 description = availableCommands[command].description - if bindings.length < 12 + if keys.join(", ").length < 12 helpDialogHtmlForCommand html, isAdvanced, bindings, description, showCommandNames, command else # If the length of the bindings is too long, then we display the bindings on a separate row from the @@ -122,11 +123,11 @@ helpDialogHtmlForCommandGroup = (group, commandsToKey, availableCommands, helpDialogHtmlForCommand = (html, isAdvanced, bindings, description, showCommandNames, command) -> html.push "" if description - html.push "" - html.push "" + html.push "") # Cache "content_scripts/vimium.css" in chrome.storage.local for UI components. diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index ac683798..86411d0a 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -168,7 +168,6 @@ div#vimiumHelpDialog { overflow: auto; } -div#vimiumHelpDialog a { color:blue; } div#vimiumTitle, div#vimiumTitle span, div#vimiumTitle * { font-size:20px; } #vimiumTitle { display: block; @@ -198,10 +197,20 @@ div#vimiumHelpDialog div.vimiumColumn tr > td:first-of-type { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; text-align:right; - font-weight:bold; - color:#2f508e; + /* font-weight:bold; */ + /* color:#2f508e; */ white-space:nowrap; } +span.vimiumHelpDialogKey { + background-color: rgb(243,243,243); + color: rgb(33,33,33); + margin: 2px; + padding-top: 1px; + padding-bottom: 1px; + padding-left: 4px; + padding-right: 4px; + border-radius: 4px; +} /* Make the description column as wide as it can be. */ div#vimiumHelpDialog div.vimiumColumn tr > td:nth-of-type(3) { width:100%; } div#vimiumHelpDialog div.vimiumDivider { @@ -228,8 +237,8 @@ div#vimiumHelpDialog.showAdvanced tr.advanced { display: table-row; } div#vimiumHelpDialog div.advanced td:nth-of-type(3) { color: #555; } div#vimiumHelpDialog a.closeButton { position:absolute; - right:7px; - top:5px; + right:4px; + top:2px; font-family:"courier new"; font-weight:bold; color:#555; @@ -244,15 +253,16 @@ div#vimiumHelpDialog a { div#vimiumHelpDialog .wikiPage, div#vimiumHelpDialog .optionsPage { position: absolute; display: block; - font-size: 11px; + font-size: 14px; line-height: 130%; - top: 6px; + color:#555; + top: 11px; } div#vimiumHelpDialog .optionsPage { right: 40px; } div#vimiumHelpDialog .wikiPage { - right: 83px; + right: 100px; } div#vimiumHelpDialog a.closeButton:hover { color:black; @@ -267,6 +277,12 @@ div#vimiumHelpDialogFooter .toggleAdvancedCommands { position: absolute; right: 2px; top: -34px; + font-size: 14px; + color:#555; +} + +a:link.vimiumHelDialogLink, a:visited.vimiumHelDialogLink, a:hover.vimiumHelDialogLink, a:active.vimiumHelDialogLink{ + color:#555; } /* Vimium HUD CSS */ diff --git a/pages/help_dialog.html b/pages/help_dialog.html index 3141b1ee..389f09f2 100644 --- a/pages/help_dialog.html +++ b/pages/help_dialog.html @@ -60,17 +60,17 @@
Show advanced commands - -
- Enjoying Vimium? - Leave us - feedback.
- Found a bug? Report it here. -
-
- Version
- What's new? +
+ Enjoying Vimium? + Leave us + feedback.
+ Found a bug? Report it here. +
+
+ Version
+ What's new? +
-- cgit v1.2.3 From 1115f2719c3e647ca1c1764c1b8a0140211bf3fa Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 19 Apr 2016 09:23:57 +0100 Subject: Help dialog; set maximum width. --- content_scripts/vimium.css | 1 + 1 file changed, 1 insertion(+) diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 86411d0a..18908692 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -163,6 +163,7 @@ div#vimiumHelpDialog { top:50px; left: 50%; max-height: calc(100% - 100px - 12px); + max-width: calc(100% - 100px + 12px); width: calc(840px + 24px + 4px + 12px); margin-left:calc(0px - 420px - 12px - 2px - 6px); /* Minus half of the width, above. */ overflow: auto; -- cgit v1.2.3 From 4a670aaa3d121834685a672acc904f9824721824 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 19 Apr 2016 13:07:43 +0100 Subject: Help dialog; better formatting of command names. This needs more work. --- background_scripts/main.coffee | 5 +++-- content_scripts/vimium.css | 5 ++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/background_scripts/main.coffee b/background_scripts/main.coffee index 9689dd79..23b7ab48 100644 --- a/background_scripts/main.coffee +++ b/background_scripts/main.coffee @@ -124,8 +124,9 @@ helpDialogHtmlForCommand = (html, isAdvanced, bindings, description, showCommand html.push "" if description html.push "" - html.push "") diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 18908692..6037c9c2 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -231,7 +231,10 @@ div#vimiumHelpDialog td.vimiumHelpDescription { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; } -div#vimiumHelpDialog div.commandName { font-family:"courier new"; } +div#vimiumHelpDialog span.commandName { + font-family:"courier new"; + color: #555; +} /* Advanced commands are hidden by default until you show them. */ div#vimiumHelpDialog tr.advanced { display: none; } div#vimiumHelpDialog.showAdvanced tr.advanced { display: table-row; } -- cgit v1.2.3 From 740df9a23fa9a1e5b812584ce0702b813b226623 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 19 Apr 2016 13:32:39 +0100 Subject: Help dialog; do not offer hints outside of the help dialog. --- background_scripts/main.coffee | 4 ++-- content_scripts/link_hints.coffee | 14 +++++++++++--- pages/help_dialog.coffee | 3 ++- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/background_scripts/main.coffee b/background_scripts/main.coffee index 23b7ab48..cb978db3 100644 --- a/background_scripts/main.coffee +++ b/background_scripts/main.coffee @@ -366,10 +366,10 @@ HintCoordinator = for own frameId, port of @tabState[tabId].ports @postMessage tabId, parseInt(frameId), messageType, port, request - prepareToActivateMode: (tabId, originatingFrameId, {modeIndex}) -> + prepareToActivateMode: (tabId, originatingFrameId, {modeIndex, isVimiumHelpDialog}) -> @tabState[tabId] = {frameIds: frameIdsForTab[tabId][..], hintDescriptors: {}, originatingFrameId, modeIndex} @tabState[tabId].ports = extend {}, portsForTab[tabId] - @sendMessage "getHintDescriptors", tabId, {modeIndex} + @sendMessage "getHintDescriptors", tabId, {modeIndex, isVimiumHelpDialog} # Receive hint descriptors from all frames and activate link-hints mode when we have them all. postHintDescriptors: (tabId, frameId, {hintDescriptors}) -> diff --git a/content_scripts/link_hints.coffee b/content_scripts/link_hints.coffee index 702ff69d..6e1ebe80 100644 --- a/content_scripts/link_hints.coffee +++ b/content_scripts/link_hints.coffee @@ -70,18 +70,26 @@ HintCoordinator = # place, then Vimium blocks. As a temporary measure, we install a timer to remove it. Utils.setTimeout 1000, -> suppressKeyboardEvents.exit() if suppressKeyboardEvents?.modeIsActive @onExit = [onExit] - @sendMessage "prepareToActivateMode", modeIndex: availableModes.indexOf mode + @sendMessage "prepareToActivateMode", + modeIndex: availableModes.indexOf(mode), isVimiumHelpDialog: window.isVimiumHelpDialog # Hint descriptors are global. They include all of the information necessary for each frame to determine # whether and when a hint from *any* frame is selected. They include the following properties: # frameId: the frame id of this hint's local frame # localIndex: the index in @localHints for the full hint descriptor for this hint # linkText: the link's text for filtered hints (this is null for alphabet hints) - getHintDescriptors: ({modeIndex}) -> + getHintDescriptors: ({modeIndex, isVimiumHelpDialog}) -> # Ensure that the document is ready and that the settings are loaded. DomUtils.documentReady => Settings.onLoaded => requireHref = availableModes[modeIndex] in [COPY_LINK_URL, OPEN_INCOGNITO] - @localHints = LocalHints.getLocalHints requireHref + # If link hints is launched within the help dialog, then we only offer hints from that frame. This + # improves the usability of the help dialog on the options page (particularly for selecting command + # names). + @localHints = + if isVimiumHelpDialog and not window.isVimiumHelpDialog + [] + else + LocalHints.getLocalHints requireHref @localHintDescriptors = @localHints.map ({linkText}, localIndex) -> {frameId, localIndex, linkText} @sendMessage "postHintDescriptors", hintDescriptors: @localHintDescriptors diff --git a/pages/help_dialog.coffee b/pages/help_dialog.coffee index 401c3222..ebcf8486 100644 --- a/pages/help_dialog.coffee +++ b/pages/help_dialog.coffee @@ -38,7 +38,7 @@ HelpDialog = do (element) -> element.setAttribute "role", "link" element.addEventListener "click", -> - commandName = element.textContent.replace("(","").replace ")", "" + commandName = element.textContent chrome.runtime.sendMessage handler: "copyToClipboard", data: commandName HUD.showForDuration("Yanked #{commandName}.", 2000) @@ -82,3 +82,4 @@ UIComponentServer.registerHandler (event) -> root = exports ? window root.HelpDialog = HelpDialog +root.isVimiumHelpDialog = true -- cgit v1.2.3 From aeca4facc27e694d79228637994f2a5608606ab3 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Fri, 22 Apr 2016 14:59:03 +0100 Subject: Fix x-axis position. This gest the centring calculation correct. Also, remove the shadow; it's not visible. --- content_scripts/vimium.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 6037c9c2..1c4f1e37 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -143,7 +143,6 @@ iframe.vimiumHelpDialogFrame { top: 0px; left: 0px; width: 100%; - min-width: 400px; height: 100%; display: block; position: fixed; @@ -153,7 +152,6 @@ iframe.vimiumHelpDialogFrame { div#vimiumHelpDialog { border:3px solid; - -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px; opacity:1.0; background-color:white; position:fixed; @@ -162,10 +160,10 @@ div#vimiumHelpDialog { padding:8px 12px; top:50px; left: 50%; - max-height: calc(100% - 100px - 12px); - max-width: calc(100% - 100px + 12px); - width: calc(840px + 24px + 4px + 12px); - margin-left:calc(0px - 420px - 12px - 2px - 6px); /* Minus half of the width, above. */ + width: 840px; + height: calc(100% - 100px - 16px); /* 100% -top - 2*padding */ + max-width: calc(100% - 100px - 12px); + margin-left:calc(-420px - 12px); /* -1/2*width - 1*padding */ overflow: auto; } -- cgit v1.2.3 From 4c707140985ae03e3c523f2e6e4b6cb4c8465236 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Fri, 22 Apr 2016 16:03:26 +0100 Subject: Better help-dialog formatting. Use margins to centre the help dialog. This works better on narrow windows, and seems to produce a balanced dialog in a variety of cases. --- content_scripts/vimium.css | 45 ++++++++++++++++++--------------------------- pages/help_dialog.coffee | 2 +- pages/help_dialog.html | 18 ++++++++++++++---- 3 files changed, 33 insertions(+), 32 deletions(-) diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 1c4f1e37..cddfbc97 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -151,26 +151,32 @@ iframe.vimiumHelpDialogFrame { } div#vimiumHelpDialog { - border:3px solid; opacity:1.0; background-color:white; - position:fixed; border:2px solid #b3b3b3; border-radius:6px; padding:8px 12px; - top:50px; - left: 50%; width: 840px; - height: calc(100% - 100px - 16px); /* 100% -top - 2*padding */ - max-width: calc(100% - 100px - 12px); - margin-left:calc(-420px - 12px); /* -1/2*width - 1*padding */ - overflow: auto; + max-width: calc(100% - 100px); + max-height: calc(100% - 100px); + margin: 50px auto; + overflow-y: auto; } -div#vimiumTitle, div#vimiumTitle span, div#vimiumTitle * { font-size:20px; } +span#vimiumTitle, span#vimiumTitle span, span#vimiumTitle * { font-size:20px; } #vimiumTitle { display: block; line-height: 130%; + white-space: nowrap; +} +td.vimiumHelpDialogTopButtons { + width: 100%; + text-align: right; +} +#helpDialogOptionsPage, #helpDialogWikiPage { + font-size: 14px; + padding-left: 5px; + padding-right: 5px; } div.vimiumColumn { width:50%; @@ -238,34 +244,19 @@ div#vimiumHelpDialog tr.advanced { display: none; } div#vimiumHelpDialog.showAdvanced tr.advanced { display: table-row; } div#vimiumHelpDialog div.advanced td:nth-of-type(3) { color: #555; } div#vimiumHelpDialog a.closeButton { - position:absolute; - right:4px; - top:2px; font-family:"courier new"; font-weight:bold; color:#555; text-decoration:none; - padding-left:10px; font-size:20px; + position: relative; + top: -12px; + right: -10px; } div#vimiumHelpDialog a { text-decoration: underline; } -div#vimiumHelpDialog .wikiPage, div#vimiumHelpDialog .optionsPage { - position: absolute; - display: block; - font-size: 14px; - line-height: 130%; - color:#555; - top: 11px; -} -div#vimiumHelpDialog .optionsPage { - right: 40px; -} -div#vimiumHelpDialog .wikiPage { - right: 100px; -} div#vimiumHelpDialog a.closeButton:hover { color:black; -webkit-user-select:none; diff --git a/pages/help_dialog.coffee b/pages/help_dialog.coffee index ebcf8486..6eb13660 100644 --- a/pages/help_dialog.coffee +++ b/pages/help_dialog.coffee @@ -15,7 +15,7 @@ HelpDialog = clickEvent.preventDefault() @hide() false) - @dialogElement.getElementsByClassName("optionsPage")[0].addEventListener("click", (clickEvent) -> + document.getElementById("helpDialogOptionsPage").addEventListener("click", (clickEvent) -> clickEvent.preventDefault() chrome.runtime.sendMessage({handler: "openOptionsPageInNewTab"}) false) diff --git a/pages/help_dialog.html b/pages/help_dialog.html index 389f09f2..e95dd403 100644 --- a/pages/help_dialog.html +++ b/pages/help_dialog.html @@ -16,10 +16,20 @@
- Options - Wiki - × -
Vimium
+
+
", Utils.escapeHtml(bindings), "#{if description and bindings then ':' else ''}", description + html.push "#{bindings}", description html.push("(#{command})") if showCommandNames else - html.push "", Utils.escapeHtml(bindings) + html.push "", bindings html.push("
#{bindings}", description - html.push("(#{command})") if showCommandNames + html.push "", + "#{description}#{if showCommandNames then ":" else ""}" + html.push("#{command}") if showCommandNames else html.push "", bindings html.push("
+ + + + +
+ Vimium + + Options + Wiki + × +
+
-- cgit v1.2.3 From a7446f09538e0b0314611c9d847016a85f735644 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Fri, 22 Apr 2016 16:55:02 +0100 Subject: Nicer styling of command names in help dialog. The commands names (in the help dialog) look nicer in italics. They also format better that way. --- background_scripts/main.coffee | 5 ++--- content_scripts/vimium.css | 5 +++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/background_scripts/main.coffee b/background_scripts/main.coffee index cb978db3..653b61e7 100644 --- a/background_scripts/main.coffee +++ b/background_scripts/main.coffee @@ -124,9 +124,8 @@ helpDialogHtmlForCommand = (html, isAdvanced, bindings, description, showCommand html.push "" if description html.push "" - html.push "") diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index cddfbc97..f4029509 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -236,8 +236,9 @@ div#vimiumHelpDialog td.vimiumHelpDescription { font-size:14px; } div#vimiumHelpDialog span.commandName { - font-family:"courier new"; - color: #555; + /* font-family:"courier new"; */ + /* color: #555; */ + font-style: italic; } /* Advanced commands are hidden by default until you show them. */ div#vimiumHelpDialog tr.advanced { display: none; } -- cgit v1.2.3 From 546d8b91c2e0991c410a42b2098ff1d478f24c73 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Sat, 23 Apr 2016 06:28:01 +0100 Subject: Fix help dialog HTML. - Style the links at the top the same as those at the bottom (re. colour). - Fix HTML indentation. --- content_scripts/vimium.css | 1 + pages/help_dialog.html | 21 ++++++++++----------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index f4029509..1b63c9da 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -177,6 +177,7 @@ td.vimiumHelpDialogTopButtons { font-size: 14px; padding-left: 5px; padding-right: 5px; + color:#555; } div.vimiumColumn { width:50%; diff --git a/pages/help_dialog.html b/pages/help_dialog.html index e95dd403..e16b0139 100644 --- a/pages/help_dialog.html +++ b/pages/help_dialog.html @@ -70,17 +70,16 @@
Show advanced commands -
- Enjoying Vimium? - Leave us - feedback.
- Found a bug? Report it here. -
-
- Version
- What's new? -
+
+ Enjoying Vimium? + Leave us + feedback.
+ Found a bug? Report it here. +
+
+ Version
+ What's new?
-- cgit v1.2.3 From 98ea279485fc456bbe4349559f9c08a24e2c4214 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Sat, 23 Apr 2016 06:53:55 +0100 Subject: Show tip re. clicking command names. It's pretty undiscoverable that you can click command names to yank them. So, this adds a tip to the bottom of the help dialog. Also, change the cursor to a pointer when hovering over command names. --- background_scripts/main.coffee | 1 + content_scripts/vimium.css | 20 +++++++++++++------- pages/help_dialog.coffee | 4 ++-- pages/help_dialog.html | 14 +++++++++++++- 4 files changed, 29 insertions(+), 10 deletions(-) diff --git a/background_scripts/main.coffee b/background_scripts/main.coffee index 653b61e7..5d1ab864 100644 --- a/background_scripts/main.coffee +++ b/background_scripts/main.coffee @@ -91,6 +91,7 @@ getHelpDialogHtml = ({showUnboundCommands, showCommandNames, customTitle}) -> replacementStrings = version: currentVersion title: customTitle || "Help" + tip: if showCommandNames then "Tip: click command names to yank them to the clipboard." else "" for own group of Commands.commandGroups replacementStrings[group] = diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 1b63c9da..a1d88a18 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -237,9 +237,9 @@ div#vimiumHelpDialog td.vimiumHelpDescription { font-size:14px; } div#vimiumHelpDialog span.commandName { - /* font-family:"courier new"; */ - /* color: #555; */ + color: #555; font-style: italic; + cursor: pointer; } /* Advanced commands are hidden by default until you show them. */ div#vimiumHelpDialog tr.advanced { display: none; } @@ -267,13 +267,19 @@ div#vimiumHelpDialogFooter { display: block; position: relative; } +td.helpDialogBottomRight { + width: 100%; + text-align: right; +} div#vimiumHelpDialogFooter * { font-size:10px; } -div#vimiumHelpDialogFooter .toggleAdvancedCommands { - position: absolute; - right: 2px; - top: -34px; +a#toggleAdvancedCommands, span#help-dialog-tip { + position: relative; + top: 19px; + color: #555; + white-space: nowrap; +} +td.helpDialogBottomLeft, td.helpDialogBottomRight { font-size: 14px; - color:#555; } a:link.vimiumHelDialogLink, a:visited.vimiumHelDialogLink, a:hover.vimiumHelDialogLink, a:active.vimiumHelDialogLink{ diff --git a/pages/help_dialog.coffee b/pages/help_dialog.coffee index 6eb13660..28aafb4a 100644 --- a/pages/help_dialog.coffee +++ b/pages/help_dialog.coffee @@ -19,7 +19,7 @@ HelpDialog = clickEvent.preventDefault() chrome.runtime.sendMessage({handler: "openOptionsPageInNewTab"}) false) - @dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].addEventListener("click", + document.getElementById("toggleAdvancedCommands").addEventListener("click", HelpDialog.toggleAdvancedCommands, false) document.documentElement.addEventListener "click", (event) => @@ -58,7 +58,7 @@ HelpDialog = Settings.set("helpDialog_showAdvancedCommands", !showAdvanced) showAdvancedCommands: (visible) -> - HelpDialog.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].innerHTML = + document.getElementById("toggleAdvancedCommands").innerHTML = if visible then "Hide advanced commands" else "Show advanced commands" # Add/remove the showAdvanced class to show/hide advanced commands. diff --git a/pages/help_dialog.html b/pages/help_dialog.html index e16b0139..a0ba6de5 100644 --- a/pages/help_dialog.html +++ b/pages/help_dialog.html @@ -65,11 +65,23 @@
#{bindings}", - "#{description}#{if showCommandNames then ":" else ""}" - html.push("#{command}") if showCommandNames + html.push "", description + html.push("(#{command})") if showCommandNames else html.push "", bindings html.push("
+
+ + + + + +
+ + + Show advanced commands +
+
+
- Show advanced commands
Enjoying Vimium? -
-
- - - - - -
- Vimium - - Options - Wiki - × -
-
-
-
- - - - - - -
Navigating the page
-
-
- - - - - - - - - - - - - - - - - - - - - -
Using the vomnibar
Using find
Navigating history
Manipulating tabs
Miscellaneous
-
+
+
+
+ + + + + +
+ Vimium + + Options + Wiki + × +
+
+
+
+ + + + + + +
Navigating the page
+
+
+ + + + + + + + + + + + + + + + + + + + + +
Using the vomnibar
Using find
Navigating history
Manipulating tabs
Miscellaneous
+
-
- - - - - -
- - - Show advanced commands -
-
+
+ + + + + +
+ + + Show advanced commands +
+
-
-
+
+
-
-
- Enjoying Vimium? - Leave us - feedback.
- Found a bug? Report it here. -
-
- Version
- What's new? +
+
+ Enjoying Vimium? + Leave us + feedback.
+ Found a bug? Report it here. +
+
+ Version
+ What's new? +
-- cgit v1.2.3 From 7e7c8e6cf9e1739fcbf8aa35ebe4331aeaaed6d8 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Sat, 23 Apr 2016 09:08:12 +0100 Subject: Tweak help-dialog font size. Make the font size (and color) match those used in the footer. --- content_scripts/vimium.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 09548268..5a4087ba 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -273,18 +273,19 @@ div#vimiumHelpDialogFooter { position: relative; } td.helpDialogBottomRight { - width: 100%; - text-align: right; + width:100%; + float:right; + text-align: right; } div#vimiumHelpDialogFooter * { font-size:10px; } a#toggleAdvancedCommands, span#help-dialog-tip { position: relative; top: 19px; - color: #555; white-space: nowrap; + font-size: 10px; } -td.helpDialogBottomLeft, td.helpDialogBottomRight { - font-size: 14px; +a#toggleAdvancedCommands { + color: #555; } a:link.vimiumHelDialogLink, a:visited.vimiumHelDialogLink, a:hover.vimiumHelDialogLink, a:active.vimiumHelDialogLink{ -- cgit v1.2.3 From 306361f3f1cf3ec4f49d7c23f4ce4b2987acb8b4 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Sat, 23 Apr 2016 15:49:47 +0100 Subject: Help dialog: CSS tweaks. --- content_scripts/vimium.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 5a4087ba..8c8892ac 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -208,8 +208,6 @@ div#vimiumHelpDialog div.vimiumColumn tr > td:first-of-type { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; text-align:right; - /* font-weight:bold; */ - /* color:#2f508e; */ white-space:nowrap; } span.vimiumHelpDialogKey { @@ -245,6 +243,7 @@ div#vimiumHelpDialog span.commandName { color: #555; font-style: italic; cursor: pointer; + font-size: 12px; } /* Advanced commands are hidden by default until you show them. */ div#vimiumHelpDialog tr.advanced { display: none; } @@ -271,12 +270,16 @@ div#vimiumHelpDialog a.closeButton:hover { div#vimiumHelpDialogFooter { display: block; position: relative; + margin-bottom: 37px; } td.helpDialogBottomRight { width:100%; float:right; text-align: right; } +td.helpDialogBottomRight, td.helpDialogBottomLeft { + padding: 0px; +} div#vimiumHelpDialogFooter * { font-size:10px; } a#toggleAdvancedCommands, span#help-dialog-tip { position: relative; -- cgit v1.2.3 From 5866a01b9570f93c79340dac796226ac88211d3c Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Mon, 25 Apr 2016 09:51:11 +0100 Subject: Help dialog revert styling of links. --- content_scripts/vimium.css | 10 +++------- pages/help_dialog.html | 6 +++--- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 8c8892ac..7f7d2be4 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -182,7 +182,6 @@ td.vimiumHelpDialogTopButtons { font-size: 14px; padding-left: 5px; padding-right: 5px; - color:#555; } div.vimiumColumn { width:50%; @@ -287,12 +286,9 @@ a#toggleAdvancedCommands, span#help-dialog-tip { white-space: nowrap; font-size: 10px; } -a#toggleAdvancedCommands { - color: #555; -} - -a:link.vimiumHelDialogLink, a:visited.vimiumHelDialogLink, a:hover.vimiumHelDialogLink, a:active.vimiumHelDialogLink{ - color:#555; +a:link.vimiumHelDialogLink, a:visited.vimiumHelDialogLink, a:hover.vimiumHelDialogLink, a:active.vimiumHelDialogLink { + color:blue; + text-decoration: underline; } /* Vimium HUD CSS */ diff --git a/pages/help_dialog.html b/pages/help_dialog.html index f8152d60..8ac000fb 100644 --- a/pages/help_dialog.html +++ b/pages/help_dialog.html @@ -24,8 +24,8 @@ Vimium - Options - Wiki + Options + Wiki × @@ -72,7 +72,7 @@ - + Show advanced commands -- cgit v1.2.3 From 6066364d4c331b89cf2b4f6d2a5cf11a3c2bbe3f Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Mon, 25 Apr 2016 10:04:27 +0100 Subject: Help dialog; reposition close button. --- content_scripts/vimium.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 7f7d2be4..79155cf6 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -253,10 +253,10 @@ div#vimiumHelpDialog a.closeButton { font-weight:bold; color:#555; text-decoration:none; - font-size:20px; + font-size:24px; position: relative; - top: -12px; - right: -10px; + top: 3px; + padding-left: 5px; } div#vimiumHelpDialog a { text-decoration: underline; -- cgit v1.2.3 From 91bed52461c87b0c5d08a0beb8a7b80fc4b4ddf6 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Mon, 25 Apr 2016 10:20:17 +0100 Subject: Help dialog; tweak key styling. --- content_scripts/vimium.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 79155cf6..ca02e43f 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -212,12 +212,15 @@ div#vimiumHelpDialog div.vimiumColumn tr > td:first-of-type { span.vimiumHelpDialogKey { background-color: rgb(243,243,243); color: rgb(33,33,33); - margin: 2px; - padding-top: 1px; - padding-bottom: 1px; + margin-left: 2px; + padding-top: 0px; + padding-bottom: 2px; padding-left: 4px; padding-right: 4px; - border-radius: 4px; + border-radius: 3px; + border: solid 1px #ccc; + border-bottom-color: #bbb; + box-shadow: inset 0 -1px 0 #bbb; } /* Make the description column as wide as it can be. */ div#vimiumHelpDialog div.vimiumColumn tr > td:nth-of-type(3) { width:100%; } -- cgit v1.2.3 From 9b7e9b6cc6fc5928adb202b1d8a63e78861200ca Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Mon, 25 Apr 2016 10:23:44 +0100 Subject: Help dialog; fix show-advanced-command button position. --- background_scripts/main.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/background_scripts/main.coffee b/background_scripts/main.coffee index 5d1ab864..dca9df7e 100644 --- a/background_scripts/main.coffee +++ b/background_scripts/main.coffee @@ -91,7 +91,7 @@ getHelpDialogHtml = ({showUnboundCommands, showCommandNames, customTitle}) -> replacementStrings = version: currentVersion title: customTitle || "Help" - tip: if showCommandNames then "Tip: click command names to yank them to the clipboard." else "" + tip: if showCommandNames then "Tip: click command names to yank them to the clipboard." else " " for own group of Commands.commandGroups replacementStrings[group] = -- cgit v1.2.3 From 314ba252add73387ec3d95a29aff6a51b4da908a Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Mon, 25 Apr 2016 10:25:20 +0100 Subject: Help dialog; revert font colour for command names. If we're not using the previous font for other links on the help dialog, then it doesn't make sense to use that font for command names either. --- content_scripts/vimium.css | 1 - 1 file changed, 1 deletion(-) diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index ca02e43f..57ab4907 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -242,7 +242,6 @@ div#vimiumHelpDialog td.vimiumHelpDescription { font-size:14px; } div#vimiumHelpDialog span.commandName { - color: #555; font-style: italic; cursor: pointer; font-size: 12px; -- cgit v1.2.3 From 0b6e9b806df828864eac1fc3dda038238881c4bf Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 26 Apr 2016 06:28:37 +0100 Subject: Help dialog; use fixed-width font for keys. --- content_scripts/vimium.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 57ab4907..d9ef40f4 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -213,14 +213,16 @@ span.vimiumHelpDialogKey { background-color: rgb(243,243,243); color: rgb(33,33,33); margin-left: 2px; - padding-top: 0px; - padding-bottom: 2px; + padding-top: 1px; + padding-bottom: 1px; padding-left: 4px; padding-right: 4px; border-radius: 3px; border: solid 1px #ccc; border-bottom-color: #bbb; box-shadow: inset 0 -1px 0 #bbb; + font-family: monospace; + font-size: 11px; } /* Make the description column as wide as it can be. */ div#vimiumHelpDialog div.vimiumColumn tr > td:nth-of-type(3) { width:100%; } -- cgit v1.2.3 From 8449ad05ebc2b08e7575d6090a3d80daa6c466bc Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 26 Apr 2016 06:46:51 +0100 Subject: Help dialog; re-order and tweak command descriptions. - Re-order commands such that we keep like with like, and have the more important commands nearer the top. - Re-word some command descriptions such that we use the same words for the the same thing consistently. - Move "View Source" to the "Miscellaneous" category. - Make some commands "advanced commands". --- background_scripts/commands.coffee | 40 ++++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/background_scripts/commands.coffee b/background_scripts/commands.coffee index 2999ebfc..184f3bb0 100644 --- a/background_scripts/commands.coffee +++ b/background_scripts/commands.coffee @@ -118,27 +118,26 @@ Commands = pageNavigation: ["scrollDown", "scrollUp", - "scrollLeft", - "scrollRight", "scrollToTop", "scrollToBottom", - "scrollToLeft", - "scrollToRight", "scrollPageDown", "scrollPageUp", "scrollFullPageUp", "scrollFullPageDown", + "scrollLeft", + "scrollRight", + "scrollToLeft", + "scrollToRight", "reload", - "toggleViewSource", "copyCurrentUrl", "openCopiedUrlInCurrentTab", "openCopiedUrlInNewTab", "goUp", "goToRoot", "enterInsertMode", - "passNextKey", "enterVisualMode", "enterVisualLineMode", + "passNextKey", "focusInput", "LinkHints.activateMode", "LinkHints.activateModeToOpenInNewTab", @@ -156,32 +155,33 @@ Commands = vomnibarCommands: ["Vomnibar.activate", "Vomnibar.activateInNewTab", - "Vomnibar.activateTabSelection", "Vomnibar.activateBookmarks", "Vomnibar.activateBookmarksInNewTab", + "Vomnibar.activateTabSelection", "Vomnibar.activateEditUrl", "Vomnibar.activateEditUrlInNewTab"] findCommands: ["enterFindMode", "performFind", "performBackwardsFind"] historyNavigation: ["goBack", "goForward"] tabManipulation: - ["nextTab", + ["createTab", "previousTab", + "nextTab", "visitPreviousTab", "firstTab", "lastTab", - "createTab", "duplicateTab", + "togglePinTab", "removeTab", "restoreTab", "moveTabToNewWindow", - "togglePinTab", "closeTabsOnLeft","closeTabsOnRight", "closeOtherTabs", "moveTabLeft", "moveTabRight"] misc: - ["showHelp"] + ["showHelp", + "toggleViewSource"] # Rarely used commands are not shown by default in the help dialog or in the README. The goal is to present # a focused, high-signal set of commands to the new and casual user. Only those truly hungry for more power @@ -192,12 +192,12 @@ Commands = "moveTabToNewWindow", "goUp", "goToRoot", - "focusInput", "LinkHints.activateModeWithQueue", "LinkHints.activateModeToDownloadLink", "Vomnibar.activateEditUrl", "Vomnibar.activateEditUrlInNewTab", "LinkHints.activateModeToOpenIncognito", + "LinkHints.activateModeToCopyLinkUrl", "goNext", "goPrevious", "Marks.activateCreateMode", @@ -207,6 +207,8 @@ Commands = "closeTabsOnLeft", "closeTabsOnRight", "closeOtherTabs", + "enterVisualLineMode", + "toggleViewSource", "passNextKey"] defaultKeyMappings = @@ -306,8 +308,8 @@ commandDescriptions = scrollToLeft: ["Scroll all the way to the left", { noRepeat: true }] scrollToRight: ["Scroll all the way to the right", { noRepeat: true }] - scrollPageDown: ["Scroll a page down"] - scrollPageUp: ["Scroll a page up"] + scrollPageDown: ["Scroll a half page down"] + scrollPageUp: ["Scroll a half page up"] scrollFullPageDown: ["Scroll a full page down"] scrollFullPageUp: ["Scroll a full page up"] @@ -323,7 +325,7 @@ commandDescriptions = enterVisualMode: ["Enter visual mode", { noRepeat: true }] enterVisualLineMode: ["Enter visual line mode", { noRepeat: true }] - focusInput: ["Focus the first text box on the page. Cycle between them using tab"] + focusInput: ["Focus the first text input on the page"] "LinkHints.activateMode": ["Open a link in the current tab"] "LinkHints.activateModeToOpenInNewTab": ["Open a link in a new tab"] @@ -370,16 +372,16 @@ commandDescriptions = moveTabLeft: ["Move tab to the left", { background: true }] moveTabRight: ["Move tab to the right", { background: true }] - "Vomnibar.activate": ["Open URL, bookmark, or history entry", { topFrame: true }] - "Vomnibar.activateInNewTab": ["Open URL, bookmark, history entry, in a new tab", { topFrame: true }] + "Vomnibar.activate": ["Open URL, bookmark or history entry", { topFrame: true }] + "Vomnibar.activateInNewTab": ["Open URL, bookmark or history entry in a new tab", { topFrame: true }] "Vomnibar.activateTabSelection": ["Search through your open tabs", { topFrame: true }] "Vomnibar.activateBookmarks": ["Open a bookmark", { topFrame: true }] "Vomnibar.activateBookmarksInNewTab": ["Open a bookmark in a new tab", { topFrame: true }] "Vomnibar.activateEditUrl": ["Edit the current URL", { topFrame: true }] "Vomnibar.activateEditUrlInNewTab": ["Edit the current URL and open in a new tab", { topFrame: true }] - nextFrame: ["Cycle forward to the next frame on the page", { background: true }] - mainFrame: ["Select the tab's main/top frame", { topFrame: true, noRepeat: true }] + nextFrame: ["Select the next frame on the page", { background: true }] + mainFrame: ["Select the page's main/top frame", { topFrame: true, noRepeat: true }] "Marks.activateCreateMode": ["Create a new mark", { noRepeat: true }] "Marks.activateGotoMode": ["Go to a mark", { noRepeat: true }] -- cgit v1.2.3 From 05b2289ab0bb2278a60d77c5e08b7603e49e014d Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 26 Apr 2016 06:53:16 +0100 Subject: Help dialog; use Vimium-blue for links. On the help dialog, use the same blue of the "Vim" of "Vimium" for links. --- content_scripts/vimium.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index d9ef40f4..8803fd15 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -290,9 +290,10 @@ a#toggleAdvancedCommands, span#help-dialog-tip { white-space: nowrap; font-size: 10px; } -a:link.vimiumHelDialogLink, a:visited.vimiumHelDialogLink, a:hover.vimiumHelDialogLink, a:active.vimiumHelDialogLink { - color:blue; - text-decoration: underline; +a:link.vimiumHelDialogLink, a:visited.vimiumHelDialogLink, + a:hover.vimiumHelDialogLink, a:active.vimiumHelDialogLink, a#toggleAdvancedCommands { + color:#2f508e; + text-decoration: underline; } /* Vimium HUD CSS */ -- cgit v1.2.3