Skip to content
Browse files

New GUI for B2G viewer.

  • Loading branch information...
1 parent 12ad86e commit fd4e40c82b3372fcfcbcb33877d8388f3b8c37c6 @brendandahl brendandahl committed
View
BIN extensions/b2g/images/div_line_left.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN extensions/b2g/images/div_line_right.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN extensions/b2g/images/document_bg.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN extensions/b2g/images/icon_next_page.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN extensions/b2g/images/icon_previous_page.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN extensions/b2g/images/icon_zoom_in.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN extensions/b2g/images/icon_zoom_out.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN extensions/b2g/images/spinner.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN extensions/b2g/images/toolbar_background.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
282 extensions/b2g/viewer.css
@@ -0,0 +1,282 @@
+/* Copyright 2012 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+* { -moz-box-sizing: border-box; }
+
+* {
+ padding: 0;
+ margin: 0;
+}
+
+html {
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ font-size: 10px;
+}
+
+body {
+ background: url(images/document_bg.png);
+ color: #fff;
+ font-family: "MozTT", sans-serif;
+ font-size: 10px;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ padding-bottom: 50px;
+}
+
+section {
+ overflow: hidden;
+ font-size: 10px;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ font-size: 20px;
+}
+
+footer {
+ background-image: url(images/toolbar_background.png);
+ height: 40px;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1;
+ box-shadow: 0px -2px 5px rgba(50, 50, 50, 0.75);
+}
+
+
+.toolbarButton {
+ display: block;
+ padding: 0;
+ margin: 0;
+ border-width: 0;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-color: transparent;
+}
+
+.toolbarButton.pageUp {
+ position: absolute;
+ width: 18%;
+ height: 100%;
+ left: 0;
+ background-image: url(images/icon_previous_page.png);
+}
+
+.toolbarButton.pageDown {
+ position: absolute;
+ width: 18%;
+ height: 100%;
+ left: 18%;
+ background-image: url(images/icon_next_page.png);
+}
+
+#pageNumber {
+ position: absolute;
+ width: 28%;
+ height: 100%;
+ left: 36%;
+ text-align: center;
+ border: 0;
+ background-color: transparent;
+ font-size: 9pt;
+ color: #FFF;
+ background-image: url(images/div_line_left.png), url(images/div_line_right.png);
+ background-repeat: no-repeat;
+ background-position: left, right;
+}
+
+.toolbarButton.zoomOut {
+ position: absolute;
+ width: 18%;
+ height: 100%;
+ left: 64%;
+ background-image: url(images/icon_zoom_out.png);
+}
+
+.toolbarButton.zoomIn {
+ position: absolute;
+ width: 18%;
+ height: 100%;
+ left: 82%;
+ background-image: url(images/icon_zoom_in.png);
+}
+
+.toolbarButton[disabled] {
+ opacity: .3;
+}
+
+.hidden {
+ display: none;
+}
+[hidden] {
+ display: none !important;
+}
+
+#viewerContainer {
+ position: absolute;
+ overflow: auto;
+ width: 100%;
+ top: 50px;
+ bottom: 40px;
+ left: 0;
+ right: 0;
+}
+
+canvas {
+ margin: auto;
+ display: block;
+}
+
+.page {
+ direction: ltr;
+ width: 816px;
+ height: 1056px;
+ margin: 10px auto;
+ position: relative;
+ overflow: hidden;
+ background-color: white;
+}
+
+.page > a {
+ display: block;
+ position: absolute;
+}
+
+.loadingIcon {
+ width: 2.9rem;
+ height: 2.9rem;
+ background: url("images/spinner.png") no-repeat scroll left top transparent;
+ border: medium none;
+ animation: 1s steps(10, end) 0s normal none infinite moveDefault;
+ display: block;
+ position: absolute;
+ top: calc((100% - 2.9rem) / 2);
+ left: calc((100% - 2.9rem) / 2);
+}
+
+@keyframes moveDefault {
+ from {
+ background-position: 0 top;
+ }
+
+ to {
+ background-position: -390px top;
+ }
+}
+
+#loadingBox {
+ position: absolute;
+ top: 50%;
+ margin-top: -25px;
+ left: 0;
+ right: 0;
+ text-align: center;
+ color: #ddd;
+ font-size: 14px;
+}
+
+#loadingBar {
+ display: inline-block;
+ clear: both;
+ margin: 0px;
+ margin-top: 5px;
+ line-height: 0;
+ border-radius: 2px;
+ width: 200px;
+ height: 25px;
+
+ background-color: hsla(0,0%,0%,.3);
+ background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+ background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+ border: 1px solid #000;
+ box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
+ 0 0 1px hsla(0,0%,0%,.2) inset,
+ 0 0 1px 1px rgba(255, 255, 255, 0.1);
+}
+
+#loadingBar .progress {
+ display: inline-block;
+ float: left;
+
+ background: #666;
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(100%,#898989));
+ background: -webkit-linear-gradient(top, #b2b2b2 0%,#898989 100%);
+ background: -moz-linear-gradient(top, #b2b2b2 0%,#898989 100%);
+ background: -ms-linear-gradient(top, #b2b2b2 0%,#898989 100%);
+ background: -o-linear-gradient(top, #b2b2b2 0%,#898989 100%);
+ background: linear-gradient(top, #b2b2b2 0%,#898989 100%);
+
+ border-top-left-radius: 2px;
+ border-bottom-left-radius: 2px;
+
+ width: 0%;
+ height: 100%;
+}
+
+#loadingBar .progress.full {
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+}
+
+#loadingBar .progress.indeterminate {
+ width: 100%;
+ height: 25px;
+ background-image: -moz-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
+ background-image: -webkit-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
+ background-image: -ms-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
+ background-image: -o-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
+ background-size: 75px 25px;
+ -moz-animation: progressIndeterminate 1s linear infinite;
+ -webkit-animation: progressIndeterminate 1s linear infinite;
+}
+
+@-moz-keyframes progressIndeterminate {
+ from { background-position: 0px 0px; }
+ to { background-position: 75px 0px; }
+}
+
+#errorWrapper {
+ background: none repeat scroll 0 0 #FF5555;
+ color: white;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 32px;
+ z-index: 1000;
+ padding: 3px;
+ font-size: 0.8em;
+}
+
+#errorMessageLeft {
+ float: left;
+}
+
+#errorMessageRight {
+ float: right;
+}
+
+#errorMoreInfo {
+ background-color: #FFFFFF;
+ color: black;
+ padding: 3px;
+ margin: 3px;
+ width: 98%;
+}
View
162 extensions/b2g/viewer.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<!--
+Copyright 2012 Mozilla Foundation
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<html dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <title>PDF.js viewer</title>
+
+
+ <link rel="stylesheet" href="viewer.css"/>
+ <link rel="resource" type="application/l10n" href="locale.properties"/>
+ <link rel="stylesheet" href="/shared/style/headers.css" type="text/css" />
+ <link rel="stylesheet" href="viewer-b2g.css" type="text/css" />
+ <script type="text/javascript" src="l10n.js"></script>
+ <script type="text/javascript" src="../build/pdf.js"></script>
+ <script type="text/javascript" src="/shared/js/async_storage.js"></script>
+ <script type="text/javascript">
+ // This specifies the location of the pdf.js file.
+ PDFJS.workerSrc = "../build/pdf.js";
+ PDFJS.disableTextLayer = true;
+ </script>
+
+ <script type="text/javascript" src="viewer.js"></script>
+ </head>
+
+
+ <body>
+ <section role="region" id="activityHeader" class="skin-organic">
+ <header>
+ <button id="activityClose"><span class="icon icon-close"></span></button>
+ <h1 id="activityTitle"></h1>
+ </header>
+
+ <footer id="open-toolbar">
+ <button class="toolbarButton pageUp" title="Previous Page" id="previous" data-l10n-id="previous"></button>
+ <button class="toolbarButton pageDown" title="Next Page" id="next" data-l10n-id="next"></button>
+
+ <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1">
+
+ <button class="toolbarButton zoomOut" title="Zoom Out" data-l10n-id="zoom_out"></button>
+ <button class="toolbarButton zoomIn" title="Zoom In" data-l10n-id="zoom_in"></button>
+ </footer>
+ </section>
+
+ <div id="viewerContainer">
+ <div id="viewer"></div>
+ </div>
+
+ <div id="loadingBox">
+ <div id="loading"></div>
+ <div id="loadingBar"><div class="progress"></div></div>
+ </div>
+
+ <div id="errorWrapper" hidden='true'>
+ <div id="errorMessageLeft">
+ <span id="errorMessage"></span>
+ <button id="errorShowMore" onclick="" oncontextmenu="return false;" data-l10n-id="error_more_info">
+ More Information
+ </button>
+ <button id="errorShowLess" onclick="" oncontextmenu="return false;" data-l10n-id="error_less_info" hidden='true'>
+ Less Information
+ </button>
+ </div>
+ <div id="errorMessageRight">
+ <button id="errorClose" oncontextmenu="return false;" data-l10n-id="error_close">
+ Close
+ </button>
+ </div>
+ <div class="clearBoth"></div>
+ <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
+ </div>
+
+ <!-- BEGIN STUBS -->
+ <!--
+ Nothing below here is visible, the elements are just here
+ to prevent the viewer from breaking until we refactor it.
+ -->
+ <div id="stubs" style="display: none;">
+ <div id="outerContainer"></div>
+ <div id="sidebarContainer">
+ <div id="toolbarSidebar">
+ <button id="viewThumbnail"></button>
+ <button id="viewOutline"></button>
+ </div>
+ <div id="sidebarContent">
+ <div id="thumbnailView"></div>
+ <div id="outlineView"></div>
+ </div>
+ </div> <!-- sidebarContainer -->
+
+ <div id="mainContainer">
+ <div id="findbar">
+ <input id="findInput">
+ <button id="findPrevious"></button>
+ <button id="findNext"></button>
+ <input type="checkbox" id="findHighlightAll">
+ <input type="checkbox" id="findMatchCase">
+ <span id="findMsg"></span>
+ </div>
+ <div id="toolbarContainer">
+ <div id="toolbarViewer">
+ <div id="toolbarViewerLeft">
+ <button id="sidebarToggle"></button>
+ <button id="viewFind"></button>
+ <span id="numPages"></span>
+ </div>
+ <div id="toolbarViewerRight">
+ <input id="fileInput" type="file" />
+ <button id="fullscreen"></button>
+ <button id="openFile"></button>
+ <button id="print"></button>
+ <button id="download"></button>
+ <!-- <div class="toolbarButtonSpacer"></div> -->
+ <a href="#" id="viewBookmark"></a>
+ </div>
+ <div id="toolbarViewerMiddle">
+ <span id="scaleSelectContainer">
+ <select id="scaleSelect">
+ <option id="pageAutoOption" value="auto" selected="selected">Automatic Zoom</option>
+ <option id="pageActualOption" value="page-actual">Actual Size</option>
+ <option id="pageFitOption" value="page-fit">Fit Page</option>
+ <option id="pageWidthOption" value="page-width">Full Width</option>
+ <option id="customScaleOption" value="custom"></option>
+ <option value="0.5">50%</option>
+ <option value="0.75">75%</option>
+ <option value="1">100%</option>
+ <option value="1.25">125%</option>
+ <option value="1.5">150%</option>
+ <option value="2">200%</option>
+ </select>
+ </span>
+ </div>
+ </div>
+ </div>
+ <menu type="context" id="viewerContextMenu">
+ <menuitem id="first_page"></menuitem>
+ <menuitem id="last_page"></menuitem>
+ <menuitem id="page_rotate_ccw"></menuitem>
+ <menuitem id="page_rotate_cw"></menuitem>
+ </menu>
+
+ </div> <!-- mainContainer -->
+ <div id="printContainer"></div>
+ </div>
+ <!-- END STUBS -->
+ </body>
+</html>
+
View
9 make.js
@@ -508,6 +508,8 @@ target.mozcentral = function() {
};
target.b2g = function() {
+ target.locale();
+ target.bundle();
echo();
echo('### Building B2G (Firefox OS App)');
var B2G_BUILD_DIR = BUILD_DIR + '/b2g/',
@@ -525,13 +527,14 @@ target.b2g = function() {
var setup = {
defines: defines,
copy: [
- [COMMON_WEB_FILES, B2G_BUILD_CONTENT_DIR + '/web'],
- ['web/viewer-b2g.css', B2G_BUILD_CONTENT_DIR + '/web'],
+ ['extensions/b2g/images', B2G_BUILD_CONTENT_DIR + '/web'],
+ ['extensions/b2g/viewer.html', B2G_BUILD_CONTENT_DIR + '/web'],
+ ['extensions/b2g/viewer.css', B2G_BUILD_CONTENT_DIR + '/web'],
['web/locale', B2G_BUILD_CONTENT_DIR + '/web'],
['external/webL10n/l10n.js', B2G_BUILD_CONTENT_DIR + '/web']
],
preprocess: [
- [COMMON_WEB_FILES_PREPROCESS, B2G_BUILD_CONTENT_DIR + '/web'],
+ ['web/viewer.js', B2G_BUILD_CONTENT_DIR + '/web'],
[BUILD_TARGET, B2G_BUILD_CONTENT_DIR + BUILD_TARGET]
]
};
View
8 web/viewer-b2g.css
@@ -1,8 +0,0 @@
-html {
- /* Font size is needed to make the activity bar the corect size. */
- font-size: 10px;
-}
-
-#outerContainer {
- position: relative;
-}
View
12 web/viewer-snippet-b2g.html
@@ -1,12 +0,0 @@
-<!-- This snippet is used in b2g, see Makefile -->
-<link rel="resource" type="application/l10n" href="locale.properties"/>
-<link rel="stylesheet" href="/shared/style/headers.css" type="text/css" />
-<link rel="stylesheet" href="viewer-b2g.css" type="text/css" />
-<script type="text/javascript" src="l10n.js"></script>
-<script type="text/javascript" src="../build/pdf.js"></script>
-<script type="text/javascript" src="/shared/js/async_storage.js"></script>
-<script type="text/javascript">
- // This specifies the location of the pdf.js file.
- PDFJS.workerSrc = "../build/pdf.js";
- PDFJS.disableTextLayer = true;
-</script>
View
7 web/viewer.html
@@ -69,18 +69,11 @@
<!--#include viewer-snippet.html-->
<!--#endif-->
-<!--#if B2G-->
-<!--#include viewer-snippet-b2g.html-->
-<!--#endif-->
-
<script type="text/javascript" src="debugger.js"></script>
<script type="text/javascript" src="viewer.js"></script>
</head>
<body>
-<!--#if B2G-->
-<!--#include viewer-snippet-b2g-activity-header.html-->
-<!--#endif-->
<div id="outerContainer">
<div id="sidebarContainer">

0 comments on commit fd4e40c

Please sign in to comment.
Something went wrong with that request. Please try again.