Skip to content

GitLab

T
tangled
Commit cee65dca authored by Kristi Park's avatar Kristi Park Committed by Commit Bot
Browse files
Options

Revert "[NTP] Position richer picker elements using flexbox" 

This reverts commit 371290bf.

Reason for revert: Flexbox does not play well with the colors menu

Original change's description:
> [NTP] Position richer picker elements using flexbox
> 
> Position elements with flexbox instead of inline-block. This allows us
> to remove the "font-size: 0" hack that fixed the extra space between
> inline-block elements.
> 
> Change-Id: Ie3b6f02281795e60806259a00b2ee948df3b0959
> Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1725334
> Commit-Queue: Kristi Park <kristipark@chromium.org>
> Reviewed-by: Kyle Milka <kmilka@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#688355}

TBR=kristipark@chromium.org,kmilka@chromium.org

# Not skipping CQ checks because original CL landed > 1 day ago.

Change-Id: I4a5a2a70e58e2d1d03d15505d9c5be5b866fe959
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1763340
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: default avatarKristi Park <kristipark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#689196}
parent cb8550aa
Hide whitespace changes
Inline Side-by-side
Showing with 308 additions and 311 deletions
chrome/browser/resources/local_ntp/local_ntp.css
View file @ cee65dca
...@@ -698,6 +698,7 @@ html[dir=rtl] #error-notice.has-link #error-notice-msg { ...@@ -698,6 +698,7 @@ html[dir=rtl] #error-notice.has-link #error-notice-msg {
box-shadow: 0 1px 3px 0 rgba(var(--GG800-rgb), .3), box-shadow: 0 1px 3px 0 rgba(var(--GG800-rgb), .3),
0 4px 8px 3px rgba(var(--GG800-rgb), .15); 0 4px 8px 3px rgba(var(--GG800-rgb), .15);
color: rgb(var(--GG700-rgb)); color: rgb(var(--GG700-rgb));
font-size: 0; /* Remove extra spacing between inline-block elements. */
height: 528px; height: 528px;
min-width: 800px; min-width: 800px;
padding: 0; padding: 0;
...@@ -712,6 +713,10 @@ html[dir=rtl] #error-notice.has-link #error-notice-msg { ...@@ -712,6 +713,10 @@ html[dir=rtl] #error-notice.has-link #error-notice-msg {
} }
} }
#customization-menu > div {
font-size: 13px;
}
#menu-nav-panel { #menu-nav-panel {
display: inline-block; display: inline-block;
height: 384px; height: 384px;
...@@ -880,11 +885,8 @@ html[dir=rtl] .menu-option { ...@@ -880,11 +885,8 @@ html[dir=rtl] .menu-option {
margin-inline-end: 8px; margin-inline-end: 8px;
} }
#menu-inner {
display: flex;
}
#menu-contents { #menu-contents {
display: inline-block;
height: 464px; height: 464px;
margin-inline-start: 40px; margin-inline-start: 40px;
position: relative; position: relative;
...@@ -892,8 +894,6 @@ html[dir=rtl] .menu-option { ...@@ -892,8 +894,6 @@ html[dir=rtl] .menu-option {
} }
.menu-panel { .menu-panel {
display: flex;
flex-flow: wrap;
height: 384px; height: 384px;
left: 0; left: 0;
/* Pad the content by 5px top/left. This will prevent the focus outline on /* Pad the content by 5px top/left. This will prevent the focus outline on
...@@ -916,7 +916,6 @@ html[dir=rtl] .menu-option { ...@@ -916,7 +916,6 @@ html[dir=rtl] .menu-option {
#backgrounds-menu .bg-sel-tile-bg, #backgrounds-menu .bg-sel-tile-bg,
#backgrounds-image-menu .bg-sel-tile-bg { #backgrounds-image-menu .bg-sel-tile-bg {
border-radius: 4px; border-radius: 4px;
display: block;
height: 176px; height: 176px;
margin-bottom: 45px; margin-bottom: 45px;
margin-inline-end: 8px; margin-inline-end: 8px;
...@@ -1002,6 +1001,12 @@ html[dir=rtl] .menu-option { ...@@ -1002,6 +1001,12 @@ html[dir=rtl] .menu-option {
} }
} }
#backgrounds-menu,
#colors-menu {
/* Remove extra spacing between inline-block elements. */
font-size: 0;
}
#backgrounds-upload.bg-sel-tile-bg { #backgrounds-upload.bg-sel-tile-bg {
background-color: transparent; background-color: transparent;
vertical-align: top; vertical-align: top;
...@@ -1569,7 +1574,6 @@ input:checked + .toggle .highlight { ...@@ -1569,7 +1574,6 @@ input:checked + .toggle .highlight {
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
display: block;
height: var(--tile-size); height: var(--tile-size);
margin-bottom: var(--tile-margin); margin-bottom: var(--tile-margin);
margin-inline-end: var(--tile-margin); margin-inline-end: var(--tile-margin);
......
chrome/browser/resources/local_ntp/local_ntp.html
View file @ cee65dca
...@@ -170,176 +170,172 @@ ...@@ -170,176 +170,172 @@
</dialog> </dialog>
<dialog id="customization-menu" class="customize-dialog"> <dialog id="customization-menu" class="customize-dialog">
<div id="menu-inner"> <div id="menu-nav-panel" role="tablist" aria-label="$i18n{customizeMenu}">
<div id="menu-nav-panel" role="tablist" aria-label="$i18n{customizeMenu}"> <button id="backgrounds-button" class="menu-option" tabindex="0"
<button id="backgrounds-button" class="menu-option" tabindex="0" role="tab" aria-controls="backgrounds-menu backgrounds-image-menu"
role="tab" aria-controls="backgrounds-menu backgrounds-image-menu" aria-selected="true" aria-labelledby="backgrounds-menu-option"
aria-selected="true" aria-labelledby="backgrounds-menu-option" title="$i18n{backgroundsOption}">
title="$i18n{backgroundsOption}"> <div class="menu-option-icon-wrapper">
<div class="menu-option-icon-wrapper"> <div id="backgrounds-icon" class="menu-option-icon"></div>
<div id="backgrounds-icon" class="menu-option-icon"></div> </div>
</div> <div id="backgrounds-menu-option" class="menu-option-label">
<div id="backgrounds-menu-option" class="menu-option-label"> $i18n{backgroundsOption}
$i18n{backgroundsOption} </div>
</div> </button>
</button> <button id="shortcuts-button" class="menu-option" tabindex="0" role="tab"
<button id="shortcuts-button" class="menu-option" tabindex="0" aria-controls="shortcuts-menu" aria-selected="false"
role="tab" aria-controls="shortcuts-menu" aria-selected="false" aria-labelledby="shortcuts-menu-option"
aria-labelledby="shortcuts-menu-option" title="$i18n{shortcutsOption}">
title="$i18n{shortcutsOption}"> <div class="menu-option-icon-wrapper">
<div class="menu-option-icon-wrapper"> <div id="shortcuts-icon" class="menu-option-icon"></div>
<div id="shortcuts-icon" class="menu-option-icon"></div> </div>
</div> <div id="shortcuts-menu-option" class="menu-option-label">
<div id="shortcuts-menu-option" class="menu-option-label"> $i18n{shortcutsOption}
$i18n{shortcutsOption} </div>
</div> </button>
</button> <button id="colors-button" class="menu-option" tabindex="0" role="tab"
<button id="colors-button" class="menu-option" tabindex="0" role="tab" aria-controls="colors-menu" aria-selected="false"
aria-controls="colors-menu" aria-selected="false" aria-labelledby="colors-menu-option" title="$i18n{colorsOption}">
aria-labelledby="colors-menu-option" title="$i18n{colorsOption}"> <div class="menu-option-icon-wrapper">
<div class="menu-option-icon-wrapper"> <div id="colors-icon" class="menu-option-icon"></div>
<div id="colors-icon" class="menu-option-icon"></div> </div>
</div> <div id="colors-menu-option" class="menu-option-label">
<div id="colors-menu-option" class="menu-option-label"> $i18n{colorsOption}
$i18n{colorsOption} </div>
</button>
</div>
<div id="menu-contents">
<div id="menu-header">
<div id="menu-back-circle" tabindex="0" role="button"
aria-label="$i18n{backLabel}" title="$i18n{backLabel}">
<div id="menu-back"></div>
</div>
<div id="menu-title">$i18n{customizeMenu}</div>
<div id="refresh-daily-wrapper">
<div id="refresh-toggle-wrapper" title="$i18n{refreshDaily}">
<label class="switch">
<input id="refresh-daily-toggle" type="checkbox"
aria-labelledby="refresh-text"></input>
<span class="toggle">
<div class="knob"></div>
<div class="highlight"></div>
</span>
</label>
</div> </div>
</button> <div id="refresh-text">$i18n{refreshDaily}</div>
</div>
</div> </div>
<div id="menu-contents"> <div id="backgrounds-menu" class="menu-panel" tabindex="0"
<div id="menu-header"> role="tabpanel" aria-label="$i18n{backgroundsOption}">
<div id="menu-back-circle" tabindex="0" role="button" <div id="backgrounds-upload" class="bg-sel-tile-bg">
aria-label="$i18n{backLabel}" title="$i18n{backLabel}"> <div id="backgrounds-upload-icon" class="bg-sel-tile" tabindex="-1"
<div id="menu-back"></div> role="button" aria-label="$i18n{uploadImage}"
</div> aria-pressed="false" title="$i18n{uploadImage}">
<div id="menu-title">$i18n{customizeMenu}</div> <div id="backgrounds-upload-arrow"></div>
<div id="refresh-daily-wrapper"> <div id="backgrounds-upload-text">$i18n{uploadImage}</div>
<div id="refresh-toggle-wrapper" title="$i18n{refreshDaily}">
<label class="switch">
<input id="refresh-daily-toggle" type="checkbox"
aria-labelledby="refresh-text"></input>
<span class="toggle">
<div class="knob"></div>
<div class="highlight"></div>
</span>
</label>
</div>
<div id="refresh-text">$i18n{refreshDaily}</div>
</div> </div>
</div> </div>
<div id="backgrounds-menu" class="menu-panel" tabindex="0" <div id="backgrounds-default" class="bg-sel-tile-bg">
role="tabpanel" aria-label="$i18n{backgroundsOption}"> <div id="backgrounds-default-icon" class="bg-sel-tile" tabindex="-1"
<div id="backgrounds-upload" class="bg-sel-tile-bg"> role="button" aria-label="$i18n{noBackground}"
<div id="backgrounds-upload-icon" class="bg-sel-tile" tabindex="-1" title="$i18n{noBackground}" aria-pressed="false">
role="button" aria-label="$i18n{uploadImage}" <div class="mini-page">
aria-pressed="false" title="$i18n{uploadImage}"> <div class="mini-header-colorful"></div>
<div id="backgrounds-upload-arrow"></div> <div class="mini-shortcuts"></div>
<div id="backgrounds-upload-text">$i18n{uploadImage}</div>
</div> </div>
</div> </div>
<div id="backgrounds-default" class="bg-sel-tile-bg"> <div class="bg-sel-tile-title">$i18n{noBackground}</div>
<div id="backgrounds-default-icon" class="bg-sel-tile" tabindex="-1"
role="button" aria-label="$i18n{noBackground}"
title="$i18n{noBackground}" aria-pressed="false">
<div class="mini-page">
<div class="mini-header-colorful"></div>
<div class="mini-shortcuts"></div>
</div>
</div>
<div class="bg-sel-tile-title">$i18n{noBackground}</div>
</div>
</div> </div>
<div id="backgrounds-image-menu" class="menu-panel" tabindex="0" </div>
role="tabpanel" aria-label="$i18n{backgroundsOption}"></div> <div id="backgrounds-image-menu" class="menu-panel" tabindex="0"
<div id="shortcuts-menu" class="menu-panel" tabindex="0" role="tabpanel" role="tabpanel" aria-label="$i18n{backgroundsOption}"></div>
aria-label="$i18n{shortcutsOption}"> <div id="shortcuts-menu" class="menu-panel" tabindex="0" role="tabpanel"
<div id="sh-options"> aria-label="$i18n{shortcutsOption}">
<div class="sh-option"> <div id="sh-options">
<div id="sh-option-cl" class="sh-option-image" tabindex="-1" <div class="sh-option">
role="button" aria-pressed="false" <div id="sh-option-cl" class="sh-option-image" tabindex="-1"
aria-labelledby="sh-option-cl-title" role="button" aria-pressed="false"
title="$i18n{myShortcuts}"> aria-labelledby="sh-option-cl-title" title="$i18n{myShortcuts}">
<div class="sh-option-icon"></div> <div class="sh-option-icon"></div>
<div class="sh-option-mini"> <div class="sh-option-mini">
<div class="mini-page"> <div class="mini-page">
<div class="mini-header"></div> <div class="mini-header"></div>
<div class="mini-shortcuts"></div> <div class="mini-shortcuts"></div>
</div>
</div> </div>
</div> </div>
<div id="sh-option-cl-title" class="sh-option-title">
$i18n{myShortcuts}
</div>
$i18n{shortcutsCurated}
</div> </div>
<div class="sh-option"> <div id="sh-option-cl-title" class="sh-option-title">
<div id="sh-option-mv" class="sh-option-image" tabindex="-1" $i18n{myShortcuts}
role="button" aria-pressed="false"
aria-labelledby="sh-option-mv-title"
title="$i18n{mostVisited}">
<div class="sh-option-icon"></div>
<div class="sh-option-mini">
<div class="mini-page">
<div class="mini-header"></div>
<div class="mini-shortcuts"></div>
</div>
</div>
</div>
<div id="sh-option-mv-title" class="sh-option-title">
$i18n{mostVisited}
</div>
$i18n{shortcutsSuggested}
</div> </div>
$i18n{shortcutsCurated}
</div> </div>
<div id="sh-hide"> <div class="sh-option">
<div id="sh-hide-icon"></div> <div id="sh-option-mv" class="sh-option-image" tabindex="-1"
<div> role="button" aria-pressed="false"
<div id="sh-hide-title">$i18n{hideShortcuts}</div> aria-labelledby="sh-option-mv-title" title="$i18n{mostVisited}">
$i18n{hideShortcutsDesc} <div class="sh-option-icon"></div>
<div class="sh-option-mini">
<div class="mini-page">
<div class="mini-header"></div>
<div class="mini-shortcuts"></div>
</div>
</div>
</div> </div>
<div id="sh-hide-toggle-wrapper" title="$i18n{hideShortcuts}"> <div id="sh-option-mv-title" class="sh-option-title">
<label class="switch"> $i18n{mostVisited}
<input id="sh-hide-toggle" type="checkbox" tabindex="-1"
aria-labelledby="sh-hide-title"></input>
<span class="toggle">
<div class="knob"></div>
<div class="highlight"></div>
</span>
</label>
</div> </div>
$i18n{shortcutsSuggested}
</div> </div>
</div> </div>
<div id="colors-menu" class="menu-panel" tabindex="0" role="tabpanel" <div id="sh-hide">
aria-label="$i18n{colorsOption}"> <div id="sh-hide-icon"></div>
<div id="colors-theme" tabindex="0"> <div>
<div id="colors-theme-icon"></div> <div id="sh-hide-title">$i18n{hideShortcuts}</div>
<div> $i18n{hideShortcutsDesc}
<div id="colors-theme-name"></div>
$i18n{installedThemeDesc}
</div>
<a id="colors-theme-link" target="_blank">
<div id="colors-theme-link-icon" > </div>
</a>
<button id="colors-theme-uninstall" class="paper secondary">
$i18n{uninstallButton}
</button>
</div> </div>
<div id="color-picker-container" class="bg-sel-tile-bg"> <div id="sh-hide-toggle-wrapper" title="$i18n{hideShortcuts}">
<div id="color-picker-tile" class="bg-sel-tile" tabindex="-1" <label class="switch">
aria-label="$i18n{colorPickerLabel}" <input id="sh-hide-toggle" type="checkbox" tabindex="-1"
title="$i18n{colorPickerLabel}" aria-labelledby="sh-hide-title"></input>
role="button" aria-pressed="false"> <span class="toggle">
<div id="left-semicircle"></div> <div class="knob"></div>
<div id="color-picker-icon"></div> <div class="highlight"></div>
<input id="color-picker" type="color" style="display:none"> </span>
</input> </label>
</div>
</div> </div>
<div id="colors-default" class="bg-sel-tile-bg"> </div>
<div id="colors-default-icon" class="bg-sel-tile" tabindex="-1" </div>
aria-label="$i18n{defaultThemeLabel}" <div id="colors-menu" class="menu-panel" tabindex="0" role="tabpanel"
title="$i18n{defaultThemeLabel}" tabindex="-1" aria-label="$i18n{colorsOption}">
role="button" aria-pressed="false"> <div id="colors-theme" tabindex="0">
<div id="colors-theme-icon"></div>
<div>
<div id="colors-theme-name"></div>
$i18n{installedThemeDesc}
</div> </div>
<a id="colors-theme-link" target="_blank">
<div id="colors-theme-link-icon" > </div>
</a>
<button id="colors-theme-uninstall" class="paper secondary">
$i18n{uninstallButton}
</button>
</div>
<div id="color-picker-container" class="bg-sel-tile-bg">
<div id="color-picker-tile" class="bg-sel-tile" tabindex="-1"
aria-label="$i18n{colorPickerLabel}"
title="$i18n{colorPickerLabel}"
role="button" aria-pressed="false">
<div id="left-semicircle"></div>
<div id="color-picker-icon"></div>
<input id="color-picker" type="color" style="display:none">
</input>
</div>
</div>
<div id="colors-default" class="bg-sel-tile-bg">
<div id="colors-default-icon" class="bg-sel-tile" tabindex="-1"
aria-label="$i18n{defaultThemeLabel}"
title="$i18n{defaultThemeLabel}" tabindex="-1"
role="button" aria-pressed="false">
</div> </div>
</div> </div>
</div> </div>
......
chrome/test/data/local_ntp/local_ntp_browsertest.html
View file @ cee65dca
...@@ -160,177 +160,174 @@ ...@@ -160,177 +160,174 @@
</dialog> </dialog>
<dialog id="customization-menu" class="customize-dialog"> <dialog id="customization-menu" class="customize-dialog">
<div id="menu-inner"> <div id="menu-nav-panel" role="tablist" aria-label="$i18n{customizeMenu}">
<div id="menu-nav-panel" role="tablist" <button id="backgrounds-button" class="menu-option" tabindex="0"
aria-label="$i18n{customizeMenu}"> role="tab" aria-controls="backgrounds-menu backgrounds-image-menu"
<button id="backgrounds-button" class="menu-option" tabindex="0" aria-selected="true" aria-labelledby="backgrounds-menu-option"
role="tab" aria-controls="backgrounds-menu backgrounds-image-menu" title="$i18n{backgroundsOption}">
aria-selected="true" aria-labelledby="backgrounds-menu-option" <div class="menu-option-icon-wrapper">
title="$i18n{backgroundsOption}"> <div id="backgrounds-icon" class="menu-option-icon"></div>
<div class="menu-option-icon-wrapper"> </div>
<div id="backgrounds-icon" class="menu-option-icon"></div> <div id="backgrounds-menu-option" class="menu-option-label">
</div> $i18n{backgroundsOption}
<div id="backgrounds-menu-option" class="menu-option-label"> </div>
$i18n{backgroundsOption} </button>
</div> <button id="shortcuts-button" class="menu-option" tabindex="0"
</button> role="tab" aria-controls="shortcuts-menu" aria-selected="false"
<button id="shortcuts-button" class="menu-option" tabindex="0" aria-labelledby="shortcuts-menu-option"
role="tab" aria-controls="shortcuts-menu" aria-selected="false" title="$i18n{shortcutsOption}">
aria-labelledby="shortcuts-menu-option" <div class="menu-option-icon-wrapper">
title="$i18n{shortcutsOption}"> <div id="shortcuts-icon" class="menu-option-icon"></div>
<div class="menu-option-icon-wrapper"> </div>
<div id="shortcuts-icon" class="menu-option-icon"></div> <div id="shortcuts-menu-option" class="menu-option-label">
</div> $i18n{shortcutsOption}
<div id="shortcuts-menu-option" class="menu-option-label"> </div>
$i18n{shortcutsOption} </button>
</div> <button id="colors-button" class="menu-option" tabindex="0" role="tab"
</button> aria-controls="colors-menu" aria-selected="false"
<button id="colors-button" class="menu-option" tabindex="0" role="tab" aria-labelledby="colors-menu-option" title="$i18n{colorsOption}">
aria-controls="colors-menu" aria-selected="false" <div class="menu-option-icon-wrapper">
aria-labelledby="colors-menu-option" title="$i18n{colorsOption}"> <div id="colors-icon" class="menu-option-icon"></div>
<div class="menu-option-icon-wrapper"> </div>
<div id="colors-icon" class="menu-option-icon"></div> <div id="colors-menu-option" class="menu-option-label">
</div> $i18n{colorsOption}
<div id="colors-menu-option" class="menu-option-label"> </div>
$i18n{colorsOption} </button>
</div>
<div id="menu-contents">
<div id="menu-header">
<div id="menu-back-circle" tabindex="0" role="button"
aria-label="$i18n{backLabel}" title="$i18n{backLabel}">
<div id="menu-back"></div>
</div>
<div id="menu-title">$i18n{customizeMenu}</div>
<div id="refresh-daily-wrapper">
<div id="refresh-toggle-wrapper" title="$i18n{refreshDaily}">
<label class="switch">
<input id="refresh-daily-toggle" type="checkbox"
aria-labelledby="refresh-text"></input>
<span class="toggle">
<div class="knob"></div>
<div class="highlight"></div>
</span>
</label>
</div> </div>
</button> <div id="refresh-text">$i18n{refreshDaily}</div>
</div>
</div> </div>
<div id="menu-contents"> <div id="backgrounds-menu" class="menu-panel" tabindex="0"
<div id="menu-header"> role="tabpanel" aria-label="$i18n{backgroundsOption}">
<div id="menu-back-circle" tabindex="0" role="button" <div id="backgrounds-upload" class="bg-sel-tile-bg">
aria-label="$i18n{backLabel}" title="$i18n{backLabel}"> <div id="backgrounds-upload-icon" class="bg-sel-tile" tabindex="-1"
<div id="menu-back"></div> role="button" aria-label="$i18n{uploadImage}"
</div> aria-pressed="false" title="$i18n{uploadImage}">
<div id="menu-title">$i18n{customizeMenu}</div> <div id="backgrounds-upload-arrow"></div>
<div id="refresh-daily-wrapper"> <div id="backgrounds-upload-text">$i18n{uploadImage}</div>
<div id="refresh-toggle-wrapper" title="$i18n{refreshDaily}">
<label class="switch">
<input id="refresh-daily-toggle" type="checkbox"
aria-labelledby="refresh-text"></input>
<span class="toggle">
<div class="knob"></div>
<div class="highlight"></div>
</span>
</label>
</div>
<div id="refresh-text">$i18n{refreshDaily}</div>
</div> </div>
</div> </div>
<div id="backgrounds-menu" class="menu-panel" tabindex="0" <div id="backgrounds-default" class="bg-sel-tile-bg">
role="tabpanel" aria-label="$i18n{backgroundsOption}"> <div id="backgrounds-default-icon" class="bg-sel-tile" tabindex="-1"
<div id="backgrounds-upload" class="bg-sel-tile-bg"> role="button" aria-label="$i18n{noBackground}"
<div id="backgrounds-upload-icon" class="bg-sel-tile" title="$i18n{noBackground}" aria-pressed="false">
tabindex="-1" role="button" aria-label="$i18n{uploadImage}" <div class="mini-page">
aria-pressed="false" title="$i18n{uploadImage}"> <div class="mini-header-colorful"></div>
<div id="backgrounds-upload-arrow"></div> <div class="mini-shortcuts"></div>
<div id="backgrounds-upload-text">$i18n{uploadImage}</div>
</div> </div>
</div> </div>
<div id="backgrounds-default" class="bg-sel-tile-bg"> <div class="bg-sel-tile-title">$i18n{noBackground}</div>
<div id="backgrounds-default-icon" class="bg-sel-tile"
tabindex="-1" role="button" aria-label="$i18n{noBackground}"
title="$i18n{noBackground}" aria-pressed="false">
<div class="mini-page">
<div class="mini-header-colorful"></div>
<div class="mini-shortcuts"></div>
</div>
</div>
<div class="bg-sel-tile-title">$i18n{noBackground}</div>
</div>
</div> </div>
<div id="backgrounds-image-menu" class="menu-panel" tabindex="0" </div>
role="tabpanel" aria-label="$i18n{backgroundsOption}"></div> <div id="backgrounds-image-menu" class="menu-panel" tabindex="0"
<div id="shortcuts-menu" class="menu-panel" tabindex="0" role="tabpanel" aria-label="$i18n{backgroundsOption}"></div>
role="tabpanel" aria-label="$i18n{shortcutsOption}"> <div id="shortcuts-menu" class="menu-panel" tabindex="0" role="tabpanel"
<div id="sh-options"> aria-label="$i18n{shortcutsOption}">
<div class="sh-option"> <div id="sh-options">
<div id="sh-option-cl" class="sh-option-image" tabindex="-1" <div class="sh-option">
role="button" aria-pressed="false" <div id="sh-option-cl" class="sh-option-image" tabindex="-1"
aria-labelledby="sh-option-cl-title" role="button" aria-pressed="false"
title="$i18n{myShortcuts}"> aria-labelledby="sh-option-cl-title"
<div class="sh-option-icon"></div> title="$i18n{myShortcuts}">
<div class="sh-option-mini"> <div class="sh-option-icon"></div>
<div class="mini-page"> <div class="sh-option-mini">
<div class="mini-header"></div> <div class="mini-page">
<div class="mini-shortcuts"></div> <div class="mini-header"></div>
</div> <div class="mini-shortcuts"></div>
</div> </div>
</div> </div>
<div id="sh-option-cl-title" class="sh-option-title">
$i18n{myShortcuts}
</div>
$i18n{shortcutsCurated}
</div> </div>
<div class="sh-option"> <div id="sh-option-cl-title" class="sh-option-title">
<div id="sh-option-mv" class="sh-option-image" tabindex="-1" $i18n{myShortcuts}
role="button" aria-pressed="false"
aria-labelledby="sh-option-mv-title"
title="$i18n{mostVisited}">
<div class="sh-option-icon"></div>
<div class="sh-option-mini">
<div class="mini-page">
<div class="mini-header"></div>
<div class="mini-shortcuts"></div>
</div>
</div>
</div>
<div id="sh-option-mv-title" class="sh-option-title">
$i18n{mostVisited}
</div>
$i18n{shortcutsSuggested}
</div> </div>
$i18n{shortcutsCurated}
</div> </div>
<div id="sh-hide"> <div class="sh-option">
<div id="sh-hide-icon"></div> <div id="sh-option-mv" class="sh-option-image" tabindex="-1"
<div> role="button" aria-pressed="false"
<div id="sh-hide-title">$i18n{hideShortcuts}</div> aria-labelledby="sh-option-mv-title"
$i18n{hideShortcutsDesc} title="$i18n{mostVisited}">
<div class="sh-option-icon"></div>
<div class="sh-option-mini">
<div class="mini-page">
<div class="mini-header"></div>
<div class="mini-shortcuts"></div>
</div>
</div>
</div> </div>
<div id="sh-hide-toggle-wrapper" title="$i18n{hideShortcuts}"> <div id="sh-option-mv-title" class="sh-option-title">
<label class="switch"> $i18n{mostVisited}
<input id="sh-hide-toggle" type="checkbox" tabindex="-1"
aria-labelledby="sh-hide-title"></input>
<span class="toggle">
<div class="knob"></div>
<div class="highlight"></div>
</span>
</label>
</div> </div>
$i18n{shortcutsSuggested}
</div> </div>
</div> </div>
<div id="colors-menu" class="menu-panel" tabindex="0" role="tabpanel" <div id="sh-hide">
aria-label="$i18n{colorsOption}"> <div id="sh-hide-icon"></div>
<div id="colors-theme" tabindex="0"> <div>
<div id="colors-theme-icon"></div> <div id="sh-hide-title">$i18n{hideShortcuts}</div>
<div> $i18n{hideShortcutsDesc}
<div id="colors-theme-name"></div>
$i18n{installedThemeDesc}
</div>
<a id="colors-theme-link" target="_blank">
<div id="colors-theme-link-icon" > </div>
</a>
<button id="colors-theme-uninstall" class="paper secondary">
$i18n{uninstallButton}
</button>
</div> </div>
<div id="color-picker-container" class="bg-sel-tile-bg"> <div id="sh-hide-toggle-wrapper" title="$i18n{hideShortcuts}">
<div id="color-picker-tile" class="bg-sel-tile" tabindex="-1" <label class="switch">
aria-label="$i18n{colorPickerLabel}" <input id="sh-hide-toggle" type="checkbox" tabindex="-1"
title="$i18n{colorPickerLabel}" aria-labelledby="sh-hide-title"></input>
role="button" aria-pressed="false"> <span class="toggle">
<div id="left-semicircle"></div> <div class="knob"></div>
<div id="color-picker-icon"></div> <div class="highlight"></div>
<input id="color-picker" type="color" style="display:none"> </span>
</input> </label>
</div>
</div> </div>
<div id="colors-default" class="bg-sel-tile-bg"> </div>
<div id="colors-default-icon" class="bg-sel-tile" tabindex="-1" </div>
aria-label="$i18n{defaultThemeLabel}" <div id="colors-menu" class="menu-panel" tabindex="0" role="tabpanel"
title="$i18n{defaultThemeLabel}" tabindex="-1" aria-label="$i18n{colorsOption}">
role="button" aria-pressed="false"> <div id="colors-theme" tabindex="0">
<div id="colors-theme-icon"></div>
<div>
<div id="colors-theme-name"></div>
$i18n{installedThemeDesc}
</div> </div>
<a id="colors-theme-link" target="_blank">
<div id="colors-theme-link-icon" > </div>
</a>
<button id="colors-theme-uninstall" class="paper secondary">
$i18n{uninstallButton}
</button>
</div>
<div id="color-picker-container" class="bg-sel-tile-bg">
<div id="color-picker-tile" class="bg-sel-tile" tabindex="-1"
aria-label="$i18n{colorPickerLabel}"
title="$i18n{colorPickerLabel}"
role="button" aria-pressed="false">
<div id="left-semicircle"></div>
<div id="color-picker-icon"></div>
<input id="color-picker" type="color" style="display:none">
</input>
</div>
</div>
<div id="colors-default" class="bg-sel-tile-bg">
<div id="colors-default-icon" class="bg-sel-tile" tabindex="-1"
aria-label="$i18n{defaultThemeLabel}"
title="$i18n{defaultThemeLabel}" tabindex="-1"
role="button" aria-pressed="false">
</div> </div>
</div> </div>
</div> </div>
......
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