nettika/geary
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ComposerPageState: Use CSS for managing focus with composer body parts

Browse source 
Now that the `:focus-within` pseudoclass is supported, use this rather
than some custom JS to update custom HTML classes. This also prevents
spurious mutation events from firing.
This commit is contained in:
Michael Gratton 2020-08-28 12:07:59 +10:00 • committed by Michael James Gratton
parent 0609fbc3d7
commit 1d80ed2034
3 changed files with 11 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

24
test/js/composer-page-state-test.vala
View file

@ -11,7 +11,7 @@ class Composer.PageStateTest : Components.WebViewTestCase<Composer.WebView> {
"""<div id="geary-body" dir="auto">%s<div><br></div><div><br></div></div><div id="geary-signature" dir="auto"></div>"""; """<div id="geary-body" dir="auto">%s<div><br></div><div><br></div></div><div id="geary-signature" dir="auto"></div>""";
public const string DIRTY_BODY_TEMPLATE = public const string DIRTY_BODY_TEMPLATE =
""" """
<div id="geary-body" dir="auto" class="geary-focus" contenteditable="true">%s<div><br></div><div><br></div></div> <div id="geary-body" dir="auto" contenteditable="true">%s<div><br></div><div><br></div></div>
<div id="geary-signature" class="geary-no-display" dir="auto" contenteditable="true"></div> <div id="geary-signature" class="geary-no-display" dir="auto" contenteditable="true"></div>
"""; """;
public const string CLEAN_BODY_TEMPLATE = """<div id="geary-body" dir="auto">%s<div><br></div><div><br></div></div>"""; public const string CLEAN_BODY_TEMPLATE = """<div id="geary-body" dir="auto">%s<div><br></div><div><br></div></div>""";
@ -227,7 +227,7 @@ some text
} }
} }
public void clean_content() throws Error { public void clean_content() throws GLib.Error {
// XXX split these up into multiple tests // XXX split these up into multiple tests
load_body_fixture(""" load_body_fixture("""
http://example1.com http://example1.com
@ -257,20 +257,12 @@ unknown://example6.com
I can send email through smtp.gmail.com:587 or through <a href="https://www.gmail.com/">https://www.gmail.com/</a> I can send email through smtp.gmail.com:587 or through <a href="https://www.gmail.com/">https://www.gmail.com/</a>
"""; """;
try { run_javascript("geary.cleanContent();");
run_javascript("geary.cleanContent();"); string result = Util.JS.to_string(
string result = Util.JS.to_string( run_javascript("window.document.body.innerHTML;")
run_javascript("window.document.body.innerHTML;") .get_js_value()
.get_js_value() );
); assert_equal(result, DIRTY_BODY_TEMPLATE.printf(expected));
assert(result == DIRTY_BODY_TEMPLATE.printf(expected));
} catch (Util.JS.Error err) {
print("Util.JS.Error: %s\n", err.message);
assert_not_reached();
} catch (Error err) {
print("WKError: %s\n", err.message);
assert_not_reached();
}
} }
public void get_html() throws Error { public void get_html() throws Error {

6
ui/composer-web-view.css
View file

@ -43,12 +43,12 @@ body > div#geary-quote {
padding: 6px !important; padding: 6px !important;
} }
body > div.geary-focus { body > div:focus-within {
background-color: white; background-color: white;
} }
body > div#geary-signature.geary-focus, body > div#geary-signature:focus-within,
body > div#geary-quote.geary-focus { body > div#geary-quote:focus-within {
outline: 1px dashed #ccc !important; outline: 1px dashed #ccc !important;
} }

25
ui/composer-web-view.js
View file

@ -123,7 +123,6 @@ ComposerPageState.prototype = {
// Focus within the HTML document // Focus within the HTML document
document.body.focus(); document.body.focus();
this.updateFocusClass(this.bodyPart);
// Set text cursor at appropriate position // Set text cursor at appropriate position
let cursor = document.getElementById("cursormarker"); let cursor = document.getElementById("cursormarker");
@ -354,30 +353,6 @@ ComposerPageState.prototype = {
this._cursorContextChanged(newContext.encode()); this._cursorContextChanged(newContext.encode());
} }
} }
while (cursor != null) {
let parent = cursor.parentNode;
if (parent == document.body) {
this.updateFocusClass(cursor);
break;
}
cursor = parent;
}
},
/**
* Work around WebKit note yet supporting :focus-inside pseudoclass.
*/
updateFocusClass: function(newFocus) {
if (this.focusedPart != null) {
this.focusedPart.classList.remove("geary-focus");
this.focusedPart = null;
}
if (newFocus == this.bodyPart ||
newFocus == this.signaturePart ||
newFocus == this.quotePart) {
this.focusedPart = newFocus;
this.focusedPart.classList.add("geary-focus");
}
}, },
containedInPart: function(target) { containedInPart: function(target) {
let inPart = false; let inPart = false;