Eliminate caret blinking

This commit is contained in:
Artur Shaikhullin 2018-01-19 22:40:47 +06:00
parent 2d2d71512f
commit 22d77fadd7
2 changed files with 3 additions and 109 deletions

View File

@ -610,7 +610,7 @@ class WebEngineTab(browsertab.AbstractTab):
'window._qutebrowser = window._qutebrowser || {};',
utils.read_file('javascript/scroll.js'),
utils.read_file('javascript/webelem.js'),
utils.read_file('javascript/webengine_caret.js'),
utils.read_file('javascript/caret.js'),
])
script = QWebEngineScript()
script.setInjectionPoint(QWebEngineScript.DocumentCreation)

View File

@ -512,8 +512,7 @@ window._qutebrowser.caret = (function() {
if (node.constructor === Text) {
node = node.parentElement;
}
if (node.className === "CaretBrowsing_Caret" ||
node.className === "CaretBrowsing_AnimateCaret") {
if (node.className === "CaretBrowsing_Caret") {
return true;
}
return false;
@ -869,22 +868,6 @@ window._qutebrowser.caret = (function() {
" z-index: 2147483647;" +
" min-height: 10px;" +
" background-color: #000;" +
"}" +
".CaretBrowsing_AnimateCaret {" +
" position: absolute;" +
" z-index: 2147483647;" +
" min-height: 10px;" +
"}" +
".CaretBrowsing_FlashVert {" +
" position: absolute;" +
" z-index: 2147483647;" +
" background: linear-gradient(" +
" 270deg," +
" rgba(128, 128, 255, 0) 0%," +
" rgba(128, 128, 255, 0.3) 45%," +
" rgba(128, 128, 255, 0.8) 50%," +
" rgba(128, 128, 255, 0.3) 65%," +
" rgba(128, 128, 255, 0) 100%);" +
"}";
const node = document.createElement("style");
node.innerHTML = style;
@ -972,58 +955,6 @@ window._qutebrowser.caret = (function() {
element.style.color = CaretBrowsing.caretForeground;
};
/**
* Animate the caret element into the normal style.
*/
CaretBrowsing.animateCaretElement = function() {
const element = CaretBrowsing.caretElement;
element.style.left = `${CaretBrowsing.caretX - 50}px`;
element.style.top = `${CaretBrowsing.caretY - 100}px`;
element.style.width = `${CaretBrowsing.caretWidth + 100}px`;
element.style.height = `${CaretBrowsing.caretHeight + 200}px`;
element.className = "CaretBrowsing_AnimateCaret";
// Start the animation. The setTimeout is so that the old values will get
// applied first, so we can animate to the new values.
window.setTimeout(() => {
if (!CaretBrowsing.caretElement) {
return;
}
CaretBrowsing.setCaretElementNormalStyle();
element.style.transition = "all 0.8s ease-in";
function listener() {
element.removeEventListener(
"transitionend", listener, false);
element.style.transition = "none";
}
element.addEventListener(
"transitionend", listener, false);
}, 0);
};
/**
* Quick flash and then show the normal caret style.
*/
CaretBrowsing.flashCaretElement = function() {
const x = CaretBrowsing.caretX;
const y = CaretBrowsing.caretY;
const vert = document.createElement("div");
vert.className = "CaretBrowsing_FlashVert";
vert.style.left = `${x - 6}px`;
vert.style.top = `${y - 100}px`;
vert.style.width = "11px";
vert.style.height = `${200}px`;
document.body.appendChild(vert);
window.setTimeout(() => {
document.body.removeChild(vert);
if (CaretBrowsing.caretElement) {
CaretBrowsing.setCaretElementNormalStyle();
}
}, 250);
};
/**
* Create the caret element. This assumes that caretX, caretY,
* caretWidth, and caretHeight have all been set. The caret is
@ -1034,14 +965,7 @@ window._qutebrowser.caret = (function() {
element.className = "CaretBrowsing_Caret";
document.body.appendChild(element);
CaretBrowsing.caretElement = element;
if (CaretBrowsing.onEnable === "anim") {
CaretBrowsing.animateCaretElement();
} else if (CaretBrowsing.onEnable === "flash") {
CaretBrowsing.flashCaretElement();
} else {
CaretBrowsing.setCaretElementNormalStyle();
}
CaretBrowsing.setCaretElementNormalStyle();
};
/**
@ -1226,15 +1150,6 @@ window._qutebrowser.caret = (function() {
window.scroll(0, (caretY - 100));
}
}
if (Math.abs(previousX - CaretBrowsing.caretX) > 500 ||
Math.abs(previousY - CaretBrowsing.caretY) > 100) {
if (CaretBrowsing.onJump === "anim") {
CaretBrowsing.animateCaretElement();
} else if (CaretBrowsing.onJump === "flash") {
CaretBrowsing.flashCaretElement();
}
}
};
CaretBrowsing.move = function(direction, granularity) {
@ -1308,23 +1223,6 @@ window._qutebrowser.caret = (function() {
return true;
};
/**
* Called at a regular interval. Blink the cursor by changing its visibility.
*/
CaretBrowsing.caretBlinkFunction = function() {
if (CaretBrowsing.caretElement) {
if (CaretBrowsing.blinkFlag) {
CaretBrowsing.caretElement.style.backgroundColor =
CaretBrowsing.caretForeground;
CaretBrowsing.blinkFlag = false;
} else {
CaretBrowsing.caretElement.style.backgroundColor =
CaretBrowsing.caretBackground;
CaretBrowsing.blinkFlag = true;
}
}
};
/**
* Update whether or not the caret is visible, based on whether caret browsing
* is enabled and whether this window / iframe has focus.
@ -1335,10 +1233,6 @@ window._qutebrowser.caret = (function() {
if (CaretBrowsing.isCaretVisible && !CaretBrowsing.caretElement) {
CaretBrowsing.setInitialCursor();
CaretBrowsing.updateCaretOrSelection(true);
if (CaretBrowsing.caretElement) {
CaretBrowsing.blinkFunctionId = window.setInterval(
CaretBrowsing.caretBlinkFunction, 500);
}
} else if (!CaretBrowsing.isCaretVisible &&
CaretBrowsing.caretElement) {
window.clearInterval(CaretBrowsing.blinkFunctionId);