aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/console/index.html2
-rw-r--r--src/console/site.scss5
-rw-r--r--src/content/components/common/follow.js3
-rw-r--r--src/content/components/common/hint.css2
-rw-r--r--src/content/console-frame.scss3
-rw-r--r--src/content/navigates.js31
-rw-r--r--test/content/navigates.test.js156
7 files changed, 146 insertions, 56 deletions
diff --git a/src/console/index.html b/src/console/index.html
index 52ecb76..e049b5e 100644
--- a/src/console/index.html
+++ b/src/console/index.html
@@ -7,7 +7,7 @@
</head>
<body class='vimvixen-console'>
<p class='vimvixen-console-message'></p>
- <div id='vimvixen-console-command'>
+ <div id='vimvixen-console-command' class='vimvixen-console-command-wrapper'>
<ul id='vimvixen-console-completion' class='vimvixen-console-completion'></ul>
<div class='vimvixen-console-command'>
<i class='vimvixen-console-command-prompt'></i><input
diff --git a/src/console/site.scss b/src/console/site.scss
index cd40db5..5aaea12 100644
--- a/src/console/site.scss
+++ b/src/console/site.scss
@@ -12,7 +12,6 @@ body {
}
.vimvixen-console {
- border-top: 1px solid gray;
bottom: 0;
margin: 0;
padding: 0;
@@ -24,6 +23,10 @@ body {
line-height: 16px;
}
+ &-command-wrapper {
+ border-top: 1px solid gray;
+ }
+
&-completion {
background-color: white;
diff --git a/src/content/components/common/follow.js b/src/content/components/common/follow.js
index 7a35105..7717154 100644
--- a/src/content/components/common/follow.js
+++ b/src/content/components/common/follow.js
@@ -4,7 +4,8 @@ import * as dom from 'shared/utils/dom';
const TARGET_SELECTOR = [
'a', 'button', 'input', 'textarea', 'area',
- '[contenteditable=true]', '[contenteditable=""]', '[tabindex]'
+ '[contenteditable=true]', '[contenteditable=""]', '[tabindex]',
+ '[role="button"]'
].join(',');
diff --git a/src/content/components/common/hint.css b/src/content/components/common/hint.css
index 119dd21..1f2ab20 100644
--- a/src/content/components/common/hint.css
+++ b/src/content/components/common/hint.css
@@ -4,7 +4,7 @@
font-weight: bold;
position: absolute;
text-transform: uppercase;
- z-index: 100000;
+ z-index: 2147483647;
font-size: 12px;
color: black;
}
diff --git a/src/content/console-frame.scss b/src/content/console-frame.scss
index 33bfff3..dece648 100644
--- a/src/content/console-frame.scss
+++ b/src/content/console-frame.scss
@@ -6,7 +6,8 @@
width: 100%;
height: 100%;
position: fixed;
- z-index: 10000;
+ z-index: 2147483647;
border: none;
+ background-color: unset;
pointer-events:none;
}
diff --git a/src/content/navigates.js b/src/content/navigates.js
index 64e5fc0..3e12a6f 100644
--- a/src/content/navigates.js
+++ b/src/content/navigates.js
@@ -2,13 +2,14 @@ const PREV_LINK_PATTERNS = [
/\bprev\b/i, /\bprevious\b/i, /\bback\b/i,
/</, /\u2039/, /\u2190/, /\xab/, /\u226a/, /<</
];
+
const NEXT_LINK_PATTERNS = [
/\bnext\b/i,
/>/, /\u203a/, /\u2192/, /\xbb/, /\u226b/, />>/
];
const findLinkByPatterns = (win, patterns) => {
- let links = win.document.getElementsByTagName('a');
+ const links = win.document.getElementsByTagName('a');
return Array.prototype.find.call(links, (link) => {
return patterns.some(ptn => ptn.test(link.textContent));
});
@@ -22,30 +23,32 @@ const historyNext = (win) => {
win.history.forward();
};
-const linkPrev = (win) => {
- let link = win.document.querySelector('a[rel=prev]');
+const linkCommon = (win, rel, patterns) => {
+ let link = win.document.querySelector(`link[rel~=${rel}][href]`);
+
if (link) {
- return link.click();
+ win.location = link.getAttribute('href');
+ return;
}
- link = findLinkByPatterns(win, PREV_LINK_PATTERNS);
+
+ link = win.document.querySelector(`a[rel~=${rel}]`) ||
+ findLinkByPatterns(win, patterns);
+
if (link) {
link.click();
}
};
+const linkPrev = (win) => {
+ linkCommon(win, 'prev', PREV_LINK_PATTERNS);
+};
+
const linkNext = (win) => {
- let link = win.document.querySelector('a[rel=next]');
- if (link) {
- return link.click();
- }
- link = findLinkByPatterns(win, NEXT_LINK_PATTERNS);
- if (link) {
- link.click();
- }
+ linkCommon(win, 'next', NEXT_LINK_PATTERNS);
};
const parent = (win) => {
- let loc = win.location;
+ const loc = win.location;
if (loc.hash !== '') {
loc.hash = '';
return;
diff --git a/test/content/navigates.test.js b/test/content/navigates.test.js
index b5144e9..d8a3316 100644
--- a/test/content/navigates.test.js
+++ b/test/content/navigates.test.js
@@ -1,56 +1,138 @@
-import { expect } from "chai";
+import { expect } from 'chai';
import * as navigates from 'content/navigates';
+const testRel = (done, rel, html) => {
+ const method = rel === 'prev' ? 'linkPrev' : 'linkNext';
+ document.body.innerHTML = html;
+ navigates[method](window);
+ setTimeout(() => {
+ expect(document.location.hash).to.equal(`#${rel}`);
+ done();
+ }, 0);
+};
+
+const testPrev = html => done => testRel(done, 'prev', html);
+const testNext = html => done => testRel(done, 'next', html);
+
describe('navigates module', () => {
describe('#linkPrev', () => {
- it('clicks prev link by text content', (done) => {
- document.body.innerHTML = '<a href="#dummy">xprevx</a> <a href="#prev">go to prev</a>';
- navigates.linkPrev(window);
- setTimeout(() => {
- expect(document.location.hash).to.equal('#prev');
- done();
- }, 0);
- });
+ it('navigates to <link> elements whose rel attribute is "prev"', testPrev(
+ '<link rel="prev" href="#prev" />'
+ ));
- it('clicks a[rel=prev] element preferentially', (done) => {
- document.body.innerHTML = '<a href="#dummy">prev</a> <a rel="prev" href="#prev">rel</a>';
- navigates.linkPrev(window);
- setTimeout(() => {
- expect(document.location.hash).to.equal('#prev');
- done();
- }, 0);
- });
- });
+ it('navigates to <link> elements whose rel attribute starts with "prev"', testPrev(
+ '<link rel="prev bar" href="#prev" />'
+ ));
+
+ it('navigates to <link> elements whose rel attribute ends with "prev"', testPrev(
+ '<link rel="foo prev" href="#prev" />'
+ ));
+
+ it('navigates to <link> elements whose rel attribute contains "prev"', testPrev(
+ '<link rel="foo prev bar" href="#prev" />'
+ ));
+
+ it('navigates to <a> elements whose rel attribute is "prev"', testPrev(
+ '<a rel="prev" href="#prev">click me</a>'
+ ));
+
+ it('navigates to <a> elements whose rel attribute starts with "prev"', testPrev(
+ '<a rel="prev bar" href="#prev">click me</a>'
+ ));
+
+ it('navigates to <a> elements whose rel attribute ends with "prev"', testPrev(
+ '<a rel="foo prev" href="#prev">click me</a>'
+ ));
+
+ it('navigates to <a> elements whose rel attribute contains "prev"', testPrev(
+ '<a rel="foo prev bar" href="#prev">click me</a>'
+ ));
+
+ it('navigates to <a> elements whose text matches "prev"', testPrev(
+ '<a href="#dummy">preview</a><a href="#prev">go to prev</a>'
+ ));
+
+ it('navigates to <a> elements whose text matches "previous"', testPrev(
+ '<a href="#dummy">preview</a><a href="#prev">go to previous</a>'
+ ));
+
+ it('navigates to <a> elements whose decoded text matches "<<"', testPrev(
+ '<a href="#dummy">click me</a><a href="#prev">&lt;&lt;</a>'
+ ));
+
+ it('navigates to matching <a> elements by clicking', testPrev(
+ `<a rel="prev" href="#dummy" onclick="return location = '#prev', false">go to prev</a>`
+ ));
+
+ it('prefers link[rel~=prev] to a[rel~=prev]', testPrev(
+ '<a rel="prev" href="#dummy">click me</a><link rel="prev" href="#prev" />'
+ ));
+ it('prefers a[rel~=prev] to a::text(pattern)', testPrev(
+ '<a href="#dummy">go to prev</a><a rel="prev" href="#prev">click me</a>'
+ ));
+ });
describe('#linkNext', () => {
- it('clicks next link by text content', (done) => {
- document.body.innerHTML = '<a href="#dummy">xnextx</a> <a href="#next">go to next</a>';
- navigates.linkNext(window);
- setTimeout(() => {
- expect(document.location.hash).to.equal('#next');
- done();
- }, 0);
- });
+ it('navigates to <link> elements whose rel attribute is "next"', testNext(
+ '<link rel="next" href="#next" />'
+ ));
- it('clicks a[rel=next] element preferentially', (done) => {
- document.body.innerHTML = '<a href="#dummy">next</a> <a rel="next" href="#next">rel</a>';
- navigates.linkNext(window);
- setTimeout(() => {
- expect(document.location.hash).to.equal('#next');
- done();
- }, 0);
- });
+ it('navigates to <link> elements whose rel attribute starts with "next"', testNext(
+ '<link rel="next bar" href="#next" />'
+ ));
+
+ it('navigates to <link> elements whose rel attribute ends with "next"', testNext(
+ '<link rel="foo next" href="#next" />'
+ ));
+
+ it('navigates to <link> elements whose rel attribute contains "next"', testNext(
+ '<link rel="foo next bar" href="#next" />'
+ ));
+
+ it('navigates to <a> elements whose rel attribute is "next"', testNext(
+ '<a rel="next" href="#next">click me</a>'
+ ));
+
+ it('navigates to <a> elements whose rel attribute starts with "next"', testNext(
+ '<a rel="next bar" href="#next">click me</a>'
+ ));
+
+ it('navigates to <a> elements whose rel attribute ends with "next"', testNext(
+ '<a rel="foo next" href="#next">click me</a>'
+ ));
+
+ it('navigates to <a> elements whose rel attribute contains "next"', testNext(
+ '<a rel="foo next bar" href="#next">click me</a>'
+ ));
+
+ it('navigates to <a> elements whose text matches "next"', testNext(
+ '<a href="#dummy">inextricable</a><a href="#next">go to next</a>'
+ ));
+
+ it('navigates to <a> elements whose decoded text matches ">>"', testNext(
+ '<a href="#dummy">click me</a><a href="#next">&gt;&gt;</a>'
+ ));
+
+ it('navigates to matching <a> elements by clicking', testNext(
+ `<a rel="next" href="#dummy" onclick="return location = '#next', false">go to next</a>`
+ ));
+
+ it('prefers link[rel~=next] to a[rel~=next]', testNext(
+ '<a rel="next" href="#dummy">click me<><link rel="next" href="#next" />'
+ ));
+
+ it('prefers a[rel~=next] to a::text(pattern)', testNext(
+ '<a href="#dummy">go to next</a><a rel="next" href="#next">click me</a>'
+ ));
});
describe('#parent', () => {
// NOTE: not able to test location
it('removes hash', () => {
- window.location.hash = "#section-1";
+ window.location.hash = '#section-1';
navigates.parent(window);
expect(document.location.hash).to.be.empty;
});
});
});
-
-