chrome/browser/resources/chromeos/oobe.html - Issue 7058048: [cros] Layout for OOBE WebUI.

Side by Side Diff: chrome/browser/resources/chromeos/oobe.html

Issue 7058048: [cros] Layout for OOBE WebUI. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src

Patch Set: add select.css Created 9 years, 6 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch | Annotate | Revision Log

« chrome/browser/resources/chromeos/oobe.css ('K') | « chrome/browser/resources/chromeos/oobe.css ('k') | chrome/browser/resources/chromeos/oobe.js » ('j') | chrome/browser/resources/chromeos/oobe.js » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE HTML>	1 <!DOCTYPE HTML>

2 <html i18n-values="dir:textdirection">	2 <html i18n-values="dir:textdirection">

3 <head>	3 <head>

4 <title i18n-content="title"></title>	4 <title i18n-content="title"></title>

	5 <link rel="stylesheet" href="chrome://resources/css/button.css">

	6 <link rel="stylesheet" href="chrome://resources/css/select.css">

5 <link rel="stylesheet" href="oobe.css">	7 <link rel="stylesheet" href="oobe.css">

	8 <script src="chrome://resources/js/cr.js"></script>

	9 <script src="chrome://resources/js/cr/event_target.js"></script>

	10 <script src="chrome://resources/js/local_strings.js"></script>

	11 <script src="chrome://resources/js/util.js"></script>

	12 <script src="oobe.js"></script>

6 </head>	13 </head>

7 <body i18n-values=".style.fontFamily:fontfamily;">	14 <body i18n-values=".style.fontFamily:fontfamily;">

	15 <div id="oobe" class="connect">

	16 <div id="outer-container">

	17 <div id="header">

	18 <span i18n-content="productName"></span>

	19 <div id="header-sections">

	20 <span id="hconnect" class="header-section" i18n-content="welcomeScreen Title"></span>
	Evan Stade 2011/06/07 03:25:46 don't abbreviate for variable names (hconnect->hea don't abbreviate for variable names (hconnect->headerConnect or something) actually, do you even need to give this an ID? where is the ID used? Nikita (slow) 2011/06/07 17:03:36 It's used in JS: var oldheader = $("h" + steps[thi Show quoted text On 2011/06/07 03:25:46, Evan Stade wrote: > actually, do you even need to give this an ID? where is the ID used? It's used in JS: var oldheader = $("h" + steps[this.current_step_]); var newheader = $("h" + steps[this.current_step_ + offset]); Nikita (slow) 2011/06/07 17:03:36 Done. Show quoted text On 2011/06/07 03:25:46, Evan Stade wrote: > don't abbreviate for variable names (hconnect->headerConnect or something) Done.
	21 <span id="heula" class="header-section right" i18n-content="eulaScreen Title"></span>

	22 <span id="hupdate" class="header-section right" i18n-content="updateSc reenTitle"></span>
	Evan Stade 2011/06/07 03:25:46 80 still applies even in html and css files 80 still applies even in html and css files Nikita (slow) 2011/06/07 17:03:36 Done. Show quoted text On 2011/06/07 03:25:46, Evan Stade wrote: > 80 still applies even in html and css files Done.
	23 </div>

	24 </div>

	25 <hr class="topshadow">

	26 <div id="inner-container">

	27 <div class="step" id="connect">

	28 <table>
	Evan Stade 2011/06/07 03:25:46 I'm skeptical you really want a table, this doesn' I'm skeptical you really want a table, this doesn't look like tabular data. Nikita (slow) 2011/06/07 17:03:36 I've using this layout mostly as-is done by the de Show quoted text On 2011/06/07 03:25:46, Evan Stade wrote: > I'm skeptical you really want a table, this doesn't look like tabular data. I've using this layout mostly as-is done by the designers. I understand that using table is not the best approach but could it be left for now to speed up development of related backend changes? Initially I've had these 3 controls defined with divs, see http://codereview.chromium.org/7076014/diff/6001/chrome/browser/resources/chr... and corresponding CSS but that had issues with vertical alignment of the text in case of longer i18n string translations. I would like to switch to divs in future CLs, when I'll create a proper flexible layout.
	29 <tr height='40px'>

	30 <td width='200px' i18n-content="languageSelect"></td>

	31 <td>

	32 <select id='language-select'></select>

	33 </td>

	34 </tr>

	35 <tr height='40px'>

	36 <td i18n-content="keyboardSelect"></td>

	37 <td>

	38 <select id='keyboard-select'></select>

	39 </td>

	40 </tr>

	41 <tr height='40px'>
	Evan Stade 2011/06/07 03:25:46 do not use height attribute do not use height attribute Nikita (slow) 2011/06/07 17:03:36 At all or move it to css style? Show quoted text On 2011/06/07 03:25:46, Evan Stade wrote: > do not use height attribute At all or move it to css style? Evan Stade 2011/06/08 19:56:07 move to css Show quoted text On 2011/06/07 17:03:36, Nikita Kostylev wrote: > On 2011/06/07 03:25:46, Evan Stade wrote: > > do not use height attribute > > At all or move it to css style? move to css Nikita (slow) 2011/06/08 22:28:27 Not needed any more. Show quoted text On 2011/06/08 19:56:07, Evan Stade wrote: > On 2011/06/07 17:03:36, Nikita Kostylev wrote: > > On 2011/06/07 03:25:46, Evan Stade wrote: > > > do not use height attribute > > > > At all or move it to css style? > > move to css Not needed any more.
	42 <td i18n-content="networkSelect"></td>

	43 <td>

	44 <!-- TODO(nkostylev): Embed network control in a separate window . -->

	45 </td>

	46 </tr>

	47 </table>

	48 </div>

	49 <div class="step right hidden" id="eula">

	50 <div id="eulas" class="eula-columns one-column">

	51 <div id="cros-eula">

	52 <iframe id="cros-eula-frame" class="eula-frame" src="chrome://abou t/terms"></iframe>

	53 </div>

	54 <div id="oem-eula"><iframe id="oem-eula-frame" class="eula-frame"></ iframe></div>

	55 </div>

	56 <p id="logging">

	57 <input type="checkbox"/><span i18n-content="checkboxLogging"></span>

	58 <a id="stats-help-link" href="#" i18n-content="learnMore"></a>

	59 </p>

	60 </div>

	61 <div class="step right hidden" id="update">

	62 <div>

	63 <p i18n-content="installingUpdate"></p>

	64 <progress id="" max="100" value="0"></progress>

	65 <p i18n-content="installingUpdateDesc"></p>

	66 </div>

	67 </div>

	68 </div> <!-- Inner Container -->

	69 <hr class="bottomshadow">

	70 <div id="footer">

	71 <div id="progress">

	72 <div id="connect-dot" class="progdot"></div>

	73 <div id="eula-dot" class="progdot"></div>

	74 <div id="signin-dot" class="progdot"></div>

	75 <div id="photo-dot" class="progdot"></div>

	76 </div>

	77 <div class="button-strip">

	78 <button id="continue-button" i18n-content="continue"></button>

	79 <button id="back-button" i18n-content="back"></button>

	80 <button id="accept-button" i18n-content="acceptAgreement"></button>

	81 </div>

	82 </div> <!-- Footer -->

	83 </div> <!-- Outer Container -->

	84 </div> <!-- OOBE -->

	85 <div id="tpm">

	86 <a id="tpm-link" href="#" i18n-content="tpmSetting"></a>

	87 </div>

8 </body>	88 </body>

9 </html>	89 </html>

OLD	NEW