1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
// Copyright 2016 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.
cr.define('extensions', function() {
'use strict';
/**
* @return {!Promise} A signal that the document is ready. Need to wait for
* this, otherwise the custom ExtensionOptions element might not have been
* registered yet.
*/
function whenDocumentReady() {
if (document.readyState == 'complete') {
return Promise.resolve();
}
return new Promise(function(resolve) {
document.addEventListener('readystatechange', function f() {
if (document.readyState == 'complete') {
document.removeEventListener('readystatechange', f);
resolve();
}
});
});
}
// The minimum width in pixels for the options dialog.
const MIN_WIDTH = 400;
// The maximum height in pixels for the options dialog.
const MAX_HEIGHT = 640;
const OptionsDialog = Polymer({
is: 'extensions-options-dialog',
behaviors: [extensions.ItemBehavior],
properties: {
/** @private {Object} */
extensionOptions_: Object,
/** @private {chrome.developerPrivate.ExtensionInfo} */
data_: Object,
},
/** @private {?Function} */
boundUpdateDialogSize_: null,
/** @private {?{height: number, width: number}} */
preferredSize_: null,
get open() {
return this.$.dialog.open;
},
/**
* Resizes the dialog to the width/height stored in |preferredSize_|, taking
* into account the window width/height.
* @private
*/
updateDialogSize_: function() {
const headerHeight = this.$.body.offsetTop;
const maxHeight = Math.min(0.9 * window.innerHeight, MAX_HEIGHT);
const effectiveHeight =
Math.min(maxHeight, headerHeight + this.preferredSize_.height);
const effectiveWidth = Math.max(MIN_WIDTH, this.preferredSize_.width);
this.$.dialog.style.setProperty(
'--dialog-height', `${effectiveHeight}px`);
this.$.dialog.style.setProperty('--dialog-width', `${effectiveWidth}px`);
this.$.dialog.style.setProperty('--dialog-opacity', 1);
},
/** @param {chrome.developerPrivate.ExtensionInfo} data */
show: function(data) {
this.data_ = data;
whenDocumentReady().then(() => {
if (!this.extensionOptions_) {
this.extensionOptions_ = document.createElement('ExtensionOptions');
}
this.extensionOptions_.extension = this.data_.id;
this.extensionOptions_.onclose = () => this.$.dialog.close();
const boundUpdateDialogSize = this.updateDialogSize_.bind(this);
this.boundUpdateDialogSize_ = boundUpdateDialogSize;
this.extensionOptions_.onpreferredsizechanged = e => {
if (!this.$.dialog.open) {
this.$.dialog.showModal();
}
this.preferredSize_ = e;
this.debounce('updateDialogSize_', boundUpdateDialogSize, 50);
};
// Add a 'resize' such that the dialog is resized when window size
// changes.
window.addEventListener('resize', this.boundUpdateDialogSize_);
this.$.body.appendChild(this.extensionOptions_);
});
},
/** @private */
onClose_: function() {
this.extensionOptions_.onpreferredsizechanged = null;
if (this.boundUpdateDialogSize_) {
window.removeEventListener('resize', this.boundUpdateDialogSize_);
this.boundUpdateDialogSize_ = null;
}
const currentPage = extensions.navigation.getCurrentPage();
// We update the page when the options dialog closes, but only if we're
// still on the details page. We could be on a different page if the
// user hit back while the options dialog was visible; in that case, the
// new page is already correct.
if (currentPage && currentPage.page == extensions.Page.DETAILS) {
// This will update the currentPage_ and the NavigationHelper; since
// the active page is already the details page, no main page
// transition occurs.
extensions.navigation.navigateTo({
page: extensions.Page.DETAILS,
extensionId: currentPage.extensionId
});
}
},
});
return {
OptionsDialog: OptionsDialog,
OptionsDialogMinWidth: MIN_WIDTH,
OptionsDialogMaxHeight: MAX_HEIGHT,
};
});
|
