Implement support for closing shadow DOM plugin placeholders.

Source/core/html/shadow/PluginPlaceholderElement.js

 // Copyright 2014 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.
 
 'use strict';
 
 installClass('PluginPlaceholderElement', function(PluginPlaceholderElementPrototype) {
     // FIXME: Load this from a .css file.
     var styleSource =
         '#plugin-placeholder {' +
@@ skipping 15 matching lines @@
 
         var styleElement = document.createElement('style');
         styleElement.textContent = styleSource;
 
         var contentElement = document.createElement('div');
         contentElement.id = 'plugin-placeholder-content';
 
         var messageElement = document.createElement('div');
         messageElement.id = 'plugin-placeholder-message';
 
+        // FIXME: UI polish, l10n, etc. for the close button.
+        var closeButton = document.createElement('button');
+        closeButton.id = 'plugin-placeholder-close-button';

[Mike West, 2014/11/02 14:01:44]

Are you sure that only one of these can exist per document?

[jbroman, 2014/11/03 16:20:36]

Shadow roots scope IDs within them; since (except in unit tests) this is always
inside a user agent shadow root, this is fine. I know there will only be one
close button per plugin placeholder.

In particular, the ID map is a property of TreeScope, which is a base class of
both Document and ShadowRoot. And I do know that there will only not be another
#plugin-placeholder-close-button in the same tree scope.

+        closeButton.textContent = 'Close';

[Mike West, 2014/11/02 14:01:44]

Do we have a localization scheme in place for UI generated by private script?

[jbroman, 2014/11/03 16:20:36]

Not yet, as far as I know. This button may get replaced with an X graphic like
we currently have, which would mitigate the need for a localized label for this
(which is part of the reason I haven't plumbed it through in this CL), at least
until I figure out how to make the accessibility features propagate into the
shadow root (and then I will likely need a localized label once again).

In any event, some resolution will be required before this ships, but I think
that is a logically separate change from this one.

[Mike West, 2014/11/03 16:35:46]

You'll need some text on the button, otherwise it won't be at all usable for
folks who rely on screen readers, et al.

Would you mind filing a bug for plumbing localization mechanisms down into
private script? As you say, it shouldn't block this CL, but it's something we'll
need to address before shipping.

+        closeButton.style.display = 'none';
+        closeButton.addEventListener('click', function() {
+            // FIXME: Record UMA Plugin_Hide_Click.
+            this.hide();
+        }.bind(this));
+
         contentElement.appendChild(messageElement);
+        contentElement.appendChild(closeButton);
         this.appendChild(styleElement);
         this.appendChild(contentElement);
 
         this.messageElement = messageElement;
+        this.closeButton = closeButton;
+    };
+
+    PluginPlaceholderElementPrototype.hide = function() {
+        var host = (this.parentNode instanceof ShadowRoot) ? this.parentNode.host : this;
+        host.style.display = 'none';
+
+        // If we have a width and height, search for a parent (often <div>) with the
+        // same dimensions. If we find such a parent, hide that as well.
+        // This makes much more uncovered page content usable (including clickable)
+        // as opposed to merely visible.
+        // TODO(cevans) -- it's a foul heuristic but we're going to tolerate it for
+        // now for these reasons:
+        // 1) Makes the user experience better.
+        // 2) Foulness is encapsulated within this single function.
+        // 3) Confidence in no false positives.
+        // 4) Seems to have a good / low false negative rate at this time.

[Mike West, 2014/11/02 14:01:44]

Nit: Please add a note here pointing to the heuristic's source. We're likely to
update or the other at some point; noting the source is the best we can do to
prevent skew.

[jbroman, 2014/11/03 16:20:36]

Done. Once this version ships, I expect the other code to go away.

+        if (host.hasAttribute('width') && host.hasAttribute('height')) {
+            var presentationAttributeInPixels = function(attr) {
+                var match = host.getAttribute(attr).match(/^\s*(\d+)\s*(px)?\s*$/);
+                if (match)
+                    return match[1] + 'px';
+            };
+            var width = presentationAttributeInPixels('width');
+            var height = presentationAttributeInPixels('height');
+            if (!width || !height)
+                return;
+
+            var element = host;
+            while (element instanceof Element) {
+                if (element.style.width == width && element.style.height == height)
+                    element.style.display = 'none';
+                element = element.parentNode;
+            }
+        }
     };
 
     Object.defineProperty(PluginPlaceholderElementPrototype, 'message', {
         get: function() { return this.messageElement.textContent; },
         set: function(message) { this.messageElement.textContent = message; },
     });
+
+    Object.defineProperty(PluginPlaceholderElementPrototype, 'closeable', {
+        get: function() { return this.closeButton.style.display != 'none'; },
+        set: function(closeable) { this.closeButton.style.display = closeable ? '' : 'none'; },
+    });
 });