Add support for figure element

java/org/chromium/distiller/extractors/embeds/ImageExtractor.java

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 package org.chromium.distiller.extractors.embeds;
 
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.ImageElement;
+import com.google.gwt.dom.client.NodeList;
+import org.chromium.distiller.webdocument.WebFigure;
 import org.chromium.distiller.webdocument.WebImage;
 
 import java.util.HashSet;
 import java.util.Set;
 
 /**
  * This class treats images as another type of embed and provides heuristics for lead image
  * candidacy.
  */
 public class ImageExtractor implements EmbedExtractor {
     private static final Set<String> relevantTags = new HashSet<>();
+    private String src;
+    private int width;
+    private int height;
+
     static {
         // TODO(mdjones): Add "DIV" to this list for css images and possibly captions.
         relevantTags.add("IMG");
+        relevantTags.add("FIGURE");
     }
 
     @Override
     public Set<String> getRelevantTagNames() {
         return relevantTags;
     }
 
     @Override
     public WebImage extract(Element e) {
         if (!relevantTags.contains(e.getTagName())) {
             return null;
         }
-        String imgSrc = "";
         // Getting OffSetWidth/Height as default values, even they are
         // affected by padding, border, etc.
-        int width = e.getOffsetWidth();
-        int height = e.getOffsetHeight();
+        width = e.getOffsetWidth();
+        height = e.getOffsetHeight();
+        src = "";
+
         if ("IMG".equals(e.getTagName())) {
-            // This will get the absolute URL of the image and
-            // the displayed image dimension.
-            ImageElement imageElement = ImageElement.as(e);
-            imgSrc = imageElement.getSrc();
-            // As an ImageElement is manipulated here, it is possible
-            // to get the real dimensions.
-            width = imageElement.getWidth();
-            height = imageElement.getHeight();
+            extractImageAttributes(ImageElement.as(e));
+            return new WebImage(e, width, height, src);
+        } else if ("FIGURE".equals(e.getTagName())) {
+            Element img = getFirstElementByTagName(e, "IMG");
+            if (img != null) {
+                String caption = "";
+                extractImageAttributes(ImageElement.as(img));
+                Element cap = getFirstElementByTagName(e, "FIGCAPTION");

[wychen, 2016/06/02 23:48:49]

Sadly some web sites don't follow the spec.

For example, this site use <figure><div><p> to put the caption.
http://www.appledaily.com.tw/realtimenews/article/new/20150506/605427/

This one uses <figure><address>
http://www.thewire.com/entertainment/2014/07/guardians-of-the-galaxy-brings-b...

This one uses <figure><div>. Search for "Soros Fund Management".
http://www.washingtontimes.com/news/2015/jan/14/george-soros-funds-ferguson-p...

We can be more tolerant by trying harder when there's no <figcation>.

[marcelorcorrea, 2016/06/06 20:38:30]

I see your point. I thought about doing that too, but then we decided to just
look for figcaption in order to follow the spec.
Do you have any suggestions on what we could do here? get the whole innerText if
non figcaption is found?

[wychen, 2016/06/06 21:49:05]

Sounds good.

+                if (cap != null) {
+                    caption = cap.getInnerText();

[wychen, 2016/06/02 23:48:48]

Some sites put non-caption elements into <figcaption>.

Search for "enlarge" here.
http://arstechnica.com/gadgets/2014/02/the-2014-google-tracker-everything-we-...
It's <figcaption><div><a href="large-img">Enlarge</a>actual caption</div>

[wychen, 2016/06/02 23:48:49]

Another issue: image credit could contain a link. Only keeping plain text is
less than ideal in this case.

Search for "caption-credit" in the source here:
http://arstechnica.com/gadgets/2014/02/the-2014-google-tracker-everything-we-...

[marcelorcorrea, 2016/06/06 20:38:30]

Do you think it would be better if we kept the link too?

[wychen, 2016/06/06 21:49:05]

I'd like to keep the link, but retaining the DOM tree in other cases seems
messy. How about keeping the whole DOM structure within <figcaption> only when
it contains links, otherwise use innerText as is?

+                }
+                return new WebFigure(img, width, height, src, caption);
+            }
         }
+        return null;
+    }
 
-        return new WebImage(e, width, height, imgSrc);
+    private void extractImageAttributes(ImageElement img) {
+        src = img.getSrc();
+        width = img.getWidth();
+        height = img.getHeight();
+    }
+
+    private Element getFirstElementByTagName(Element e, String tagName) {
+        NodeList<Element> elements = e.getElementsByTagName(tagName);
+        if (elements.getLength() > 0) {
+            return elements.getItem(0);
+        }
+        return null;
     }
 }