| <style include="cr-shared-style shimless-rma-shared shimless-fonts"> |
| :host { |
| --device-info-input-width: 336px; |
| /* Height of the shadows that are added by CrContainerShadowMixin. */ |
| --shadow-height: 20px; |
| /* This inverted margin "pulls" in the content below/above it, so the shadow |
| * overlaps the content. The 2px is an optical adjustment. */ |
| --shadow-negative-margin: calc(2px + calc(-1 * var(--shadow-height))); |
| } |
| |
| hr { |
| border: 0; |
| border-top: 1px solid var(--cros-separator-color); |
| display: block; |
| height: 1px; |
| margin-bottom: 16px; |
| margin-inline-start: 0; |
| margin-top: 0; |
| transition: opacity 250ms ease; |
| /* 90px is the width (including margins) of the revert button to the right |
| * of each input. */ |
| width: calc(var(--device-info-input-width) + 90px); |
| } |
| |
| .wrapper #cr-container-shadow-top, |
| .wrapper #cr-container-shadow-bottom { |
| background: linear-gradient(180deg, rgba(0,0,0,0.05), transparent); |
| box-shadow: none; |
| height: var(--shadow-height); |
| } |
| |
| .wrapper #cr-container-shadow-top { |
| margin-bottom: var(--shadow-negative-margin); |
| } |
| |
| .wrapper #cr-container-shadow-bottom { |
| margin-top: var(--shadow-negative-margin); |
| } |
| |
| /* Hide the compliance info horizontal line when the bottom shadow is present |
| * to avoid unsightly overlap. */ |
| .wrapper:has(#cr-container-shadow-bottom.has-shadow) hr { |
| opacity: 0; |
| } |
| |
| /* Show the compliance info horizontal line when the bottom shadow is gone. */ |
| .wrapper:not(:has(#cr-container-shadow-bottom.has-shadow)) hr { |
| opacity: 1; |
| } |
| |
| .input-wrapper { |
| display: flex; |
| flex-direction: column; |
| justify-content: flex-start; |
| overflow-y: auto; |
| /* Add padding on the left so the inputs don't get visually cropped. */ |
| padding-inline-start: 2px; |
| } |
| |
| /* |
| * This CSS block is necessary for the correct functioning of the |
| * CrContainerShadowMixin intersection probe: that mixin uses an empty div |
| * with the IntersectionObserver API to track when the scroll container is |
| * scrolled all the way to the bottom (to hide/show the bottom shadow). |
| * When the scroll container has height 100%, the intersection probe div will |
| * never trigger, causing the bottom shadow to never disappear. This block |
| * of CSS moves the element up slightly so that it works correctly. |
| */ |
| .input-wrapper > div:last-of-type { |
| position: relative; |
| top: -1px; |
| } |
| |
| .input-row { |
| margin-bottom: 30px; |
| } |
| |
| .input-holder { |
| align-items: center; |
| display: flex; |
| } |
| |
| cr-button { |
| border: 0; |
| margin-top: auto; |
| } |
| |
| .sku-warning { |
| color: var(--shimless-warning-text-color); |
| display: flex; |
| font-family: var(--shimless-warning-font-family); |
| font-size: var(--shimless-warning-font-size); |
| font-weight: var(--shimless-regular-font-weight); |
| line-height: var(--shimless-warning-line-height); |
| max-width: 400px; |
| } |
| |
| cr-input { |
| --cr-input-error-display: none; |
| --cr-form-field-label-color: var(--shimless-hint-text-color); |
| margin-inline-end: 20px; |
| } |
| |
| select { |
| margin-inline-end: 20px; |
| } |
| |
| .cr-form-field-label { |
| color: var(--shimless-hint-text-color); |
| font-family: var(--shimless-hint-font-family); |
| font-size: var(--shimless-hint-font-size); |
| font-weight: var(--shimless-medium-font-weight); |
| line-height: var(--shimless-hint-line-height); |
| } |
| |
| cr-input, |
| .md-select { |
| width: var(--device-info-input-width); |
| } |
| |
| .label-wrapper { |
| align-items: center; |
| display: inline-flex; |
| vertical-align: middle; |
| } |
| |
| .info-icon { |
| color: var(--shimless-hint-text-color); |
| display: inline-block; |
| height: 18px; |
| margin-inline-start: 6px; |
| position: relative; |
| top: -5px; |
| width: 18px; |
| } |
| |
| .tooltip-content { |
| line-height: var(--shimless-instructions-line-height); |
| } |
| |
| #complianceWarning { |
| align-items: center; |
| /* We're using this hex color, which corresponds to google_orange_900 in |
| * cros_palette.json5, because there is no shared variable for the color. */ |
| color: #b06000; |
| display: flex; |
| margin-top: 2px; |
| } |
| |
| #complianceWarning iron-icon { |
| display: inline-block; |
| height: 18px; |
| margin-inline-end: 6px; |
| width: 18px; |
| } |
| |
| .required-field-asterisk { |
| color: var(--cros-text-color-alert); |
| margin-inline-start: 3px; |
| } |
| |
| .wrapper { |
| display: flex; |
| flex-direction: column; |
| height: 100%; |
| } |
| </style> |
| |
| <base-page> |
| <div slot="left-pane"> |
| <h1 tabindex="-1">[[i18n('confirmDeviceInfoTitle')]]</h1> |
| <div class="instructions"> |
| [[i18n('confirmDeviceInfoInstructions')]] |
| </div> |
| </div> |
| <div slot="right-pane"> |
| <div class="wrapper"> |
| <!-- The #container ID is necessary for the CrContainerShadowMixin to work. --> |
| <div id="container" class="input-wrapper" |
| show-bottom-shadow> |
| <div hidden="[[!shouldShowComplianceSection(featureLevel)]]"> |
| <div hidden="[[isComplianceStatusKnown(featureLevel)]]"> |
| <div class="input-row"> |
| <div class="label-wrapper"> |
| <label id="isChassisBrandedLabel" class="cr-form-field-label"> |
| [[i18n('confirmDeviceInfoDeviceQuestionIsBranded')]] |
| </label> |
| <span class="required-field-asterisk cr-form-field-label" |
| aria-hidden="true"> |
| * |
| </span> |
| </div> |
| <div class="input-holder"> |
| <select id="isChassisBranded" class="md-select" |
| on-change="onIsChassisBrandedChange" |
| aria-labelledby="isChassisBrandedLabel" |
| disabled="[[allButtonsDisabled]]"> |
| <option value="[[booleanOrDefaultOptions.DEFAULT]]"> |
| [[i18n('confirmDeviceInfoDeviceAnswerDefault')]] |
| </option> |
| <option value="[[booleanOrDefaultOptions.NO]]"> |
| [[i18n('confirmDeviceInfoDeviceAnswerNo')]] |
| </option> |
| <option value="[[booleanOrDefaultOptions.YES]]"> |
| [[i18n('confirmDeviceInfoDeviceAnswerYes')]] |
| </option> |
| </select> |
| </div> |
| </div> |
| <div class="input-row"> |
| <div class="label-wrapper"> |
| <label id="doesMeetRequirementsLabel" class="cr-form-field-label"> |
| [[i18n('confirmDeviceInfoDeviceQuestionDoesMeetRequirements')]] |
| </label> |
| <span class="required-field-asterisk cr-form-field-label" |
| aria-hidden="true"> |
| * |
| </span> |
| <iron-icon icon="shimless-icon:info" class="info-icon" |
| id="requirements-icon"> |
| </iron-icon> |
| <paper-tooltip for="requirements-icon" aria-hidden="true"> |
| <div class="tooltip-content"> |
| [[i18n('confirmDeviceInfoDeviceQuestionDoesMeetRequirementsTooltip')]] |
| </div> |
| </paper-tooltip> |
| </div> |
| <div class="input-holder"> |
| <select id="doesMeetRequirements" class="md-select" |
| on-change="onDoesMeetRequirementsChange" |
| aria-labelledby="doesMeetRequirementsLabel" |
| disabled="[[allButtonsDisabled]]"> |
| <option value="[[booleanOrDefaultOptions.DEFAULT]]"> |
| [[i18n('confirmDeviceInfoDeviceAnswerDefault')]] |
| </option> |
| <option value="[[booleanOrDefaultOptions.NO]]"> |
| [[i18n('confirmDeviceInfoDeviceAnswerNo')]] |
| </option> |
| <option value="[[booleanOrDefaultOptions.YES]]"> |
| [[i18n('confirmDeviceInfoDeviceAnswerYes')]] |
| </option> |
| </select> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="input-row"> |
| <div class="input-holder"> |
| <cr-input id="serialNumber" value="{{serialNumber}}" |
| label="[[i18n('confirmDeviceInfoSerialNumberLabel')]]" |
| disabled="[[allButtonsDisabled]]"> |
| </cr-input> |
| <cr-button id="resetSerialNumber" |
| on-click="onResetSerialNumberButtonClicked" |
| disabled="[[disableResetSerialNumber]]" |
| aria-description="[[i18n('confirmDeviceInfoSerialNumberLabel')]]"> |
| [[i18n('confirmDeviceInfoResetButtonLabel')]] |
| </cr-button> |
| </div> |
| </div> |
| <div class="input-row"> |
| <div class="input-holder"> |
| <cr-input id="dramPartNumber" value="{{dramPartNumber}}" |
| label="[[i18n('confirmDeviceInfoDramPartNumberLabel')]]" |
| disabled="[[allButtonsDisabled]]"> |
| </cr-input> |
| <cr-button id="resetDramPartNumber" |
| on-click="onResetDramPartNumberButtonClicked" |
| disabled="[[disableResetDramPartNumber]]" |
| aria-description="[[i18n('confirmDeviceInfoDramPartNumberLabel')]]"> |
| [[i18n('confirmDeviceInfoResetButtonLabel')]] |
| </cr-button> |
| </div> |
| </div> |
| <div class="input-row"> |
| <label id="regionLabel" class="cr-form-field-label"> |
| [[i18n('confirmDeviceInfoRegionLabel')]] |
| </label> |
| <div class="input-holder"> |
| <select id="regionSelect" class="md-select" |
| on-change="onSelectedRegionChange" aria-labelledby="regionLabel" |
| disabled="[[allButtonsDisabled]]"> |
| <template is="dom-repeat" items="[[regions]]" as="region"> |
| <option value="[[region]]"> |
| [[region]] |
| </option> |
| </template> |
| </select> |
| <cr-button id="resetRegion" on-click="onResetRegionButtonClicked" |
| disabled="[[disableResetRegion]]" |
| aria-describedby="regionLabel"> |
| [[i18n('confirmDeviceInfoResetButtonLabel')]] |
| </cr-button> |
| </div> |
| </div> |
| <div class="input-row"> |
| <label id="customLabelLabel" class="cr-form-field-label"> |
| [[i18n('confirmDeviceInfoCustomLabelLabel')]] |
| </label> |
| <div class="input-holder"> |
| <select id="customLabelSelect" class="md-select" |
| on-change="onSelectedCustomLabelChange" |
| aria-labelledby="customLabelLabel" |
| disabled="[[allButtonsDisabled]]"> |
| <template is="dom-repeat" items="[[customLabels]]" as="customLabel"> |
| <option value="[[customLabel]]"> |
| [[customLabel]] |
| </option> |
| </template> |
| </select> |
| <cr-button id="resetCustomLabel" |
| on-click="onResetCustomLabelButtonClicked" |
| disabled="[[disableResetCustomLabel]]" |
| aria-describedby="customLabelLabel"> |
| [[i18n('confirmDeviceInfoResetButtonLabel')]] |
| </cr-button> |
| </div> |
| </div> |
| <div class="label-wrapper"> |
| <label id="skuLabel" class="cr-form-field-label"> |
| [[i18n('confirmDeviceInfoSkuLabel')]] |
| </label> |
| <iron-icon id="skuIcon" icon="shimless-icon:info" class="info-icon"> |
| </iron-icon> |
| <paper-tooltip for="skuIcon" aria-hidden="true"> |
| <div class="tooltip-content"> |
| [[i18n('confirmDeviceInfoSkuWarning')]] |
| </div> |
| </paper-tooltip> |
| </div> |
| <div class="input-holder input-row"> |
| <select id="skuSelect" class="md-select" |
| on-change="onSelectedSkuChange" aria-labelledby="skuLabel" |
| disabled="[[allButtonsDisabled]]"> |
| <template is="dom-repeat" items="[[skus]]" as="sku"> |
| <option value="[[sku]]"> |
| [[sku]] |
| </option> |
| </template> |
| </select> |
| <cr-button id="resetSku" on-click="onResetSkuButtonClicked" |
| disabled="[[disableResetSku]]" |
| aria-describedby="skuLabel"> |
| [[i18n('confirmDeviceInfoResetButtonLabel')]] |
| </cr-button> |
| </div> |
| </div> |
| <div hidden="[[!shouldShowComplianceSection(featureLevel)]]"> |
| <div hidden="[[!isComplianceStatusKnown(featureLevel)]]"> |
| <hr aria-hidden="true"> |
| <div class="input-row"> |
| <div class="compliance-status-string"> |
| [[getComplianceStatusString(featureLevel)]] |
| </div> |
| <div id="complianceWarning"> |
| <iron-icon icon="shimless-icon:info"></iron-icon> |
| <span> |
| [[i18n('confirmDeviceInfoDeviceComplianceWarning')]] |
| </span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </base-page> |
