Skip to content

GitLab

T
tangled
Commit 94008c3e authored by manuk's avatar manuk Committed by Commit Bot
Browse files
Options

[chrome:omnibox] Extract each Custom Element to individual JS file. 

OmniboxElement, OmniboxInputs, and OmniboxOutput

Bug: 891303
Change-Id: I9de04903beddab6638e379227ae714801ad65991
Reviewed-on: https://chromium-review.googlesource.com/c/1281164
Commit-Queue: manuk hovanesian <manukh@chromium.org>
Reviewed-by: default avatarDemetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: default avatarTommy Li <tommycli@chromium.org>
Cr-Commit-Position: refs/heads/master@{#599993}
parent dba0af4a
Hide whitespace changes
Inline Side-by-side
Showing with 153 additions and 126 deletions
chrome/browser/browser_resources.grd
View file @ 94008c3e
......@@ -399,6 +399,9 @@
<include name="IDR_CUSTOM_LINKS_EDIT_MENU_SVG" file="resources\local_ntp\icons\edit_menu.svg" type="BINDATA" />
<include name="IDR_OMNIBOX_HTML" file="resources\omnibox\omnibox.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
<include name="IDR_OMNIBOX_CSS" file="resources\omnibox\omnibox.css" type="BINDATA" compress="gzip" />
<include name="IDR_OMNIBOX_ELEMENT_JS" file="resources\omnibox\omnibox_element.js" type="BINDATA" compress="gzip" />
<include name="IDR_OMNIBOX_INPUTS_JS" file="resources\omnibox\omnibox_inputs.js" type="BINDATA" compress="gzip" />
<include name="IDR_OMNIBOX_OUTPUT_JS" file="resources\omnibox\omnibox_output.js" type="BINDATA" compress="gzip" />
<include name="IDR_OMNIBOX_JS" file="resources\omnibox\omnibox.js" type="BINDATA" compress="gzip" />
<include name="IDR_OMNIBOX_MOJO_JS" file="${root_gen_dir}\chrome\browser\ui\webui\omnibox\omnibox.mojom.js" use_base_dir="false" type="BINDATA" compress="gzip" />
<include name="IDR_ORIGIN_MOJO_JS" file="${root_gen_dir}\url\mojom\origin.mojom.js" use_base_dir="false" type="BINDATA" compress="gzip"/>
......
chrome/browser/resources/omnibox/BUILD.gn
View file @ 94008c3e
......@@ -13,6 +13,9 @@ js_type_check("closure_compile") {
js_library("omnibox") {
deps = [
"//ui/webui/resources/js:util",
":omnibox_element",
":omnibox_inputs",
":omnibox_output",
]
extra_deps = [ "//chrome/browser/ui/webui/omnibox:mojo_bindings_js" ]
externs_list = [
......@@ -20,3 +23,9 @@ js_library("omnibox") {
"$externs_path/mojo.js",
]
}
js_library("omnibox_element") {}
js_library("omnibox_inputs") {}
js_library("omnibox_output") {}
chrome/browser/resources/omnibox/omnibox.html
View file @ 94008c3e
......@@ -9,6 +9,9 @@
<script src="chrome://resources/js/mojo_bindings.js"></script>
<script src="chrome://resources/js/util.js"></script>
<script src="chrome/browser/ui/webui/omnibox/omnibox.mojom.js"></script>
<script src="omnibox_element.js"></script>
<script src="omnibox_inputs.js"></script>
<script src="omnibox_output.js"></script>
<script src="omnibox.js"></script>
</head>
<body>
......
chrome/browser/resources/omnibox/omnibox.js
View file @ 94008c3e
......@@ -26,102 +26,6 @@
*/
let cursorPositionUsed = -1;
class OmniboxElement extends HTMLElement {
/** @param {string} templateId Template's HTML id attribute */
constructor(templateId) {
super();
/** @type {string} */
this.templateId = templateId;
}
/** @override */
connectedCallback() {
this.attachShadow({mode: 'open'});
let template = $(this.templateId).content.cloneNode(true);
this.shadowRoot.appendChild(template);
}
/**
* Searches local shadow root for element by id
* @param {string} id
* @return {Element}
*/
$$(id) {
return this.shadowRoot.getElementById(id);
}
}
class OmniboxInputs extends OmniboxElement {
/** @return {string} */
static get is() {
return 'omnibox-inputs';
}
constructor() {
super('omnibox-inputs-template');
}
/** @override */
connectedCallback() {
super.connectedCallback();
this.setupElementListeners();
}
setupElementListeners() {
const onQueryInputsChanged = this.onQueryInputsChanged.bind(this);
const onDisplayInputsChagned = this.onDisplayInputsChagned.bind(this);
this.$$('input-text').addEventListener('input', onQueryInputsChanged);
[
this.$$('prevent-inline-autocomplete'),
this.$$('prefer-keyword'),
this.$$('page-classification'),
].forEach(element => element.addEventListener('change', onQueryInputsChanged));
[
this.$$('show-incomplete-results'),
this.$$('show-details'),
this.$$('show-all-providers'),
].forEach(element => element.addEventListener('change', onDisplayInputsChagned));
}
onQueryInputsChanged() {
this.dispatchEvent(new CustomEvent('query-inputs-changed', {
detail: {
inputText: this.$$('input-text').value,
cursorPosition: this.$$('input-text').selectionEnd,
preventInlineAutocomplete: this.$$('prevent-inline-autocomplete').checked,
preferKeyword: this.$$('prefer-keyword').checked,
pageClassification: this.$$('page-classification').checked,
}
}));
}
onDisplayInputsChagned() {
this.dispatchEvent(new CustomEvent('display-inputs-changed'));
}
}
class OmniboxOutput extends OmniboxElement {
/** @return {string} */
static get is() {
return 'omnibox-output';
}
constructor() {
super('omnibox-output-template');
}
/** @param {Element} element the element to the output */
addOutput(element) {
this.$$('contents').appendChild(element);
}
clearOutput() {
while (this.$$('contents').firstChild)
this.$$('contents').removeChild(this.$$('contents').firstChild);
}
}
/**
* Returns a simple object with information about how to display an
* autocomplete result data field.
......@@ -169,8 +73,8 @@
new PresentationInfoRecord(
'Can Be Default', '', 'allowedToBeDefaultMatch', false,
'A green checkmark indicates that the result can be the default ' +
'match (i.e., can be the match that pressing enter in the ' +
'omnibox navigates to).'),
'match (i.e., can be the match that pressing enter in the ' +
'omnibox navigates to).'),
new PresentationInfoRecord(
'Starred', '', 'starred', false,
'A green checkmark indicates that the result has been bookmarked.'),
......@@ -188,32 +92,32 @@
new PresentationInfoRecord(
'Inline Autocompletion', '', 'inlineAutocompletion', false,
'The text shown in the omnibox as a blue highlight selection ' +
'following the cursor, if this match is shown inline.'),
'following the cursor, if this match is shown inline.'),
new PresentationInfoRecord(
'Del', '', 'deletable', false,
'A green checkmark indicates that the result can be deleted from ' +
'the visit history.'),
'the visit history.'),
new PresentationInfoRecord('Prev', '', 'fromPrevious', false, ''),
new PresentationInfoRecord(
'Tran',
'https://cs.chromium.org/chromium/src/ui/base/page_transition_types.h' +
'?q=page_transition_types.h&sq=package:chromium&dr=CSs&l=14',
'?q=page_transition_types.h&sq=package:chromium&dr=CSs&l=14',
'transition', false, 'How the user got to the result.'),
new PresentationInfoRecord(
'Done', '', 'providerDone', false,
'A green checkmark indicates that the provider is done looking for ' +
'more results.'),
'more results.'),
new PresentationInfoRecord(
'Associated Keyword', '', 'associatedKeyword', false,
'If non-empty, a "press tab to search" hint will be shown and will ' +
'engage this keyword.'),
'engage this keyword.'),
new PresentationInfoRecord(
'Keyword', '', 'keyword', false,
'The keyword of the search engine to be used.'),
new PresentationInfoRecord(
'Duplicates', '', 'duplicates', false,
'The number of matches that have been marked as duplicates of this ' +
'match.'),
'match.'),
new PresentationInfoRecord(
'Additional Info', '', 'additionalInfo', false,
'Provider-specific information about the result.'),
......@@ -534,26 +438,18 @@
/** @type {OmniboxOutput} */
let omniboxOutput;
/** Defines our custom HTML elements. */
function init() {
window.customElements.define(OmniboxInputs.is, OmniboxInputs);
window.customElements.define(OmniboxOutput.is, OmniboxOutput);
document.addEventListener('DOMContentLoaded', () => {
browserProxy = new BrowserProxy();
omniboxInputs = /** @type {!OmniboxInputs} */ ($('omnibox-inputs'));
omniboxOutput = /** @type {!OmniboxOutput} */ ($('omnibox-output'));
omniboxInputs.addEventListener('query-inputs-changed', event =>
browserProxy.makeRequest(
event.detail.inputText,
event.detail.cursorPosition,
event.detail.preventInlineAutocomplete,
event.detail.preferKeyword,
event.detail.pageClassification
));
omniboxInputs.addEventListener('display-inputs-changed', refreshAllResults);
});
}
init();
document.addEventListener('DOMContentLoaded', () => {
browserProxy = new BrowserProxy();
omniboxInputs = /** @type {!OmniboxInputs} */ ($('omnibox-inputs'));
omniboxOutput = /** @type {!OmniboxOutput} */ ($('omnibox-output'));
omniboxInputs.addEventListener('query-inputs-changed', event =>
browserProxy.makeRequest(
event.detail.inputText,
event.detail.cursorPosition,
event.detail.preventInlineAutocomplete,
event.detail.preferKeyword,
event.detail.pageClassification
));
omniboxInputs.addEventListener('display-inputs-changed', refreshAllResults);
});
})();
chrome/browser/resources/omnibox/omnibox_element.js 0 → 100644
View file @ 94008c3e
// Copyright 2018 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.
// Helper class to be used as the super class of all Custom Elements in
// chrome://omnibox. Constructed with a string id of a <template> element. When
// this element is added to the DOM, it instantiates its internal DOM from the
// corresponding <template> element.
class OmniboxElement extends HTMLElement {
/** @param {string} templateId Template's HTML id attribute */
constructor(templateId) {
super();
/** @type {string} */
this.templateId = templateId;
}
/** @override */
connectedCallback() {
this.attachShadow({mode: 'open'});
let template = $(this.templateId).content.cloneNode(true);
this.shadowRoot.appendChild(template);
}
/**
* Searches local shadow root for element by id
* @param {string} id
* @return {Element}
*/
$$(id) {
return this.shadowRoot.getElementById(id);
}
}
chrome/browser/resources/omnibox/omnibox_inputs.js 0 → 100644
View file @ 94008c3e
// Copyright 2018 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.
class OmniboxInputs extends OmniboxElement {
/** @return {string} */
static get is() {
return 'omnibox-inputs';
}
constructor() {
super('omnibox-inputs-template');
}
/** @override */
connectedCallback() {
super.connectedCallback();
this.setupElementListeners();
}
setupElementListeners() {
const onQueryInputsChanged = this.onQueryInputsChanged.bind(this);
const onDisplayInputsChagned = this.onDisplayInputsChagned.bind(this);
this.$$('input-text').addEventListener('input', onQueryInputsChanged);
[
this.$$('prevent-inline-autocomplete'),
this.$$('prefer-keyword'),
this.$$('page-classification'),
].forEach(element => element.addEventListener('change', onQueryInputsChanged));
[
this.$$('show-incomplete-results'),
this.$$('show-details'),
this.$$('show-all-providers'),
].forEach(element => element.addEventListener('change', onDisplayInputsChagned));
}
onQueryInputsChanged() {
this.dispatchEvent(new CustomEvent('query-inputs-changed', {
detail: {
inputText: this.$$('input-text').value,
cursorPosition: this.$$('input-text').selectionEnd,
preventInlineAutocomplete: this.$$('prevent-inline-autocomplete').checked,
preferKeyword: this.$$('prefer-keyword').checked,
pageClassification: this.$$('page-classification').checked,
}
}));
}
onDisplayInputsChagned() {
this.dispatchEvent(new CustomEvent('display-inputs-changed'));
}
}
window.customElements.define(OmniboxInputs.is, OmniboxInputs);
chrome/browser/resources/omnibox/omnibox_output.js 0 → 100644
View file @ 94008c3e
// Copyright 2018 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.
class OmniboxOutput extends OmniboxElement {
/** @return {string} */
static get is() {
return 'omnibox-output';
}
constructor() {
super('omnibox-output-template');
}
/** @param {Element} element the element to the output */
addOutput(element) {
this.$$('contents').appendChild(element);
}
clearOutput() {
while (this.$$('contents').firstChild)
this.$$('contents').removeChild(this.$$('contents').firstChild);
}
}
window.customElements.define(OmniboxOutput.is, OmniboxOutput);
chrome/browser/ui/webui/omnibox/omnibox_ui.cc
View file @ 94008c3e
......@@ -19,6 +19,9 @@ OmniboxUI::OmniboxUI(content::WebUI* web_ui) : ui::MojoWebUIController(web_ui) {
content::WebUIDataSource* source =
content::WebUIDataSource::Create(chrome::kChromeUIOmniboxHost);
source->AddResourcePath("omnibox.css", IDR_OMNIBOX_CSS);
source->AddResourcePath("omnibox_element.js", IDR_OMNIBOX_ELEMENT_JS);
source->AddResourcePath("omnibox_inputs.js", IDR_OMNIBOX_INPUTS_JS);
source->AddResourcePath("omnibox_output.js", IDR_OMNIBOX_OUTPUT_JS);
source->AddResourcePath("omnibox.js", IDR_OMNIBOX_JS);
source->AddResourcePath("chrome/browser/ui/webui/omnibox/omnibox.mojom.js",
IDR_OMNIBOX_MOJO_JS);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment