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 @@ ...@@ -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_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_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_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_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_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"/> <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") { ...@@ -13,6 +13,9 @@ js_type_check("closure_compile") {
js_library("omnibox") { js_library("omnibox") {
deps = [ deps = [
"//ui/webui/resources/js:util", "//ui/webui/resources/js:util",
":omnibox_element",
":omnibox_inputs",
":omnibox_output",
] ]
extra_deps = [ "//chrome/browser/ui/webui/omnibox:mojo_bindings_js" ] extra_deps = [ "//chrome/browser/ui/webui/omnibox:mojo_bindings_js" ]
externs_list = [ externs_list = [
...@@ -20,3 +23,9 @@ js_library("omnibox") { ...@@ -20,3 +23,9 @@ js_library("omnibox") {
"$externs_path/mojo.js", "$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 @@ ...@@ -9,6 +9,9 @@
<script src="chrome://resources/js/mojo_bindings.js"></script> <script src="chrome://resources/js/mojo_bindings.js"></script>
<script src="chrome://resources/js/util.js"></script> <script src="chrome://resources/js/util.js"></script>
<script src="chrome/browser/ui/webui/omnibox/omnibox.mojom.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> <script src="omnibox.js"></script>
</head> </head>
<body> <body>
......
chrome/browser/resources/omnibox/omnibox.js
View file @ 94008c3e
...@@ -26,102 +26,6 @@ ...@@ -26,102 +26,6 @@
*/ */
let cursorPositionUsed = -1; 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 * Returns a simple object with information about how to display an
* autocomplete result data field. * autocomplete result data field.
...@@ -169,8 +73,8 @@ ...@@ -169,8 +73,8 @@
new PresentationInfoRecord( new PresentationInfoRecord(
'Can Be Default', '', 'allowedToBeDefaultMatch', false, 'Can Be Default', '', 'allowedToBeDefaultMatch', false,
'A green checkmark indicates that the result can be the default ' + 'A green checkmark indicates that the result can be the default ' +
'match (i.e., can be the match that pressing enter in the ' + 'match (i.e., can be the match that pressing enter in the ' +
'omnibox navigates to).'), 'omnibox navigates to).'),
new PresentationInfoRecord( new PresentationInfoRecord(
'Starred', '', 'starred', false, 'Starred', '', 'starred', false,
'A green checkmark indicates that the result has been bookmarked.'), 'A green checkmark indicates that the result has been bookmarked.'),
...@@ -188,32 +92,32 @@ ...@@ -188,32 +92,32 @@
new PresentationInfoRecord( new PresentationInfoRecord(
'Inline Autocompletion', '', 'inlineAutocompletion', false, 'Inline Autocompletion', '', 'inlineAutocompletion', false,
'The text shown in the omnibox as a blue highlight selection ' + '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( new PresentationInfoRecord(
'Del', '', 'deletable', false, 'Del', '', 'deletable', false,
'A green checkmark indicates that the result can be deleted from ' + 'A green checkmark indicates that the result can be deleted from ' +
'the visit history.'), 'the visit history.'),
new PresentationInfoRecord('Prev', '', 'fromPrevious', false, ''), new PresentationInfoRecord('Prev', '', 'fromPrevious', false, ''),
new PresentationInfoRecord( new PresentationInfoRecord(
'Tran', 'Tran',
'https://cs.chromium.org/chromium/src/ui/base/page_transition_types.h' + '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.'), 'transition', false, 'How the user got to the result.'),
new PresentationInfoRecord( new PresentationInfoRecord(
'Done', '', 'providerDone', false, 'Done', '', 'providerDone', false,
'A green checkmark indicates that the provider is done looking for ' + 'A green checkmark indicates that the provider is done looking for ' +
'more results.'), 'more results.'),
new PresentationInfoRecord( new PresentationInfoRecord(
'Associated Keyword', '', 'associatedKeyword', false, 'Associated Keyword', '', 'associatedKeyword', false,
'If non-empty, a "press tab to search" hint will be shown and will ' + 'If non-empty, a "press tab to search" hint will be shown and will ' +
'engage this keyword.'), 'engage this keyword.'),
new PresentationInfoRecord( new PresentationInfoRecord(
'Keyword', '', 'keyword', false, 'Keyword', '', 'keyword', false,
'The keyword of the search engine to be used.'), 'The keyword of the search engine to be used.'),
new PresentationInfoRecord( new PresentationInfoRecord(
'Duplicates', '', 'duplicates', false, 'Duplicates', '', 'duplicates', false,
'The number of matches that have been marked as duplicates of this ' + 'The number of matches that have been marked as duplicates of this ' +
'match.'), 'match.'),
new PresentationInfoRecord( new PresentationInfoRecord(
'Additional Info', '', 'additionalInfo', false, 'Additional Info', '', 'additionalInfo', false,
'Provider-specific information about the result.'), 'Provider-specific information about the result.'),
...@@ -534,26 +438,18 @@ ...@@ -534,26 +438,18 @@
/** @type {OmniboxOutput} */ /** @type {OmniboxOutput} */
let omniboxOutput; let omniboxOutput;
/** Defines our custom HTML elements. */ document.addEventListener('DOMContentLoaded', () => {
function init() { browserProxy = new BrowserProxy();
window.customElements.define(OmniboxInputs.is, OmniboxInputs); omniboxInputs = /** @type {!OmniboxInputs} */ ($('omnibox-inputs'));
window.customElements.define(OmniboxOutput.is, OmniboxOutput); omniboxOutput = /** @type {!OmniboxOutput} */ ($('omnibox-output'));
omniboxInputs.addEventListener('query-inputs-changed', event =>
document.addEventListener('DOMContentLoaded', () => { browserProxy.makeRequest(
browserProxy = new BrowserProxy(); event.detail.inputText,
omniboxInputs = /** @type {!OmniboxInputs} */ ($('omnibox-inputs')); event.detail.cursorPosition,
omniboxOutput = /** @type {!OmniboxOutput} */ ($('omnibox-output')); event.detail.preventInlineAutocomplete,
omniboxInputs.addEventListener('query-inputs-changed', event => event.detail.preferKeyword,
browserProxy.makeRequest( event.detail.pageClassification
event.detail.inputText, ));
event.detail.cursorPosition, omniboxInputs.addEventListener('display-inputs-changed', refreshAllResults);
event.detail.preventInlineAutocomplete, });
event.detail.preferKeyword,
event.detail.pageClassification
));
omniboxInputs.addEventListener('display-inputs-changed', refreshAllResults);
});
}
init();
})(); })();
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) { ...@@ -19,6 +19,9 @@ OmniboxUI::OmniboxUI(content::WebUI* web_ui) : ui::MojoWebUIController(web_ui) {
content::WebUIDataSource* source = content::WebUIDataSource* source =
content::WebUIDataSource::Create(chrome::kChromeUIOmniboxHost); content::WebUIDataSource::Create(chrome::kChromeUIOmniboxHost);
source->AddResourcePath("omnibox.css", IDR_OMNIBOX_CSS); 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("omnibox.js", IDR_OMNIBOX_JS);
source->AddResourcePath("chrome/browser/ui/webui/omnibox/omnibox.mojom.js", source->AddResourcePath("chrome/browser/ui/webui/omnibox/omnibox.mojom.js",
IDR_OMNIBOX_MOJO_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