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