Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
support-tool: Set up pages structure and navigation buttons
Add different pages to get information on which data to collect on Support Tool using iron-pages. Add navigation buttons. Add support_tool_shared.css file to style the common components in these pages. Update browser tests to test the new structure. The change is based on mocks here:https://docs.google.com/presentation/d/1XT3CvqqDHy6E0F1_PJwQZMYG_dukKsne1eMQ9E1y-xE/edit?hl=en&forcehl=1#slide=id.8dTFyXz Screenshot of Support Tool after this change: https://screenshot.googleplex.com/zZgg4tQhk83ptaz.png More detail about Support Tool on: go/support-tool-v1-design Bug:b:219730597 Test:Run broweser tests with "autoninja -C out/Default/ browser_tests && out/Default/browser_tests --gtest_filter=*SupportToolTest*" command Change-Id: I889eb84dd3593f5c5bec775386d38eff76198baa Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3525379 Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org> Reviewed-by: Pavol Marko <pmarko@chromium.org> Commit-Queue: Irem Uguz <iremuguz@google.com> Cr-Commit-Position: refs/heads/main@{#984260}
- Loading branch information
Irem Uguz
authored and
Chromium LUCI CQ
committed
Mar 23, 2022
1 parent
a4a5764
commit 1bc0d96
Showing
13 changed files
with
351 additions
and
106 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <!-- Copyright 2022 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. --> | ||
|
|
||
| <style include="support-tool-shared"></style> | ||
|
|
||
| <h2>Collect diagnostics data for support</h2> | ||
| <div class="support-tool-title">Select diagnostic data to export</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| // Copyright 2022 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. | ||
|
|
||
| import './support_tool_shared_css.js'; | ||
|
|
||
| import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; | ||
| import {getTemplate} from './data_collectors.html.js'; | ||
|
|
||
| export class DataCollectorsElement extends PolymerElement { | ||
| static get is() { | ||
| return 'data-collectors'; | ||
| } | ||
|
|
||
| static get template() { | ||
| return getTemplate(); | ||
| } | ||
| } | ||
|
|
||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| 'data-collectors': DataCollectorsElement; | ||
| } | ||
| } | ||
|
|
||
| customElements.define(DataCollectorsElement.is, DataCollectorsElement); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <!-- Copyright 2022 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. --> | ||
|
|
||
| <style include="md-select cr-input-style support-tool-shared"> | ||
| #support-case-id { | ||
| height: 32px; | ||
| width: 248px; | ||
| } | ||
|
|
||
| .md-select { | ||
| height: 32px; | ||
| margin-bottom: 30px; | ||
| width: 248px; | ||
| } | ||
|
|
||
| #description { | ||
| /*TODO(b/222669536): Style the description better when UX reviewer of mocks | ||
| gives their input.*/ | ||
| background-color: var(--cr-input-background-color); | ||
| border: none; | ||
| border-radius: var(--cr-input-border-radius, 4px); | ||
| caret-color: var(--cr-input-focus-color); | ||
| color: var(--cr-input-color); | ||
| display: block; | ||
| font-family: inherit; | ||
| height: 120px; | ||
| margin-top: 8px; | ||
| outline: none; | ||
| padding-bottom: 8px; | ||
| padding-inline-start: 10px; | ||
| padding-top: 8px; | ||
| resize: none; | ||
| width: 520px; | ||
| } | ||
| </style> | ||
|
|
||
| <h2>Collect diagnostics data for support</h2> | ||
| <div class="support-tool-title">Support Case ID</div> | ||
| <cr-input id="support-case-id" value="{{caseId_}}" | ||
| spellcheck="false" maxlength="20"> | ||
| </cr-input> | ||
| <div class="support-tool-title">Email</div> | ||
| <select class="md-select" value="{{selectedEmail_::change}}"> | ||
| <option value=""></option> | ||
| <template is="dom-repeat" items="[[emails_]]"> | ||
| <option value="[[item]]">[[item]]</option> | ||
| </template> | ||
| </select> | ||
| <div class="support-tool-title">Describe the issue</div> | ||
| <textarea id="description" value="{{issueDescription_::input}}" | ||
| spellcheck="true" | ||
| placeholder="Provide a clear desciption of the issue and steps to reproduce the issue (if possible)"> | ||
| </textarea> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| // Copyright 2022 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. | ||
|
|
||
| import './strings.m.js'; | ||
| import 'chrome://resources/cr_elements/shared_vars_css.m.js'; | ||
| import 'chrome://resources/cr_elements/cr_input/cr_input.m.js'; | ||
| import 'chrome://resources/cr_elements/md_select_css.m.js'; | ||
| import './support_tool_shared_css.js'; | ||
|
|
||
| import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js'; | ||
| import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; | ||
| import {BrowserProxy, BrowserProxyImpl} from './browser_proxy.js'; | ||
| import {getTemplate} from './issue_details.html.js'; | ||
|
|
||
| export class IssueDetailsElement extends PolymerElement { | ||
| static get is() { | ||
| return 'issue-details'; | ||
| } | ||
|
|
||
| static get template() { | ||
| return getTemplate(); | ||
| } | ||
|
|
||
| static get properties() { | ||
| return { | ||
| caseId_: { | ||
| type: String, | ||
| value: () => loadTimeData.getString('caseId'), | ||
| }, | ||
| emails_: { | ||
| type: Array, | ||
| value: () => [], | ||
| }, | ||
| issueDescription_: { | ||
| type: String, | ||
| value: '', | ||
| }, | ||
| selectedEmail_: { | ||
| type: String, | ||
| value: '', | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| private caseId_: string; | ||
| private emails_: string[]; | ||
| private issueDescription_: string; | ||
| private selectedEmail_: string; | ||
| private browserProxy_: BrowserProxy = BrowserProxyImpl.getInstance(); | ||
|
|
||
| override connectedCallback() { | ||
| super.connectedCallback(); | ||
|
|
||
| this.browserProxy_.getEmailAddresses().then((emails: string[]) => { | ||
| this.emails_ = emails; | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| 'issue-details': IssueDetailsElement; | ||
| } | ||
| } | ||
|
|
||
| customElements.define(IssueDetailsElement.is, IssueDetailsElement); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <!-- Copyright 2022 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. --> | ||
|
|
||
| <style include="support-tool-shared"></style> | ||
|
|
||
| <h2>Collecting diagnostic data</h2> | ||
| <div class="navigation-buttons"> | ||
| <cr-button on-click="onCancelClick_">Cancel</cr-button> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| // Copyright 2022 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. | ||
|
|
||
| import './support_tool_shared_css.js'; | ||
| import 'chrome://resources/cr_elements/cr_button/cr_button.m.js'; | ||
|
|
||
| import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; | ||
| import {getTemplate} from './spinner_page.html.js'; | ||
|
|
||
| export class SpinnerPageElement extends PolymerElement { | ||
| static get is() { | ||
| return 'spinner-page'; | ||
| } | ||
|
|
||
| static get template() { | ||
| return getTemplate(); | ||
| } | ||
|
|
||
| private onCancelClick_() { | ||
| // Send cancel signal to Chrome C++ side using BrowserProxy. It will be | ||
| // added in follow-up CL. | ||
| } | ||
| } | ||
|
|
||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| 'spinner-page': SpinnerPageElement; | ||
| } | ||
| } | ||
|
|
||
| customElements.define(SpinnerPageElement.is, SpinnerPageElement); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.