[geary/mjog/558-webkit-shared-process-redux: 16/16] ComposerPageState: Use CSS for managing focus with composer body parts
- From: Michael Gratton <mjog src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [geary/mjog/558-webkit-shared-process-redux: 16/16] ComposerPageState: Use CSS for managing focus with composer body parts
- Date: Sat, 29 Aug 2020 01:43:55 +0000 (UTC)
commit dbd0ecd97dd6b6dce4f17480473c8954693a08a1
Author: Michael Gratton <mike vee net>
Date: Fri Aug 28 12:07:59 2020 +1000
ComposerPageState: Use CSS for managing focus with composer body parts
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.
test/js/composer-page-state-test.vala | 24 ++++++++----------------
ui/composer-web-view.css | 6 +++---
ui/composer-web-view.js | 25 -------------------------
3 files changed, 11 insertions(+), 44 deletions(-)
---
diff --git a/test/js/composer-page-state-test.vala b/test/js/composer-page-state-test.vala
index 1a2e2df37..5a0a8b3ca 100644
--- a/test/js/composer-page-state-test.vala
+++ b/test/js/composer-page-state-test.vala
@@ -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>""";
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>
""";
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
load_body_fixture("""
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>
""";
- try {
- run_javascript("geary.cleanContent();");
- string result = Util.JS.to_string(
- run_javascript("window.document.body.innerHTML;")
- .get_js_value()
- );
- 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();
- }
+ run_javascript("geary.cleanContent();");
+ string result = Util.JS.to_string(
+ run_javascript("window.document.body.innerHTML;")
+ .get_js_value()
+ );
+ assert_equal(result, DIRTY_BODY_TEMPLATE.printf(expected));
}
public void get_html() throws Error {
diff --git a/ui/composer-web-view.css b/ui/composer-web-view.css
index 3cecfb3bc..07ae68694 100644
--- a/ui/composer-web-view.css
+++ b/ui/composer-web-view.css
@@ -43,12 +43,12 @@ body > div#geary-quote {
padding: 6px !important;
}
-body > div.geary-focus {
+body > div:focus-within {
background-color: white;
}
-body > div#geary-signature.geary-focus,
-body > div#geary-quote.geary-focus {
+body > div#geary-signature:focus-within,
+body > div#geary-quote:focus-within {
outline: 1px dashed #ccc !important;
}
diff --git a/ui/composer-web-view.js b/ui/composer-web-view.js
index 4fe34ad0b..5ee4105e1 100644
--- a/ui/composer-web-view.js
+++ b/ui/composer-web-view.js
@@ -123,7 +123,6 @@ ComposerPageState.prototype = {
// Focus within the HTML document
document.body.focus();
- this.updateFocusClass(this.bodyPart);
// Set text cursor at appropriate position
let cursor = document.getElementById("cursormarker");
@@ -354,30 +353,6 @@ ComposerPageState.prototype = {
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) {
let inPart = false;
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]