src/third_party/WebKit/Source/core/html/shadow/PluginPlaceholderElement.js

   1 // Copyright 2014 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 'use strict';
   6
   7 installClass('PluginPlaceholderElement', function(PluginPlaceholderElementPrototype) {
   8     // FIXME: Load this from a .css file.
   9     var styleSource =
  10         '#plugin-placeholder {' +
  11         '    width: 100%;' +
  12         '    height: 100%;' +
  13         '    overflow: hidden;' +
  14         '    display: flex;' +
  15         '    align-items: center;' +
  16         '    background: gray;' +
  17         '    font: 12px -webkit-control;' +
  18         '}' +
  19         '#plugin-placeholder-content {' +
  20         '    text-align: center;' +
  21         '    margin: auto;' +
  22         '}';
  23
  24     PluginPlaceholderElementPrototype.createdCallback = function() {
  25         this.id = 'plugin-placeholder';
  26
  27         var styleElement = document.createElement('style');
  28         styleElement.textContent = styleSource;
  29
  30         var contentElement = document.createElement('div');
  31         contentElement.id = 'plugin-placeholder-content';
  32
  33         var messageElement = document.createElement('div');
  34         messageElement.id = 'plugin-placeholder-message';
  35
  36         // FIXME: UI polish, l10n, etc. for the close button.
  37         var closeButton = document.createElement('button');
  38         closeButton.id = 'plugin-placeholder-close-button';
  39         closeButton.textContent = 'Close';
  40         closeButton.style.display = 'none';
  41         closeButton.addEventListener('click', function() {
  42             // FIXME: Record UMA Plugin_Hide_Click.
  43             this.hide();
  44         }.bind(this));
  45
  46         contentElement.appendChild(messageElement);
  47         contentElement.appendChild(closeButton);
  48         this.appendChild(styleElement);
  49         this.appendChild(contentElement);
  50
  51         this.messageElement = messageElement;
  52         this.closeButton = closeButton;
  53     };
  54
  55     PluginPlaceholderElementPrototype.hide = function() {
  56         var host = (this.parentNode instanceof ShadowRoot) ? this.parentNode.host : this;
  57         host.style.display = 'none';
  58
  59         // If we have a width and height, search for a parent (often <div>) with the
  60         // same dimensions. If we find such a parent, hide that as well.
  61         // This makes much more uncovered page content usable (including clickable)
  62         // as opposed to merely visible.
  63         // TODO(cevans) -- it's a foul heuristic but we're going to tolerate it for
  64         // now for these reasons:
  65         // 1) Makes the user experience better.
  66         // 2) Foulness is encapsulated within this single function.
  67         // 3) Confidence in no false positives.
  68         // 4) Seems to have a good / low false negative rate at this time.
  69         //
  70         // This heuristic was copied from plugins::PluginPlaceholder::HidePlugin
  71         // (src/components/plugins/renderer/plugin_placeholder.cc) and should be
  72         // kept in sync with it until it goes away.
  73         if (host.hasAttribute('width') && host.hasAttribute('height')) {
  74             var presentationAttributeInPixels = function(attr) {
  75                 var match = host.getAttribute(attr).match(/^\s*(\d+)\s*(px)?\s*$/);
  76                 if (match)
  77                     return match[1] + 'px';
  78             };
  79             var width = presentationAttributeInPixels('width');
  80             var height = presentationAttributeInPixels('height');
  81             if (!width || !height)
  82                 return;
  83
  84             var element = host;
  85             while (element instanceof Element) {
  86                 if (element.style.width == width && element.style.height == height)
  87                     element.style.display = 'none';
  88                 element = element.parentNode;
  89             }
  90         }
  91     };
  92
  93     Object.defineProperty(PluginPlaceholderElementPrototype, 'message', {
  94         get: function() { return this.messageElement.textContent; },
  95         set: function(message) { this.messageElement.textContent = message; },
  96     });
  97
  98     Object.defineProperty(PluginPlaceholderElementPrototype, 'closeable', {
  99         get: function() { return this.closeButton.style.display != 'none'; },
 100         set: function(closeable) { this.closeButton.style.display = closeable ? '' : 'none'; },
 101     });
 102 });