131 lines
4.8 KiB
Diff
131 lines
4.8 KiB
Diff
From 1d80ed2034512aca7e355921c0b942d4cf651b94 Mon Sep 17 00:00:00 2001
|
|
From: Michael Gratton <mike@vee.net>
|
|
Date: Fri, 28 Aug 2020 12:07:59 +1000
|
|
Subject: [PATCH 083/124] 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 1a2e2df3..5a0a8b3c 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 3cecfb3b..07ae6869 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 4fe34ad0..5ee4105e 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;
|
|
--
|
|
2.29.2
|
|
|