Merge lp:~midori/midori/webkitdom into lp:midori

[Cris Dywan]

Unmerged revisions

6171. By Cris Dywan on 2013-05-21

Port link hints to DOM code in Midori.Tab

6170. By Cris Dywan on 2013-05-21

Rework inline find with custom CSS styling

=== modified file 'midori/midori-tab.vala'
--- midori/midori-tab.vala	2013-06-21 23:23:12 +0000
+++ midori/midori-tab.vala	2013-07-15 22:57:23 +0000
@@ -35,6 +35,11 @@
 
     public class Tab : Gtk.VBox {
         public WebKit.WebView web_view { get; private set; }
+        int find_links;
+        private string css_class_match;
+        private string css_class_found;
+        private string css_class_hint;
+        private string css_class_key;
 
         #if HAVE_GRANITE_CLUTTER
         public Granite.Widgets.NavigationBox navigation_box { get; private set; }
@@ -105,6 +110,11 @@
             web_view = new WebKit.WebView ();
             /* Load something to avoid a bug where WebKit might not set a main frame */
             web_view.load_uri ("");
+            css_class_match = "midori" + Checksum.compute_for_string (ChecksumType.MD5, "search-match");
+            css_class_found = "midori" + Checksum.compute_for_string (ChecksumType.MD5, "search-found");
+            css_class_hint = "midori" + Checksum.compute_for_string (ChecksumType.MD5, "search-hint");
+            css_class_key = "midori" + Checksum.compute_for_string (ChecksumType.MD5, "search-key");
+            setup_styles ();
         }
 
         public void inject_stylesheet (string stylesheet) {
@@ -222,9 +232,115 @@
 
         public void unmark_text_matches () {
 #if !HAVE_WEBKIT2
+#if HAVE_DOM
+            var dom = web_view.get_dom_document ();
+            var nodes = dom.get_elements_by_class_name (css_class_match);
+            for (ulong i = 0; i < nodes.length; i++) {
+                var node = nodes.item (i);
+                var parent = node.parent_node;
+            string inner_html;
+            parent.get ("inner-html", out inner_html);
+                var text_node = dom.create_text_node (node.text_content);
+                parent.replace_child (text_node, node);
+                parent.normalize ();
+            string after;
+            parent.get ("inner-html", out after);
+            stdout.printf ("unmark before: %s\nafter: %s\n", inner_html, after);
+            }
+
+            /* FIXME There shouldn't be any remnants left */
+            nodes = dom.get_elements_by_class_name (css_class_match);
+            if (nodes.length != 0) {
+                for (ulong i = 0; i < nodes.length; i++) {
+                    var node = nodes.item (i);
+                string remnant;
+                node.get ("inner-html", out remnant);
+                    stdout.printf ("! %s\n", remnant);
+                    node.parent_node.remove_child (node);
+                }
+            }
+#else
             web_view.unmark_text_matches ();
 #endif
-        }
+#endif
+        }
+
+#if !HAVE_WEBKIT2
+#if HAVE_DOM
+        void setup_styles () {
+            string css_style = """
+                .%s, .%s {
+                    padding: 0.1em !important;
+                    border: 1px solid transparent !important;
+                    border-radius: 0.3em !important;
+                    z-index: 555 !important;
+                    position: absolute !important;
+                    display: inline !important;
+                    color: #000 !important;
+                    background-color: #FCE94F !important;
+                    border-top-color: ##E8D539 !important;
+                    border-left-color: ##E8D539 !important;
+                    border-bottom-color: #F5E988 !important;
+                    border-right-color: #F5E988 !important;
+                }
+                .%s {
+                    background-color: #d1eeb9 !important;
+                    border-top-color: #C8D6BC !important;
+                    border-left-color: #C8D6BC !important;
+                    border-bottom-color: #93C967 !important;
+                    border-right-color: #93C967 !important;
+                }
+                """.printf (css_class_match, css_class_found, css_class_match);
+            /* FIXME: style ::selection OR Source/WebCore/editing/Editor.cpp findString */
+            inject_stylesheet (css_style);
+        }
+
+        public override virtual signal bool navigation_policy_decision_requested (
+            WebKit.WebFrame frame, WebKit.NetworkRequest request,
+            WebKit.WebNavigationAction action, WebKit.WebPolicyDecision decision) {
+
+            setup_styles ();
+            return false;
+        }
+
+        void handle_link_hints (Gdk.EventKey event) {
+            int digit = ((char)event.keyval).digit_value ();
+            unichar uc = Gdk.keyval_to_unicode (event.keyval);
+            string? result = null;
+            if (find_links < 0) {
+                /* Links are currently off, turn them on */
+                string css_style = """
+                    .%s, .%s {
+                        font-size:small !important;
+                        font-weight:bold !important;
+                        z-index: 777;
+                        border-radius:0.3em;
+                        line-height:1 !important;
+                        background: white !important;
+                        color: black !important;
+                        border: 1px solid gray;
+                        padding: 0 0.1em !important;
+                        position: absolute;
+                        display: inline !important;
+                    }
+                    .%s {
+                        padding: 0 0.1em 0.2em 0.1em !important;
+                        background: black !important;
+                        color: white !important;
+                    }
+                    """.printf (css_class_hint, css_class_key, css_class_key);
+                inject_stylesheet (css_style);
+                int label_count = 0;
+                var dom = web_view.get_dom_document ();
+                var links = dom.links;
+                ulong nodes_length = links.length;
+                for (ulong i = 0; i < nodes_length; i++) {
+                    var node = links.item (i);
+                    var element = node.parent_element;
+                }
+            }
+#endif
+#endif
 
         public bool find (string text, bool case_sensitive, bool forward) {
 #if HAVE_WEBKIT2
@@ -238,12 +354,77 @@
             // FIXME: mark matches, count matches, not found
             return true;
 #else
+#if HAVE_DOM
+            uint matches = 0;
+            unmark_text_matches ();
+            setup_styles ();
+
+            var dom = web_view.get_dom_document ();
+            var nodes = dom.body.query_selector_all ("div,span,b,i,u,em,strong,p,input,button,h1,h2,h3,h4,h5,h6");
+            var regex = new Regex ("(" + text + ")", case_sensitive ? 0 : RegexCompileFlags.CASELESS);
+            ulong nodes_length = nodes.length;
+            for (ulong i = 0; i < nodes_length; i++) {
+                var node = nodes.item (i);
+                ulong children_length = node.child_nodes.length;
+                for (ulong j = 0; j < children_length; j++) {
+                var child = node.child_nodes.item (j);
+                if (child.node_type != 3) /* text node */
+                    continue;
+
+                /* Use text content to not match markup or scripts */
+                string content = child.text_content;
+                /* FIXME forward */
+                bool match = regex.match (content);
+                if (match) {
+                    matches++;
+
+                    string inner_html;
+                    node.get ("inner-html", out inner_html);
+                    string new_html = regex.replace (inner_html, -1, 0,
+                        "<span class=\"%s\">\\1</span>".printf (css_class_match));
+                    node.set ("inner-html", new_html);
+
+                    /* FIXME position
+                    var bubble = dom.create_element ("span");
+                    bubble.set_attribute ("class", css_class_match);
+                    bubble.append_child (dom.create_text_node (text));
+                    node.parent_node.insert_before (bubble, node); */
+
+                    /* cf.
+                    var skip = 0;
+                    if (node.nodeType == 3) {
+                      var pos = node.data.toUpperCase().indexOf(pat);
+                      if (pos >= 0) {
+                        var spannode = document.createElement("span");
+                        spannode.className = "highlight";
+                        fbgcolor += ";padding: 0px; margin: 0px;";
+                        spannode.setAttribute("style", fbgcolor);
+                        var middlebit = node.splitText(pos);
+                        var endbit = middlebit.splitText(pat.length);
+                        var middleclone = middlebit.cloneNode(true);
+                        spannode.appendChild(middleclone);
+                        middlebit.parentNode.replaceChild(spannode, middlebit);
+                        skip = 1;
+                      }
+                    }
+                    else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
+                      for (var i = 0; i < node.childNodes.length; ++i)
+                        i += innerHighlight(node.childNodes[i], pat, fbgcolor);
+                    }
+                    return skip;
+                    */
+                }
+            }
+            }
+            return matches > 0;
+#else
             bool found = false;
             found = web_view.search_text (text, case_sensitive, forward, true);
             web_view.mark_text_matches (text, case_sensitive, 0);
             web_view.set_highlight_text_matches (true);
             return found;
 #endif
+#endif
         }
     }
 }

=== modified file 'midori/midori-view.c'
--- midori/midori-view.c	2013-07-15 17:07:45 +0000
+++ midori/midori-view.c	2013-07-15 22:57:23 +0000
@@ -1756,30 +1756,8 @@
                    MidoriView*    view)
 {
 #ifndef HAVE_WEBKIT2
-    gint digit = g_ascii_digit_value (event->keyval);
-    gunichar uc = gdk_keyval_to_unicode (event->keyval);
-    gchar* result = NULL;
-    WebKitWebFrame* web_frame = webkit_web_view_get_main_frame (web_view);
-    JSContextRef js_context = webkit_web_frame_get_global_context (web_frame);
-
-    if (view->find_links < 0)
     {
-        /* Links are currently off, turn them on */
-        midori_tab_inject_stylesheet (MIDORI_TAB (view), ".midoriHKD87346 {"
-            " font-size:small !important; font-weight:bold !important;"
-            " z-index:500; border-radius:0.3em; line-height:1 !important;"
-            " background: white !important; color: black !important;"
-            " border:1px solid gray; padding:0 0.1em !important;"
-            " position:absolute; display:inline !important; }");
-        midori_tab_inject_stylesheet (MIDORI_TAB (view), ".midori_access_key_fc04de {"
-            " font-size:small !important; font-weight:bold !important;"
-            " z-index:500; border-radius:0.3em; line-height:1 !important;"
-            " background: black !important; color: white !important;"
-            " border:1px solid gray; padding:0 0.1em 0.2em 0.1em !important;"
-            " position:absolute; display:inline !important; }");
         result = sokoke_js_script_eval (js_context,
-            " var label_count = 0;"
-            " for (i in document.links) {"
             "   if (document.links[i].href && document.links[i].insertBefore) {"
             "       var child = document.createElement ('span');"
             "       if (document.links[i].accessKey && isNaN (document.links[i].accessKey)) {"

=== modified file 'midori/webkitgtk-3.0.vapi'
--- midori/webkitgtk-3.0.vapi	2012-12-16 18:40:10 +0000
+++ midori/webkitgtk-3.0.vapi	2013-07-15 22:57:23 +0000
@@ -158,6 +158,7 @@
 		public WebKit.DOMNode first_child { get; }
 		public WebKit.DOMNode last_child { get; }
 		public WebKit.DOMNode next_sibling { get; }
+		public uint node_type { get; }
 		public WebKit.DOMElement parent_element { get; }
 		public WebKit.DOMNode parent_node { get; }
 		public WebKit.DOMNode previous_sibling { get; }

=== modified file 'tests/tab.vala'
--- tests/tab.vala	2013-04-04 21:23:44 +0000
+++ tests/tab.vala	2013-07-15 22:57:23 +0000
@@ -266,6 +266,30 @@
     assert (!did_request_download);
 }
 
+void tab_find () {
+    var browser = new Gtk.Window (Gtk.WindowType.TOPLEVEL);
+    var tab = new Midori.View.with_title ();
+    browser.add (tab);
+    var loop = MainContext.default ();
+    tab.set_uri ("http://.invalid");
+    do { loop.iteration (true); } while (tab.load_status != Midori.LoadStatus.FINISHED);
+    /* One button in the error page */
+    assert (tab.find (_("Try again"), true, true) == 1);
+#if HAVE_DOM
+    /* The hostname occurs thrice */
+    assert (tab.find (".invalid", true, true) == 3);
+    /* Regex */
+    assert (tab.find ("(in)?valid", true, true) == 3);
+#endif
+    /* Wrong case, shouldn't yield any matches */
+    assert (tab.find ("http://.INValid", true, true) == 0);
+    /* Not case sensitive */
+    assert (tab.find ("http://.INValid", false, true) > 0);
+    /* Lots of matches shouldn't pose a problem */
+    assert (tab.find ("i", false, true) > 0);
+    assert (tab.find ("n", false, true) > 0); //TODO: Berliner Weisse → Berliner Weiße
+}
+
 void main (string[] args) {
     Test.init (ref args);
     Midori.App.setup (ref args, null);
@@ -277,6 +301,7 @@
     Test.add_func ("/tab/display-title", tab_display_title);
     Test.add_func ("/tab/ellipsize", tab_display_ellipsize);
     Test.add_func ("/tab/special", tab_special);
+    Test.add_func ("/tab/find", tab_find);
     Test.add_func ("/tab/alias", tab_alias);
     Test.add_func ("/tab/http", tab_http);
     Test.add_func ("/tab/movement", tab_movement);