chrome/renderer/resources/neterror.html - Issue 545973003: Update network error template to new design

Side by Side Diff: chrome/renderer/resources/neterror.html

Issue 545973003: Update network error template to new design (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Remove debug code from JS file. Created 6 years, 3 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

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <html i18n-values="dir:textdirection">	2 <html i18n-values="dir:textdirection;.style.fontSize:fontsize">

3 <head>	3 <head>

4 <meta charset="utf-8">	4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width, initial-scale=1.0,	5 <meta name="viewport" content="width=device-width, initial-scale=1.0,

6 maximum-scale=1.0, user-scalable=no">	6 maximum-scale=1.0, user-scalable=no">

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

	8 <link rel="stylesheet" href="../../browser/resources/security_warnings/interst itial_v2.css">

8 <link rel="stylesheet" href="neterror.css">	9 <link rel="stylesheet" href="neterror.css">

9 <script src="neterror.js"></script>	10 <script src="neterror.js"></script>

	11 <script src="offline.js"></script>

10 </head>	12 </head>

11 <body id="t">	13 <body id="t" i18n-values=".style.fontFamily:fontfamily">

12 <div id="main-frame-error">	14 <div id="main-frame-error" class="interstitial-wrapper">

13 <div id="box">	15 <img class="icon"

14 <div id="content-top">	16 jseval="updateIconClass(this.classList, iconClass)">

15 <h1>	17 <div id="main-message">

16 <div>	18 <h1>

17 <img class="icon"	19 <span i18n-content="heading"></span>
	arv (Not doing code reviews) 2014/09/15 17:35:43 Skip this span and move the i18n-content to the h1 Skip this span and move the i18n-content to the h1. edwardjung 2014/09/16 13:14:30 Done. Show quoted text On 2014/09/15 17:35:43, arv wrote: > Skip this span and move the i18n-content to the h1. Done.
18 jseval="updateIconClass(this.classList, iconClass)">	20 </h1>

	21 <p i18n-values=".innerHTML:primaryParagraph"></p>

	22 <div id="buttons" class="nav-wrapper">

	23 <div id="control-buttons">

	24 <button id="reload-button"

	25 class="blue-button text-button"

	26 onclick="trackClick(this.trackingId);

	27 reloadButtonClick(this.url);"

	28 jsselect="reloadButton"

	29 jsvalues=".url:reloadUrl; .trackingId:reloadTrackingId"

	30 jscontent="msg"></button>

	31 <button id="stale-load-button"

	32 class="blue-button text-button"

	33 onclick="loadStaleButtonClick()"

	34 jsselect="staleLoadButton"

	35 jscontent="msg" jsvalues="title:title"></button>

	36 </div>

	37 <a href="#" id="details-button" class="text-button"

	38 onclick="detailsButtonClick(); toggleHelpBox()"

	39 jsdisplay="details" jscontent="details"

	40 jsvalues=".detailsText:details; .hideDetailsText:hideDetails;">

	41 </a>

	42 </div>

	43 </div>

	44 <!-- Outer and inner divs are needed both for margins and sizing. -->

	45 <div id="help-box-outer" class="hidden">

	46 <div id="details">

	47 <div jsselect="summary">

	48 <span jsvalues=".innerHTML:msg"></span>

	49 </div>

	50 <div class="suggestions" jsselect="suggestions">

	51 <div class="suggestion-header" jsvalues=".innerHTML:header"></div>

	52 <div class="suggestion-body" jsvalues=".innerHTML:body"></div>

	53 </div>

	54 <button class="text-button" id="diagnose-button"

	55 onclick="diagnoseErrors()" jscontent="diagnose"

	56 jsdisplay="diagnose"></button>

	57 <div id="diagnose-frame" class="hidden"></div>

	58 <form class="suggestions" jsdisplay="searchUrl"

	59 jsvalues=".url:searchUrl; .trackingId:searchTrackingId"

	60 onsubmit="trackClick(this.trackingId); return search(this.url);">

	61 <div class="suggestion-header" jscontent="searchHeader"></div>

	62 <div id="search-container">

	63 <input type="text" name="q" id="search-box"

	64 jsvalues=".value:searchTerms" />

	65 <button type="submit" id="search-button" class="blue-button"

	66 jsvalues="aria-label:searchHeader">

	67 <img id="search-image">

	68 </button>

19 </div>	69 </div>

20 <span i18n-content="heading"></span>	70 </form>

21 </h1>	71 <div class="error-code" jscontent="errorCode"></div>

22 <div id="buttons">

23 <div id="control-buttons">

24 <button id="reload-button"

25 class="blue-button text-button"

26 onclick="trackClick(this.trackingId);

27 reloadButtonClick(this.url);"

28 jsselect="reloadButton"

29 jsvalues=".url:reloadUrl; .trackingId:reloadTrackingId"

30 jscontent="msg"></button>

31 <button id="stale-load-button"

32 class="blue-button text-button"

33 onclick="loadStaleButtonClick()"

34 jsselect="staleLoadButton"

35 jscontent="msg" jsvalues="title:title"></button>

36 </div>

37 <button id="details-button" class="text-button"

38 onclick="detailsButtonClick(); toggleHelpBox()"

39 jsdisplay="details" jscontent="details"

40 jsvalues=".detailsText:details; .hideDetailsText:hideDetails;">

41 </a>

42 </div>

43 </div>

44 <!-- Outer and inner divs are needed both for margins and sizing. -->

45 <div id="help-box-outer" class="hidden">

46 <div id="help-box-inner">

47 <div jsselect="summary">

48 <span jsvalues=".innerHTML:msg"></span>

49 </div>

50 <div class="suggestions" jsselect="suggestions">

51 <div class="suggestion-header" jsvalues=".innerHTML:header"></div>

52 <div class="suggestion-body" jsvalues=".innerHTML:body"></div>

53 </div>

54 <button class="text-button" id="diagnose-button"

55 onclick="diagnoseErrors()" jscontent="diagnose"

56 jsdisplay="diagnose"></button>

57 <div id="diagnose-frame" class="hidden"></div>

58 <form class="suggestions" jsdisplay="searchUrl"

59 jsvalues=".url:searchUrl; .trackingId:searchTrackingId"

60 onsubmit="trackClick(this.trackingId); return search(this.url);">

61 <div class="suggestion-header" jscontent="searchHeader"></div>

62 <div id="search-container">

63 <input type="text" name="q" id="search-box"

64 jsvalues=".value:searchTerms" />

65 <button type="submit" id="search-button" class="blue-button"

66 jsvalues="aria-label:searchHeader">

67 <img id="search-image">

68 </button>

69 </div>

70 </form>

71 <div class="error-code" jscontent="errorCode"></div>

72 </div>

73 </div>	72 </div>

74 </div>	73 </div>

75 </div>	74 </div>

76 <div id="sub-frame-error">	75 <div id="sub-frame-error">

77 <!-- Show details when hovering over the icon, in case the details are	76 <!-- Show details when hovering over the icon, in case the details are

78 hidden because they're too large. -->	77 hidden because they're too large. -->

79 <img class="icon" jseval="updateIconClass(this.classList, iconClass)"	78 <img class="icon" jseval="updateIconClass(this.classList, iconClass)"

80 jsvalues=".title:errorDetails">	79 jsvalues=".title:errorDetails">

81 <div id="sub-frame-error-details" jsvalues=".innerHTML:errorDetails"></div>	80 <div id="sub-frame-error-details" jsvalues=".innerHTML:errorDetails"></div>

82 </div>	81 </div>

	82

	83 <div id="offline-resources">
	arv (Not doing code reviews) 2014/09/15 17:35:43 Can these be moved to js so you don't have to map Can these be moved to js so you don't have to map them or duplicate the name/lookup? edwardjung 2014/09/16 13:14:30 As the page will be offline I can't access the res Show quoted text On 2014/09/15 17:35:43, arv wrote: > Can these be moved to js so you don't have to map them or duplicate the > name/lookup? As the page will be offline I can't access the resources via XHR or chrome:// so they have to be base 64 encoded. I wanted to manually base 64 encode all these assets and have them in the JS as you suggest but it causes a failure in the presubmit checks, 80 char width. I was also wondering in terms of maintenance whether this was a better solution since you just leave all the encoding to grit. Ideally the I would just have grit be able to parse the JS and base 64 encode urls but I couldn't get it working. Do you have any other suggestions on this front? arv (Not doing code reviews) 2014/09/16 14:20:20 I was thinking doing new Audio(src) and new Image( Show quoted text On 2014/09/16 13:14:30, edwardjung wrote: > On 2014/09/15 17:35:43, arv wrote: > > Can these be moved to js so you don't have to map them or duplicate the > > name/lookup? > > As the page will be offline I can't access the resources via XHR or chrome:// so > they have to be base 64 encoded. I wanted to manually base 64 encode all these > assets and have them in the JS as you suggest but it causes a failure in the > presubmit checks, 80 char width. > > I was also wondering in terms of maintenance whether this was a better solution > since you just leave all the encoding to grit. Ideally the I would just have > grit be able to parse the JS and base 64 encode urls but I couldn't get it > working. > > Do you have any other suggestions on this front? I was thinking doing new Audio(src) and new Image(src) But now that I understand that you are relying on grit to inline the resources I can't think of any better solution that what you are already doing. We could extend grit to do this kind of inlining in js files but I'm not sure it is worth it.
	84 <div id="offline-resources-1x">

	85 <img id="1x-obstacle-large" src="default_100_percent/offline/100-obstacle- large-sprite.png">

	86 <img id="1x-obstacle-small" src="default_100_percent/offline/100-obstacle- small-sprite.png">

	87 <img id="1x-cloud" src="default_100_percent/offline/100-cloud.png">

	88 <img id="1x-text" src="default_100_percent/offline/100-text-sprite.png">

	89 <img id="1x-horizon" src="default_100_percent/offline/100-horizon.png">

	90 <img id="1x-trex" src="default_100_percent/offline/100-offline-trex.png">

	91 <img id="1x-restart" src="default_100_percent/offline/100-restart.png">

	92 </div>

	93 <div id="offline-resources-2x">

	94 <img id="2x-obstacle-large" src="default_200_percent/offline/200-obstacle- large-sprite.png">

	95 <img id="2x-obstacle-small" src="default_200_percent/offline/200-obstacle- small-sprite.png">

	96 <img id="2x-cloud" src="default_200_percent/offline/200-cloud.png">

	97 <img id="2x-text" src="default_200_percent/offline/200-text-sprite.png">

	98 <img id="2x-horizon" src="default_200_percent/offline/200-horizon.png">

	99 <img id="2x-trex" src="default_200_percent/offline/200-offline-trex.png">

	100 <img id="2x-restart" src="default_200_percent/offline/200-restart.png">

	101 </div>

	102

	103 <audio id="offline-sound-press" src="sounds/button-press.mp3"></audio>

	104 <audio id="offline-sound-hit" src="sounds/hit.mp3"></audio>

	105 <audio id="offline-sound-reached" src="sounds/score-reached.mp3"></audio>

	106 </div>

83 </body>	107 </body>

84 </html>	108 </html>

OLD	NEW

« chrome/renderer/resources/neterror.css ('K') | « chrome/renderer/resources/neterror.css ('k') | chrome/renderer/resources/neterror.js » ('j') | chrome/renderer/resources/neterror.js » ('J')